@fluentui/react-tags 9.7.5 → 9.7.7

package/CHANGELOG.md

@@ -1,23 +1,56 @@
 # Change Log - @fluentui/react-tags
 
-This log was last generated on Thu, 21 Aug 2025 12:20:25 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.7)
+
+Thu, 02 Oct 2025 15:07:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.6..@fluentui/react-tags_v9.7.7)
+
+### Patches
+
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-avatar to v9.9.7 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+
+## [9.7.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.6)
+
+Mon, 08 Sep 2025 12:50:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.5..@fluentui/react-tags_v9.7.6)
+
+### Patches
+
+- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- fix: set default button type for dismissible ([PR #35088](https://github.com/microsoft/fluentui/pull/35088) by vgenaev@gmail.com)
+- Bump @fluentui/react-aria to v9.17.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-avatar to v9.9.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+
 ## [9.7.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.5)
 
-Thu, 21 Aug 2025 12:20:25 GMT 
+Thu, 21 Aug 2025 12:25:22 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.4..@fluentui/react-tags_v9.7.5)
 
 ### Patches
 
 - fix: borders issues with small-circular and HC ([PR #34986](https://github.com/microsoft/fluentui/pull/34986) by vgenaev@gmail.com)
-- Bump @fluentui/react-aria to v9.16.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-avatar to v9.9.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-aria to v9.16.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-avatar to v9.9.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 
 ## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.4)
 

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { ComponentState } 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 { SlotClassNames } from '@fluentui/react-utilities';
@@ -171,27 +172,27 @@ export declare type InteractionTagState<Value = TagValue> = ComponentState<Inter
 /**
  * Render the final JSX of InteractionTag
  */
-export declare const renderInteractionTag_unstable: (state: InteractionTagState, contextValues: InteractionTagContextValues) => JSX.Element;
+export declare const renderInteractionTag_unstable: (state: InteractionTagState, contextValues: InteractionTagContextValues) => JSXElement;
 
 /**
  * Render the final JSX of InteractionTagPrimary
  */
-export declare const renderInteractionTagPrimary_unstable: (state: InteractionTagPrimaryState, contextValues: InteractionTagPrimaryContextValues) => JSX.Element;
+export declare const renderInteractionTagPrimary_unstable: (state: InteractionTagPrimaryState, contextValues: InteractionTagPrimaryContextValues) => JSXElement;
 
 /**
  * Render the final JSX of InteractionTagSecondary
  */
-export declare const renderInteractionTagSecondary_unstable: (state: InteractionTagSecondaryState) => JSX.Element;
+export declare const renderInteractionTagSecondary_unstable: (state: InteractionTagSecondaryState) => JSXElement;
 
 /**
  * Render the final JSX of Tag
  */
-export declare const renderTag_unstable: (state: TagState, contextValues: TagContextValues) => JSX.Element;
+export declare const renderTag_unstable: (state: TagState, contextValues: TagContextValues) => JSXElement;
 
 /**
  * Render the final JSX of TagGroup
  */
-export declare const renderTagGroup_unstable: (state: TagGroupState, contextValue: TagGroupContextValues) => JSX.Element;
+export declare const renderTagGroup_unstable: (state: TagGroupState, contextValue: TagGroupContextValues) => JSXElement;
 
 /**
  * Tag component -  a visual representation of an attribute.

package/lib/components/InteractionTag/InteractionTag.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useInteractionTag_unstable } from './useInteractionTag';
 import { renderInteractionTag_unstable } from './renderInteractionTag';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTag/InteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useInteractionTag_unstable } from './useInteractionTag';\nimport { renderInteractionTag_unstable } from './renderInteractionTag';\nimport { useInteractionTagStyles_unstable } from './useInteractionTagStyles.styles';\nimport { useInteractionTagContextValues_unstable } from './useInteractionTagContextValues';\nimport type { InteractionTagProps } from './InteractionTag.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * InteractionTag component - a visual representation of an attribute with primary and secondary actions.\n * Can have `InteractionTagPrimary` and `InteractionTagSecondary` components as its children.\n */\nexport const InteractionTag: ForwardRefComponent<InteractionTagProps> = React.forwardRef((props, ref) => {\n  const state = useInteractionTag_unstable(props, ref);\n\n  useInteractionTagStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInteractionTagStyles_unstable')(state);\n\n  return renderInteractionTag_unstable(state, useInteractionTagContextValues_unstable(state));\n});\n\nInteractionTag.displayName = 'InteractionTag';\n"],"names":["React","useInteractionTag_unstable","renderInteractionTag_unstable","useInteractionTagStyles_unstable","useInteractionTagContextValues_unstable","useCustomStyleHook_unstable","InteractionTag","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,uCAAuC,QAAQ,mCAAmC;AAG3F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDN,iCAAiCO;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOR,8BAA8BQ,OAAON,wCAAwCM;AACtF,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/InteractionTag/InteractionTag.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useInteractionTag_unstable } from './useInteractionTag';\nimport { renderInteractionTag_unstable } from './renderInteractionTag';\nimport { useInteractionTagStyles_unstable } from './useInteractionTagStyles.styles';\nimport { useInteractionTagContextValues_unstable } from './useInteractionTagContextValues';\nimport type { InteractionTagProps } from './InteractionTag.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * InteractionTag component - a visual representation of an attribute with primary and secondary actions.\n * Can have `InteractionTagPrimary` and `InteractionTagSecondary` components as its children.\n */\nexport const InteractionTag: ForwardRefComponent<InteractionTagProps> = React.forwardRef((props, ref) => {\n  const state = useInteractionTag_unstable(props, ref);\n\n  useInteractionTagStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInteractionTagStyles_unstable')(state);\n\n  return renderInteractionTag_unstable(state, useInteractionTagContextValues_unstable(state));\n});\n\nInteractionTag.displayName = 'InteractionTag';\n"],"names":["React","useInteractionTag_unstable","renderInteractionTag_unstable","useInteractionTagStyles_unstable","useInteractionTagContextValues_unstable","useCustomStyleHook_unstable","InteractionTag","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,uCAAuC,QAAQ,mCAAmC;AAG3F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDN,iCAAiCO;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOR,8BAA8BQ,OAAON,wCAAwCM;AACtF,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

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

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

package/lib/components/InteractionTag/useInteractionTag.js

@@ -1,3 +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":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n  props: InteractionTagProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n  const {\n    handleTagDismiss,\n    handleTagSelect,\n    size: contextSize,\n    disabled: contextDisabled,\n    appearance: contextAppearance,\n    selectedValues = [],\n  } = useTagGroupContext_unstable();\n\n  const id = useId('fui-InteractionTag-', props.id);\n\n  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n  const {\n    appearance = contextAppearance ?? 'filled',\n    disabled = false,\n    selected = false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  return {\n    appearance,\n    disabled: contextDisabled ? true : disabled,\n    handleTagDismiss,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected: selectedValues.includes(value) || selected,\n    selectedValues,\n    shape,\n    size,\n    value,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        disabled: contextDisabled ? true : disabled,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTag_unstable","props","ref","handleTagDismiss","handleTagSelect","size","contextSize","disabled","contextDisabled","appearance","contextAppearance","selectedValues","id","interactionTagPrimaryId","selected","shape","value","includes","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EACJC,gBAAgB,EAChBC,eAAe,EACfC,MAAMC,WAAW,EACjBC,UAAUC,eAAe,EACzBC,YAAYC,iBAAiB,EAC7BC,iBAAiB,EAAE,EACpB,GAAGZ;IAEJ,MAAMa,KAAKf,MAAM,uBAAuBI,MAAMW,EAAE;IAEhD,MAAMC,0BAA0BhB,MAAM;IAEtC,MAAM,EACJY,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CH,WAAW,KAAK,EAChBO,WAAW,KAAK,EAChBC,QAAQ,SAAS,EACjBV,OAAOC,WAAW,EAClBU,QAAQJ,EAAE,EACX,GAAGX;IAEJ,OAAO;QACLQ;QACAF,UAAUC,kBAAkB,OAAOD;QACnCJ;QACAC;QACAS;QACAC,UAAUH,eAAeM,QAAQ,CAACD,UAAUF;QAC5CH;QACAI;QACAV;QACAW;QAEAE,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMrB,KAAKsB,MAAM,CACfxB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRM,UAAUC,kBAAkB,OAAOD;YACnCK;QACF,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTag/useInteractionTag.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n  props: InteractionTagProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n  const {\n    handleTagDismiss,\n    handleTagSelect,\n    size: contextSize,\n    disabled: contextDisabled,\n    appearance: contextAppearance,\n    selectedValues = [],\n  } = useTagGroupContext_unstable();\n\n  const id = useId('fui-InteractionTag-', props.id);\n\n  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n  const {\n    appearance = contextAppearance ?? 'filled',\n    disabled = false,\n    selected = false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  return {\n    appearance,\n    disabled: contextDisabled ? true : disabled,\n    handleTagDismiss,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected: selectedValues.includes(value) || selected,\n    selectedValues,\n    shape,\n    size,\n    value,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        disabled: contextDisabled ? true : disabled,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTag_unstable","props","ref","handleTagDismiss","handleTagSelect","size","contextSize","disabled","contextDisabled","appearance","contextAppearance","selectedValues","id","interactionTagPrimaryId","selected","shape","value","includes","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EACJC,gBAAgB,EAChBC,eAAe,EACfC,MAAMC,WAAW,EACjBC,UAAUC,eAAe,EACzBC,YAAYC,iBAAiB,EAC7BC,iBAAiB,EAAE,EACpB,GAAGZ;IAEJ,MAAMa,KAAKf,MAAM,uBAAuBI,MAAMW,EAAE;IAEhD,MAAMC,0BAA0BhB,MAAM;IAEtC,MAAM,EACJY,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CH,WAAW,KAAK,EAChBO,WAAW,KAAK,EAChBC,QAAQ,SAAS,EACjBV,OAAOC,WAAW,EAClBU,QAAQJ,EAAE,EACX,GAAGX;IAEJ,OAAO;QACLQ;QACAF,UAAUC,kBAAkB,OAAOD;QACnCJ;QACAC;QACAS;QACAC,UAAUH,eAAeM,QAAQ,CAACD,UAAUF;QAC5CH;QACAI;QACAV;QACAW;QAEAE,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMrB,KAAKsB,MAAM,CACfxB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRM,UAAUC,kBAAkB,OAAOD;YACnCK;QACF,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/InteractionTag/useInteractionTagContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export function useInteractionTagContextValues_unstable(state) {
     const { appearance, disabled, handleTagDismiss, handleTagSelect, interactionTagPrimaryId, selected, selectedValues, shape, size, value } = state;

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

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

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const interactionTagClassNames = {

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const interactionTagClassNames = {

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

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

package/lib/components/InteractionTagPrimary/InteractionTagPrimary.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useInteractionTagPrimary_unstable } from './useInteractionTagPrimary';
 import { renderInteractionTagPrimary_unstable } from './renderInteractionTagPrimary';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagPrimary/InteractionTagPrimary.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useInteractionTagPrimary_unstable } from './useInteractionTagPrimary';\nimport { renderInteractionTagPrimary_unstable } from './renderInteractionTagPrimary';\nimport { useInteractionTagPrimaryStyles_unstable } from './useInteractionTagPrimaryStyles.styles';\nimport type { InteractionTagPrimaryProps } from './InteractionTagPrimary.types';\nimport { useTagAvatarContextValues_unstable } from '../../utils';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * InteractionTagPrimary component - used as the first child of the `InteractionTag` component.\n * Provides visual attributes such as media, icon, primary and secondary text, as well as the ability to attach a primary action.\n */\nexport const InteractionTagPrimary: ForwardRefComponent<InteractionTagPrimaryProps> = React.forwardRef((props, ref) => {\n  const state = useInteractionTagPrimary_unstable(props, ref);\n\n  useInteractionTagPrimaryStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInteractionTagPrimaryStyles_unstable')(state);\n\n  return renderInteractionTagPrimary_unstable(state, useTagAvatarContextValues_unstable(state));\n});\n\nInteractionTagPrimary.displayName = 'InteractionTagPrimary';\n"],"names":["React","useInteractionTagPrimary_unstable","renderInteractionTagPrimary_unstable","useInteractionTagPrimaryStyles_unstable","useTagAvatarContextValues_unstable","useCustomStyleHook_unstable","InteractionTagPrimary","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAElG,SAASC,kCAAkC,QAAQ,cAAc;AACjE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,sCAAyEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQT,kCAAkCO,OAAOC;IAEvDN,wCAAwCO;IAExCL,4BAA4B,2CAA2CK;IAEvE,OAAOR,qCAAqCQ,OAAON,mCAAmCM;AACxF,GAAG;AAEHJ,sBAAsBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/InteractionTagPrimary/InteractionTagPrimary.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useInteractionTagPrimary_unstable } from './useInteractionTagPrimary';\nimport { renderInteractionTagPrimary_unstable } from './renderInteractionTagPrimary';\nimport { useInteractionTagPrimaryStyles_unstable } from './useInteractionTagPrimaryStyles.styles';\nimport type { InteractionTagPrimaryProps } from './InteractionTagPrimary.types';\nimport { useTagAvatarContextValues_unstable } from '../../utils';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * InteractionTagPrimary component - used as the first child of the `InteractionTag` component.\n * Provides visual attributes such as media, icon, primary and secondary text, as well as the ability to attach a primary action.\n */\nexport const InteractionTagPrimary: ForwardRefComponent<InteractionTagPrimaryProps> = React.forwardRef((props, ref) => {\n  const state = useInteractionTagPrimary_unstable(props, ref);\n\n  useInteractionTagPrimaryStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInteractionTagPrimaryStyles_unstable')(state);\n\n  return renderInteractionTagPrimary_unstable(state, useTagAvatarContextValues_unstable(state));\n});\n\nInteractionTagPrimary.displayName = 'InteractionTagPrimary';\n"],"names":["React","useInteractionTagPrimary_unstable","renderInteractionTagPrimary_unstable","useInteractionTagPrimaryStyles_unstable","useTagAvatarContextValues_unstable","useCustomStyleHook_unstable","InteractionTagPrimary","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAElG,SAASC,kCAAkC,QAAQ,cAAc;AACjE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,sCAAyEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQT,kCAAkCO,OAAOC;IAEvDN,wCAAwCO;IAExCL,4BAA4B,2CAA2CK;IAEvE,OAAOR,qCAAqCQ,OAAON,mCAAmCM;AACxF,GAAG;AAEHJ,sBAAsBK,WAAW,GAAG"}

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

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

package/lib/components/InteractionTagPrimary/useInteractionTagPrimary.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimary.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { InteractionTagPrimaryProps, InteractionTagPrimaryState } from './InteractionTagPrimary.types';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n\nconst avatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst avatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render InteractionTagPrimary.\n *\n * The returned state can be modified with hooks such as useInteractionTagPrimaryStyles_unstable,\n * before being passed to renderInteractionTagPrimary_unstable.\n *\n * @param props - props from this instance of InteractionTagPrimary\n * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary\n */\nexport const useInteractionTagPrimary_unstable = (\n  props: InteractionTagPrimaryProps,\n  ref: React.Ref<HTMLButtonElement>,\n): InteractionTagPrimaryState => {\n  const {\n    appearance,\n    disabled,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected: contextSelected,\n    selectedValues,\n    shape,\n    size,\n    value,\n  } = useInteractionTagContext_unstable();\n  const { hasSecondaryAction = false } = props;\n\n  const onClick = useEventCallback(\n    mergeCallbacks(props?.onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      handleTagSelect?.(event, { type: 'click', event, value, selectedValues }),\n    ),\n  );\n\n  return {\n    appearance,\n    avatarShape: avatarShapeMap[shape],\n    avatarSize: avatarSizeMap[size],\n    disabled,\n    hasSecondaryAction,\n    selected: contextSelected,\n    shape,\n    size,\n\n    components: {\n      root: 'button',\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        disabled,\n        id: interactionTagPrimaryId,\n        ...(handleTagSelect !== undefined && { 'aria-pressed': contextSelected }),\n        onClick,\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n\n    media: slot.optional(props.media, { elementType: 'span' }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    primaryText: slot.optional(props.primaryText, {\n      renderByDefault: true,\n      defaultProps: {\n        children: props.children,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","useInteractionTagContext_unstable","avatarSizeMap","medium","small","avatarShapeMap","rounded","circular","useInteractionTagPrimary_unstable","props","ref","appearance","disabled","handleTagSelect","interactionTagPrimaryId","selected","contextSelected","selectedValues","shape","size","value","hasSecondaryAction","onClick","event","type","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","always","id","undefined","elementType","optional","renderByDefault","defaultProps","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAE7G,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACvBC,UAAUC,eAAe,EACzBC,cAAc,EACdC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGnB;IACJ,MAAM,EAAEoB,qBAAqB,KAAK,EAAE,GAAGZ;IAEvC,MAAMa,UAAUtB,iBACdF,eAAeW,kBAAAA,4BAAAA,MAAOa,OAAO,EAAE,CAACC,QAC9BV,4BAAAA,sCAAAA,gBAAkBU,OAAO;YAAEC,MAAM;YAASD;YAAOH;YAAOH;QAAe;IAI3E,OAAO;QACLN;QACAc,aAAapB,cAAc,CAACa,MAAM;QAClCQ,YAAYxB,aAAa,CAACiB,KAAK;QAC/BP;QACAS;QACAN,UAAUC;QACVE;QACAC;QAEAQ,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;QACjB;QAEAJ,MAAM7B,KAAKkC,MAAM,CACfpC,yBAAyB,UAAU;YACjCa;YACAE;YACAsB,IAAIpB;YACJ,GAAID,oBAAoBsB,aAAa;gBAAE,gBAAgBnB;YAAgB,CAAC;YACxEM;YACA,GAAGb,KAAK;QACV,IACA;YAAE2B,aAAa;QAAS;QAG1BP,OAAO9B,KAAKsC,QAAQ,CAAC5B,MAAMoB,KAAK,EAAE;YAAEO,aAAa;QAAO;QACxDN,MAAM/B,KAAKsC,QAAQ,CAAC5B,MAAMqB,IAAI,EAAE;YAAEM,aAAa;QAAO;QACtDL,aAAahC,KAAKsC,QAAQ,CAAC5B,MAAMsB,WAAW,EAAE;YAC5CO,iBAAiB;YACjBC,cAAc;gBACZC,UAAU/B,MAAM+B,QAAQ;YAC1B;YACAJ,aAAa;QACf;QACAJ,eAAejC,KAAKsC,QAAQ,CAAC5B,MAAMuB,aAAa,EAAE;YAAEI,aAAa;QAAO;IAC1E;AACF,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimary.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { InteractionTagPrimaryProps, InteractionTagPrimaryState } from './InteractionTagPrimary.types';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n\nconst avatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst avatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render InteractionTagPrimary.\n *\n * The returned state can be modified with hooks such as useInteractionTagPrimaryStyles_unstable,\n * before being passed to renderInteractionTagPrimary_unstable.\n *\n * @param props - props from this instance of InteractionTagPrimary\n * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary\n */\nexport const useInteractionTagPrimary_unstable = (\n  props: InteractionTagPrimaryProps,\n  ref: React.Ref<HTMLButtonElement>,\n): InteractionTagPrimaryState => {\n  const {\n    appearance,\n    disabled,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected: contextSelected,\n    selectedValues,\n    shape,\n    size,\n    value,\n  } = useInteractionTagContext_unstable();\n  const { hasSecondaryAction = false } = props;\n\n  const onClick = useEventCallback(\n    mergeCallbacks(props?.onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      handleTagSelect?.(event, { type: 'click', event, value, selectedValues }),\n    ),\n  );\n\n  return {\n    appearance,\n    avatarShape: avatarShapeMap[shape],\n    avatarSize: avatarSizeMap[size],\n    disabled,\n    hasSecondaryAction,\n    selected: contextSelected,\n    shape,\n    size,\n\n    components: {\n      root: 'button',\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        disabled,\n        id: interactionTagPrimaryId,\n        ...(handleTagSelect !== undefined && { 'aria-pressed': contextSelected }),\n        onClick,\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n\n    media: slot.optional(props.media, { elementType: 'span' }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    primaryText: slot.optional(props.primaryText, {\n      renderByDefault: true,\n      defaultProps: {\n        children: props.children,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","useInteractionTagContext_unstable","avatarSizeMap","medium","small","avatarShapeMap","rounded","circular","useInteractionTagPrimary_unstable","props","ref","appearance","disabled","handleTagSelect","interactionTagPrimaryId","selected","contextSelected","selectedValues","shape","size","value","hasSecondaryAction","onClick","event","type","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","always","id","undefined","elementType","optional","renderByDefault","defaultProps","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAE7G,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACvBC,UAAUC,eAAe,EACzBC,cAAc,EACdC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGnB;IACJ,MAAM,EAAEoB,qBAAqB,KAAK,EAAE,GAAGZ;IAEvC,MAAMa,UAAUtB,iBACdF,eAAeW,kBAAAA,4BAAAA,MAAOa,OAAO,EAAE,CAACC,QAC9BV,4BAAAA,sCAAAA,gBAAkBU,OAAO;YAAEC,MAAM;YAASD;YAAOH;YAAOH;QAAe;IAI3E,OAAO;QACLN;QACAc,aAAapB,cAAc,CAACa,MAAM;QAClCQ,YAAYxB,aAAa,CAACiB,KAAK;QAC/BP;QACAS;QACAN,UAAUC;QACVE;QACAC;QAEAQ,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;QACjB;QAEAJ,MAAM7B,KAAKkC,MAAM,CACfpC,yBAAyB,UAAU;YACjCa;YACAE;YACAsB,IAAIpB;YACJ,GAAID,oBAAoBsB,aAAa;gBAAE,gBAAgBnB;YAAgB,CAAC;YACxEM;YACA,GAAGb,KAAK;QACV,IACA;YAAE2B,aAAa;QAAS;QAG1BP,OAAO9B,KAAKsC,QAAQ,CAAC5B,MAAMoB,KAAK,EAAE;YAAEO,aAAa;QAAO;QACxDN,MAAM/B,KAAKsC,QAAQ,CAAC5B,MAAMqB,IAAI,EAAE;YAAEM,aAAa;QAAO;QACtDL,aAAahC,KAAKsC,QAAQ,CAAC5B,MAAMsB,WAAW,EAAE;YAC5CO,iBAAiB;YACjBC,cAAc;gBACZC,UAAU/B,MAAM+B,QAAQ;YAC1B;YACAJ,aAAa;QACf;QACAJ,eAAejC,KAAKsC,QAAQ,CAAC5B,MAAMuB,aAAa,EAAE;YAAEI,aAAa;QAAO;IAC1E;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts"],"sourcesContent":["import { 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":"AAAA,SAA4BA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAG1G,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,wBAAwB;AAClF,SACEC,aAAa,EACbC,cAAc,EACdC,oBAAoB,EACpBC,6BAA6B,QACxB,6BAA6B;AAEpC,OAAO,MAAMC,kCAA8E;IACzFC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,aAAa;IACbC,eAAe;AACjB,EAAE;AAEF,MAAMC,aAAgC;IACpC,8BAA8B;IAC9BC,OAAO;IACPC,YAAY;IACZC,SAAS;IACTC,aAAa;IACbC,YAAY;IACZC,WAAW;IACXC,iBAAiB;IAEjBC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,mBAAmB,CAAC;;;EAGpB,CAAC;IAEDC,QAAQ,GAAGzB,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO2B,sBAAsB,EAAE;IAC1E,GAAG5B,gCAAgC;QACjC6B,SAAS,GAAG5B,OAAO6B,gBAAgB,CAAC,OAAO,EAAE7B,OAAO8B,iBAAiB,EAAE;QACvEC,QAAQ;IACV,EAAE;AACJ;AAEA,MAAMC,8BAA8BrC,gBAAgB;IAClD,GAAGkB,UAAU;IACboB,cAAcjC,OAAOkC,kBAAkB;IAEvC;;;GAGC,GACD,kCAAkC;QAChCC,UAAU;QACV,YAAY;YACVC,SAAS;YACTC,WAAW,GAAGrC,OAAO0B,eAAe,CAAC,MAAM,CAAC;YAC5CS,UAAU;YACVG,OAAO;YACPC,qBAAqBvC,OAAOkC,kBAAkB;YAC9CM,sBAAsBxC,OAAOkC,kBAAkB;QACjD;IACF;AACF;AAEA,MAAMO,+BAA+B9C,gBAAgB;IACnD,GAAGkB,UAAU;IACboB,cAAcjC,OAAO0C,oBAAoB;IAEzC;;;GAGC,GACD,kCAAkC;QAChCP,UAAU;QACV,YAAY;YACVC,SAAS;YACTC,WAAW,GAAGrC,OAAO0B,eAAe,CAAC,MAAM,CAAC;YAC5CiB,YAAY,GAAG3C,OAAO0B,eAAe,CAAC,MAAM,CAAC;YAC7CS,UAAU;YACVG,OAAO;YACPC,qBAAqBvC,OAAO0C,oBAAoB;YAChDE,wBAAwB5C,OAAO0C,oBAAoB;QACrD;IACF;AACF;AAEA;;CAEC,GACD,MAAMG,gCAAgCjD,WAAW;IAC/CkD,wBAAwB;QACtB,kCAAkC;YAChCX,UAAU;YACV,YAAY;gBACVY,aAAa,GAAG/C,OAAO0B,eAAe,CAAC,kBAAkB,CAAC;gBAC1Dc,sBAAsBxC,OAAO0C,oBAAoB;gBACjDM,yBAAyBhD,OAAO0C,oBAAoB;YACtD;QACF;IACF;AACF;AAEA,MAAMO,gBAAgBrD,WAAW;IAC/BsD,QAAQ;QACN9B,iBAAiBpB,OAAOmD,uBAAuB;QAC/CrC,OAAOd,OAAOoD,uBAAuB;QACrC,UAAU;YACRC,QAAQ;YACRjC,iBAAiBpB,OAAOsD,4BAA4B;YACpDxC,OAAOd,OAAOuD,4BAA4B;QAC5C;QACA,WAAW;YACTnC,iBAAiBpB,OAAOwD,8BAA8B;YACtD1C,OAAOd,OAAOyD,8BAA8B;QAC9C;QACA,kCAAkC;YAChC,UAAU;gBACRrC,iBAAiB;YACnB;YACA,WAAW;gBACTA,iBAAiB;YACnB;QACF;IACF;IACAQ,SAAS;QACPR,iBAAiBpB,OAAO0D,qBAAqB;QAC7C5C,OAAOd,OAAOoD,uBAAuB;QACrC,GAAGtD,WAAW6D,WAAW,CAAC3D,OAAO4D,mBAAmB,CAAC;QACrD,UAAU;YACRP,QAAQ;YACRjC,iBAAiBpB,OAAO6D,0BAA0B;YAClD/C,OAAOd,OAAOuD,4BAA4B;YAE1C,CAAC,CAAC,GAAG,EAAEtD,qBAAqB,CAAC,EAAE;gBAC7BoB,SAAS;gBACTP,OAAOd,OAAO8D,iCAAiC;YACjD;YACA,CAAC,CAAC,GAAG,EAAE5D,sBAAsB,CAAC,EAAE;gBAC9BmB,SAAS;YACX;QACF;QACA,WAAW;YACTD,iBAAiBpB,OAAO+D,4BAA4B;YACpDjD,OAAOd,OAAOyD,8BAA8B;YAE5C,CAAC,CAAC,GAAG,EAAExD,qBAAqB,CAAC,EAAE;gBAC7BoB,SAAS;gBACTP,OAAOd,OAAOgE,mCAAmC;YACnD;YACA,CAAC,CAAC,GAAG,EAAE9D,sBAAsB,CAAC,EAAE;gBAC9BmB,SAAS;YACX;QACF;QACA,kCAAkC;YAChC,UAAU;gBACRD,iBAAiB;YACnB;YACA,WAAW;gBACTA,iBAAiB;YACnB;QACF;IACF;IACA6C,OAAO;QACL7C,iBAAiBpB,OAAOkE,qBAAqB;QAC7CpD,OAAOd,OAAOmE,qBAAqB;QACnC,UAAU;YACRd,QAAQ;YACRjC,iBAAiBpB,OAAOoE,0BAA0B;YAClDtD,OAAOd,OAAOqE,kCAAkC;QAClD;QACA,WAAW;YACTjD,iBAAiBpB,OAAOsE,4BAA4B;YACpDxD,OAAOd,OAAOuE,oCAAoC;QACpD;QACA,kCAAkC;YAChC,UAAU;gBACRnD,iBAAiB;YACnB;YACA,WAAW;gBACTA,iBAAiB;YACnB;QACF;IACF;IACAoD,UAAU;QACRC,YAAYzE,OAAO0E,oBAAoB;QACvC5D,OAAOd,OAAO2E,6BAA6B;QAC3C,GAAG7E,WAAW6D,WAAW,CAAC3D,OAAO4E,iBAAiB,CAAC;QACnD,kCAAkC;YAChCC,mBAAmB;YACnBzD,iBAAiB;YACjBN,OAAO;QACT;QAEA,UAAU;YACRM,iBAAiBpB,OAAO8E,yBAAyB;YACjDhE,OAAOd,OAAO2E,6BAA6B;YAC3C,CAAC,CAAC,GAAG,EAAE1E,qBAAqB,CAAC,EAAE;gBAC7Ba,OAAOd,OAAO2E,6BAA6B;YAC7C;YACA,kCAAkC;gBAChCvD,iBAAiB;gBACjBN,OAAO;YACT;QACF;QACA,WAAW;YACTM,iBAAiBpB,OAAO+E,2BAA2B;YACnDjE,OAAOd,OAAO2E,6BAA6B;YAC3C,CAAC,CAAC,GAAG,EAAE1E,qBAAqB,CAAC,EAAE;gBAC7Ba,OAAOd,OAAO2E,6BAA6B;YAC7C;YACA,kCAAkC;gBAChCvD,iBAAiB;gBACjBN,OAAO;YACT;QACF;IACF;IACAkE,QAAQ;QACNC,cAAc;IAChB;IACAC,OAAO;QACLD,cAAc;IAChB;IACA,eAAe;QACbA,cAAc;QACd9C,UAAU;QAEV,8CAA8C;QAC9C,uEAAuE;QACvE,gCAAgC;YAC9B,qBAAqB;gBACnBC,SAAS;gBACTD,UAAU;gBACVb,QAAQ;gBACR6D,MAAM;gBACNC,OAAO;YACT;YACA,YAAY;gBACVC,QAAQ;YACV;YACA,WAAW;gBACTC,KAAK;YACP;QACF;IACF;AACF;AACA,MAAMC,6BAA6B3F,WAAW;IAC5CsD,QAAQ;QACNG,QAAQ;QACRjC,iBAAiBpB,OAAOwF,8BAA8B;QACtD1E,OAAOd,OAAOyF,8BAA8B;QAC5C,GAAG3F,WAAW6D,WAAW,CAAC3D,OAAO0F,8BAA8B,CAAC;IAClE;IACA9D,SAAS;QACPyB,QAAQ;QACRjC,iBAAiBpB,OAAO0D,qBAAqB;QAC7C5C,OAAOd,OAAOyF,8BAA8B;QAC5C,GAAG3F,WAAW6D,WAAW,CAAC3D,OAAO2F,0BAA0B,CAAC;IAC9D;IACA1B,OAAO;QACLZ,QAAQ;QACRjC,iBAAiBpB,OAAOwF,8BAA8B;QACtD1E,OAAOd,OAAOyF,8BAA8B;QAC5C,GAAG3F,WAAW6D,WAAW,CAAC3D,OAAO0F,8BAA8B,CAAC;IAClE;AACF;AAEA;;CAEC,GACD,MAAME,4BAA4BhG,WAAW;IAC3CoF,QAAQ;QACNa,aAAa;IACf;IACAX,OAAO;QACLW,aAAa;IACf;IACA,eAAe;QACbA,aAAa;IACf;AACF;AACA;;CAEC,GACD,MAAMC,mCAAmClG,WAAW;IAClDmG,MAAM;QACJvD,sBAAsBxC,OAAOgG,gBAAgB;QAC7ChD,yBAAyBhD,OAAOgG,gBAAgB;QAChDC,kBAAkB;QAClB,GAAGlG,gCAAgC;YACjCyC,sBAAsBxC,OAAOgG,gBAAgB;YAC7ChD,yBAAyBhD,OAAOgG,gBAAgB;QAClD,EAAE;QACF,kCAAkC;YAChC,YAAY;gBACVxD,sBAAsB;YACxB;QACF;IACF;IACAwC,QAAQ;QACNC,cAAcjF,OAAOkG,kBAAkB;IACzC;IACAhB,OAAO;QACLD,cAAcjF,OAAOmG,uBAAuB;IAC9C;IACA,eAAe;QACblB,cAAcjF,OAAOmG,uBAAuB;IAC9C;AACF;AAEA,OAAO,MAAMC,0CAA0C,CACrDC;IAEA;IAEA,MAAMC,2BAA2BtE;IACjC,MAAMuE,4BAA4B9D;IAClC,MAAM+D,aAAavD;IACnB,MAAMwD,0BAA0BlB;IAChC,MAAMmB,yBAAyBd;IAC/B,MAAMe,gCAAgCb;IAEtC,MAAMc,aAAazG;IACnB,MAAM0G,cAAczG;IACpB,MAAM0G,oBAAoBzG;IAC1B,MAAM0G,6BAA6BzG;IAEnC,MAAM0G,6BAA6BnE;IAEnC,MAAM,EAAEoE,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEjG,UAAU,EAAEsD,QAAQ,EAAE,GAAG6B;IAExDA,MAAM7F,IAAI,CAAC4G,SAAS,GAAGvH,aACrBU,gCAAgCC,IAAI,EAEpC0G,UAAU,YAAYZ,2BAA2BC,2BAEjDW,UAAU,cAAc,CAACb,MAAMgB,kBAAkB,IAAIL,2BAA2BlE,sBAAsB,EAEtGmE,WAAWR,uBAAuB,CAACvF,WAAW,GAAGsF,UAAU,CAACtF,WAAW,EACvEsD,YAAY,CAACyC,YAAYT,WAAWhC,QAAQ,EAC5CgC,UAAU,CAACW,KAAK,EAEhB,CAACd,MAAM5F,KAAK,IAAI,CAAC4F,MAAM3F,IAAI,IAAIgG,sBAAsB,CAACS,KAAK,EAC3Dd,MAAMgB,kBAAkB,IAAIV,8BAA8BZ,IAAI,EAC9DM,MAAMgB,kBAAkB,IAAIV,6BAA6B,CAACQ,KAAK,EAE/Dd,MAAM7F,IAAI,CAAC4G,SAAS;IAGtB,IAAIf,MAAM5F,KAAK,EAAE;QACf4F,MAAM5F,KAAK,CAAC2G,SAAS,GAAGvH,aACtBU,gCAAgCE,KAAK,EACrCoG,YAAYd,IAAI,EAChBc,WAAW,CAACM,KAAK,EACjBd,MAAM5F,KAAK,CAAC2G,SAAS;IAEzB;IACA,IAAIf,MAAM3F,IAAI,EAAE;QACd2F,MAAM3F,IAAI,CAAC0G,SAAS,GAAGvH,aACrBU,gCAAgCG,IAAI,EACpCkG,WAAWb,IAAI,EACfa,UAAU,CAACO,KAAK,EAChBd,MAAM3F,IAAI,CAAC0G,SAAS;IAExB;IACA,IAAIf,MAAM1F,WAAW,EAAE;QACrB0F,MAAM1F,WAAW,CAACyG,SAAS,GAAGvH,aAC5BU,gCAAgCI,WAAW,EAE3CmG,kBAAkBf,IAAI,EACtBe,iBAAiB,CAACK,KAAK,EAEvBd,MAAMzF,aAAa,GAAGkG,kBAAkBQ,iBAAiB,GAAGR,kBAAkBS,oBAAoB,EAElGlB,MAAM1F,WAAW,CAACyG,SAAS;IAE/B;IACA,IAAIf,MAAMzF,aAAa,EAAE;QACvByF,MAAMzF,aAAa,CAACwG,SAAS,GAAGvH,aAC9BU,gCAAgCK,aAAa,EAC7CmG,4BACAV,MAAMzF,aAAa,CAACwG,SAAS;IAEjC;IAEA,OAAOf;AACT,EAAE"}
+{"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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"}

package/lib/components/InteractionTagSecondary/InteractionTagSecondary.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useInteractionTagSecondary_unstable } from './useInteractionTagSecondary';
 import { renderInteractionTagSecondary_unstable } from './renderInteractionTagSecondary';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagSecondary/InteractionTagSecondary.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useInteractionTagSecondary_unstable } from './useInteractionTagSecondary';\nimport { renderInteractionTagSecondary_unstable } from './renderInteractionTagSecondary';\nimport { useInteractionTagSecondaryStyles_unstable } from './useInteractionTagSecondaryStyles.styles';\nimport type { InteractionTagSecondaryProps } from './InteractionTagSecondary.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * InteractionTagSecondary component - used as the second child of the `InteractionTag` component and provides the secondary action, which is dismiss by default.\n */\nexport const InteractionTagSecondary: ForwardRefComponent<InteractionTagSecondaryProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useInteractionTagSecondary_unstable(props, ref);\n\n    useInteractionTagSecondaryStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useInteractionTagSecondaryStyles_unstable')(state);\n\n    return renderInteractionTagSecondary_unstable(state);\n  },\n);\n\nInteractionTagSecondary.displayName = 'InteractionTagSecondary';\n"],"names":["React","useInteractionTagSecondary_unstable","renderInteractionTagSecondary_unstable","useInteractionTagSecondaryStyles_unstable","useCustomStyleHook_unstable","InteractionTagSecondary","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,yCAAyC,QAAQ,4CAA4C;AAEtG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wCAA6EL,MAAMM,UAAU,CACxG,CAACC,OAAOC;IACN,MAAMC,QAAQR,oCAAoCM,OAAOC;IAEzDL,0CAA0CM;IAE1CL,4BAA4B,6CAA6CK;IAEzE,OAAOP,uCAAuCO;AAChD,GACA;AAEFJ,wBAAwBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/InteractionTagSecondary/InteractionTagSecondary.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useInteractionTagSecondary_unstable } from './useInteractionTagSecondary';\nimport { renderInteractionTagSecondary_unstable } from './renderInteractionTagSecondary';\nimport { useInteractionTagSecondaryStyles_unstable } from './useInteractionTagSecondaryStyles.styles';\nimport type { InteractionTagSecondaryProps } from './InteractionTagSecondary.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * InteractionTagSecondary component - used as the second child of the `InteractionTag` component and provides the secondary action, which is dismiss by default.\n */\nexport const InteractionTagSecondary: ForwardRefComponent<InteractionTagSecondaryProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useInteractionTagSecondary_unstable(props, ref);\n\n    useInteractionTagSecondaryStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useInteractionTagSecondaryStyles_unstable')(state);\n\n    return renderInteractionTagSecondary_unstable(state);\n  },\n);\n\nInteractionTagSecondary.displayName = 'InteractionTagSecondary';\n"],"names":["React","useInteractionTagSecondary_unstable","renderInteractionTagSecondary_unstable","useInteractionTagSecondaryStyles_unstable","useCustomStyleHook_unstable","InteractionTagSecondary","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,yCAAyC,QAAQ,4CAA4C;AAEtG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wCAA6EL,MAAMM,UAAU,CACxG,CAACC,OAAOC;IACN,MAAMC,QAAQR,oCAAoCM,OAAOC;IAEzDL,0CAA0CM;IAE1CL,4BAA4B,6CAA6CK;IAEzE,OAAOP,uCAAuCO;AAChD,GACA;AAEFJ,wBAAwBK,WAAW,GAAG"}

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

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

package/lib/components/InteractionTagSecondary/useInteractionTagSecondary.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, useEventCallback, slot, useId } from '@fluentui/react-utilities';
 import { Delete, Backspace } from '@fluentui/keyboard-keys';