@fluentui/react-tags 9.8.0 → 9.8.1

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # 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 Thu, 23 Apr 2026 11:59:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.8.1)
+
+Thu, 23 Apr 2026 11:59:34 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 #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-avatar to v9.11.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) 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,14 +1,14 @@
-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';
 
 /**

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/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.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  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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"}

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/Tag/Tag.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tag/Tag.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport { TagAppearance, TagShape, TagSize } from '../../utils/types';\nimport { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';\n\nexport type TagContextValues = TagAvatarContextValues;\n\nexport type TagSlots = {\n  root: NonNullable<Slot<'button', 'span'>>;\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 Tag. 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   * Slot for the dismiss icon\n   */\n  dismissIcon?: Slot<'span'>;\n};\n\n/**\n * Tag Props\n */\nexport type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {\n  /**\n   * A Tag can have filled, outlined or brand experience.\n   *\n   * @default 'filled'\n   */\n  appearance?: TagAppearance;\n\n  /**\n   * A Tag can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A Tag can be dismissible\n   *\n   * @default false\n   */\n  dismissible?: 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   * A Tag can have rounded or circular shape.\n   *\n   * @default 'round'\n   */\n  shape?: TagShape;\n\n  /**\n   * A Tag 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 Tag\n */\nexport type TagState = ComponentState<TagSlots> &\n  Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'selected' | 'shape' | 'size'>> &\n  UseTagAvatarContextValuesOptions;\n\n/**\n * Tag Base Props - omits design-only props\n */\nexport type TagBaseProps = DistributiveOmit<TagProps, 'appearance' | 'size' | 'shape'>;\n\n/**\n * Tag Base State - omits design-only state\n */\nexport type TagBaseState = DistributiveOmit<TagState, 'appearance' | 'size' | 'shape' | 'avatarShape' | 'avatarSize'>;\n"],"names":[],"mappings":"AAoGA;;CAEC,GACD,WAAsH"}
+{"version":3,"sources":["../src/components/Tag/Tag.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { TagAppearance, TagShape, TagSize } from '../../utils/types';\nimport type { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';\n\nexport type TagContextValues = TagAvatarContextValues;\n\nexport type TagSlots = {\n  root: NonNullable<Slot<'button', 'span'>>;\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 Tag. 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   * Slot for the dismiss icon\n   */\n  dismissIcon?: Slot<'span'>;\n};\n\n/**\n * Tag Props\n */\nexport type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {\n  /**\n   * A Tag can have filled, outlined or brand experience.\n   *\n   * @default 'filled'\n   */\n  appearance?: TagAppearance;\n\n  /**\n   * A Tag can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A Tag can be dismissible\n   *\n   * @default false\n   */\n  dismissible?: 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   * A Tag can have rounded or circular shape.\n   *\n   * @default 'round'\n   */\n  shape?: TagShape;\n\n  /**\n   * A Tag 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 Tag\n */\nexport type TagState = ComponentState<TagSlots> &\n  Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'selected' | 'shape' | 'size'>> &\n  UseTagAvatarContextValuesOptions;\n\n/**\n * Tag Base Props - omits design-only props\n */\nexport type TagBaseProps = DistributiveOmit<TagProps, 'appearance' | 'size' | 'shape'>;\n\n/**\n * Tag Base State - omits design-only state\n */\nexport type TagBaseState = DistributiveOmit<TagState, 'appearance' | 'size' | 'shape' | 'avatarShape' | 'avatarSize'>;\n"],"names":[],"mappings":"AAoGA;;CAEC,GACD,WAAsH"}

package/lib/components/Tag/useTagStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tag/useTagStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelResetStyle, makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TagSlots, TagState } from './Tag.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tagClassNames: SlotClassNames<TagSlots> = {\n  root: 'fui-Tag',\n  media: 'fui-Tag__media',\n  icon: 'fui-Tag__icon',\n  primaryText: 'fui-Tag__primaryText',\n  secondaryText: 'fui-Tag__secondaryText',\n  dismissIcon: 'fui-Tag__dismissIcon',\n};\n\n/**\n * Inner horizontal space left and right of Tag\n */\nconst tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\n\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\n\nconst baseStyles: GriffelResetStyle = {\n  // reset default button style:\n  fontFamily: 'inherit',\n  padding: '0px',\n  appearance: 'button',\n  textAlign: 'unset',\n\n  display: 'inline-grid',\n  alignItems: 'center',\n  gridTemplateAreas: `\n  \"media primary   dismissIcon\"\n  \"media secondary dismissIcon\"\n  `,\n  boxSizing: 'border-box',\n  width: 'fit-content',\n\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n};\n\nconst useRootRoundedBaseClassName = makeResetStyles({\n  ...baseStyles,\n\n  borderRadius: tokens.borderRadiusMedium,\n  ...createCustomFocusIndicatorStyle({\n    borderRadius: tokens.borderRadiusMedium,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n  }),\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\n  borderRadius: tokens.borderRadiusCircular,\n  ...createCustomFocusIndicatorStyle({\n    borderRadius: tokens.borderRadiusCircular,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n  }),\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      borderRight: `${tokens.strokeWidthThin} solid`,\n      position: 'absolute',\n      inset: '-1px',\n      borderRadius: tokens.borderRadiusCircular,\n    },\n  },\n});\n\nconst useRootStyles = makeStyles({\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground2,\n  },\n  outline: {\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n  },\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n  },\n  selected: {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorBrandStroke1),\n\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'none',\n      backgroundColor: 'Highlight',\n      color: 'HighlightText',\n    },\n  },\n  medium: {\n    height: '32px',\n  },\n  small: {\n    height: '24px',\n  },\n  'extra-small': {\n    position: 'relative',\n    height: '20px',\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});\n\nconst useRootDisabledStyles = 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 root slot when Tag is without leading media/icon\n */\nconst useRootWithoutMediaStyles = makeStyles({\n  medium: {\n    paddingLeft: tagSpacingMedium,\n  },\n  small: {\n    paddingLeft: tagSpacingSmall,\n  },\n  'extra-small': {\n    paddingLeft: tagSpacingExtraSmall,\n  },\n});\n/**\n * Styles for root slot when Tag is without dismiss icon\n */\nconst useRootWithoutDismissStyles = makeStyles({\n  medium: {\n    paddingRight: tagSpacingMedium,\n  },\n  small: {\n    paddingRight: tagSpacingSmall,\n  },\n  'extra-small': {\n    paddingRight: tagSpacingExtraSmall,\n  },\n});\n\nexport const useIconStyles = makeStyles({\n  base: {\n    gridArea: 'media',\n    display: 'flex',\n    boxSizing: 'content-box',\n  },\n  medium: {\n    paddingLeft: tagSpacingMedium,\n    paddingRight: tokens.spacingHorizontalXS,\n    width: mediumIconSize,\n    fontSize: mediumIconSize,\n  },\n  small: {\n    paddingLeft: tagSpacingSmall,\n    paddingRight: tokens.spacingHorizontalXXS,\n    width: smallIconSize,\n    fontSize: smallIconSize,\n  },\n  'extra-small': {\n    paddingLeft: tagSpacingExtraSmall,\n    paddingRight: tokens.spacingHorizontalXXS,\n    width: extraSmallIconSize,\n    fontSize: extraSmallIconSize,\n  },\n});\n\nexport const useMediaStyles = makeStyles({\n  base: {\n    gridArea: 'media',\n\n    display: 'flex',\n    paddingLeft: '1px',\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\nconst useDismissIconStyles = makeStyles({\n  base: {\n    gridArea: 'dismissIcon',\n\n    display: 'flex',\n\n    // windows high contrast:\n    '@media (forced-colors: active)': {\n      ':hover': {\n        color: 'Highlight',\n      },\n      ':active': {\n        color: 'Highlight',\n      },\n    },\n  },\n  medium: {\n    paddingLeft: tokens.spacingHorizontalXS,\n    paddingRight: tagSpacingMedium,\n    fontSize: mediumIconSize,\n  },\n  small: {\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tagSpacingSmall,\n    fontSize: smallIconSize,\n  },\n  'extra-small': {\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tagSpacingExtraSmall,\n    fontSize: extraSmallIconSize,\n  },\n\n  filled: {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n  outline: {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n  brand: {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n  selected: {\n    ':hover': {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n    ':active': {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n});\n\nexport const usePrimaryTextStyles = makeStyles({\n  base: {\n    whiteSpace: 'nowrap',\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tokens.spacingHorizontalXXS,\n  },\n\n  medium: {\n    ...typographyStyles.body1,\n  },\n  small: {\n    ...typographyStyles.caption1,\n  },\n  'extra-small': {\n    ...typographyStyles.caption1,\n  },\n\n  withoutSecondaryText: {\n    gridColumnStart: 'primary',\n    gridRowStart: 'primary',\n    gridRowEnd: 'secondary',\n    paddingBottom: tokens.spacingHorizontalXXS,\n  },\n  withSecondaryText: {\n    gridArea: 'primary',\n\n    ...typographyStyles.caption1,\n    marginTop: '-2px',\n  },\n});\n\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n  gridArea: 'secondary',\n  paddingLeft: tokens.spacingHorizontalXXS,\n  paddingRight: tokens.spacingHorizontalXXS,\n  ...typographyStyles.caption2,\n  whiteSpace: 'nowrap',\n});\n\n/**\n * Apply styling to the Tag slots based on the state\n */\nexport const useTagStyles_unstable = (state: TagState): TagState => {\n  'use no memo';\n\n  const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n  const rootCircularBaseClassName = useRootCircularBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n  const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n\n  const iconStyles = useIconStyles();\n  const mediaStyles = useMediaStyles();\n  const dismissIconStyles = useDismissIconStyles();\n  const primaryTextStyles = usePrimaryTextStyles();\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n\n  const { disabled, shape, size, appearance, selected } = state;\n\n  state.root.className = mergeClasses(\n    tagClassNames.root,\n\n    shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName,\n\n    disabled ? rootDisabledStyles[appearance] : rootStyles[appearance],\n    selected && !disabled && rootStyles.selected,\n    rootStyles[size],\n\n    !state.media && !state.icon && rootWithoutMediaStyles[size],\n    !state.dismissIcon && rootWithoutDismissStyles[size],\n\n    state.root.className,\n  );\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      tagClassNames.media,\n      mediaStyles.base,\n      mediaStyles[size],\n      state.media.className,\n    );\n  }\n  if (state.icon) {\n    state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n  }\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      tagClassNames.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      tagClassNames.secondaryText,\n      secondaryTextBaseClassName,\n      state.secondaryText.className,\n    );\n  }\n  if (state.dismissIcon) {\n    state.dismissIcon.className = mergeClasses(\n      tagClassNames.dismissIcon,\n      dismissIconStyles.base,\n      dismissIconStyles[size],\n      !disabled && dismissIconStyles[appearance],\n      selected && !disabled && dismissIconStyles.selected,\n      state.dismissIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","createCustomFocusIndicatorStyle","tagClassNames","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","borderRadius","borderRadiusMedium","outline","strokeWidthThick","colorStrokeFocus2","position","content","borderTop","inset","borderTopLeftRadius","borderTopRightRadius","useRootCircularBaseClassName","borderRadiusCircular","borderLeft","borderRight","useRootStyles","filled","backgroundColor","colorNeutralBackground3","color","colorNeutralForeground2","colorSubtleBackground","borderColor","colorNeutralStroke1","brand","colorBrandBackground2","colorBrandForeground2","selected","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandStroke1","forcedColorAdjust","medium","height","small","left","bottom","top","useRootDisabledStyles","cursor","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useRootWithoutMediaStyles","paddingLeft","useRootWithoutDismissStyles","paddingRight","useIconStyles","base","gridArea","spacingHorizontalXS","fontSize","spacingHorizontalXXS","useMediaStyles","spacingHorizontalS","spacingHorizontalSNudge","useDismissIconStyles","colorCompoundBrandForeground1Hover","colorCompoundBrandForeground1Pressed","usePrimaryTextStyles","whiteSpace","body1","caption1","withoutSecondaryText","gridColumnStart","gridRowStart","gridRowEnd","paddingBottom","withSecondaryText","marginTop","useSecondaryTextBaseClassName","caption2","useTagStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","disabled","shape","size","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Tag/useTagStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { GriffelResetStyle } from '@griffel/react';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TagSlots, TagState } from './Tag.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tagClassNames: SlotClassNames<TagSlots> = {\n  root: 'fui-Tag',\n  media: 'fui-Tag__media',\n  icon: 'fui-Tag__icon',\n  primaryText: 'fui-Tag__primaryText',\n  secondaryText: 'fui-Tag__secondaryText',\n  dismissIcon: 'fui-Tag__dismissIcon',\n};\n\n/**\n * Inner horizontal space left and right of Tag\n */\nconst tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\n\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\n\nconst baseStyles: GriffelResetStyle = {\n  // reset default button style:\n  fontFamily: 'inherit',\n  padding: '0px',\n  appearance: 'button',\n  textAlign: 'unset',\n\n  display: 'inline-grid',\n  alignItems: 'center',\n  gridTemplateAreas: `\n  \"media primary   dismissIcon\"\n  \"media secondary dismissIcon\"\n  `,\n  boxSizing: 'border-box',\n  width: 'fit-content',\n\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n};\n\nconst useRootRoundedBaseClassName = makeResetStyles({\n  ...baseStyles,\n\n  borderRadius: tokens.borderRadiusMedium,\n  ...createCustomFocusIndicatorStyle({\n    borderRadius: tokens.borderRadiusMedium,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n  }),\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\n  borderRadius: tokens.borderRadiusCircular,\n  ...createCustomFocusIndicatorStyle({\n    borderRadius: tokens.borderRadiusCircular,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n  }),\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      borderRight: `${tokens.strokeWidthThin} solid`,\n      position: 'absolute',\n      inset: '-1px',\n      borderRadius: tokens.borderRadiusCircular,\n    },\n  },\n});\n\nconst useRootStyles = makeStyles({\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground2,\n  },\n  outline: {\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n  },\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n  },\n  selected: {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorBrandStroke1),\n\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'none',\n      backgroundColor: 'Highlight',\n      color: 'HighlightText',\n    },\n  },\n  medium: {\n    height: '32px',\n  },\n  small: {\n    height: '24px',\n  },\n  'extra-small': {\n    position: 'relative',\n    height: '20px',\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});\n\nconst useRootDisabledStyles = 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 root slot when Tag is without leading media/icon\n */\nconst useRootWithoutMediaStyles = makeStyles({\n  medium: {\n    paddingLeft: tagSpacingMedium,\n  },\n  small: {\n    paddingLeft: tagSpacingSmall,\n  },\n  'extra-small': {\n    paddingLeft: tagSpacingExtraSmall,\n  },\n});\n/**\n * Styles for root slot when Tag is without dismiss icon\n */\nconst useRootWithoutDismissStyles = makeStyles({\n  medium: {\n    paddingRight: tagSpacingMedium,\n  },\n  small: {\n    paddingRight: tagSpacingSmall,\n  },\n  'extra-small': {\n    paddingRight: tagSpacingExtraSmall,\n  },\n});\n\nexport const useIconStyles = makeStyles({\n  base: {\n    gridArea: 'media',\n    display: 'flex',\n    boxSizing: 'content-box',\n  },\n  medium: {\n    paddingLeft: tagSpacingMedium,\n    paddingRight: tokens.spacingHorizontalXS,\n    width: mediumIconSize,\n    fontSize: mediumIconSize,\n  },\n  small: {\n    paddingLeft: tagSpacingSmall,\n    paddingRight: tokens.spacingHorizontalXXS,\n    width: smallIconSize,\n    fontSize: smallIconSize,\n  },\n  'extra-small': {\n    paddingLeft: tagSpacingExtraSmall,\n    paddingRight: tokens.spacingHorizontalXXS,\n    width: extraSmallIconSize,\n    fontSize: extraSmallIconSize,\n  },\n});\n\nexport const useMediaStyles = makeStyles({\n  base: {\n    gridArea: 'media',\n\n    display: 'flex',\n    paddingLeft: '1px',\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\nconst useDismissIconStyles = makeStyles({\n  base: {\n    gridArea: 'dismissIcon',\n\n    display: 'flex',\n\n    // windows high contrast:\n    '@media (forced-colors: active)': {\n      ':hover': {\n        color: 'Highlight',\n      },\n      ':active': {\n        color: 'Highlight',\n      },\n    },\n  },\n  medium: {\n    paddingLeft: tokens.spacingHorizontalXS,\n    paddingRight: tagSpacingMedium,\n    fontSize: mediumIconSize,\n  },\n  small: {\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tagSpacingSmall,\n    fontSize: smallIconSize,\n  },\n  'extra-small': {\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tagSpacingExtraSmall,\n    fontSize: extraSmallIconSize,\n  },\n\n  filled: {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n  outline: {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n  brand: {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n  selected: {\n    ':hover': {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n    ':active': {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n});\n\nexport const usePrimaryTextStyles = makeStyles({\n  base: {\n    whiteSpace: 'nowrap',\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tokens.spacingHorizontalXXS,\n  },\n\n  medium: {\n    ...typographyStyles.body1,\n  },\n  small: {\n    ...typographyStyles.caption1,\n  },\n  'extra-small': {\n    ...typographyStyles.caption1,\n  },\n\n  withoutSecondaryText: {\n    gridColumnStart: 'primary',\n    gridRowStart: 'primary',\n    gridRowEnd: 'secondary',\n    paddingBottom: tokens.spacingHorizontalXXS,\n  },\n  withSecondaryText: {\n    gridArea: 'primary',\n\n    ...typographyStyles.caption1,\n    marginTop: '-2px',\n  },\n});\n\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n  gridArea: 'secondary',\n  paddingLeft: tokens.spacingHorizontalXXS,\n  paddingRight: tokens.spacingHorizontalXXS,\n  ...typographyStyles.caption2,\n  whiteSpace: 'nowrap',\n});\n\n/**\n * Apply styling to the Tag slots based on the state\n */\nexport const useTagStyles_unstable = (state: TagState): TagState => {\n  'use no memo';\n\n  const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n  const rootCircularBaseClassName = useRootCircularBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n  const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n\n  const iconStyles = useIconStyles();\n  const mediaStyles = useMediaStyles();\n  const dismissIconStyles = useDismissIconStyles();\n  const primaryTextStyles = usePrimaryTextStyles();\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n\n  const { disabled, shape, size, appearance, selected } = state;\n\n  state.root.className = mergeClasses(\n    tagClassNames.root,\n\n    shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName,\n\n    disabled ? rootDisabledStyles[appearance] : rootStyles[appearance],\n    selected && !disabled && rootStyles.selected,\n    rootStyles[size],\n\n    !state.media && !state.icon && rootWithoutMediaStyles[size],\n    !state.dismissIcon && rootWithoutDismissStyles[size],\n\n    state.root.className,\n  );\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      tagClassNames.media,\n      mediaStyles.base,\n      mediaStyles[size],\n      state.media.className,\n    );\n  }\n  if (state.icon) {\n    state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n  }\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      tagClassNames.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      tagClassNames.secondaryText,\n      secondaryTextBaseClassName,\n      state.secondaryText.className,\n    );\n  }\n  if (state.dismissIcon) {\n    state.dismissIcon.className = mergeClasses(\n      tagClassNames.dismissIcon,\n      dismissIconStyles.base,\n      dismissIconStyles[size],\n      !disabled && dismissIconStyles[appearance],\n      selected && !disabled && dismissIconStyles.selected,\n      state.dismissIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","createCustomFocusIndicatorStyle","tagClassNames","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","borderRadius","borderRadiusMedium","outline","strokeWidthThick","colorStrokeFocus2","position","content","borderTop","inset","borderTopLeftRadius","borderTopRightRadius","useRootCircularBaseClassName","borderRadiusCircular","borderLeft","borderRight","useRootStyles","filled","backgroundColor","colorNeutralBackground3","color","colorNeutralForeground2","colorSubtleBackground","borderColor","colorNeutralStroke1","brand","colorBrandBackground2","colorBrandForeground2","selected","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandStroke1","forcedColorAdjust","medium","height","small","left","bottom","top","useRootDisabledStyles","cursor","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useRootWithoutMediaStyles","paddingLeft","useRootWithoutDismissStyles","paddingRight","useIconStyles","base","gridArea","spacingHorizontalXS","fontSize","spacingHorizontalXXS","useMediaStyles","spacingHorizontalS","spacingHorizontalSNudge","useDismissIconStyles","colorCompoundBrandForeground1Hover","colorCompoundBrandForeground1Pressed","usePrimaryTextStyles","whiteSpace","body1","caption1","withoutSecondaryText","gridColumnStart","gridRowStart","gridRowEnd","paddingBottom","withSecondaryText","marginTop","useSecondaryTextBaseClassName","caption2","useTagStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","disabled","shape","size","className"],"mappings":"AAAA;AAGA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGvF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,OAAO,MAAMC,gBAA0C;IACrDC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,aAAa;IACbC,eAAe;IACfC,aAAa;AACf,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmB;AACzB,MAAMC,kBAAkB;AACxB,MAAMC,uBAAuB;AAE7B,MAAMC,iBAAiB;AACvB,MAAMC,gBAAgB;AACtB,MAAMC,qBAAqB;AAE3B,MAAMC,aAAgC;IACpC,8BAA8B;IAC9BC,YAAY;IACZC,SAAS;IACTC,YAAY;IACZC,WAAW;IAEXC,SAAS;IACTC,YAAY;IACZC,mBAAmB,CAAC;;;EAGpB,CAAC;IACDC,WAAW;IACXC,OAAO;IAEPC,QAAQ,GAAG1B,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO4B,sBAAsB,EAAE;AAC5E;AAEA,MAAMC,8BAA8BjC,gBAAgB;IAClD,GAAGoB,UAAU;IAEbc,cAAc9B,OAAO+B,kBAAkB;IACvC,GAAG7B,gCAAgC;QACjC4B,cAAc9B,OAAO+B,kBAAkB;QACvCC,SAAS,GAAGhC,OAAOiC,gBAAgB,CAAC,OAAO,EAAEjC,OAAOkC,iBAAiB,EAAE;IACzE,EAAE;IAEF;;;GAGC,GACD,kCAAkC;QAChCC,UAAU;QACV,YAAY;YACVC,SAAS;YACTC,WAAW,GAAGrC,OAAO2B,eAAe,CAAC,MAAM,CAAC;YAC5CQ,UAAU;YACVG,OAAO;YACPC,qBAAqBvC,OAAO+B,kBAAkB;YAC9CS,sBAAsBxC,OAAO+B,kBAAkB;QACjD;IACF;AACF;AAEA,MAAMU,+BAA+B7C,gBAAgB;IACnD,GAAGoB,UAAU;IAEbc,cAAc9B,OAAO0C,oBAAoB;IACzC,GAAGxC,gCAAgC;QACjC4B,cAAc9B,OAAO0C,oBAAoB;QACzCV,SAAS,GAAGhC,OAAOiC,gBAAgB,CAAC,OAAO,EAAEjC,OAAOkC,iBAAiB,EAAE;IACzE,EAAE;IAEF;;;GAGC,GACD,kCAAkC;QAChCC,UAAU;QACV,YAAY;YACVC,SAAS;YACTC,WAAW,GAAGrC,OAAO2B,eAAe,CAAC,MAAM,CAAC;YAC5CgB,YAAY,GAAG3C,OAAO2B,eAAe,CAAC,MAAM,CAAC;YAC7CiB,aAAa,GAAG5C,OAAO2B,eAAe,CAAC,MAAM,CAAC;YAC9CQ,UAAU;YACVG,OAAO;YACPR,cAAc9B,OAAO0C,oBAAoB;QAC3C;IACF;AACF;AAEA,MAAMG,gBAAgBhD,WAAW;IAC/BiD,QAAQ;QACNC,iBAAiB/C,OAAOgD,uBAAuB;QAC/CC,OAAOjD,OAAOkD,uBAAuB;IACvC;IACAlB,SAAS;QACPe,iBAAiB/C,OAAOmD,qBAAqB;QAC7CF,OAAOjD,OAAOkD,uBAAuB;QACrC,GAAGnD,WAAWqD,WAAW,CAACpD,OAAOqD,mBAAmB,CAAC;IACvD;IACAC,OAAO;QACLP,iBAAiB/C,OAAOuD,qBAAqB;QAC7CN,OAAOjD,OAAOwD,qBAAqB;IACrC;IACAC,UAAU;QACRV,iBAAiB/C,OAAO0D,oBAAoB;QAC5CT,OAAOjD,OAAO2D,6BAA6B;QAC3C,GAAG5D,WAAWqD,WAAW,CAACpD,OAAO4D,iBAAiB,CAAC;QAEnD,kCAAkC;YAChCC,mBAAmB;YACnBd,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAa,QAAQ;QACNC,QAAQ;IACV;IACAC,OAAO;QACLD,QAAQ;IACV;IACA,eAAe;QACb5B,UAAU;QACV4B,QAAQ;QAER,8CAA8C;QAC9C,uEAAuE;QACvE,gCAAgC;YAC9B,qBAAqB;gBACnB3B,SAAS;gBACTD,UAAU;gBACV4B,QAAQ;gBACRE,MAAM;gBACNxC,OAAO;YACT;YACA,YAAY;gBACVyC,QAAQ;YACV;YACA,WAAW;gBACTC,KAAK;YACP;QACF;IACF;AACF;AAEA,MAAMC,wBAAwBvE,WAAW;IACvCiD,QAAQ;QACNuB,QAAQ;QACRtB,iBAAiB/C,OAAOsE,8BAA8B;QACtDrB,OAAOjD,OAAOuE,8BAA8B;QAC5C,GAAGxE,WAAWqD,WAAW,CAACpD,OAAOwE,8BAA8B,CAAC;IAClE;IACAxC,SAAS;QACPqC,QAAQ;QACRtB,iBAAiB/C,OAAOmD,qBAAqB;QAC7CF,OAAOjD,OAAOuE,8BAA8B;QAC5C,GAAGxE,WAAWqD,WAAW,CAACpD,OAAOyE,0BAA0B,CAAC;IAC9D;IACAnB,OAAO;QACLe,QAAQ;QACRtB,iBAAiB/C,OAAOsE,8BAA8B;QACtDrB,OAAOjD,OAAOuE,8BAA8B;QAC5C,GAAGxE,WAAWqD,WAAW,CAACpD,OAAOwE,8BAA8B,CAAC;IAClE;AACF;AAEA;;CAEC,GACD,MAAME,4BAA4B7E,WAAW;IAC3CiE,QAAQ;QACNa,aAAajE;IACf;IACAsD,OAAO;QACLW,aAAahE;IACf;IACA,eAAe;QACbgE,aAAa/D;IACf;AACF;AACA;;CAEC,GACD,MAAMgE,8BAA8B/E,WAAW;IAC7CiE,QAAQ;QACNe,cAAcnE;IAChB;IACAsD,OAAO;QACLa,cAAclE;IAChB;IACA,eAAe;QACbkE,cAAcjE;IAChB;AACF;AAEA,OAAO,MAAMkE,gBAAgBjF,WAAW;IACtCkF,MAAM;QACJC,UAAU;QACV3D,SAAS;QACTG,WAAW;IACb;IACAsC,QAAQ;QACNa,aAAajE;QACbmE,cAAc7E,OAAOiF,mBAAmB;QACxCxD,OAAOZ;QACPqE,UAAUrE;IACZ;IACAmD,OAAO;QACLW,aAAahE;QACbkE,cAAc7E,OAAOmF,oBAAoB;QACzC1D,OAAOX;QACPoE,UAAUpE;IACZ;IACA,eAAe;QACb6D,aAAa/D;QACbiE,cAAc7E,OAAOmF,oBAAoB;QACzC1D,OAAOV;QACPmE,UAAUnE;IACZ;AACF,GAAG;AAEH,OAAO,MAAMqE,iBAAiBvF,WAAW;IACvCkF,MAAM;QACJC,UAAU;QAEV3D,SAAS;QACTsD,aAAa;IACf;IACAb,QAAQ;QACNe,cAAc7E,OAAOqF,kBAAkB;IACzC;IACArB,OAAO;QACLa,cAAc7E,OAAOsF,uBAAuB;IAC9C;IACA,eAAe;QACbT,cAAc7E,OAAOsF,uBAAuB;IAC9C;AACF,GAAG;AAEH,MAAMC,uBAAuB1F,WAAW;IACtCkF,MAAM;QACJC,UAAU;QAEV3D,SAAS;QAET,yBAAyB;QACzB,kCAAkC;YAChC,UAAU;gBACR4B,OAAO;YACT;YACA,WAAW;gBACTA,OAAO;YACT;QACF;IACF;IACAa,QAAQ;QACNa,aAAa3E,OAAOiF,mBAAmB;QACvCJ,cAAcnE;QACdwE,UAAUrE;IACZ;IACAmD,OAAO;QACLW,aAAa3E,OAAOmF,oBAAoB;QACxCN,cAAclE;QACduE,UAAUpE;IACZ;IACA,eAAe;QACb6D,aAAa3E,OAAOmF,oBAAoB;QACxCN,cAAcjE;QACdsE,UAAUnE;IACZ;IAEA+B,QAAQ;QACN,UAAU;YACRuB,QAAQ;YACRpB,OAAOjD,OAAOwF,kCAAkC;QAClD;QACA,WAAW;YACTvC,OAAOjD,OAAOyF,oCAAoC;QACpD;IACF;IACAzD,SAAS;QACP,UAAU;YACRqC,QAAQ;YACRpB,OAAOjD,OAAOwF,kCAAkC;QAClD;QACA,WAAW;YACTvC,OAAOjD,OAAOyF,oCAAoC;QACpD;IACF;IACAnC,OAAO;QACL,UAAU;YACRe,QAAQ;YACRpB,OAAOjD,OAAOwF,kCAAkC;QAClD;QACA,WAAW;YACTvC,OAAOjD,OAAOyF,oCAAoC;QACpD;IACF;IACAhC,UAAU;QACR,UAAU;YACRR,OAAOjD,OAAO2D,6BAA6B;QAC7C;QACA,WAAW;YACTV,OAAOjD,OAAO2D,6BAA6B;QAC7C;IACF;AACF;AAEA,OAAO,MAAM+B,uBAAuB7F,WAAW;IAC7CkF,MAAM;QACJY,YAAY;QACZhB,aAAa3E,OAAOmF,oBAAoB;QACxCN,cAAc7E,OAAOmF,oBAAoB;IAC3C;IAEArB,QAAQ;QACN,GAAG7D,iBAAiB2F,KAAK;IAC3B;IACA5B,OAAO;QACL,GAAG/D,iBAAiB4F,QAAQ;IAC9B;IACA,eAAe;QACb,GAAG5F,iBAAiB4F,QAAQ;IAC9B;IAEAC,sBAAsB;QACpBC,iBAAiB;QACjBC,cAAc;QACdC,YAAY;QACZC,eAAelG,OAAOmF,oBAAoB;IAC5C;IACAgB,mBAAmB;QACjBnB,UAAU;QAEV,GAAG/E,iBAAiB4F,QAAQ;QAC5BO,WAAW;IACb;AACF,GAAG;AAEH,OAAO,MAAMC,gCAAgCzG,gBAAgB;IAC3DoF,UAAU;IACVL,aAAa3E,OAAOmF,oBAAoB;IACxCN,cAAc7E,OAAOmF,oBAAoB;IACzC,GAAGlF,iBAAiBqG,QAAQ;IAC5BX,YAAY;AACd,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMY,wBAAwB,CAACC;IACpC;IAEA,MAAMC,2BAA2B5E;IACjC,MAAM6E,4BAA4BjE;IAElC,MAAMkE,aAAa9D;IACnB,MAAM+D,qBAAqBxC;IAC3B,MAAMyC,yBAAyBnC;IAC/B,MAAMoC,2BAA2BlC;IAEjC,MAAMmC,aAAajC;IACnB,MAAMkC,cAAc5B;IACpB,MAAM6B,oBAAoB1B;IAC1B,MAAM2B,oBAAoBxB;IAC1B,MAAMyB,6BAA6Bd;IAEnC,MAAM,EAAEe,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEnG,UAAU,EAAEsC,QAAQ,EAAE,GAAG+C;IAExDA,MAAMpG,IAAI,CAACmH,SAAS,GAAGzH,aACrBK,cAAcC,IAAI,EAElBiH,UAAU,YAAYZ,2BAA2BC,2BAEjDU,WAAWR,kBAAkB,CAACzF,WAAW,GAAGwF,UAAU,CAACxF,WAAW,EAClEsC,YAAY,CAAC2D,YAAYT,WAAWlD,QAAQ,EAC5CkD,UAAU,CAACW,KAAK,EAEhB,CAACd,MAAMnG,KAAK,IAAI,CAACmG,MAAMlG,IAAI,IAAIuG,sBAAsB,CAACS,KAAK,EAC3D,CAACd,MAAM/F,WAAW,IAAIqG,wBAAwB,CAACQ,KAAK,EAEpDd,MAAMpG,IAAI,CAACmH,SAAS;IAGtB,IAAIf,MAAMnG,KAAK,EAAE;QACfmG,MAAMnG,KAAK,CAACkH,SAAS,GAAGzH,aACtBK,cAAcE,KAAK,EACnB2G,YAAYjC,IAAI,EAChBiC,WAAW,CAACM,KAAK,EACjBd,MAAMnG,KAAK,CAACkH,SAAS;IAEzB;IACA,IAAIf,MAAMlG,IAAI,EAAE;QACdkG,MAAMlG,IAAI,CAACiH,SAAS,GAAGzH,aAAaK,cAAcG,IAAI,EAAEyG,WAAWhC,IAAI,EAAEgC,UAAU,CAACO,KAAK,EAAEd,MAAMlG,IAAI,CAACiH,SAAS;IACjH;IACA,IAAIf,MAAMjG,WAAW,EAAE;QACrBiG,MAAMjG,WAAW,CAACgH,SAAS,GAAGzH,aAC5BK,cAAcI,WAAW,EAEzB2G,kBAAkBnC,IAAI,EACtBmC,iBAAiB,CAACI,KAAK,EAEvBd,MAAMhG,aAAa,GAAG0G,kBAAkBf,iBAAiB,GAAGe,kBAAkBpB,oBAAoB,EAElGU,MAAMjG,WAAW,CAACgH,SAAS;IAE/B;IACA,IAAIf,MAAMhG,aAAa,EAAE;QACvBgG,MAAMhG,aAAa,CAAC+G,SAAS,GAAGzH,aAC9BK,cAAcK,aAAa,EAC3B2G,4BACAX,MAAMhG,aAAa,CAAC+G,SAAS;IAEjC;IACA,IAAIf,MAAM/F,WAAW,EAAE;QACrB+F,MAAM/F,WAAW,CAAC8G,SAAS,GAAGzH,aAC5BK,cAAcM,WAAW,EACzBwG,kBAAkBlC,IAAI,EACtBkC,iBAAiB,CAACK,KAAK,EACvB,CAACF,YAAYH,iBAAiB,CAAC9F,WAAW,EAC1CsC,YAAY,CAAC2D,YAAYH,kBAAkBxD,QAAQ,EACnD+C,MAAM/F,WAAW,CAAC8G,SAAS;IAE/B;IAEA,OAAOf;AACT,EAAE"}

package/lib/components/TagGroup/TagGroup.types.js

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * TagGroup Base State - omits design-only state
+ */ export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagGroup/TagGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot, EventHandler } from '@fluentui/react-utilities';\nimport type {\n  TagSize,\n  TagValue,\n  TagDismissHandler,\n  TagAppearance,\n  TagSelectHandler,\n  TagSelectData,\n} from '../../utils/types';\nimport { TagGroupContextValue } from '../../contexts/tagGroupContext';\nimport * as React from 'react';\n\nexport type TagGroupContextValues = {\n  tagGroup: TagGroupContextValue;\n};\n\nexport type TagGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TagGroup Props\n */\nexport type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {\n  /**\n   * Callback for when a tag is dismissed\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onDismiss?: TagDismissHandler<Value>;\n\n  /**\n   * Sets selected values for an uncontrolled component.\n   */\n  defaultSelectedValues?: Value[];\n\n  /**\n   * A TagGroup can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  size?: TagSize;\n  appearance?: TagAppearance;\n  dismissible?: boolean;\n\n  /**\n   * Callback for when a tag is selected\n   */\n  onTagSelect?: EventHandler<TagSelectData<Value>>;\n\n  /**\n   * Values of the selected tags\n   */\n  selectedValues?: Value[];\n};\n\n/**\n * State used in rendering TagGroup\n */\nexport type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &\n  Required<Pick<TagGroupProps, 'appearance' | 'dismissible' | 'disabled' | 'size' | 'selectedValues'>> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n    handleTagSelect?: TagSelectHandler<Value>;\n    role?: React.AriaRole;\n  };\n\n/**\n * TagGroup Base Props - omits design-only props\n */\nexport type TagGroupBaseProps<Value = TagValue> = Omit<TagGroupProps<Value>, 'appearance' | 'size'>;\n\n/**\n * TagGroup Base State - omits design-only state\n */\nexport type TagGroupBaseState<Value = TagValue> = Omit<TagGroupState<Value>, 'appearance' | 'size'>;\n"],"names":["React"],"mappings":"AAUA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/TagGroup/TagGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot, EventHandler } from '@fluentui/react-utilities';\nimport type {\n  TagSize,\n  TagValue,\n  TagDismissHandler,\n  TagAppearance,\n  TagSelectHandler,\n  TagSelectData,\n} from '../../utils/types';\nimport type { TagGroupContextValue } from '../../contexts/tagGroupContext';\nimport type * as React from 'react';\n\nexport type TagGroupContextValues = {\n  tagGroup: TagGroupContextValue;\n};\n\nexport type TagGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TagGroup Props\n */\nexport type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {\n  /**\n   * Callback for when a tag is dismissed\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onDismiss?: TagDismissHandler<Value>;\n\n  /**\n   * Sets selected values for an uncontrolled component.\n   */\n  defaultSelectedValues?: Value[];\n\n  /**\n   * A TagGroup can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  size?: TagSize;\n  appearance?: TagAppearance;\n  dismissible?: boolean;\n\n  /**\n   * Callback for when a tag is selected\n   */\n  onTagSelect?: EventHandler<TagSelectData<Value>>;\n\n  /**\n   * Values of the selected tags\n   */\n  selectedValues?: Value[];\n};\n\n/**\n * State used in rendering TagGroup\n */\nexport type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &\n  Required<Pick<TagGroupProps, 'appearance' | 'dismissible' | 'disabled' | 'size' | 'selectedValues'>> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n    handleTagSelect?: TagSelectHandler<Value>;\n    role?: React.AriaRole;\n  };\n\n/**\n * TagGroup Base Props - omits design-only props\n */\nexport type TagGroupBaseProps<Value = TagValue> = Omit<TagGroupProps<Value>, 'appearance' | 'size'>;\n\n/**\n * TagGroup Base State - omits design-only state\n */\nexport type TagGroupBaseState<Value = TagValue> = Omit<TagGroupState<Value>, 'appearance' | 'size'>;\n"],"names":[],"mappings":"AAwEA;;CAEC,GACD,WAAoG"}

package/lib/contexts/tagGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/tagGroupContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TagGroupState } from '../components/TagGroup/index';\n\nexport const TagGroupContext = React.createContext<TagGroupContextValue | undefined>(undefined);\n\nconst tagGroupContextDefaultValue: TagGroupContextValue = {\n  handleTagDismiss: () => ({}),\n  size: 'medium',\n  role: 'toolbar',\n  handleTagSelect: undefined,\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<\n    Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>\n  >;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = (): TagGroupContextValue =>\n  React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","role","handleTagSelect","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,gCAAkBD,MAAME,aAAa,CAAmCC,WAAW;AAEhG,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,CAAC,CAAA;IAC1BC,MAAM;IACNC,MAAM;IACNC,iBAAiBL;AACnB;AAUA,OAAO,MAAMM,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QACzCX;WAAAA,CAAAA,oBAAAA,MAAMY,UAAU,CAACX,8BAAjBD,+BAAAA,oBAAqCI;EAA4B"}
+{"version":3,"sources":["../src/contexts/tagGroupContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TagGroupState } from '../components/TagGroup/index';\n\nexport const TagGroupContext = React.createContext<TagGroupContextValue | undefined>(undefined);\n\nconst tagGroupContextDefaultValue: TagGroupContextValue = {\n  handleTagDismiss: () => ({}),\n  size: 'medium',\n  role: 'toolbar',\n  handleTagSelect: undefined,\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<\n    Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>\n  >;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = (): TagGroupContextValue =>\n  React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","role","handleTagSelect","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,gCAAkBD,MAAME,aAAa,CAAmCC,WAAW;AAEhG,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,CAAC,CAAA;IAC1BC,MAAM;IACNC,MAAM;IACNC,iBAAiBL;AACnB;AAUA,OAAO,MAAMM,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QACzCX;WAAAA,CAAAA,oBAAAA,MAAMY,UAAU,CAACX,8BAAjBD,+BAAAA,oBAAqCI;EAA4B"}

package/lib/utils/types.js

@@ -1 +1 @@
-import * as React from 'react';
+export { };

package/lib/utils/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\n\nexport type TagAppearance = 'filled' | 'outline' | 'brand';\nexport type TagShape = 'rounded' | 'circular';\nexport type TagSize = 'extra-small' | 'small' | 'medium';\n\nexport type TagValue = string;\n\nexport type TagDismissData<Value = TagValue> = {\n  value: Value;\n};\n\nexport type TagSelectData<Value = TagValue> = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  value: Value;\n  selectedValues?: Value[];\n};\n\nexport type TagDismissEvent = React.MouseEvent | React.KeyboardEvent;\n\nexport type TagDismissHandler<Value = TagValue> = (e: TagDismissEvent, data: TagDismissData<Value>) => void;\n\nexport type TagSelectHandler<Value = TagValue> = EventHandler<TagSelectData<Value>>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/utils/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\n\nexport type TagAppearance = 'filled' | 'outline' | 'brand';\nexport type TagShape = 'rounded' | 'circular';\nexport type TagSize = 'extra-small' | 'small' | 'medium';\n\nexport type TagValue = string;\n\nexport type TagDismissData<Value = TagValue> = {\n  value: Value;\n};\n\nexport type TagSelectData<Value = TagValue> = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  value: Value;\n  selectedValues?: Value[];\n};\n\nexport type TagDismissEvent = React.MouseEvent | React.KeyboardEvent;\n\nexport type TagDismissHandler<Value = TagValue> = (e: TagDismissEvent, data: TagDismissData<Value>) => void;\n\nexport type TagSelectHandler<Value = TagValue> = EventHandler<TagSelectData<Value>>;\n"],"names":[],"mappings":"AAsBA,WAAoF"}

package/lib/utils/useTagAvatarContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/useTagAvatarContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AvatarSize, AvatarShape } from '@fluentui/react-avatar';\n\nexport type UseTagAvatarContextValuesOptions = {\n  avatarSize: AvatarSize;\n  avatarShape: AvatarShape;\n};\n\nexport type TagAvatarContextValues = {\n  avatar: {\n    size?: AvatarSize;\n    shape?: AvatarShape;\n  };\n};\n\nexport function useTagAvatarContextValues_unstable(state: UseTagAvatarContextValuesOptions): TagAvatarContextValues {\n  const { avatarSize, avatarShape } = state;\n\n  const avatar = React.useMemo(\n    () => ({\n      size: avatarSize,\n      shape: avatarShape,\n    }),\n    [avatarShape, avatarSize],\n  );\n\n  return {\n    avatar,\n  };\n}\n"],"names":["React","useTagAvatarContextValues_unstable","state","avatarSize","avatarShape","avatar","useMemo","size","shape"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAe/B,OAAO,SAASC,mCAAmCC,KAAuC;IACxF,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAGF;IAEpC,MAAMG,SAASL,MAAMM,OAAO,CAC1B,IAAO,CAAA;YACLC,MAAMJ;YACNK,OAAOJ;QACT,CAAA,GACA;QAACA;QAAaD;KAAW;IAG3B,OAAO;QACLE;IACF;AACF"}
+{"version":3,"sources":["../src/utils/useTagAvatarContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AvatarSize, AvatarShape } from '@fluentui/react-avatar';\n\nexport type UseTagAvatarContextValuesOptions = {\n  avatarSize: AvatarSize;\n  avatarShape: AvatarShape;\n};\n\nexport type TagAvatarContextValues = {\n  avatar: {\n    size?: AvatarSize;\n    shape?: AvatarShape;\n  };\n};\n\nexport function useTagAvatarContextValues_unstable(state: UseTagAvatarContextValuesOptions): TagAvatarContextValues {\n  const { avatarSize, avatarShape } = state;\n\n  const avatar = React.useMemo(\n    () => ({\n      size: avatarSize,\n      shape: avatarShape,\n    }),\n    [avatarShape, avatarSize],\n  );\n\n  return {\n    avatar,\n  };\n}\n"],"names":["React","useTagAvatarContextValues_unstable","state","avatarSize","avatarShape","avatar","useMemo","size","shape"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAe/B,OAAO,SAASC,mCAAmCC,KAAuC;IACxF,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAGF;IAEpC,MAAMG,SAASL,MAAMM,OAAO,CAC1B,IAAO,CAAA;YACLC,MAAMJ;YACNK,OAAOJ;QACT,CAAA,GACA;QAACA;QAAaD;KAAW;IAG3B,OAAO;QACLE;IACF;AACF"}

package/lib-commonjs/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-commonjs/components/InteractionTag/useInteractionTag.js

@@ -17,8 +17,6 @@ _export(exports, {
         return useInteractionTag_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _tagGroupContext = require("../../contexts/tagGroupContext");
 const useInteractionTagBase_unstable = (props, ref)=>{

package/lib-commonjs/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;;;;;;;;;;;;IAkBaK,8BAAAA;;;IAmDAiB,0BAAAA;;;;;iEAnEU,QAAQ;gCACuB,4BAA4B;iCAOtC,iCAAiC;AAQtE,uCAAuC,CAC5ChB,OACAC;IAEA,MAAM,EACJC,gBAAgB,EAChBC,eAAe,EACfC,UAAUC,eAAe,EACzBC,iBAAiB,EAAE,EACpB,OAAGR,4CAAAA;IAEJ,MAAMS,SAAKX,qBAAAA,EAAM,uBAAuBI,MAAMO,EAAE;IAEhD,MAAMC,8BAA0BZ,qBAAAA,EAAM;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,oBAAAA,CAAKiB,MAAM,KACfnB,wCAAAA,EAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRI,UAAUC,kBAAkB,OAAOD;YACnCG;QACF,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF,EAAE;AAWK,mCAAmC,CACxCf,OACAC;IAEA,MAAM,EAAEgB,MAAMC,WAAW,EAAEC,YAAYC,iBAAiB,EAAE,GAAGtB,gDAAAA;IAE7D,MAAM,EAAEqB,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,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;;;;;;;;;;;;IAkBaI,8BAAAA;;;IAmDAiB,0BAAAA;;;;gCAlEyC,4BAA4B;iCAOtC,iCAAiC;AAQtE,uCAAuC,CAC5ChB,OACAC;IAEA,MAAM,EACJC,gBAAgB,EAChBC,eAAe,EACfC,UAAUC,eAAe,EACzBC,iBAAiB,EAAE,EACpB,GAAGR,gDAAAA;IAEJ,MAAMS,SAAKX,qBAAAA,EAAM,uBAAuBI,MAAMO,EAAE;IAEhD,MAAMC,8BAA0BZ,qBAAAA,EAAM;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,oBAAAA,CAAKiB,MAAM,KACfnB,wCAAAA,EAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRI,UAAUC,kBAAkB,OAAOD;YACnCG;QACF,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF,EAAE;AAWK,mCAAmC,CACxCf,OACAC;IAEA,MAAM,EAAEgB,MAAMC,WAAW,EAAEC,YAAYC,iBAAiB,EAAE,OAAGtB,4CAAAA;IAE7D,MAAM,EAAEqB,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,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-commonjs/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;;;;;+BAKgBC;;;;;;;iEAHO,QAAQ;AAGxB,iDAAiDC,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,OAAMc,OAAO,CAC3B,IAAO,CAAA;gBACLX;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;aACF,CAAA,EACA;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;;;;;+BAKgBC;;;;;;;iEAHO,QAAQ;AAGxB,iDAAiDC,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,OAAMc,OAAO,CAC3B,IAAO,CAAA;gBACLX;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;aACF,CAAA,EACA;YACET;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;SACD;IAEL;AACF"}

package/lib-commonjs/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-commonjs/components/InteractionTagPrimary/useInteractionTagPrimary.js

@@ -17,8 +17,6 @@ _export(exports, {
         return useInteractionTagPrimary_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _interactionTagContext = require("../../contexts/interactionTagContext");
 const avatarSizeMap = {

package/lib-commonjs/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;;;;;;;;;;;;yCA6BaY;;;qCAmEA4B;;;;;iEA9FU,QAAQ;gCACkD,4BAA4B;uCAO3D,uCAAuC;AAEzF,MAAMlC,gBAAgB;IACpBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,UAAU;AACZ;AAQO,MAAMC,wCAAwC,CACnDC,OACAC;IAEA,MAAM,EACJC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACvBC,UAAUC,eAAe,EACzBC,cAAc,EACdC,KAAK,EACN,OAAGhB,wDAAAA;IACJ,MAAM,EAAEiB,qBAAqB,KAAK,EAAE,GAAGT;IAEvC,MAAMU,cAAUnB,gCAAAA,MACdF,8BAAAA,EAAeW,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOU,OAAO,EAAE,CAACC,QAC9BR,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,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,oBAAAA,CAAK6B,MAAM,KACf/B,wCAAAA,EAAyB,UAAU;YACjCa;YACAC;YACAkB,IAAIhB;YACJ,GAAID,oBAAoBkB,aAAa;gBAAE,gBAAgBf;YAAgB,CAAC;YACxEI;YACA,GAAGV,KAAK;QACV,IACA;YAAEsB,aAAa;QAAS;QAG1BP,OAAOzB,oBAAAA,CAAKiC,QAAQ,CAACvB,MAAMe,KAAK,EAAE;YAAEO,aAAa;QAAO;QACxDN,MAAM1B,oBAAAA,CAAKiC,QAAQ,CAACvB,MAAMgB,IAAI,EAAE;YAAEM,aAAa;QAAO;QACtDL,aAAa3B,oBAAAA,CAAKiC,QAAQ,CAACvB,MAAMiB,WAAW,EAAE;YAC5CO,iBAAiB;YACjBC,cAAc;gBACZC,UAAU1B,MAAM0B,QAAQ;YAC1B;YACAJ,aAAa;QACf;QACAJ,eAAe5B,oBAAAA,CAAKiC,QAAQ,CAACvB,MAAMkB,aAAa,EAAE;YAAEI,aAAa;QAAO;IAC1E;AACF,EAAE;AAWK,MAAMK,oCAAoC,CAC/C3B,OACAC;IAEA,MAAM,EAAE2B,UAAU,EAAEC,KAAK,EAAEC,IAAI,EAAE,OAAGtC,wDAAAA;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;;;;;;;;;;;;yCA6BaW;;;qCAmEA4B;;;;gCA7FoE,4BAA4B;uCAO3D,uCAAuC;AAEzF,MAAMlC,gBAAgB;IACpBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,UAAU;AACZ;AAQO,MAAMC,wCAAwC,CACnDC,OACAC;IAEA,MAAM,EACJC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACvBC,UAAUC,eAAe,EACzBC,cAAc,EACdC,KAAK,EACN,OAAGhB,wDAAAA;IACJ,MAAM,EAAEiB,qBAAqB,KAAK,EAAE,GAAGT;IAEvC,MAAMU,cAAUnB,gCAAAA,MACdF,8BAAAA,EAAeW,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOU,OAAO,EAAE,CAACC,QAC9BR,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,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,oBAAAA,CAAK6B,MAAM,KACf/B,wCAAAA,EAAyB,UAAU;YACjCa;YACAC;YACAkB,IAAIhB;YACJ,GAAID,oBAAoBkB,aAAa;gBAAE,gBAAgBf;YAAgB,CAAC;YACxEI;YACA,GAAGV,KAAK;QACV,IACA;YAAEsB,aAAa;QAAS;QAG1BP,OAAOzB,oBAAAA,CAAKiC,QAAQ,CAACvB,MAAMe,KAAK,EAAE;YAAEO,aAAa;QAAO;QACxDN,MAAM1B,oBAAAA,CAAKiC,QAAQ,CAACvB,MAAMgB,IAAI,EAAE;YAAEM,aAAa;QAAO;QACtDL,aAAa3B,oBAAAA,CAAKiC,QAAQ,CAACvB,MAAMiB,WAAW,EAAE;YAC5CO,iBAAiB;YACjBC,cAAc;gBACZC,UAAU1B,MAAM0B,QAAQ;YAC1B;YACAJ,aAAa;QACf;QACAJ,eAAe5B,oBAAAA,CAAKiC,QAAQ,CAACvB,MAAMkB,aAAa,EAAE;YAAEI,aAAa;QAAO;IAC1E;AACF,EAAE;AAWK,MAAMK,oCAAoC,CAC/C3B,OACAC;IAEA,MAAM,EAAE2B,UAAU,EAAEC,KAAK,EAAEC,IAAI,EAAE,OAAGtC,wDAAAA;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-commonjs/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  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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"}

package/lib-commonjs/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-commonjs/components/Tag/Tag.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tag/Tag.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport { TagAppearance, TagShape, TagSize } from '../../utils/types';\nimport { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';\n\nexport type TagContextValues = TagAvatarContextValues;\n\nexport type TagSlots = {\n  root: NonNullable<Slot<'button', 'span'>>;\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 Tag. 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   * Slot for the dismiss icon\n   */\n  dismissIcon?: Slot<'span'>;\n};\n\n/**\n * Tag Props\n */\nexport type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {\n  /**\n   * A Tag can have filled, outlined or brand experience.\n   *\n   * @default 'filled'\n   */\n  appearance?: TagAppearance;\n\n  /**\n   * A Tag can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A Tag can be dismissible\n   *\n   * @default false\n   */\n  dismissible?: 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   * A Tag can have rounded or circular shape.\n   *\n   * @default 'round'\n   */\n  shape?: TagShape;\n\n  /**\n   * A Tag 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 Tag\n */\nexport type TagState = ComponentState<TagSlots> &\n  Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'selected' | 'shape' | 'size'>> &\n  UseTagAvatarContextValuesOptions;\n\n/**\n * Tag Base Props - omits design-only props\n */\nexport type TagBaseProps = DistributiveOmit<TagProps, 'appearance' | 'size' | 'shape'>;\n\n/**\n * Tag Base State - omits design-only state\n */\nexport type TagBaseState = DistributiveOmit<TagState, 'appearance' | 'size' | 'shape' | 'avatarShape' | 'avatarSize'>;\n"],"names":[],"mappings":"AAoGA;;CAEC,GACD,WAAsH"}
+{"version":3,"sources":["../src/components/Tag/Tag.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { TagAppearance, TagShape, TagSize } from '../../utils/types';\nimport type { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';\n\nexport type TagContextValues = TagAvatarContextValues;\n\nexport type TagSlots = {\n  root: NonNullable<Slot<'button', 'span'>>;\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 Tag. 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   * Slot for the dismiss icon\n   */\n  dismissIcon?: Slot<'span'>;\n};\n\n/**\n * Tag Props\n */\nexport type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {\n  /**\n   * A Tag can have filled, outlined or brand experience.\n   *\n   * @default 'filled'\n   */\n  appearance?: TagAppearance;\n\n  /**\n   * A Tag can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A Tag can be dismissible\n   *\n   * @default false\n   */\n  dismissible?: 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   * A Tag can have rounded or circular shape.\n   *\n   * @default 'round'\n   */\n  shape?: TagShape;\n\n  /**\n   * A Tag 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 Tag\n */\nexport type TagState = ComponentState<TagSlots> &\n  Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'selected' | 'shape' | 'size'>> &\n  UseTagAvatarContextValuesOptions;\n\n/**\n * Tag Base Props - omits design-only props\n */\nexport type TagBaseProps = DistributiveOmit<TagProps, 'appearance' | 'size' | 'shape'>;\n\n/**\n * Tag Base State - omits design-only state\n */\nexport type TagBaseState = DistributiveOmit<TagState, 'appearance' | 'size' | 'shape' | 'avatarShape' | 'avatarSize'>;\n"],"names":[],"mappings":"AAoGA;;CAEC,GACD,WAAsH"}

package/lib-commonjs/components/Tag/useTagStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tag/useTagStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelResetStyle, makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TagSlots, TagState } from './Tag.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tagClassNames: SlotClassNames<TagSlots> = {\n  root: 'fui-Tag',\n  media: 'fui-Tag__media',\n  icon: 'fui-Tag__icon',\n  primaryText: 'fui-Tag__primaryText',\n  secondaryText: 'fui-Tag__secondaryText',\n  dismissIcon: 'fui-Tag__dismissIcon',\n};\n\n/**\n * Inner horizontal space left and right of Tag\n */\nconst tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\n\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\n\nconst baseStyles: GriffelResetStyle = {\n  // reset default button style:\n  fontFamily: 'inherit',\n  padding: '0px',\n  appearance: 'button',\n  textAlign: 'unset',\n\n  display: 'inline-grid',\n  alignItems: 'center',\n  gridTemplateAreas: `\n  \"media primary   dismissIcon\"\n  \"media secondary dismissIcon\"\n  `,\n  boxSizing: 'border-box',\n  width: 'fit-content',\n\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n};\n\nconst useRootRoundedBaseClassName = makeResetStyles({\n  ...baseStyles,\n\n  borderRadius: tokens.borderRadiusMedium,\n  ...createCustomFocusIndicatorStyle({\n    borderRadius: tokens.borderRadiusMedium,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n  }),\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\n  borderRadius: tokens.borderRadiusCircular,\n  ...createCustomFocusIndicatorStyle({\n    borderRadius: tokens.borderRadiusCircular,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n  }),\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      borderRight: `${tokens.strokeWidthThin} solid`,\n      position: 'absolute',\n      inset: '-1px',\n      borderRadius: tokens.borderRadiusCircular,\n    },\n  },\n});\n\nconst useRootStyles = makeStyles({\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground2,\n  },\n  outline: {\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n  },\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n  },\n  selected: {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorBrandStroke1),\n\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'none',\n      backgroundColor: 'Highlight',\n      color: 'HighlightText',\n    },\n  },\n  medium: {\n    height: '32px',\n  },\n  small: {\n    height: '24px',\n  },\n  'extra-small': {\n    position: 'relative',\n    height: '20px',\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});\n\nconst useRootDisabledStyles = 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 root slot when Tag is without leading media/icon\n */\nconst useRootWithoutMediaStyles = makeStyles({\n  medium: {\n    paddingLeft: tagSpacingMedium,\n  },\n  small: {\n    paddingLeft: tagSpacingSmall,\n  },\n  'extra-small': {\n    paddingLeft: tagSpacingExtraSmall,\n  },\n});\n/**\n * Styles for root slot when Tag is without dismiss icon\n */\nconst useRootWithoutDismissStyles = makeStyles({\n  medium: {\n    paddingRight: tagSpacingMedium,\n  },\n  small: {\n    paddingRight: tagSpacingSmall,\n  },\n  'extra-small': {\n    paddingRight: tagSpacingExtraSmall,\n  },\n});\n\nexport const useIconStyles = makeStyles({\n  base: {\n    gridArea: 'media',\n    display: 'flex',\n    boxSizing: 'content-box',\n  },\n  medium: {\n    paddingLeft: tagSpacingMedium,\n    paddingRight: tokens.spacingHorizontalXS,\n    width: mediumIconSize,\n    fontSize: mediumIconSize,\n  },\n  small: {\n    paddingLeft: tagSpacingSmall,\n    paddingRight: tokens.spacingHorizontalXXS,\n    width: smallIconSize,\n    fontSize: smallIconSize,\n  },\n  'extra-small': {\n    paddingLeft: tagSpacingExtraSmall,\n    paddingRight: tokens.spacingHorizontalXXS,\n    width: extraSmallIconSize,\n    fontSize: extraSmallIconSize,\n  },\n});\n\nexport const useMediaStyles = makeStyles({\n  base: {\n    gridArea: 'media',\n\n    display: 'flex',\n    paddingLeft: '1px',\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\nconst useDismissIconStyles = makeStyles({\n  base: {\n    gridArea: 'dismissIcon',\n\n    display: 'flex',\n\n    // windows high contrast:\n    '@media (forced-colors: active)': {\n      ':hover': {\n        color: 'Highlight',\n      },\n      ':active': {\n        color: 'Highlight',\n      },\n    },\n  },\n  medium: {\n    paddingLeft: tokens.spacingHorizontalXS,\n    paddingRight: tagSpacingMedium,\n    fontSize: mediumIconSize,\n  },\n  small: {\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tagSpacingSmall,\n    fontSize: smallIconSize,\n  },\n  'extra-small': {\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tagSpacingExtraSmall,\n    fontSize: extraSmallIconSize,\n  },\n\n  filled: {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n  outline: {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n  brand: {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n  selected: {\n    ':hover': {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n    ':active': {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n});\n\nexport const usePrimaryTextStyles = makeStyles({\n  base: {\n    whiteSpace: 'nowrap',\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tokens.spacingHorizontalXXS,\n  },\n\n  medium: {\n    ...typographyStyles.body1,\n  },\n  small: {\n    ...typographyStyles.caption1,\n  },\n  'extra-small': {\n    ...typographyStyles.caption1,\n  },\n\n  withoutSecondaryText: {\n    gridColumnStart: 'primary',\n    gridRowStart: 'primary',\n    gridRowEnd: 'secondary',\n    paddingBottom: tokens.spacingHorizontalXXS,\n  },\n  withSecondaryText: {\n    gridArea: 'primary',\n\n    ...typographyStyles.caption1,\n    marginTop: '-2px',\n  },\n});\n\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n  gridArea: 'secondary',\n  paddingLeft: tokens.spacingHorizontalXXS,\n  paddingRight: tokens.spacingHorizontalXXS,\n  ...typographyStyles.caption2,\n  whiteSpace: 'nowrap',\n});\n\n/**\n * Apply styling to the Tag slots based on the state\n */\nexport const useTagStyles_unstable = (state: TagState): TagState => {\n  'use no memo';\n\n  const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n  const rootCircularBaseClassName = useRootCircularBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n  const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n\n  const iconStyles = useIconStyles();\n  const mediaStyles = useMediaStyles();\n  const dismissIconStyles = useDismissIconStyles();\n  const primaryTextStyles = usePrimaryTextStyles();\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n\n  const { disabled, shape, size, appearance, selected } = state;\n\n  state.root.className = mergeClasses(\n    tagClassNames.root,\n\n    shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName,\n\n    disabled ? rootDisabledStyles[appearance] : rootStyles[appearance],\n    selected && !disabled && rootStyles.selected,\n    rootStyles[size],\n\n    !state.media && !state.icon && rootWithoutMediaStyles[size],\n    !state.dismissIcon && rootWithoutDismissStyles[size],\n\n    state.root.className,\n  );\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      tagClassNames.media,\n      mediaStyles.base,\n      mediaStyles[size],\n      state.media.className,\n    );\n  }\n  if (state.icon) {\n    state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n  }\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      tagClassNames.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      tagClassNames.secondaryText,\n      secondaryTextBaseClassName,\n      state.secondaryText.className,\n    );\n  }\n  if (state.dismissIcon) {\n    state.dismissIcon.className = mergeClasses(\n      tagClassNames.dismissIcon,\n      dismissIconStyles.base,\n      dismissIconStyles[size],\n      !disabled && dismissIconStyles[appearance],\n      selected && !disabled && dismissIconStyles.selected,\n      state.dismissIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","createCustomFocusIndicatorStyle","tagClassNames","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","borderRadius","borderRadiusMedium","outline","strokeWidthThick","colorStrokeFocus2","position","content","borderTop","inset","borderTopLeftRadius","borderTopRightRadius","useRootCircularBaseClassName","borderRadiusCircular","borderLeft","borderRight","useRootStyles","filled","backgroundColor","colorNeutralBackground3","color","colorNeutralForeground2","colorSubtleBackground","borderColor","colorNeutralStroke1","brand","colorBrandBackground2","colorBrandForeground2","selected","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandStroke1","forcedColorAdjust","medium","height","small","left","bottom","top","useRootDisabledStyles","cursor","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useRootWithoutMediaStyles","paddingLeft","useRootWithoutDismissStyles","paddingRight","useIconStyles","base","gridArea","spacingHorizontalXS","fontSize","spacingHorizontalXXS","useMediaStyles","spacingHorizontalS","spacingHorizontalSNudge","useDismissIconStyles","colorCompoundBrandForeground1Hover","colorCompoundBrandForeground1Pressed","usePrimaryTextStyles","whiteSpace","body1","caption1","withoutSecondaryText","gridColumnStart","gridRowStart","gridRowEnd","paddingBottom","withSecondaryText","marginTop","useSecondaryTextBaseClassName","caption2","useTagStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","disabled","shape","size","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Tag/useTagStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { GriffelResetStyle } from '@griffel/react';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TagSlots, TagState } from './Tag.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tagClassNames: SlotClassNames<TagSlots> = {\n  root: 'fui-Tag',\n  media: 'fui-Tag__media',\n  icon: 'fui-Tag__icon',\n  primaryText: 'fui-Tag__primaryText',\n  secondaryText: 'fui-Tag__secondaryText',\n  dismissIcon: 'fui-Tag__dismissIcon',\n};\n\n/**\n * Inner horizontal space left and right of Tag\n */\nconst tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\n\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\n\nconst baseStyles: GriffelResetStyle = {\n  // reset default button style:\n  fontFamily: 'inherit',\n  padding: '0px',\n  appearance: 'button',\n  textAlign: 'unset',\n\n  display: 'inline-grid',\n  alignItems: 'center',\n  gridTemplateAreas: `\n  \"media primary   dismissIcon\"\n  \"media secondary dismissIcon\"\n  `,\n  boxSizing: 'border-box',\n  width: 'fit-content',\n\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n};\n\nconst useRootRoundedBaseClassName = makeResetStyles({\n  ...baseStyles,\n\n  borderRadius: tokens.borderRadiusMedium,\n  ...createCustomFocusIndicatorStyle({\n    borderRadius: tokens.borderRadiusMedium,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n  }),\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\n  borderRadius: tokens.borderRadiusCircular,\n  ...createCustomFocusIndicatorStyle({\n    borderRadius: tokens.borderRadiusCircular,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n  }),\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      borderRight: `${tokens.strokeWidthThin} solid`,\n      position: 'absolute',\n      inset: '-1px',\n      borderRadius: tokens.borderRadiusCircular,\n    },\n  },\n});\n\nconst useRootStyles = makeStyles({\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground2,\n  },\n  outline: {\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n  },\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n  },\n  selected: {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorBrandStroke1),\n\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'none',\n      backgroundColor: 'Highlight',\n      color: 'HighlightText',\n    },\n  },\n  medium: {\n    height: '32px',\n  },\n  small: {\n    height: '24px',\n  },\n  'extra-small': {\n    position: 'relative',\n    height: '20px',\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});\n\nconst useRootDisabledStyles = 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 root slot when Tag is without leading media/icon\n */\nconst useRootWithoutMediaStyles = makeStyles({\n  medium: {\n    paddingLeft: tagSpacingMedium,\n  },\n  small: {\n    paddingLeft: tagSpacingSmall,\n  },\n  'extra-small': {\n    paddingLeft: tagSpacingExtraSmall,\n  },\n});\n/**\n * Styles for root slot when Tag is without dismiss icon\n */\nconst useRootWithoutDismissStyles = makeStyles({\n  medium: {\n    paddingRight: tagSpacingMedium,\n  },\n  small: {\n    paddingRight: tagSpacingSmall,\n  },\n  'extra-small': {\n    paddingRight: tagSpacingExtraSmall,\n  },\n});\n\nexport const useIconStyles = makeStyles({\n  base: {\n    gridArea: 'media',\n    display: 'flex',\n    boxSizing: 'content-box',\n  },\n  medium: {\n    paddingLeft: tagSpacingMedium,\n    paddingRight: tokens.spacingHorizontalXS,\n    width: mediumIconSize,\n    fontSize: mediumIconSize,\n  },\n  small: {\n    paddingLeft: tagSpacingSmall,\n    paddingRight: tokens.spacingHorizontalXXS,\n    width: smallIconSize,\n    fontSize: smallIconSize,\n  },\n  'extra-small': {\n    paddingLeft: tagSpacingExtraSmall,\n    paddingRight: tokens.spacingHorizontalXXS,\n    width: extraSmallIconSize,\n    fontSize: extraSmallIconSize,\n  },\n});\n\nexport const useMediaStyles = makeStyles({\n  base: {\n    gridArea: 'media',\n\n    display: 'flex',\n    paddingLeft: '1px',\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\nconst useDismissIconStyles = makeStyles({\n  base: {\n    gridArea: 'dismissIcon',\n\n    display: 'flex',\n\n    // windows high contrast:\n    '@media (forced-colors: active)': {\n      ':hover': {\n        color: 'Highlight',\n      },\n      ':active': {\n        color: 'Highlight',\n      },\n    },\n  },\n  medium: {\n    paddingLeft: tokens.spacingHorizontalXS,\n    paddingRight: tagSpacingMedium,\n    fontSize: mediumIconSize,\n  },\n  small: {\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tagSpacingSmall,\n    fontSize: smallIconSize,\n  },\n  'extra-small': {\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tagSpacingExtraSmall,\n    fontSize: extraSmallIconSize,\n  },\n\n  filled: {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n  outline: {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n  brand: {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n  selected: {\n    ':hover': {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n    ':active': {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n});\n\nexport const usePrimaryTextStyles = makeStyles({\n  base: {\n    whiteSpace: 'nowrap',\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tokens.spacingHorizontalXXS,\n  },\n\n  medium: {\n    ...typographyStyles.body1,\n  },\n  small: {\n    ...typographyStyles.caption1,\n  },\n  'extra-small': {\n    ...typographyStyles.caption1,\n  },\n\n  withoutSecondaryText: {\n    gridColumnStart: 'primary',\n    gridRowStart: 'primary',\n    gridRowEnd: 'secondary',\n    paddingBottom: tokens.spacingHorizontalXXS,\n  },\n  withSecondaryText: {\n    gridArea: 'primary',\n\n    ...typographyStyles.caption1,\n    marginTop: '-2px',\n  },\n});\n\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n  gridArea: 'secondary',\n  paddingLeft: tokens.spacingHorizontalXXS,\n  paddingRight: tokens.spacingHorizontalXXS,\n  ...typographyStyles.caption2,\n  whiteSpace: 'nowrap',\n});\n\n/**\n * Apply styling to the Tag slots based on the state\n */\nexport const useTagStyles_unstable = (state: TagState): TagState => {\n  'use no memo';\n\n  const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n  const rootCircularBaseClassName = useRootCircularBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n  const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n\n  const iconStyles = useIconStyles();\n  const mediaStyles = useMediaStyles();\n  const dismissIconStyles = useDismissIconStyles();\n  const primaryTextStyles = usePrimaryTextStyles();\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n\n  const { disabled, shape, size, appearance, selected } = state;\n\n  state.root.className = mergeClasses(\n    tagClassNames.root,\n\n    shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName,\n\n    disabled ? rootDisabledStyles[appearance] : rootStyles[appearance],\n    selected && !disabled && rootStyles.selected,\n    rootStyles[size],\n\n    !state.media && !state.icon && rootWithoutMediaStyles[size],\n    !state.dismissIcon && rootWithoutDismissStyles[size],\n\n    state.root.className,\n  );\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      tagClassNames.media,\n      mediaStyles.base,\n      mediaStyles[size],\n      state.media.className,\n    );\n  }\n  if (state.icon) {\n    state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n  }\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      tagClassNames.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      tagClassNames.secondaryText,\n      secondaryTextBaseClassName,\n      state.secondaryText.className,\n    );\n  }\n  if (state.dismissIcon) {\n    state.dismissIcon.className = mergeClasses(\n      tagClassNames.dismissIcon,\n      dismissIconStyles.base,\n      dismissIconStyles[size],\n      !disabled && dismissIconStyles[appearance],\n      selected && !disabled && dismissIconStyles.selected,\n      state.dismissIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","createCustomFocusIndicatorStyle","tagClassNames","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","borderRadius","borderRadiusMedium","outline","strokeWidthThick","colorStrokeFocus2","position","content","borderTop","inset","borderTopLeftRadius","borderTopRightRadius","useRootCircularBaseClassName","borderRadiusCircular","borderLeft","borderRight","useRootStyles","filled","backgroundColor","colorNeutralBackground3","color","colorNeutralForeground2","colorSubtleBackground","borderColor","colorNeutralStroke1","brand","colorBrandBackground2","colorBrandForeground2","selected","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandStroke1","forcedColorAdjust","medium","height","small","left","bottom","top","useRootDisabledStyles","cursor","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useRootWithoutMediaStyles","paddingLeft","useRootWithoutDismissStyles","paddingRight","useIconStyles","base","gridArea","spacingHorizontalXS","fontSize","spacingHorizontalXXS","useMediaStyles","spacingHorizontalS","spacingHorizontalSNudge","useDismissIconStyles","colorCompoundBrandForeground1Hover","colorCompoundBrandForeground1Pressed","usePrimaryTextStyles","whiteSpace","body1","caption1","withoutSecondaryText","gridColumnStart","gridRowStart","gridRowEnd","paddingBottom","withSecondaryText","marginTop","useSecondaryTextBaseClassName","caption2","useTagStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","disabled","shape","size","className"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * TagGroup Base State - omits design-only state
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/components/TagGroup/TagGroup.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagGroup/TagGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot, EventHandler } from '@fluentui/react-utilities';\nimport type {\n  TagSize,\n  TagValue,\n  TagDismissHandler,\n  TagAppearance,\n  TagSelectHandler,\n  TagSelectData,\n} from '../../utils/types';\nimport { TagGroupContextValue } from '../../contexts/tagGroupContext';\nimport * as React from 'react';\n\nexport type TagGroupContextValues = {\n  tagGroup: TagGroupContextValue;\n};\n\nexport type TagGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TagGroup Props\n */\nexport type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {\n  /**\n   * Callback for when a tag is dismissed\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onDismiss?: TagDismissHandler<Value>;\n\n  /**\n   * Sets selected values for an uncontrolled component.\n   */\n  defaultSelectedValues?: Value[];\n\n  /**\n   * A TagGroup can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  size?: TagSize;\n  appearance?: TagAppearance;\n  dismissible?: boolean;\n\n  /**\n   * Callback for when a tag is selected\n   */\n  onTagSelect?: EventHandler<TagSelectData<Value>>;\n\n  /**\n   * Values of the selected tags\n   */\n  selectedValues?: Value[];\n};\n\n/**\n * State used in rendering TagGroup\n */\nexport type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &\n  Required<Pick<TagGroupProps, 'appearance' | 'dismissible' | 'disabled' | 'size' | 'selectedValues'>> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n    handleTagSelect?: TagSelectHandler<Value>;\n    role?: React.AriaRole;\n  };\n\n/**\n * TagGroup Base Props - omits design-only props\n */\nexport type TagGroupBaseProps<Value = TagValue> = Omit<TagGroupProps<Value>, 'appearance' | 'size'>;\n\n/**\n * TagGroup Base State - omits design-only state\n */\nexport type TagGroupBaseState<Value = TagValue> = Omit<TagGroupState<Value>, 'appearance' | 'size'>;\n"],"names":["React"],"mappings":";;;;;iEAUuB,QAAQ"}
+{"version":3,"sources":["../src/components/TagGroup/TagGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot, EventHandler } from '@fluentui/react-utilities';\nimport type {\n  TagSize,\n  TagValue,\n  TagDismissHandler,\n  TagAppearance,\n  TagSelectHandler,\n  TagSelectData,\n} from '../../utils/types';\nimport type { TagGroupContextValue } from '../../contexts/tagGroupContext';\nimport type * as React from 'react';\n\nexport type TagGroupContextValues = {\n  tagGroup: TagGroupContextValue;\n};\n\nexport type TagGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TagGroup Props\n */\nexport type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {\n  /**\n   * Callback for when a tag is dismissed\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onDismiss?: TagDismissHandler<Value>;\n\n  /**\n   * Sets selected values for an uncontrolled component.\n   */\n  defaultSelectedValues?: Value[];\n\n  /**\n   * A TagGroup can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  size?: TagSize;\n  appearance?: TagAppearance;\n  dismissible?: boolean;\n\n  /**\n   * Callback for when a tag is selected\n   */\n  onTagSelect?: EventHandler<TagSelectData<Value>>;\n\n  /**\n   * Values of the selected tags\n   */\n  selectedValues?: Value[];\n};\n\n/**\n * State used in rendering TagGroup\n */\nexport type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &\n  Required<Pick<TagGroupProps, 'appearance' | 'dismissible' | 'disabled' | 'size' | 'selectedValues'>> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n    handleTagSelect?: TagSelectHandler<Value>;\n    role?: React.AriaRole;\n  };\n\n/**\n * TagGroup Base Props - omits design-only props\n */\nexport type TagGroupBaseProps<Value = TagValue> = Omit<TagGroupProps<Value>, 'appearance' | 'size'>;\n\n/**\n * TagGroup Base State - omits design-only state\n */\nexport type TagGroupBaseState<Value = TagValue> = Omit<TagGroupState<Value>, 'appearance' | 'size'>;\n"],"names":[],"mappings":"AAwEA;;CAEC,GACD,WAAoG"}

package/lib-commonjs/contexts/tagGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/tagGroupContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TagGroupState } from '../components/TagGroup/index';\n\nexport const TagGroupContext = React.createContext<TagGroupContextValue | undefined>(undefined);\n\nconst tagGroupContextDefaultValue: TagGroupContextValue = {\n  handleTagDismiss: () => ({}),\n  size: 'medium',\n  role: 'toolbar',\n  handleTagSelect: undefined,\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<\n    Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>\n  >;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = (): TagGroupContextValue =>\n  React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","role","handleTagSelect","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"mappings":"AAAA;;;;;;;;;;;;mBAKaC;;;2BAiBAQ;;;+BAEAE;;;;;iEAtBU,QAAQ;AAGxB,MAAMV,kBAAAA,WAAAA,GAAkBD,OAAME,aAAa,CAAmCC,WAAW;AAEhG,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,EAAC,CAAA;IAC1BC,MAAM;IACNC,MAAM;IACNC,iBAAiBL;AACnB;AAUO,MAAMM,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEzD,MAAMC,8BAA8B;QACzCX;WAAAA,CAAAA,oBAAAA,OAAMY,UAAU,CAACX,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B"}
+{"version":3,"sources":["../src/contexts/tagGroupContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TagGroupState } from '../components/TagGroup/index';\n\nexport const TagGroupContext = React.createContext<TagGroupContextValue | undefined>(undefined);\n\nconst tagGroupContextDefaultValue: TagGroupContextValue = {\n  handleTagDismiss: () => ({}),\n  size: 'medium',\n  role: 'toolbar',\n  handleTagSelect: undefined,\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<\n    Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>\n  >;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = (): TagGroupContextValue =>\n  React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","role","handleTagSelect","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"mappings":"AAAA;;;;;;;;;;;;mBAKaC;;;2BAiBAQ;;;+BAEAE;;;;;iEAtBU,QAAQ;AAGxB,MAAMV,kBAAAA,WAAAA,GAAkBD,OAAME,aAAa,CAAmCC,WAAW;AAEhG,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,EAAC,CAAA;IAC1BC,MAAM;IACNC,MAAM;IACNC,iBAAiBL;AACnB;AAUO,MAAMM,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEzD,MAAMC,8BAA8B;QACzCX;WAAAA,CAAAA,oBAAAA,OAAMY,UAAU,CAACX,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B"}

package/lib-commonjs/utils/types.js

@@ -2,5 +2,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/utils/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\n\nexport type TagAppearance = 'filled' | 'outline' | 'brand';\nexport type TagShape = 'rounded' | 'circular';\nexport type TagSize = 'extra-small' | 'small' | 'medium';\n\nexport type TagValue = string;\n\nexport type TagDismissData<Value = TagValue> = {\n  value: Value;\n};\n\nexport type TagSelectData<Value = TagValue> = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  value: Value;\n  selectedValues?: Value[];\n};\n\nexport type TagDismissEvent = React.MouseEvent | React.KeyboardEvent;\n\nexport type TagDismissHandler<Value = TagValue> = (e: TagDismissEvent, data: TagDismissData<Value>) => void;\n\nexport type TagSelectHandler<Value = TagValue> = EventHandler<TagSelectData<Value>>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/utils/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\n\nexport type TagAppearance = 'filled' | 'outline' | 'brand';\nexport type TagShape = 'rounded' | 'circular';\nexport type TagSize = 'extra-small' | 'small' | 'medium';\n\nexport type TagValue = string;\n\nexport type TagDismissData<Value = TagValue> = {\n  value: Value;\n};\n\nexport type TagSelectData<Value = TagValue> = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  value: Value;\n  selectedValues?: Value[];\n};\n\nexport type TagDismissEvent = React.MouseEvent | React.KeyboardEvent;\n\nexport type TagDismissHandler<Value = TagValue> = (e: TagDismissEvent, data: TagDismissData<Value>) => void;\n\nexport type TagSelectHandler<Value = TagValue> = EventHandler<TagSelectData<Value>>;\n"],"names":[],"mappings":""}

package/lib-commonjs/utils/useTagAvatarContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/useTagAvatarContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AvatarSize, AvatarShape } from '@fluentui/react-avatar';\n\nexport type UseTagAvatarContextValuesOptions = {\n  avatarSize: AvatarSize;\n  avatarShape: AvatarShape;\n};\n\nexport type TagAvatarContextValues = {\n  avatar: {\n    size?: AvatarSize;\n    shape?: AvatarShape;\n  };\n};\n\nexport function useTagAvatarContextValues_unstable(state: UseTagAvatarContextValuesOptions): TagAvatarContextValues {\n  const { avatarSize, avatarShape } = state;\n\n  const avatar = React.useMemo(\n    () => ({\n      size: avatarSize,\n      shape: avatarShape,\n    }),\n    [avatarShape, avatarSize],\n  );\n\n  return {\n    avatar,\n  };\n}\n"],"names":["React","useTagAvatarContextValues_unstable","state","avatarSize","avatarShape","avatar","useMemo","size","shape"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAexB,SAASC,mCAAmCC,KAAuC;IACxF,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAGF;IAEpC,MAAMG,SAASL,OAAMM,OAAO,CAC1B,IAAO,CAAA;YACLC,MAAMJ;YACNK,OAAOJ;SACT,CAAA,EACA;QAACA;QAAaD;KAAW;IAG3B,OAAO;QACLE;IACF;AACF"}
+{"version":3,"sources":["../src/utils/useTagAvatarContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AvatarSize, AvatarShape } from '@fluentui/react-avatar';\n\nexport type UseTagAvatarContextValuesOptions = {\n  avatarSize: AvatarSize;\n  avatarShape: AvatarShape;\n};\n\nexport type TagAvatarContextValues = {\n  avatar: {\n    size?: AvatarSize;\n    shape?: AvatarShape;\n  };\n};\n\nexport function useTagAvatarContextValues_unstable(state: UseTagAvatarContextValuesOptions): TagAvatarContextValues {\n  const { avatarSize, avatarShape } = state;\n\n  const avatar = React.useMemo(\n    () => ({\n      size: avatarSize,\n      shape: avatarShape,\n    }),\n    [avatarShape, avatarSize],\n  );\n\n  return {\n    avatar,\n  };\n}\n"],"names":["React","useTagAvatarContextValues_unstable","state","avatarSize","avatarShape","avatar","useMemo","size","shape"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAexB,SAASC,mCAAmCC,KAAuC;IACxF,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAGF;IAEpC,MAAMG,SAASL,OAAMM,OAAO,CAC1B,IAAO,CAAA;YACLC,MAAMJ;YACNK,OAAOJ;SACT,CAAA,EACA;QAACA;QAAaD;KAAW;IAG3B,OAAO;QACLE;IACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tags",
-  "version": "9.8.0",
+  "version": "9.8.1",
   "description": "Fluent UI Tag component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,14 +13,14 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-aria": "^9.17.10",
-    "@fluentui/react-avatar": "^9.11.0",
+    "@fluentui/react-aria": "^9.17.11",
+    "@fluentui/react-avatar": "^9.11.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-jsx-runtime": "^9.4.2",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.13",
+    "@fluentui/react-tabster": "^9.26.14",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.3",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },