@fluentui/react-tags 9.2.0 → 9.3.0

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @fluentui/react-tags
 
-This log was last generated on Mon, 25 Mar 2024 11:09:57 GMT and should not be manually modified.
+This log was last generated on Wed, 17 Apr 2024 21:47:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.0)
+
+Wed, 17 Apr 2024 21:47:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.2.1..@fluentui/react-tags_v9.3.0)
+
+### Minor changes
+
+- feat: adds isInsideTagPicker exception case to TagGroupContextValue ([PR #31064](https://github.com/microsoft/fluentui/pull/31064) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.10.4 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-avatar to v9.6.21 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+
+### Patches
+
+- chore: refactor styles defined in makeResetStyles() to avoid shorthands.*() ([PR #30996](https://github.com/microsoft/fluentui/pull/30996) by olfedias@microsoft.com)
+- chore: Update react-icons to 2.0.235 ([PR #31011](https://github.com/microsoft/fluentui/pull/31011) by ololubek@microsoft.com)
+- fix: use colorBrandForeground2 for brand InteractionTag foreground color ([PR #30973](https://github.com/microsoft/fluentui/pull/30973) by yuanboxue@microsoft.com)
+
+## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.2.1)
+
+Tue, 02 Apr 2024 09:48:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.2.0..@fluentui/react-tags_v9.2.1)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.10.3 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-avatar to v9.6.20 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-tabster to v9.19.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+
 ## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.2.0)
 
-Mon, 25 Mar 2024 11:09:57 GMT 
+Mon, 25 Mar 2024 11:12:15 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.1.3..@fluentui/react-tags_v9.2.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -214,7 +214,7 @@ export declare const tagGroupClassNames: SlotClassNames<TagGroupSlots>;
 /**
  * Context shared between TagGroup and its children components
  */
-declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'appearance' | 'dismissible'>>;
+declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'appearance' | 'dismissible' | 'role'>>;
 
 export declare type TagGroupContextValues = {
     tagGroup: TagGroupContextValue;
@@ -242,6 +242,7 @@ export declare type TagGroupSlots = {
  */
 export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {
     handleTagDismiss: TagDismissHandler<Value>;
+    role?: React_2.AriaRole;
 };
 
 /**

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

@@ -28,17 +28,17 @@ const baseStyles = {
   `,
   border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
   ... /*#__PURE__*/createCustomFocusIndicatorStyle({
-    ... /*#__PURE__*/shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
     zIndex: 1
   })
 };
-const useRootRoundedBaseClassName = /*#__PURE__*/__resetStyles("r11r5xvj", "rjnnu2a", {
-  r: [".r11r5xvj{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-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);}", ".r11r5xvj[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}", ".rjnnu2a{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-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);}", ".rjnnu2a[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}"],
-  s: ["@media (forced-colors: active){.r11r5xvj{position:relative;}.r11r5xvj::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style: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){.rjnnu2a{position:relative;}.rjnnu2a::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style: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("r1tlgozh", "r80ltmz", {
+  r: [".r1tlgozh{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-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;-ms-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 useRootCircularBaseClassName = /*#__PURE__*/__resetStyles("r1k6bywq", "r46rai9", {
-  r: [".r1k6bywq{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-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);}", ".r1k6bywq[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}", ".r46rai9{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-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);}", ".r46rai9[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}"],
-  s: ["@media (forced-colors: active){.r1k6bywq{position:relative;}.r1k6bywq::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style:solid;border-left-width:var(--strokeWidthThin);border-left-style: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){.r46rai9{position:relative;}.r46rai9::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style:solid;border-right-width:var(--strokeWidthThin);border-right-style: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("r1cz4vob", "r1awuv7b", {
+  r: [".r1cz4vob{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-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;-ms-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);}}"]
 });
 /**
  * Style override for pseudo element that draws the border for windows high contrast mode
@@ -99,7 +99,7 @@ const useRootStyles = /*#__PURE__*/__styles({
   },
   brand: {
     De3pzq: "f16xkysk",
-    sj55zd: "f16muhyy",
+    sj55zd: "faj9fo0",
     eoavqd: "f8491dx",
     Jwef8y: "f1yj72w4",
     Bi91k9c: "f3ymbdj",
@@ -118,7 +118,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     z189sj: ["fwiuce9", "f15vdbe4"]
   }
 }, {
-  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);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}"],
+  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);}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}"],
   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);}"],
   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);}"],
   m: [["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {

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","G4pote","B33s42s","w20ur","Byczuf6","m","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","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","shape","size","className","hasSecondaryAction","disabled","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        ...shorthands.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            ...shorthands.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            ...shorthands.borderTop(tokens.strokeWidthThin, 'solid'),\n            ...shorthands.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                ...shorthands.borderRight(tokens.strokeWidthThin, 'solid'),\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.colorBrandForeground1,\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    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    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 { shape, size, appearance } = state;\n    state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, state.disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], 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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"}
+{"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","G4pote","B33s42s","w20ur","Byczuf6","m","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","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","shape","size","className","hasSecondaryAction","disabled","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                ...shorthands.borderRight(tokens.strokeWidthThin, 'solid'),\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    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    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 { shape, size, appearance } = state;\n    state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, state.disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], 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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"}

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

@@ -7,7 +7,7 @@ export const interactionTagSecondaryClassNames = {
 const mediumIconSize = '20px';
 const smallIconSize = '16px';
 const extraSmallIconSize = '12px';
-const useRootBaseClassName = /*#__PURE__*/__resetStyles("r7ezzwf", "rv64w1", [".r7ezzwf{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:flex;height:100%;align-items:center;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-left-color:var(--colorNeutralStroke1);border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);}", ".r7ezzwf[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}", ".rv64w1{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:flex;height:100%;align-items:center;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-right-color:var(--colorNeutralStroke1);border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);}", ".rv64w1[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}"]);
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("rxqbxwz", "rdjx360", [".rxqbxwz{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:flex;height:100%;align-items:center;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-left-color:var(--colorNeutralStroke1);border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);}", ".rxqbxwz[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", ".rdjx360{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:flex;height:100%;align-items:center;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-right-color:var(--colorNeutralStroke1);border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);}", ".rdjx360[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"]);
 const useRootStyles = /*#__PURE__*/__styles({
   filled: {
     De3pzq: "f16xq7d1",
@@ -37,7 +37,7 @@ const useRootStyles = /*#__PURE__*/__styles({
   },
   brand: {
     De3pzq: "f16xkysk",
-    sj55zd: "f16muhyy",
+    sj55zd: "faj9fo0",
     zhjwy3: ["f1sl6hi9", "f1c8dzaj"],
     eoavqd: "f8491dx",
     Jwef8y: "f1yj72w4",
@@ -71,7 +71,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     z189sj: ["fwiuce9", "f15vdbe4"]
   }
 }, {
-  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);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".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;}"],
+  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);}", ".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;}"],
   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);}"],
   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);}"],
   m: [["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","interactionTagSecondaryClassNames","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","d","h","a","m","useRootDisabledStyles","Bceei9c","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","shape","size","appearance","className","disabled"],"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagSecondaryClassNames = {\n    root: 'fui-InteractionTagSecondary'\n};\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst useRootBaseClassName = makeResetStyles({\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: 'flex',\n    height: '100%',\n    alignItems: 'center',\n    ...createCustomFocusIndicatorStyle(shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)),\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    // divider:\n    borderLeftColor: tokens.colorNeutralStroke1,\n    borderTopLeftRadius: tokens.borderRadiusNone,\n    borderBottomLeftRadius: tokens.borderRadiusNone\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.colorNeutralForeground2BrandHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground3Pressed,\n            color: tokens.colorNeutralForeground2BrandPressed\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.colorNeutralForeground2BrandHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            color: tokens.colorNeutralForeground2BrandPressed\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.colorBrandForeground1,\n        borderLeftColor: tokens.colorBrandStroke2,\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    rounded: {\n        borderTopRightRadius: tokens.borderRadiusMedium,\n        borderBottomRightRadius: tokens.borderRadiusMedium\n    },\n    circular: {\n        borderTopRightRadius: tokens.borderRadiusCircular,\n        borderBottomRightRadius: tokens.borderRadiusCircular\n    },\n    medium: {\n        fontSize: mediumIconSize,\n        paddingLeft: '5px',\n        paddingRight: '5px'\n    },\n    small: {\n        fontSize: smallIconSize,\n        paddingLeft: '3px',\n        paddingRight: '3px'\n    },\n    'extra-small': {\n        fontSize: extraSmallIconSize,\n        paddingLeft: '5px',\n        paddingRight: '5px'\n    }\n});\nconst useRootDisabledStyles = makeStyles({\n    filled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n        borderLeftColor: tokens.colorNeutralStrokeDisabled\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        borderLeftColor: tokens.colorNeutralStrokeDisabled\n    }\n});\nexport const useInteractionTagSecondaryStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const { shape, size, appearance } = state;\n    state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], state.root.className);\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,OAAO,MAAMC,iCAAiC,GAAG;EAC7CC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,cAAc,GAAG,MAAM;AAC7B,MAAMC,aAAa,GAAG,MAAM;AAC5B,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,oBAAoB,gBAAGX,aAAA,usCAkB5B,CAAC;AACF,MAAMY,aAAa,gBAAGX,QAAA;EAAAY,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAX,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAM,KAAA;IAAAd,MAAA;IAAAC,MAAA;IAAAY,MAAA;IAAAX,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAH,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAA;IAAAF,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyFrB,CAAC;AACF,MAAMC,qBAAqB,gBAAGzC,QAAA;EAAAY,MAAA;IAAA8B,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAJ,OAAA;IAAAoB,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAe,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAW,CAAA;AAAA,CAqB7B,CAAC;AACF,OAAO,MAAMM,yCAAyC,GAAIC,KAAK,IAAG;EAC9D,MAAMC,iBAAiB,GAAGnC,oBAAoB,CAAC,CAAC;EAChD,MAAMoC,UAAU,GAAGnC,aAAa,CAAC,CAAC;EAClC,MAAMoC,kBAAkB,GAAGN,qBAAqB,CAAC,CAAC;EAClD,MAAM;IAAEO,KAAK;IAAEC,IAAI;IAAEC;EAAW,CAAC,GAAGN,KAAK;EACzCA,KAAK,CAACtC,IAAI,CAAC6C,SAAS,GAAGlD,YAAY,CAACI,iCAAiC,CAACC,IAAI,EAAEuC,iBAAiB,EAAED,KAAK,CAACQ,QAAQ,GAAGL,kBAAkB,CAACG,UAAU,CAAC,GAAGJ,UAAU,CAACI,UAAU,CAAC,EAAEJ,UAAU,CAACE,KAAK,CAAC,EAAEF,UAAU,CAACG,IAAI,CAAC,EAAEL,KAAK,CAACtC,IAAI,CAAC6C,SAAS,CAAC;EACnO,OAAOP,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","interactionTagSecondaryClassNames","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","d","h","a","m","useRootDisabledStyles","Bceei9c","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","shape","size","appearance","className","disabled"],"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagSecondaryClassNames = {\n    root: 'fui-InteractionTagSecondary'\n};\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst useRootBaseClassName = makeResetStyles({\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: 'flex',\n    height: '100%',\n    alignItems: 'center',\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n    }),\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    // divider:\n    borderLeftColor: tokens.colorNeutralStroke1,\n    borderTopLeftRadius: tokens.borderRadiusNone,\n    borderBottomLeftRadius: tokens.borderRadiusNone\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.colorNeutralForeground2BrandHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground3Pressed,\n            color: tokens.colorNeutralForeground2BrandPressed\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.colorNeutralForeground2BrandHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            color: tokens.colorNeutralForeground2BrandPressed\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        borderLeftColor: tokens.colorBrandStroke2,\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    rounded: {\n        borderTopRightRadius: tokens.borderRadiusMedium,\n        borderBottomRightRadius: tokens.borderRadiusMedium\n    },\n    circular: {\n        borderTopRightRadius: tokens.borderRadiusCircular,\n        borderBottomRightRadius: tokens.borderRadiusCircular\n    },\n    medium: {\n        fontSize: mediumIconSize,\n        paddingLeft: '5px',\n        paddingRight: '5px'\n    },\n    small: {\n        fontSize: smallIconSize,\n        paddingLeft: '3px',\n        paddingRight: '3px'\n    },\n    'extra-small': {\n        fontSize: extraSmallIconSize,\n        paddingLeft: '5px',\n        paddingRight: '5px'\n    }\n});\nconst useRootDisabledStyles = makeStyles({\n    filled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n        borderLeftColor: tokens.colorNeutralStrokeDisabled\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        borderLeftColor: tokens.colorNeutralStrokeDisabled\n    }\n});\nexport const useInteractionTagSecondaryStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const { shape, size, appearance } = state;\n    state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], state.root.className);\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,OAAO,MAAMC,iCAAiC,GAAG;EAC7CC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,cAAc,GAAG,MAAM;AAC7B,MAAMC,aAAa,GAAG,MAAM;AAC5B,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,oBAAoB,gBAAGX,aAAA,soCAoB5B,CAAC;AACF,MAAMY,aAAa,gBAAGX,QAAA;EAAAY,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAX,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAM,KAAA;IAAAd,MAAA;IAAAC,MAAA;IAAAY,MAAA;IAAAX,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAH,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAA;IAAAF,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyFrB,CAAC;AACF,MAAMC,qBAAqB,gBAAGzC,QAAA;EAAAY,MAAA;IAAA8B,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAJ,OAAA;IAAAoB,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAe,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAW,CAAA;AAAA,CAqB7B,CAAC;AACF,OAAO,MAAMM,yCAAyC,GAAIC,KAAK,IAAG;EAC9D,MAAMC,iBAAiB,GAAGnC,oBAAoB,CAAC,CAAC;EAChD,MAAMoC,UAAU,GAAGnC,aAAa,CAAC,CAAC;EAClC,MAAMoC,kBAAkB,GAAGN,qBAAqB,CAAC,CAAC;EAClD,MAAM;IAAEO,KAAK;IAAEC,IAAI;IAAEC;EAAW,CAAC,GAAGN,KAAK;EACzCA,KAAK,CAACtC,IAAI,CAAC6C,SAAS,GAAGlD,YAAY,CAACI,iCAAiC,CAACC,IAAI,EAAEuC,iBAAiB,EAAED,KAAK,CAACQ,QAAQ,GAAGL,kBAAkB,CAACG,UAAU,CAAC,GAAGJ,UAAU,CAACI,UAAU,CAAC,EAAEJ,UAAU,CAACE,KAAK,CAAC,EAAEF,UAAU,CAACG,IAAI,CAAC,EAAEL,KAAK,CAACtC,IAAI,CAAC6C,SAAS,CAAC;EACnO,OAAOP,KAAK;AAChB,CAAC"}

package/lib/components/Tag/useTag.js

@@ -21,7 +21,7 @@ const tagAvatarShapeMap = {
  * @param props - props from this instance of Tag
  * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag
  */ export const useTag_unstable = (props, ref)=>{
-    const { handleTagDismiss, size: contextSize, appearance: contextAppearance, dismissible: contextDismissible } = useTagGroupContext_unstable();
+    const { handleTagDismiss, size: contextSize, appearance: contextAppearance, dismissible: contextDismissible, role: tagGroupRole } = useTagGroupContext_unstable();
     const id = useId('fui-Tag', props.id);
     const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, dismissible = contextDismissible !== null && contextDismissible !== void 0 ? contextDismissible : false, shape = 'rounded', size = contextSize, value = id } = props;
     const dismissOnClick = useEventCallback((ev)=>{
@@ -61,6 +61,7 @@ const tagAvatarShapeMap = {
         },
         root: slot.always(getIntrinsicElementProps(elementType, {
             ref,
+            role: tagGroupRole === 'listbox' ? 'option' : undefined,
             ...props,
             id,
             ...dismissible && {

package/lib/components/Tag/useTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { TagProps, TagState } from './Tag.types';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\nconst tagAvatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst tagAvatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */\nexport const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement | HTMLButtonElement>): TagState => {\n  const {\n    handleTagDismiss,\n    size: contextSize,\n    appearance: contextAppearance,\n    dismissible: contextDismissible,\n  } = useTagGroupContext_unstable();\n\n  const id = useId('fui-Tag', props.id);\n\n  const {\n    appearance = contextAppearance ?? 'filled',\n    disabled = false,\n    dismissible = contextDismissible ?? false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  const dismissOnClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    props.onClick?.(ev);\n    if (!ev.defaultPrevented) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const dismissOnKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    props?.onKeyDown?.(ev);\n    if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const elementType = dismissible ? 'button' : 'span';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled,\n    dismissible,\n    shape,\n    size,\n\n    components: {\n      root: elementType,\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n      dismissIcon: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(elementType, {\n        ref,\n        ...props,\n        id,\n        ...(dismissible && { onClick: dismissOnClick, onKeyDown: dismissOnKeyDown }),\n      }),\n      { elementType },\n    ),\n\n    media: slot.optional(props.media, { elementType: 'span' }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    primaryText: slot.optional(props.primaryText, {\n      renderByDefault: true,\n      defaultProps: {\n        children: props.children,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n    dismissIcon: slot.optional(props.dismissIcon, {\n      renderByDefault: dismissible,\n      defaultProps: {\n        children: <DismissRegular />,\n        role: 'img',\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useId","slot","DismissRegular","Delete","Backspace","useTagGroupContext_unstable","tagAvatarSizeMap","medium","small","tagAvatarShapeMap","rounded","circular","useTag_unstable","props","ref","handleTagDismiss","size","contextSize","appearance","contextAppearance","dismissible","contextDismissible","id","disabled","shape","value","dismissOnClick","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","always","optional","renderByDefault","defaultProps","children","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACpG,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AAC5D,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E,MAAMC,mBAAmB;IACvBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,oBAAoB;IACxBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC;IAC/C,MAAM,EACJC,gBAAgB,EAChBC,MAAMC,WAAW,EACjBC,YAAYC,iBAAiB,EAC7BC,aAAaC,kBAAkB,EAChC,GAAGhB;IAEJ,MAAMiB,KAAKtB,MAAM,WAAWa,MAAMS,EAAE;IAEpC,MAAM,EACJJ,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CI,WAAW,KAAK,EAChBH,cAAcC,+BAAAA,gCAAAA,qBAAsB,KAAK,EACzCG,QAAQ,SAAS,EACjBR,OAAOC,WAAW,EAClBQ,QAAQH,EAAE,EACX,GAAGT;IAEJ,MAAMa,iBAAiB3B,iBAAiB,CAAC4B;YACvCd;SAAAA,iBAAAA,MAAMe,OAAO,cAAbf,qCAAAA,oBAAAA,OAAgBc;QAChB,IAAI,CAACA,GAAGE,gBAAgB,EAAE;YACxBd,6BAAAA,uCAAAA,iBAAmBY,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMK,mBAAmB/B,iBAAiB,CAAC4B;YACzCd;QAAAA,kBAAAA,6BAAAA,mBAAAA,MAAOkB,SAAS,cAAhBlB,uCAAAA,sBAAAA,OAAmBc;QACnB,IAAI,CAACA,GAAGE,gBAAgB,IAAKF,CAAAA,GAAGK,GAAG,KAAK7B,UAAUwB,GAAGK,GAAG,KAAK5B,SAAQ,GAAI;YACvEW,6BAAAA,uCAAAA,iBAAmBY,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMQ,cAAcb,cAAc,WAAW;IAE7C,OAAO;QACLF;QACAgB,aAAazB,iBAAiB,CAACe,MAAM;QACrCW,YAAY7B,gBAAgB,CAACU,KAAK;QAClCO;QACAH;QACAI;QACAR;QAEAoB,YAAY;YACVC,MAAMJ;YACNK,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,aAAa;QACf;QAEAL,MAAMpC,KAAK0C,MAAM,CACf7C,yBAAyBmC,aAAa;YACpCnB;YACA,GAAGD,KAAK;YACRS;YACA,GAAIF,eAAe;gBAAEQ,SAASF;gBAAgBK,WAAWD;YAAiB,CAAC;QAC7E,IACA;YAAEG;QAAY;QAGhBK,OAAOrC,KAAK2C,QAAQ,CAAC/B,MAAMyB,KAAK,EAAE;YAAEL,aAAa;QAAO;QACxDM,MAAMtC,KAAK2C,QAAQ,CAAC/B,MAAM0B,IAAI,EAAE;YAAEN,aAAa;QAAO;QACtDO,aAAavC,KAAK2C,QAAQ,CAAC/B,MAAM2B,WAAW,EAAE;YAC5CK,iBAAiB;YACjBC,cAAc;gBACZC,UAAUlC,MAAMkC,QAAQ;YAC1B;YACAd,aAAa;QACf;QACAQ,eAAexC,KAAK2C,QAAQ,CAAC/B,MAAM4B,aAAa,EAAE;YAAER,aAAa;QAAO;QACxES,aAAazC,KAAK2C,QAAQ,CAAC/B,MAAM6B,WAAW,EAAE;YAC5CG,iBAAiBzB;YACjB0B,cAAc;gBACZC,wBAAU,oBAAC7C;gBACX8C,MAAM;YACR;YACAf,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { TagProps, TagState } from './Tag.types';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\nconst tagAvatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst tagAvatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */\nexport const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement | HTMLButtonElement>): TagState => {\n  const {\n    handleTagDismiss,\n    size: contextSize,\n    appearance: contextAppearance,\n    dismissible: contextDismissible,\n    role: tagGroupRole,\n  } = useTagGroupContext_unstable();\n\n  const id = useId('fui-Tag', props.id);\n\n  const {\n    appearance = contextAppearance ?? 'filled',\n    disabled = false,\n    dismissible = contextDismissible ?? false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  const dismissOnClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    props.onClick?.(ev);\n    if (!ev.defaultPrevented) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const dismissOnKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    props?.onKeyDown?.(ev);\n    if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const elementType = dismissible ? 'button' : 'span';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled,\n    dismissible,\n    shape,\n    size,\n\n    components: {\n      root: elementType,\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n      dismissIcon: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(elementType, {\n        ref,\n        role: tagGroupRole === 'listbox' ? 'option' : undefined,\n        ...props,\n        id,\n        ...(dismissible && { onClick: dismissOnClick, onKeyDown: dismissOnKeyDown }),\n      }),\n      { elementType },\n    ),\n\n    media: slot.optional(props.media, { elementType: 'span' }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    primaryText: slot.optional(props.primaryText, {\n      renderByDefault: true,\n      defaultProps: {\n        children: props.children,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n    dismissIcon: slot.optional(props.dismissIcon, {\n      renderByDefault: dismissible,\n      defaultProps: {\n        children: <DismissRegular />,\n        role: 'img',\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useId","slot","DismissRegular","Delete","Backspace","useTagGroupContext_unstable","tagAvatarSizeMap","medium","small","tagAvatarShapeMap","rounded","circular","useTag_unstable","props","ref","handleTagDismiss","size","contextSize","appearance","contextAppearance","dismissible","contextDismissible","role","tagGroupRole","id","disabled","shape","value","dismissOnClick","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","always","undefined","optional","renderByDefault","defaultProps","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACpG,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AAC5D,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E,MAAMC,mBAAmB;IACvBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,oBAAoB;IACxBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC;IAC/C,MAAM,EACJC,gBAAgB,EAChBC,MAAMC,WAAW,EACjBC,YAAYC,iBAAiB,EAC7BC,aAAaC,kBAAkB,EAC/BC,MAAMC,YAAY,EACnB,GAAGlB;IAEJ,MAAMmB,KAAKxB,MAAM,WAAWa,MAAMW,EAAE;IAEpC,MAAM,EACJN,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CM,WAAW,KAAK,EAChBL,cAAcC,+BAAAA,gCAAAA,qBAAsB,KAAK,EACzCK,QAAQ,SAAS,EACjBV,OAAOC,WAAW,EAClBU,QAAQH,EAAE,EACX,GAAGX;IAEJ,MAAMe,iBAAiB7B,iBAAiB,CAAC8B;YACvChB;SAAAA,iBAAAA,MAAMiB,OAAO,cAAbjB,qCAAAA,oBAAAA,OAAgBgB;QAChB,IAAI,CAACA,GAAGE,gBAAgB,EAAE;YACxBhB,6BAAAA,uCAAAA,iBAAmBc,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMK,mBAAmBjC,iBAAiB,CAAC8B;YACzChB;QAAAA,kBAAAA,6BAAAA,mBAAAA,MAAOoB,SAAS,cAAhBpB,uCAAAA,sBAAAA,OAAmBgB;QACnB,IAAI,CAACA,GAAGE,gBAAgB,IAAKF,CAAAA,GAAGK,GAAG,KAAK/B,UAAU0B,GAAGK,GAAG,KAAK9B,SAAQ,GAAI;YACvEW,6BAAAA,uCAAAA,iBAAmBc,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMQ,cAAcf,cAAc,WAAW;IAE7C,OAAO;QACLF;QACAkB,aAAa3B,iBAAiB,CAACiB,MAAM;QACrCW,YAAY/B,gBAAgB,CAACU,KAAK;QAClCS;QACAL;QACAM;QACAV;QAEAsB,YAAY;YACVC,MAAMJ;YACNK,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,aAAa;QACf;QAEAL,MAAMtC,KAAK4C,MAAM,CACf/C,yBAAyBqC,aAAa;YACpCrB;YACAQ,MAAMC,iBAAiB,YAAY,WAAWuB;YAC9C,GAAGjC,KAAK;YACRW;YACA,GAAIJ,eAAe;gBAAEU,SAASF;gBAAgBK,WAAWD;YAAiB,CAAC;QAC7E,IACA;YAAEG;QAAY;QAGhBK,OAAOvC,KAAK8C,QAAQ,CAAClC,MAAM2B,KAAK,EAAE;YAAEL,aAAa;QAAO;QACxDM,MAAMxC,KAAK8C,QAAQ,CAAClC,MAAM4B,IAAI,EAAE;YAAEN,aAAa;QAAO;QACtDO,aAAazC,KAAK8C,QAAQ,CAAClC,MAAM6B,WAAW,EAAE;YAC5CM,iBAAiB;YACjBC,cAAc;gBACZC,UAAUrC,MAAMqC,QAAQ;YAC1B;YACAf,aAAa;QACf;QACAQ,eAAe1C,KAAK8C,QAAQ,CAAClC,MAAM8B,aAAa,EAAE;YAAER,aAAa;QAAO;QACxES,aAAa3C,KAAK8C,QAAQ,CAAClC,MAAM+B,WAAW,EAAE;YAC5CI,iBAAiB5B;YACjB6B,cAAc;gBACZC,wBAAU,oBAAChD;gBACXoB,MAAM;YACR;YACAa,aAAa;QACf;IACF;AACF,EAAE"}

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

@@ -34,13 +34,13 @@ const baseStyles = {
   width: 'fit-content',
   border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`
 };
-const useRootRoundedBaseClassName = /*#__PURE__*/__resetStyles("r1d3fbai", "r89ofxt", {
-  r: [".r1d3fbai{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r1d3fbai[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}", ".r89ofxt{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r89ofxt[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}"],
-  s: ["@media (forced-colors: active){.r1d3fbai{position:relative;}.r1d3fbai::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style: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){.r89ofxt{position:relative;}.r89ofxt::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style: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("r1wstn2o", "r7a32g8", {
+  r: [".r1wstn2o{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r1wstn2o[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", ".r7a32g8{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r7a32g8[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"],
+  s: ["@media (forced-colors: active){.r1wstn2o{position:relative;}.r1wstn2o::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){.r7a32g8{position:relative;}.r7a32g8::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 useRootCircularBaseClassName = /*#__PURE__*/__resetStyles("r76els4", "r1g7lw0i", {
-  r: [".r76els4{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r76els4[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusCircular);border-bottom-left-radius:var(--borderRadiusCircular);border-top-right-radius:var(--borderRadiusCircular);border-top-left-radius:var(--borderRadiusCircular);outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}", ".r1g7lw0i{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r1g7lw0i[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusCircular);border-bottom-right-radius:var(--borderRadiusCircular);border-top-left-radius:var(--borderRadiusCircular);border-top-right-radius:var(--borderRadiusCircular);outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}"],
-  s: ["@media (forced-colors: active){.r76els4{position:relative;}.r76els4::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style:solid;border-left-width:var(--strokeWidthThin);border-left-style:solid;border-right-width:var(--strokeWidthThin);border-right-style:solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:var(--borderRadiusCircular);}}", "@media (forced-colors: active){.r1g7lw0i{position:relative;}.r1g7lw0i::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style:solid;border-right-width:var(--strokeWidthThin);border-right-style:solid;border-left-width:var(--strokeWidthThin);border-left-style:solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-radius:var(--borderRadiusCircular);}}"]
+const useRootCircularBaseClassName = /*#__PURE__*/__resetStyles("rlv0lsa", "r18mdwmi", {
+  r: [".rlv0lsa{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".rlv0lsa[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", ".r18mdwmi{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r18mdwmi[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"],
+  s: ["@media (forced-colors: active){.rlv0lsa{position:relative;}.rlv0lsa::before{content:\"\";border-top:var(--strokeWidthThin) solid;border-left:var(--strokeWidthThin) solid;border-right:var(--strokeWidthThin) solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:var(--borderRadiusCircular);}}", "@media (forced-colors: active){.r18mdwmi{position:relative;}.r18mdwmi::before{content:\"\";border-top:var(--strokeWidthThin) solid;border-right:var(--strokeWidthThin) solid;border-left:var(--strokeWidthThin) solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-radius:var(--borderRadiusCircular);}}"]
 });
 const useRootStyles = /*#__PURE__*/__styles({
   filled: {

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","createCustomFocusIndicatorStyle","tagClassNames","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootStyles","filled","De3pzq","sj55zd","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","medium","Bqenvij","small","d","useRootDisabledStyles","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithoutDismissStyles","z189sj","useIconStyles","base","Ijaq50","Br312pm","nk6f5a","Bw0ie65","mc9l5x","a9b677","Be2twd7","useMediaStyles","useDismissIconStyles","ze5xyy","oy3o9n","eoavqd","Bi91k9c","lj723h","m","h","a","usePrimaryTextStyles","Huce71","Bahqtrf","Bhrd7zp","Bg96gwp","withoutSecondaryText","Byoj8tv","withSecondaryText","B6of3ja","useSecondaryTextBaseClassName","useTagStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","shape","size","className","disabled"],"sources":["useTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tagClassNames = {\n    root: 'fui-Tag',\n    media: 'fui-Tag__media',\n    icon: 'fui-Tag__icon',\n    primaryText: 'fui-Tag__primaryText',\n    secondaryText: 'fui-Tag__secondaryText',\n    dismissIcon: 'fui-Tag__dismissIcon'\n};\n/**\n * Inner horizontal space left and right of Tag\n */ const tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst baseStyles = {\n    // reset default button style:\n    fontFamily: 'inherit',\n    padding: '0px',\n    appearance: 'button',\n    textAlign: 'unset',\n    display: 'inline-grid',\n    alignItems: 'center',\n    gridTemplateAreas: `\n  \"media primary   dismissIcon\"\n  \"media secondary dismissIcon\"\n  `,\n    boxSizing: 'border-box',\n    width: 'fit-content',\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusMedium,\n    ...createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)\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   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            ...shorthands.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    ...createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusCircular),\n        ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)\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   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            ...shorthands.borderTop(tokens.strokeWidthThin, 'solid'),\n            ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid'),\n            ...shorthands.borderRight(tokens.strokeWidthThin, 'solid'),\n            position: 'absolute',\n            top: '-1px',\n            left: '-1px',\n            right: '-1px',\n            bottom: '-1px',\n            borderRadius: tokens.borderRadiusCircular\n        }\n    }\n});\nconst useRootStyles = makeStyles({\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground2\n    },\n    outline: {\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForeground2,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1)\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        color: tokens.colorBrandForeground2\n    },\n    medium: {\n        height: '32px'\n    },\n    small: {\n        height: '24px'\n    },\n    'extra-small': {\n        height: '20px'\n    }\n});\nconst useRootDisabledStyles = makeStyles({\n    filled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    },\n    outline: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n    },\n    brand: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    }\n});\n/**\n * Styles for root slot when Tag is without leading media/icon\n */ const useRootWithoutMediaStyles = makeStyles({\n    medium: {\n        paddingLeft: tagSpacingMedium\n    },\n    small: {\n        paddingLeft: tagSpacingSmall\n    },\n    'extra-small': {\n        paddingLeft: tagSpacingExtraSmall\n    }\n});\n/**\n * Styles for root slot when Tag is without dismiss icon\n */ const useRootWithoutDismissStyles = makeStyles({\n    medium: {\n        paddingRight: tagSpacingMedium\n    },\n    small: {\n        paddingRight: tagSpacingSmall\n    },\n    'extra-small': {\n        paddingRight: tagSpacingExtraSmall\n    }\n});\nexport const useIconStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('media'),\n        display: 'flex'\n    },\n    medium: {\n        paddingLeft: tagSpacingMedium,\n        paddingRight: tokens.spacingHorizontalXS,\n        width: mediumIconSize,\n        fontSize: mediumIconSize\n    },\n    small: {\n        paddingLeft: tagSpacingSmall,\n        paddingRight: tokens.spacingHorizontalXXS,\n        width: smallIconSize,\n        fontSize: smallIconSize\n    },\n    'extra-small': {\n        paddingLeft: tagSpacingExtraSmall,\n        paddingRight: tokens.spacingHorizontalXXS,\n        width: extraSmallIconSize,\n        fontSize: extraSmallIconSize\n    }\n});\nexport const useMediaStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('media'),\n        display: 'flex',\n        paddingLeft: '1px'\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    'extra-small': {\n        paddingRight: tokens.spacingHorizontalSNudge\n    }\n});\nconst useDismissIconStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('dismissIcon'),\n        display: 'flex',\n        // windows high contrast:\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Highlight'\n            },\n            ':active': {\n                color: 'Highlight'\n            }\n        }\n    },\n    medium: {\n        paddingLeft: tokens.spacingHorizontalXS,\n        paddingRight: tagSpacingMedium,\n        fontSize: mediumIconSize\n    },\n    small: {\n        paddingLeft: tokens.spacingHorizontalXXS,\n        paddingRight: tagSpacingSmall,\n        fontSize: smallIconSize\n    },\n    'extra-small': {\n        paddingLeft: tokens.spacingHorizontalXXS,\n        paddingRight: tagSpacingExtraSmall,\n        fontSize: extraSmallIconSize\n    },\n    filled: {\n        ':hover': {\n            cursor: 'pointer',\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        }\n    },\n    outline: {\n        ':hover': {\n            cursor: 'pointer',\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        }\n    },\n    brand: {\n        ':hover': {\n            cursor: 'pointer',\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        }\n    }\n});\nexport const usePrimaryTextStyles = makeStyles({\n    base: {\n        whiteSpace: 'nowrap',\n        paddingLeft: tokens.spacingHorizontalXXS,\n        paddingRight: tokens.spacingHorizontalXXS\n    },\n    medium: {\n        ...typographyStyles.body1\n    },\n    small: {\n        ...typographyStyles.caption1\n    },\n    'extra-small': {\n        ...typographyStyles.caption1\n    },\n    withoutSecondaryText: {\n        gridColumnStart: 'primary',\n        gridRowStart: 'primary',\n        gridRowEnd: 'secondary',\n        paddingBottom: tokens.spacingHorizontalXXS\n    },\n    withSecondaryText: {\n        ...shorthands.gridArea('primary'),\n        ...typographyStyles.caption1,\n        marginTop: '-2px'\n    }\n});\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n    gridArea: 'secondary',\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tokens.spacingHorizontalXXS,\n    ...typographyStyles.caption2,\n    whiteSpace: 'nowrap'\n});\n/**\n * Apply styling to the Tag slots based on the state\n */ export const useTagStyles_unstable = (state)=>{\n    const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n    const rootCircularBaseClassName = useRootCircularBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n    const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n    const iconStyles = useIconStyles();\n    const mediaStyles = useMediaStyles();\n    const dismissIconStyles = useDismissIconStyles();\n    const primaryTextStyles = usePrimaryTextStyles();\n    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n    const { shape, size, appearance } = state;\n    state.root.className = mergeClasses(tagClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], !state.dismissIcon && rootWithoutDismissStyles[size], state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(tagClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n    }\n    if (state.primaryText) {\n        state.primaryText.className = mergeClasses(tagClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n    }\n    if (state.secondaryText) {\n        state.secondaryText.className = mergeClasses(tagClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n    }\n    if (state.dismissIcon) {\n        state.dismissIcon.className = mergeClasses(tagClassNames.dismissIcon, dismissIconStyles.base, dismissIconStyles[size], !state.disabled && dismissIconStyles[appearance], state.dismissIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","createCustomFocusIndicatorStyle","tagClassNames","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootStyles","filled","De3pzq","sj55zd","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","medium","Bqenvij","small","d","useRootDisabledStyles","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithoutDismissStyles","z189sj","useIconStyles","base","Ijaq50","Br312pm","nk6f5a","Bw0ie65","mc9l5x","a9b677","Be2twd7","useMediaStyles","useDismissIconStyles","ze5xyy","oy3o9n","eoavqd","Bi91k9c","lj723h","m","h","a","usePrimaryTextStyles","Huce71","Bahqtrf","Bhrd7zp","Bg96gwp","withoutSecondaryText","Byoj8tv","withSecondaryText","B6of3ja","useSecondaryTextBaseClassName","useTagStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","shape","size","className","disabled"],"sources":["useTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tagClassNames = {\n    root: 'fui-Tag',\n    media: 'fui-Tag__media',\n    icon: 'fui-Tag__icon',\n    primaryText: 'fui-Tag__primaryText',\n    secondaryText: 'fui-Tag__secondaryText',\n    dismissIcon: 'fui-Tag__dismissIcon'\n};\n/**\n * Inner horizontal space left and right of Tag\n */ const tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst baseStyles = {\n    // reset default button style:\n    fontFamily: 'inherit',\n    padding: '0px',\n    appearance: 'button',\n    textAlign: 'unset',\n    display: 'inline-grid',\n    alignItems: 'center',\n    gridTemplateAreas: `\n  \"media primary   dismissIcon\"\n  \"media secondary dismissIcon\"\n  `,\n    boxSizing: 'border-box',\n    width: 'fit-content',\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusMedium,\n    ...createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusMedium,\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\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   */ '@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    ...createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusCircular,\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\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   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            borderTop: `${tokens.strokeWidthThin} solid`,\n            borderLeft: `${tokens.strokeWidthThin} solid`,\n            borderRight: `${tokens.strokeWidthThin} solid`,\n            position: 'absolute',\n            top: '-1px',\n            left: '-1px',\n            right: '-1px',\n            bottom: '-1px',\n            borderRadius: tokens.borderRadiusCircular\n        }\n    }\n});\nconst useRootStyles = makeStyles({\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground2\n    },\n    outline: {\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForeground2,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1)\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        color: tokens.colorBrandForeground2\n    },\n    medium: {\n        height: '32px'\n    },\n    small: {\n        height: '24px'\n    },\n    'extra-small': {\n        height: '20px'\n    }\n});\nconst useRootDisabledStyles = makeStyles({\n    filled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    },\n    outline: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n    },\n    brand: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    }\n});\n/**\n * Styles for root slot when Tag is without leading media/icon\n */ const useRootWithoutMediaStyles = makeStyles({\n    medium: {\n        paddingLeft: tagSpacingMedium\n    },\n    small: {\n        paddingLeft: tagSpacingSmall\n    },\n    'extra-small': {\n        paddingLeft: tagSpacingExtraSmall\n    }\n});\n/**\n * Styles for root slot when Tag is without dismiss icon\n */ const useRootWithoutDismissStyles = makeStyles({\n    medium: {\n        paddingRight: tagSpacingMedium\n    },\n    small: {\n        paddingRight: tagSpacingSmall\n    },\n    'extra-small': {\n        paddingRight: tagSpacingExtraSmall\n    }\n});\nexport const useIconStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('media'),\n        display: 'flex'\n    },\n    medium: {\n        paddingLeft: tagSpacingMedium,\n        paddingRight: tokens.spacingHorizontalXS,\n        width: mediumIconSize,\n        fontSize: mediumIconSize\n    },\n    small: {\n        paddingLeft: tagSpacingSmall,\n        paddingRight: tokens.spacingHorizontalXXS,\n        width: smallIconSize,\n        fontSize: smallIconSize\n    },\n    'extra-small': {\n        paddingLeft: tagSpacingExtraSmall,\n        paddingRight: tokens.spacingHorizontalXXS,\n        width: extraSmallIconSize,\n        fontSize: extraSmallIconSize\n    }\n});\nexport const useMediaStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('media'),\n        display: 'flex',\n        paddingLeft: '1px'\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    'extra-small': {\n        paddingRight: tokens.spacingHorizontalSNudge\n    }\n});\nconst useDismissIconStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('dismissIcon'),\n        display: 'flex',\n        // windows high contrast:\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Highlight'\n            },\n            ':active': {\n                color: 'Highlight'\n            }\n        }\n    },\n    medium: {\n        paddingLeft: tokens.spacingHorizontalXS,\n        paddingRight: tagSpacingMedium,\n        fontSize: mediumIconSize\n    },\n    small: {\n        paddingLeft: tokens.spacingHorizontalXXS,\n        paddingRight: tagSpacingSmall,\n        fontSize: smallIconSize\n    },\n    'extra-small': {\n        paddingLeft: tokens.spacingHorizontalXXS,\n        paddingRight: tagSpacingExtraSmall,\n        fontSize: extraSmallIconSize\n    },\n    filled: {\n        ':hover': {\n            cursor: 'pointer',\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        }\n    },\n    outline: {\n        ':hover': {\n            cursor: 'pointer',\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        }\n    },\n    brand: {\n        ':hover': {\n            cursor: 'pointer',\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        }\n    }\n});\nexport const usePrimaryTextStyles = makeStyles({\n    base: {\n        whiteSpace: 'nowrap',\n        paddingLeft: tokens.spacingHorizontalXXS,\n        paddingRight: tokens.spacingHorizontalXXS\n    },\n    medium: {\n        ...typographyStyles.body1\n    },\n    small: {\n        ...typographyStyles.caption1\n    },\n    'extra-small': {\n        ...typographyStyles.caption1\n    },\n    withoutSecondaryText: {\n        gridColumnStart: 'primary',\n        gridRowStart: 'primary',\n        gridRowEnd: 'secondary',\n        paddingBottom: tokens.spacingHorizontalXXS\n    },\n    withSecondaryText: {\n        ...shorthands.gridArea('primary'),\n        ...typographyStyles.caption1,\n        marginTop: '-2px'\n    }\n});\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n    gridArea: 'secondary',\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tokens.spacingHorizontalXXS,\n    ...typographyStyles.caption2,\n    whiteSpace: 'nowrap'\n});\n/**\n * Apply styling to the Tag slots based on the state\n */ export const useTagStyles_unstable = (state)=>{\n    const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n    const rootCircularBaseClassName = useRootCircularBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n    const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n    const iconStyles = useIconStyles();\n    const mediaStyles = useMediaStyles();\n    const dismissIconStyles = useDismissIconStyles();\n    const primaryTextStyles = usePrimaryTextStyles();\n    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n    const { shape, size, appearance } = state;\n    state.root.className = mergeClasses(tagClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], !state.dismissIcon && rootWithoutDismissStyles[size], state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(tagClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n    }\n    if (state.primaryText) {\n        state.primaryText.className = mergeClasses(tagClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n    }\n    if (state.secondaryText) {\n        state.secondaryText.className = mergeClasses(tagClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n    }\n    if (state.dismissIcon) {\n        state.dismissIcon.className = mergeClasses(tagClassNames.dismissIcon, dismissIconStyles.base, dismissIconStyles[size], !state.disabled && dismissIconStyles[appearance], state.dismissIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["TagGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TagSize, TagValue, TagDismissHandler, TagAppearance } from '../../utils/types';\nimport { TagGroupContextValue } from '../../contexts/tagGroupContext';\n\nexport type TagGroupContextValues = {\n  tagGroup: TagGroupContextValue;\n};\n\nexport type TagGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TagGroup Props\n */\nexport type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {\n  /**\n   * Callback for when a tag is dismissed\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onDismiss?: TagDismissHandler<Value>;\n\n  size?: TagSize;\n  appearance?: TagAppearance;\n  dismissible?: boolean;\n};\n\n/**\n * State used in rendering TagGroup\n */\nexport type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &\n  Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n  };\n"],"names":[],"mappings":"AAAA,WAiCI"}
+{"version":3,"sources":["TagGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TagSize, TagValue, TagDismissHandler, TagAppearance } from '../../utils/types';\nimport { TagGroupContextValue } from '../../contexts/tagGroupContext';\nimport * as React from 'react';\n\nexport type TagGroupContextValues = {\n  tagGroup: TagGroupContextValue;\n};\n\nexport type TagGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TagGroup Props\n */\nexport type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {\n  /**\n   * Callback for when a tag is dismissed\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onDismiss?: TagDismissHandler<Value>;\n\n  size?: TagSize;\n  appearance?: TagAppearance;\n  dismissible?: boolean;\n};\n\n/**\n * State used in rendering TagGroup\n */\nexport type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &\n  Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n    role?: React.AriaRole;\n  };\n"],"names":["React"],"mappings":"AAGA,YAAYA,WAAW,QAAQ"}

package/lib/components/TagGroup/useTagGroup.js

@@ -12,7 +12,7 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
  * @param props - props from this instance of TagGroup
  * @param ref - reference to root HTMLDivElement of TagGroup
  */ export const useTagGroup_unstable = (props, ref)=>{
-    const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false } = props;
+    const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;
     const innerRef = React.useRef();
     const { targetDocument } = useFluent();
     const { findNextFocusable, findPrevFocusable } = useFocusFinders();
@@ -51,6 +51,7 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
     });
     return {
         handleTagDismiss,
+        role,
         size,
         appearance,
         dismissible,
@@ -62,7 +63,7 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
             // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
             // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: useMergedRefs(ref, innerRef),
-            role: 'toolbar',
+            role,
             ...arrowNavigationProps,
             ...props
         }), {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false } = props;\n\n  const innerRef = React.useRef<HTMLElement>();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const handleTagDismiss: TagGroupState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n\n    // set focus after tag dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    }\n  });\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    size,\n    appearance,\n    dismissible,\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'toolbar',\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroup_unstable","props","ref","onDismiss","size","appearance","dismissible","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","handleTagDismiss","e","data","activeElement","current","contains","next","container","focus","className","includes","root","prev","parentElement","arrowNavigationProps","circular","axis","memorizeCurrent","components","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAE5G,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AACnF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iCAAiC,QAAQ,qEAAqE;AAEvH;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAEC,aAAa,QAAQ,EAAEC,cAAc,KAAK,EAAE,GAAGL;IAEnF,MAAMM,WAAWjB,MAAMkB,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGX;IAC3B,MAAM,EAAEY,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGf;IAEjD,MAAMgB,mBAAsDpB,iBAAiB,CAACqB,GAAGC;YAK3EP;QAJJJ,sBAAAA,gCAAAA,UAAYU,GAAGC;QAEf,8BAA8B;QAC9B,MAAMC,gBAAgBN,2BAAAA,qCAAAA,eAAgBM,aAAa;QACnD,KAAIR,oBAAAA,SAASS,OAAO,cAAhBT,wCAAAA,kBAAkBU,QAAQ,CAACF,gBAA+B;YAC5D,+EAA+E;YAC/E,MAAMG,OAAOR,kBAAkBK,eAA8B;gBAAEI,WAAWZ,SAASS,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF;YAEA,iEAAiE;YACjE,IAAIL,0BAAAA,oCAAAA,cAAeM,SAAS,CAACC,QAAQ,CAACvB,kCAAkCwB,IAAI,GAAG;gBAC7E,MAAMC,OAAOb,kBAAkBI,cAAcU,aAAa,EAAiB;oBAAEN,WAAWZ,SAASS,OAAO;gBAAC;gBACzGQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb,OAAO;gBACL,MAAMI,OAAOb,kBAAkBI,eAA8B;oBAAEI,WAAWZ,SAASS,OAAO;gBAAC;gBAC3FQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb;QACF;IACF;IAEA,MAAMM,uBAAuB/B,wBAAwB;QACnDgC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLjB;QACAR;QACAC;QACAC;QACAwB,YAAY;YACVP,MAAM;QACR;QAEAA,MAAM7B,KAAKqC,MAAM,CACfxC,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FW,KAAKT,cAAcS,KAAKK;YACxByB,MAAM;YACN,GAAGN,oBAAoB;YACvB,GAAGzB,KAAK;QACV,IACA;YAAEgC,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;\n\n  const innerRef = React.useRef<HTMLElement>();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const handleTagDismiss: TagGroupState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n\n    // set focus after tag dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    }\n  });\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    role,\n    size,\n    appearance,\n    dismissible,\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role,\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroup_unstable","props","ref","onDismiss","size","appearance","dismissible","role","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","handleTagDismiss","e","data","activeElement","current","contains","next","container","focus","className","includes","root","prev","parentElement","arrowNavigationProps","circular","axis","memorizeCurrent","components","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAE5G,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AACnF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iCAAiC,QAAQ,qEAAqE;AAEvH;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAEC,aAAa,QAAQ,EAAEC,cAAc,KAAK,EAAEC,OAAO,SAAS,EAAE,GAAGN;IAErG,MAAMO,WAAWlB,MAAMmB,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGZ;IAC3B,MAAM,EAAEa,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGhB;IAEjD,MAAMiB,mBAAsDrB,iBAAiB,CAACsB,GAAGC;YAK3EP;QAJJL,sBAAAA,gCAAAA,UAAYW,GAAGC;QAEf,8BAA8B;QAC9B,MAAMC,gBAAgBN,2BAAAA,qCAAAA,eAAgBM,aAAa;QACnD,KAAIR,oBAAAA,SAASS,OAAO,cAAhBT,wCAAAA,kBAAkBU,QAAQ,CAACF,gBAA+B;YAC5D,+EAA+E;YAC/E,MAAMG,OAAOR,kBAAkBK,eAA8B;gBAAEI,WAAWZ,SAASS,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF;YAEA,iEAAiE;YACjE,IAAIL,0BAAAA,oCAAAA,cAAeM,SAAS,CAACC,QAAQ,CAACxB,kCAAkCyB,IAAI,GAAG;gBAC7E,MAAMC,OAAOb,kBAAkBI,cAAcU,aAAa,EAAiB;oBAAEN,WAAWZ,SAASS,OAAO;gBAAC;gBACzGQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb,OAAO;gBACL,MAAMI,OAAOb,kBAAkBI,eAA8B;oBAAEI,WAAWZ,SAASS,OAAO;gBAAC;gBAC3FQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb;QACF;IACF;IAEA,MAAMM,uBAAuBhC,wBAAwB;QACnDiC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLjB;QACAN;QACAH;QACAC;QACAC;QACAyB,YAAY;YACVP,MAAM;QACR;QAEAA,MAAM9B,KAAKsC,MAAM,CACfzC,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FW,KAAKT,cAAcS,KAAKM;YACxBD;YACA,GAAGoB,oBAAoB;YACvB,GAAG1B,KAAK;QACV,IACA;YAAEgC,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/TagGroup/useTagGroupContextValues.js

@@ -1,17 +1,19 @@
 import * as React from 'react';
 export function useTagGroupContextValues_unstable(state) {
-    const { handleTagDismiss, size, appearance, dismissible } = state;
+    const { handleTagDismiss, size, appearance, dismissible, role } = state;
     return {
         tagGroup: React.useMemo(()=>({
                 handleTagDismiss,
                 size,
                 appearance,
-                dismissible
+                dismissible,
+                role
             }), [
             handleTagDismiss,
             size,
             appearance,
-            dismissible
+            dismissible,
+            role
         ])
     };
 }