@fluentui/react-tags 9.7.4 → 9.7.6

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @fluentui/react-tags
 
-This log was last generated on Thu, 07 Aug 2025 09:59:13 GMT and should not be manually modified.
+This log was last generated on Mon, 08 Sep 2025 12:41:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.6)
+
+Mon, 08 Sep 2025 12:41:24 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: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 ([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)
 
-Thu, 07 Aug 2025 09:59:13 GMT 
+Thu, 07 Aug 2025 10:03:33 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.3..@fluentui/react-tags_v9.7.4)
 
 ### Patches

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-
 import { AvatarShape } from '@fluentui/react-avatar';
 import { AvatarSize } from '@fluentui/react-avatar';
 import { ComponentProps } from '@fluentui/react-utilities';
@@ -7,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';
@@ -173,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/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/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/useInteractionTagPrimaryStyles.styles.js

@@ -32,13 +32,13 @@ const baseStyles = {
     zIndex: 1
   })
 };
-const useRootRoundedBaseClassName = /*#__PURE__*/__resetStyles("r1tlgozh", "r80ltmz", {
-  r: [".r1tlgozh{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r1tlgozh[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r80ltmz{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r80ltmz[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"],
-  s: ["@media (forced-colors: active){.r1tlgozh{position:relative;}.r1tlgozh::before{content:\"\";border-top:var(--strokeWidthThin) solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);}}", "@media (forced-colors: active){.r80ltmz{position:relative;}.r80ltmz::before{content:\"\";border-top:var(--strokeWidthThin) solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);}}"]
+const useRootRoundedBaseClassName = /*#__PURE__*/__resetStyles("r22quyo", "r1yd8tpa", {
+  r: [".r22quyo{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r22quyo[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r1yd8tpa{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r1yd8tpa[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"],
+  s: ["@media (forced-colors: active){.r22quyo{position:relative;}.r22quyo::before{content:\"\";border-top:var(--strokeWidthThin) solid;position:absolute;inset:-1px;border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);}}", "@media (forced-colors: active){.r1yd8tpa{position:relative;}.r1yd8tpa::before{content:\"\";border-top:var(--strokeWidthThin) solid;position:absolute;inset:-1px;border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);}}"]
 });
-const useRootCircularBaseClassName = /*#__PURE__*/__resetStyles("r1cz4vob", "r1awuv7b", {
-  r: [".r1cz4vob{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r1cz4vob[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r1awuv7b{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r1awuv7b[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"],
-  s: ["@media (forced-colors: active){.r1cz4vob{position:relative;}.r1cz4vob::before{content:\"\";border-top:var(--strokeWidthThin) solid;border-left:var(--strokeWidthThin) solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-top-left-radius:var(--borderRadiusCircular);border-bottom-left-radius:var(--borderRadiusCircular);}}", "@media (forced-colors: active){.r1awuv7b{position:relative;}.r1awuv7b::before{content:\"\";border-top:var(--strokeWidthThin) solid;border-right:var(--strokeWidthThin) solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-top-right-radius:var(--borderRadiusCircular);border-bottom-right-radius:var(--borderRadiusCircular);}}"]
+const useRootCircularBaseClassName = /*#__PURE__*/__resetStyles("r132q0f6", "r15qe99u", {
+  r: [".r132q0f6{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r132q0f6[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r15qe99u{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r15qe99u[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"],
+  s: ["@media (forced-colors: active){.r132q0f6{position:relative;}.r132q0f6::before{content:\"\";border-top:var(--strokeWidthThin) solid;border-left:var(--strokeWidthThin) solid;position:absolute;inset:-1px;border-top-left-radius:var(--borderRadiusCircular);border-bottom-left-radius:var(--borderRadiusCircular);}}", "@media (forced-colors: active){.r15qe99u{position:relative;}.r15qe99u::before{content:\"\";border-top:var(--strokeWidthThin) solid;border-right:var(--strokeWidthThin) solid;position:absolute;inset:-1px;border-top-right-radius:var(--borderRadiusCircular);border-bottom-right-radius:var(--borderRadiusCircular);}}"]
 });
 /**
  * Style override for pseudo element that draws the border for windows high contrast mode
@@ -147,12 +147,20 @@ const useRootStyles = /*#__PURE__*/__styles({
     z189sj: ["fwiuce9", "f15vdbe4"]
   },
   "extra-small": {
-    z189sj: ["fwiuce9", "f15vdbe4"]
+    z189sj: ["fwiuce9", "f15vdbe4"],
+    qhf8xq: "f10pi13n",
+    Bkdsyek: "fqiv1u6",
+    Brfojbq: "fl6l3ok",
+    B1yn5a7: "fiuoxex",
+    Bihq2av: ["f1f187wz", "f12z4n6f"],
+    B2k102m: "fxnjm4l",
+    B1l11lz: "fa2n458",
+    Bgr9gxd: "f1nrpwwh"
   }
 }, {
   d: [".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", [".f1tdnksq{background:var(--colorBrandBackground);}", {
     p: -2
-  }], ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fk9qgl1{border-top-color:var(--colorBrandStroke1);}", ".f1vfbj5f{border-right-color:var(--colorBrandStroke1);}", ".f1qpacp7{border-left-color:var(--colorBrandStroke1);}", ".fdf0ba2{border-bottom-color:var(--colorBrandStroke1);}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}"],
+  }], ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fk9qgl1{border-top-color:var(--colorBrandStroke1);}", ".f1vfbj5f{border-right-color:var(--colorBrandStroke1);}", ".f1qpacp7{border-left-color:var(--colorBrandStroke1);}", ".fdf0ba2{border-bottom-color:var(--colorBrandStroke1);}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}", ".f10pi13n{position:relative;}"],
   h: [".f8491dx:hover{cursor:pointer;}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fqbfmpb:hover .fui-Icon-filled{color:var(--colorNeutralForeground2BrandHover);}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".f1yj72w4:hover{background-color:var(--colorBrandBackground2Hover);}", ".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f10jvnl4:hover .fui-Icon-filled{color:var(--colorNeutralForegroundOnBrand);}"],
   a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".fvpl5sy:active .fui-Icon-filled{display:inline;}", ".f1xblose:active .fui-Icon-filled{color:var(--colorNeutralForeground2BrandPressed);}", ".f8upcvr:active .fui-Icon-regular{display:none;}", ".fy3sl2y:active{background-color:var(--colorBrandBackground2Pressed);}", ".fryz5bw:active{color:var(--colorCompoundBrandForeground1Pressed);}", ".fsp1bjw:active{background-color:var(--colorBrandBackgroundPressed);}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f3wpj5r:active .fui-Icon-filled{color:var(--colorNeutralForegroundOnBrand);}"],
   m: [["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
@@ -173,6 +181,20 @@ const useRootStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1ojl2j2:active{color:HighlightText;}}", {
     m: "(forced-colors: active)"
+  }], ["@media (forced-colors: none){.fqiv1u6:before,.fqiv1u6:after{content:\"\";}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.fl6l3ok:before,.fl6l3ok:after{position:absolute;}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.fiuoxex:before,.fiuoxex:after{height:2px;}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f12z4n6f:before,.f12z4n6f:after{right:0;}.f1f187wz:before,.f1f187wz:after{left:0;}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.fxnjm4l:before,.fxnjm4l:after{width:100%;}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.fa2n458:before{bottom:100%;}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f1nrpwwh:after{top:100%;}}", {
+    m: "(forced-colors: none)"
   }]]
 });
 const useRootDisabledAppearances = /*#__PURE__*/__styles({
@@ -231,7 +253,8 @@ const useRootWithSecondaryActionStyles = /*#__PURE__*/__styles({
     Bbmb7ep: ["fzi6hpg", "fyowgf4"],
     vrafjx: ["f1n71otn", "f1deefiw"],
     B6xbmo0: ["f146y5a9", "f1k2ftg"],
-    kdpuga: ["f1ndz5i7", "f1co4qro"]
+    kdpuga: ["f1ndz5i7", "f1co4qro"],
+    w20ur: ["fjoni7s", "f1xmedr4"]
   },
   medium: {
     z189sj: ["f1vdfbxk", "f1f5gg8d"]
@@ -243,7 +266,10 @@ const useRootWithSecondaryActionStyles = /*#__PURE__*/__styles({
     z189sj: ["fdw0yi8", "fk8j09s"]
   }
 }, {
-  d: [".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f146y5a9[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusNone);}", ".f1k2ftg[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusNone);}", ".f1ndz5i7[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusNone);}", ".f1co4qro[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusNone);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}"]
+  d: [".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f146y5a9[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusNone);}", ".f1k2ftg[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusNone);}", ".f1ndz5i7[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusNone);}", ".f1co4qro[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusNone);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}"],
+  m: [["@media (forced-colors: active){.f1xmedr4::before{border-top-left-radius:0;}.fjoni7s::before{border-top-right-radius:0;}}", {
+    m: "(forced-colors: active)"
+  }]]
 });
 export const useInteractionTagPrimaryStyles_unstable = state => {
   'use no memo';

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","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            top: '-1px',\n            left: '-1px',\n            right: '-1px',\n            bottom: '-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            top: '-1px',\n            left: '-1px',\n            right: '-1px',\n            bottom: '-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    }\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    },\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":["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":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,aAAa,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,6BAA6B,QAAQ,4BAA4B;AAC/H,OAAO,MAAMC,+BAA+B,GAAG;EAC3CC,IAAI,EAAE,2BAA2B;EACjCC,KAAK,EAAE,kCAAkC;EACzCC,IAAI,EAAE,iCAAiC;EACvCC,WAAW,EAAE,wCAAwC;EACrDC,aAAa,EAAE;AACnB,CAAC;AACD,MAAMC,UAAU,GAAG;EACf;EACAC,KAAK,EAAE,SAAS;EAChBC,UAAU,EAAE,SAAS;EACrBC,OAAO,EAAE,KAAK;EACdC,WAAW,EAAE,MAAM;EACnBC,UAAU,EAAE,QAAQ;EACpBC,SAAS,EAAE,OAAO;EAClBC,eAAe,EAAE,aAAa;EAC9BC,OAAO,EAAE,aAAa;EACtBC,MAAM,EAAE,MAAM;EACdC,UAAU,EAAE,QAAQ;EACpBC,iBAAiB,EAAE;AACvB;AACA;AACA,GAAG;EACCC,MAAM,EAAE,GAAGzB,MAAM,CAAC0B,eAAe,UAAU1B,MAAM,CAAC2B,sBAAsB,EAAE;EAC1E,iBAAG5B,+BAA+B,CAAC;IAC/B6B,OAAO,EAAE,GAAG5B,MAAM,CAAC6B,gBAAgB,UAAU7B,MAAM,CAAC8B,iBAAiB,EAAE;IACvEC,MAAM,EAAE;EACZ,CAAC;AACL,CAAC;AACD,MAAMC,2BAA2B,gBAAGrC,aAAA;EAAAsC,CAAA;EAAAC,CAAA;AAAA,CAiBnC,CAAC;AACF,MAAMC,4BAA4B,gBAAGxC,aAAA;EAAAsC,CAAA;EAAAC,CAAA;AAAA,CAkBpC,CAAC;AACF;AACA;AACA;AAAI,MAAME,6BAA6B,gBAAGxC,QAAA;EAAAyC,sBAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAC,CAAA;IAAAD,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAWzC,CAAC;AACF,MAAME,aAAa,gBAAGnD,QAAA;EAAAoD,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA7B,OAAA;IAAAqB,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAV,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAS,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAV,MAAA;IAAAC,MAAA;IAAAU,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAX,OAAA;IAAAC,MAAA;EAAA;EAAAW,KAAA;IAAAnB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAY,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAtB,MAAA;IAAAuB,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA7B,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAmB,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA9B,MAAA;IAAAC,OAAA;IAAAU,MAAA;IAAAP,OAAA;IAAA2B,MAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAW,MAAA;IAAAT,MAAA;IAAA2B,MAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAlD,CAAA;EAAA;EAAAmD,CAAA;EAAAC,CAAA;EAAArD,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA0IrB,CAAC;AACF,MAAMsD,0BAA0B,gBAAGvG,QAAA;EAAAoD,MAAA;IAAAoD,OAAA;IAAAnD,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAjC,OAAA;IAAAwE,OAAA;IAAAnD,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,KAAA;IAAAgC,OAAA;IAAAnD,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAmC,CAAA;AAAA,CAmBlC,CAAC;AACF;AACA;AACA;AAAI,MAAMK,yBAAyB,gBAAGzG,QAAA;EAAAyF,MAAA;IAAAiB,MAAA;EAAA;EAAAf,KAAA;IAAAe,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAN,CAAA;AAAA,CAUrC,CAAC;AACF;AACA;AACA;AAAI,MAAMO,gCAAgC,gBAAG3G,QAAA;EAAA4G,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAlE,KAAA;EAAA;EAAA0C,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAU,CAAA;EAAAnD,CAAA;IAAAA,CAAA;EAAA;AAAA,CAwB5C,CAAC;AACF,OAAO,MAAMiE,uCAAuC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,wBAAwB,GAAGhF,2BAA2B,CAAC,CAAC;EAC9D,MAAMiF,yBAAyB,GAAG9E,4BAA4B,CAAC,CAAC;EAChE,MAAM+E,UAAU,GAAGnE,aAAa,CAAC,CAAC;EAClC,MAAMoE,uBAAuB,GAAGhB,0BAA0B,CAAC,CAAC;EAC5D,MAAMiB,sBAAsB,GAAGf,yBAAyB,CAAC,CAAC;EAC1D,MAAMgB,6BAA6B,GAAGd,gCAAgC,CAAC,CAAC;EACxE,MAAMe,UAAU,GAAGnH,aAAa,CAAC,CAAC;EAClC,MAAMoH,WAAW,GAAGnH,cAAc,CAAC,CAAC;EACpC,MAAMoH,iBAAiB,GAAGnH,oBAAoB,CAAC,CAAC;EAChD,MAAMoH,0BAA0B,GAAGnH,6BAA6B,CAAC,CAAC;EAClE,MAAMoH,0BAA0B,GAAGtF,6BAA6B,CAAC,CAAC;EAClE,MAAM;IAAEuF,QAAQ;IAAEC,KAAK;IAAEC,IAAI;IAAE3G,UAAU;IAAEmD;EAAS,CAAC,GAAG0C,KAAK;EAC7DA,KAAK,CAACvG,IAAI,CAACsH,SAAS,GAAGjI,YAAY,CAACU,+BAA+B,CAACC,IAAI,EAAEoH,KAAK,KAAK,SAAS,GAAGZ,wBAAwB,GAAGC,yBAAyB,EAAEW,KAAK,KAAK,UAAU,IAAI,CAACb,KAAK,CAACgB,kBAAkB,IAAIL,0BAA0B,CAACrF,sBAAsB,EAAEsF,QAAQ,GAAGR,uBAAuB,CAACjG,UAAU,CAAC,GAAGgG,UAAU,CAAChG,UAAU,CAAC,EAAEmD,QAAQ,IAAI,CAACsD,QAAQ,IAAIT,UAAU,CAAC7C,QAAQ,EAAE6C,UAAU,CAACW,IAAI,CAAC,EAAE,CAACd,KAAK,CAACtG,KAAK,IAAI,CAACsG,KAAK,CAACrG,IAAI,IAAI0G,sBAAsB,CAACS,IAAI,CAAC,EAAEd,KAAK,CAACgB,kBAAkB,IAAIV,6BAA6B,CAACb,IAAI,EAAEO,KAAK,CAACgB,kBAAkB,IAAIV,6BAA6B,CAACQ,IAAI,CAAC,EAAEd,KAAK,CAACvG,IAAI,CAACsH,SAAS,CAAC;EAC1lB,IAAIf,KAAK,CAACtG,KAAK,EAAE;IACbsG,KAAK,CAACtG,KAAK,CAACqH,SAAS,GAAGjI,YAAY,CAACU,+BAA+B,CAACE,KAAK,EAAE8G,WAAW,CAACf,IAAI,EAAEe,WAAW,CAACM,IAAI,CAAC,EAAEd,KAAK,CAACtG,KAAK,CAACqH,SAAS,CAAC;EAC3I;EACA,IAAIf,KAAK,CAACrG,IAAI,EAAE;IACZqG,KAAK,CAACrG,IAAI,CAACoH,SAAS,GAAGjI,YAAY,CAACU,+BAA+B,CAACG,IAAI,EAAE4G,UAAU,CAACd,IAAI,EAAEc,UAAU,CAACO,IAAI,CAAC,EAAEd,KAAK,CAACrG,IAAI,CAACoH,SAAS,CAAC;EACtI;EACA,IAAIf,KAAK,CAACpG,WAAW,EAAE;IACnBoG,KAAK,CAACpG,WAAW,CAACmH,SAAS,GAAGjI,YAAY,CAACU,+BAA+B,CAACI,WAAW,EAAE6G,iBAAiB,CAAChB,IAAI,EAAEgB,iBAAiB,CAACK,IAAI,CAAC,EAAEd,KAAK,CAACnG,aAAa,GAAG4G,iBAAiB,CAACQ,iBAAiB,GAAGR,iBAAiB,CAACS,oBAAoB,EAAElB,KAAK,CAACpG,WAAW,CAACmH,SAAS,CAAC;EAC7Q;EACA,IAAIf,KAAK,CAACnG,aAAa,EAAE;IACrBmG,KAAK,CAACnG,aAAa,CAACkH,SAAS,GAAGjI,YAAY,CAACU,+BAA+B,CAACK,aAAa,EAAE6G,0BAA0B,EAAEV,KAAK,CAACnG,aAAa,CAACkH,SAAS,CAAC;EAC1J;EACA,OAAOf,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -44,10 +44,7 @@ const useRootRoundedBaseClassName = makeResetStyles({
             content: '""',
             borderTop: `${tokens.strokeWidthThin} solid`,
             position: 'absolute',
-            top: '-1px',
-            left: '-1px',
-            right: '-1px',
-            bottom: '-1px',
+            inset: '-1px',
             borderTopLeftRadius: tokens.borderRadiusMedium,
             borderTopRightRadius: tokens.borderRadiusMedium
         }
@@ -66,10 +63,7 @@ const useRootCircularBaseClassName = makeResetStyles({
             borderTop: `${tokens.strokeWidthThin} solid`,
             borderLeft: `${tokens.strokeWidthThin} solid`,
             position: 'absolute',
-            top: '-1px',
-            left: '-1px',
-            right: '-1px',
-            bottom: '-1px',
+            inset: '-1px',
             borderTopLeftRadius: tokens.borderRadiusCircular,
             borderBottomLeftRadius: tokens.borderRadiusCircular
         }
@@ -207,7 +201,25 @@ const useRootStyles = makeStyles({
         paddingRight: '5px'
     },
     'extra-small': {
-        paddingRight: '5px'
+        paddingRight: '5px',
+        position: 'relative',
+        // Increase clickable area to meet WCAG 2.2 AA
+        // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
+        '@media (forced-colors: none)': {
+            '&:before, &:after': {
+                content: '""',
+                position: 'absolute',
+                height: '2px',
+                left: '0',
+                width: '100%'
+            },
+            '&:before': {
+                bottom: '100%'
+            },
+            '&:after': {
+                top: '100%'
+            }
+        }
     }
 });
 const useRootDisabledAppearances = makeStyles({
@@ -253,7 +265,12 @@ const useRootDisabledAppearances = makeStyles({
         ...createCustomFocusIndicatorStyle({
             borderTopRightRadius: tokens.borderRadiusNone,
             borderBottomRightRadius: tokens.borderRadiusNone
-        })
+        }),
+        '@media (forced-colors: active)': {
+            '::before': {
+                borderTopRightRadius: '0'
+            }
+        }
     },
     medium: {
         paddingRight: tokens.spacingHorizontalS

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      top: '-1px',\n      left: '-1px',\n      right: '-1px',\n      bottom: '-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      top: '-1px',\n      left: '-1px',\n      right: '-1px',\n      bottom: '-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  },\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  },\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","top","left","right","bottom","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","useRootDisabledAppearances","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useRootWithoutMediaStyles","paddingLeft","useRootWithSecondaryActionStyles","base","borderRadiusNone","borderRightStyle","spacingHorizontalS","spacingHorizontalSNudge","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"mappings":"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"}
+{"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts"],"sourcesContent":["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":"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"}

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/useInteractionTagSecondaryStyles.styles.js

@@ -12,11 +12,15 @@ const useRootStyles = /*#__PURE__*/__styles({
   filled: {
     De3pzq: "f16xq7d1",
     sj55zd: "fkfq4zb",
+    B4j52fo: "fre7gi1",
+    Bn0qgzm: "fqdk4by",
     eoavqd: "f8491dx",
     Jwef8y: "f1h648pw",
     Bi91k9c: "f139oj5f",
     ecr2s2: "fwdzr64",
     lj723h: "f19au66r",
+    gwxt9v: "fah2lgh",
+    Bc736ss: "fx7har",
     Bqrx1nm: "fq7113v",
     kx9iu6: "fp3oj7s"
   },
@@ -39,11 +43,15 @@ const useRootStyles = /*#__PURE__*/__styles({
     De3pzq: "f16xkysk",
     sj55zd: "faj9fo0",
     zhjwy3: ["f1sl6hi9", "f1c8dzaj"],
+    B4j52fo: "fre7gi1",
+    Bn0qgzm: "fqdk4by",
     eoavqd: "f8491dx",
     Jwef8y: "f1yj72w4",
     Bi91k9c: "f3ymbdj",
     ecr2s2: "fy3sl2y",
     lj723h: "fryz5bw",
+    gwxt9v: "fah2lgh",
+    Bc736ss: "fx7har",
     Bqrx1nm: "fq7113v",
     kx9iu6: "fp3oj7s"
   },
@@ -97,15 +105,27 @@ const useRootStyles = /*#__PURE__*/__styles({
   "extra-small": {
     Be2twd7: "f1ugzwwg",
     uwmqm3: ["f15vdbe4", "fwiuce9"],
-    z189sj: ["fwiuce9", "f15vdbe4"]
+    z189sj: ["fwiuce9", "f15vdbe4"],
+    qhf8xq: "f10pi13n",
+    Bkdsyek: "fqiv1u6",
+    Brfojbq: "fl6l3ok",
+    B1yn5a7: "fiuoxex",
+    Bihq2av: ["f1f187wz", "f12z4n6f"],
+    B2k102m: "fxnjm4l",
+    B1l11lz: "fa2n458",
+    Bgr9gxd: "f1nrpwwh"
   }
 }, {
-  d: [".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", [".f1tdnksq{background:var(--colorBrandBackground);}", {
+  d: [".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fre7gi1{border-top-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", [".f1tdnksq{background:var(--colorBrandBackground);}", {
     p: -2
-  }], ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fk9qgl1{border-top-color:var(--colorBrandStroke1);}", ".f1vfbj5f{border-right-color:var(--colorBrandStroke1);}", ".f1qpacp7{border-left-color:var(--colorBrandStroke1);}", ".fdf0ba2{border-bottom-color:var(--colorBrandStroke1);}", ".f4j9k2g{border-left-color:var(--colorNeutralStrokeOnBrand2);}", ".f1mg2euo{border-right-color:var(--colorNeutralStrokeOnBrand2);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fe5j1ua{font-size:20px;}", ".f15vdbe4{padding-left:5px;}", ".fwiuce9{padding-right:5px;}", ".f4ybsrx{font-size:16px;}", ".f2lugmd{padding-left:3px;}", ".f6zblan{padding-right:3px;}", ".f1ugzwwg{font-size:12px;}"],
+  }], ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fk9qgl1{border-top-color:var(--colorBrandStroke1);}", ".f1vfbj5f{border-right-color:var(--colorBrandStroke1);}", ".f1qpacp7{border-left-color:var(--colorBrandStroke1);}", ".fdf0ba2{border-bottom-color:var(--colorBrandStroke1);}", ".f4j9k2g{border-left-color:var(--colorNeutralStrokeOnBrand2);}", ".f1mg2euo{border-right-color:var(--colorNeutralStrokeOnBrand2);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fe5j1ua{font-size:20px;}", ".f15vdbe4{padding-left:5px;}", ".fwiuce9{padding-right:5px;}", ".f4ybsrx{font-size:16px;}", ".f2lugmd{padding-left:3px;}", ".f6zblan{padding-right:3px;}", ".f1ugzwwg{font-size:12px;}", ".f10pi13n{position:relative;}"],
   h: [".f8491dx:hover{cursor:pointer;}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1yj72w4:hover{background-color:var(--colorBrandBackground2Hover);}", ".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}"],
   a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}", ".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".fy3sl2y:active{background-color:var(--colorBrandBackground2Pressed);}", ".fryz5bw:active{color:var(--colorCompoundBrandForeground1Pressed);}", ".fsp1bjw:active{background-color:var(--colorBrandBackgroundPressed);}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}"],
-  m: [["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
+  m: [["@media (forced-colors: active){.fah2lgh{border-top-width:var(--strokeWidthThin);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fx7har{border-bottom-width:var(--strokeWidthThin);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}", {
     m: "(forced-colors: active)"
@@ -123,6 +143,20 @@ const useRootStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1ojl2j2:active{color:HighlightText;}}", {
     m: "(forced-colors: active)"
+  }], ["@media (forced-colors: none){.fqiv1u6:before,.fqiv1u6:after{content:\"\";}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.fl6l3ok:before,.fl6l3ok:after{position:absolute;}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.fiuoxex:before,.fiuoxex:after{height:2px;}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f12z4n6f:before,.f12z4n6f:after{right:0;}.f1f187wz:before,.f1f187wz:after{left:0;}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.fxnjm4l:before,.fxnjm4l:after{width:100%;}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.fa2n458:before{bottom:100%;}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f1nrpwwh:after{top:100%;}}", {
+    m: "(forced-colors: none)"
   }]]
 });
 const useRootDisabledStyles = /*#__PURE__*/__styles({