@fluentui/react-link 9.7.1 → 9.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -2
- package/lib/components/Link/useLinkStyles.styles.js +6 -6
- package/lib/components/Link/useLinkStyles.styles.js.map +1 -1
- package/lib/components/Link/useLinkStyles.styles.raw.js +3 -3
- package/lib/components/Link/useLinkStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Link/useLinkStyles.styles.js +6 -6
- package/lib-commonjs/components/Link/useLinkStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Link/useLinkStyles.styles.raw.js +3 -3
- package/lib-commonjs/components/Link/useLinkStyles.styles.raw.js.map +1 -1
- package/package.json +6 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,26 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-link
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 22 Jan 2026 17:01:41 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.7.2)
|
|
8
|
+
|
|
9
|
+
Thu, 22 Jan 2026 17:01:41 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.7.1..@fluentui/react-link_v9.7.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: use brand tokens for inverted variant ([PR #35681](https://github.com/microsoft/fluentui/pull/35681) by vgenaev@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.26.12 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
20
|
+
|
|
7
21
|
## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.7.1)
|
|
8
22
|
|
|
9
|
-
Wed, 17 Dec 2025 18:
|
|
23
|
+
Wed, 17 Dec 2025 18:10:11 GMT
|
|
10
24
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.7.0..@fluentui/react-link_v9.7.1)
|
|
11
25
|
|
|
12
26
|
### Patches
|
|
@@ -75,9 +75,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
75
75
|
lj723h: "f19wldhg"
|
|
76
76
|
},
|
|
77
77
|
inverted: {
|
|
78
|
-
sj55zd: "
|
|
79
|
-
Bi91k9c: "
|
|
80
|
-
lj723h: "
|
|
78
|
+
sj55zd: "f1qz2gb0",
|
|
79
|
+
Bi91k9c: "f1ujg2k6",
|
|
80
|
+
lj723h: "f1ebemlp"
|
|
81
81
|
},
|
|
82
82
|
brand: {
|
|
83
83
|
sj55zd: "f179xftw",
|
|
@@ -91,10 +91,10 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
91
91
|
p: -1
|
|
92
92
|
}], [".fnbmjn9{overflow:inherit;}", {
|
|
93
93
|
p: -1
|
|
94
|
-
}], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f1iuv45f{text-decoration-line:none;}", ".f1cmlufx{text-decoration-thickness:var(--strokeWidthThin);}", ".f9n3di6{text-overflow:inherit;}", ".f1ids18y{-webkit-user-select:text;-moz-user-select:text;user-select:text;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".fjoy568{font-size:inherit;}", ".f2yjg6r{color:var(--colorNeutralForeground2Link);}", ".f13mvf36{text-decoration-line:underline;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".
|
|
94
|
+
}], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f1iuv45f{text-decoration-line:none;}", ".f1cmlufx{text-decoration-thickness:var(--strokeWidthThin);}", ".f9n3di6{text-overflow:inherit;}", ".f1ids18y{-webkit-user-select:text;-moz-user-select:text;user-select:text;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".fjoy568{font-size:inherit;}", ".f2yjg6r{color:var(--colorNeutralForeground2Link);}", ".f13mvf36{text-decoration-line:underline;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".f179xftw{color:var(--colorNeutralForegroundInvertedLink);}"],
|
|
95
95
|
i: [".f2hkw1w:focus-visible{outline-style:none;}"],
|
|
96
|
-
h: [".f1tx3yz7:hover{text-decoration-line:underline;}", ".f1deo86v:hover{color:var(--colorBrandForegroundLinkHover);}", ".fj1cjhr:hover{color:var(--colorNeutralForeground2LinkHover);}", ".fbnuktb:hover{text-decoration-line:none;}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".
|
|
97
|
-
a: [".f1eh06m1:active{text-decoration-line:underline;}", ".f1iescvh:active{color:var(--colorBrandForegroundLinkPressed);}", ".fhucn0c:active{color:var(--colorNeutralForeground2LinkPressed);}", ".fljg2da:active{text-decoration-line:none;}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".
|
|
96
|
+
h: [".f1tx3yz7:hover{text-decoration-line:underline;}", ".f1deo86v:hover{color:var(--colorBrandForegroundLinkHover);}", ".fj1cjhr:hover{color:var(--colorNeutralForeground2LinkHover);}", ".fbnuktb:hover{text-decoration-line:none;}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1ujg2k6:hover{color:var(--colorBrandForegroundInverted);}", ".f1sk1dtk:hover{color:var(--colorNeutralForegroundInvertedLinkHover);}"],
|
|
97
|
+
a: [".f1eh06m1:active{text-decoration-line:underline;}", ".f1iescvh:active{color:var(--colorBrandForegroundLinkPressed);}", ".fhucn0c:active{color:var(--colorNeutralForeground2LinkPressed);}", ".fljg2da:active{text-decoration-line:none;}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".f1ebemlp:active{color:var(--colorBrandForegroundInverted);}", ".f182g21t:active{color:var(--colorNeutralForegroundInvertedLinkPressed);}"]
|
|
98
98
|
});
|
|
99
99
|
export const useLinkStyles_unstable = state => {
|
|
100
100
|
'use no memo';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["shorthands","__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","Bttzg6e","B3uz8dt","B6ihwck","g9k6zt","B486eqv","De3pzq","B7ck84d","sj55zd","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","w71qe1","Bkioxbp","ygn44y","famaaq","Bde5pd6","Bi91k9c","i089h6","lj723h","button","icvyot","vrafjx","oivjwe","wvpqe5","href","subtle","inline","disabled","inverted","brand","d","p","i","h","a","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"sources":["useLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const linkClassNames = {\n root: 'fui-Link'\n};\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none'\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none'\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed\n }\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none')\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit'\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.colorNeutralForeground2Link,\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkPressed\n }\n },\n // Overrides when the Link is rendered inline within text.\n inline: {\n textDecorationLine: 'underline'\n },\n // Overrides when the Link is disabled.\n disabled: {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n ':hover': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled\n },\n ':active': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n inverted: {\n color: tokens.
|
|
1
|
+
{"version":3,"names":["shorthands","__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","Bttzg6e","B3uz8dt","B6ihwck","g9k6zt","B486eqv","De3pzq","B7ck84d","sj55zd","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","w71qe1","Bkioxbp","ygn44y","famaaq","Bde5pd6","Bi91k9c","i089h6","lj723h","button","icvyot","vrafjx","oivjwe","wvpqe5","href","subtle","inline","disabled","inverted","brand","d","p","i","h","a","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"sources":["useLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const linkClassNames = {\n root: 'fui-Link'\n};\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none'\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none'\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed\n }\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none')\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit'\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.colorNeutralForeground2Link,\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkPressed\n }\n },\n // Overrides when the Link is rendered inline within text.\n inline: {\n textDecorationLine: 'underline'\n },\n // Overrides when the Link is disabled.\n disabled: {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n ':hover': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled\n },\n ':active': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n inverted: {\n color: tokens.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInverted\n },\n ':active': {\n color: tokens.colorBrandForegroundInverted\n }\n },\n brand: {\n color: tokens.colorNeutralForegroundInvertedLink,\n ':hover': {\n color: tokens.colorNeutralForegroundInvertedLinkHover\n },\n ':active': {\n color: tokens.colorNeutralForegroundInvertedLinkPressed\n }\n }\n});\nexport const useLinkStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { appearance, disabled, inline, root, backgroundAppearance } = state;\n state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,UAAU,EAAAC,QAAA,EAAcC,YAAY,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAO,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,IAAA;IAAAO,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAA7B,OAAA;EAAA;EAAA8B,MAAA;IAAAlC,MAAA;IAAAwB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAQ,MAAA;IAAAf,MAAA;EAAA;EAAAgB,QAAA;IAAAhB,MAAA;IAAApB,MAAA;IAAAC,OAAA;IAAAuB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAU,QAAA;IAAArC,MAAA;IAAAyB,OAAA;IAAAE,MAAA;EAAA;EAAAW,KAAA;IAAAtC,MAAA;IAAAyB,OAAA;IAAAE,MAAA;EAAA;AAAA;EAAAY,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CA6FjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,aAAa;;EACb,MAAMC,MAAM,GAAGvD,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEwD,UAAU;IAAEX,QAAQ;IAAED,MAAM;IAAE7C,IAAI;IAAE0D;EAAqB,CAAC,GAAGH,KAAK;EAC1EA,KAAK,CAACvD,IAAI,CAAC2D,SAAS,GAAG/D,YAAY,CAACG,cAAc,CAACC,IAAI,EAAEwD,MAAM,CAACxD,IAAI,EAAEwD,MAAM,CAACtD,cAAc,EAAEF,IAAI,CAAC4D,EAAE,KAAK,GAAG,IAAI5D,IAAI,CAAC2C,IAAI,IAAIa,MAAM,CAACb,IAAI,EAAE3C,IAAI,CAAC4D,EAAE,KAAK,QAAQ,IAAIJ,MAAM,CAAClB,MAAM,EAAEmB,UAAU,KAAK,QAAQ,IAAID,MAAM,CAACZ,MAAM,EAAEc,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACT,QAAQ,EAAEW,oBAAoB,KAAK,OAAO,IAAIF,MAAM,CAACR,KAAK,EAAEH,MAAM,IAAIW,MAAM,CAACX,MAAM,EAAEC,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAES,KAAK,CAACvD,IAAI,CAAC2D,SAAS,CAAC;EAChZ,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -81,12 +81,12 @@ const useStyles = makeStyles({
|
|
|
81
81
|
}
|
|
82
82
|
},
|
|
83
83
|
inverted: {
|
|
84
|
-
color: tokens.
|
|
84
|
+
color: tokens.colorBrandForegroundInverted,
|
|
85
85
|
':hover': {
|
|
86
|
-
color: tokens.
|
|
86
|
+
color: tokens.colorBrandForegroundInverted
|
|
87
87
|
},
|
|
88
88
|
':active': {
|
|
89
|
-
color: tokens.
|
|
89
|
+
color: tokens.colorBrandForegroundInverted
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
brand: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LinkSlots, LinkState } from './Link.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const linkClassNames: SlotClassNames<LinkSlots> = {\n root: 'fui-Link',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none',\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none',\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed,\n },\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none'),\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit',\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.colorNeutralForeground2Link,\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkPressed,\n },\n },\n // Overrides when the Link is rendered inline within text.\n inline: {\n textDecorationLine: 'underline',\n },\n // Overrides when the Link is disabled.\n disabled: {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n\n ':hover': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':active': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n inverted: {\n color: tokens.
|
|
1
|
+
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LinkSlots, LinkState } from './Link.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const linkClassNames: SlotClassNames<LinkSlots> = {\n root: 'fui-Link',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none',\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none',\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed,\n },\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none'),\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit',\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.colorNeutralForeground2Link,\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkPressed,\n },\n },\n // Overrides when the Link is rendered inline within text.\n inline: {\n textDecorationLine: 'underline',\n },\n // Overrides when the Link is disabled.\n disabled: {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n\n ':hover': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':active': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n inverted: {\n color: tokens.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInverted,\n },\n ':active': {\n color: tokens.colorBrandForegroundInverted,\n },\n },\n brand: {\n color: tokens.colorNeutralForegroundInvertedLink,\n ':hover': {\n color: tokens.colorNeutralForegroundInvertedLinkHover,\n },\n ':active': {\n color: tokens.colorNeutralForegroundInvertedLinkPressed,\n },\n },\n});\n\nexport const useLinkStyles_unstable = (state: LinkState): LinkState => {\n 'use no memo';\n\n const styles = useStyles();\n const { appearance, disabled, inline, root, backgroundAppearance } = state;\n\n state.root.className = mergeClasses(\n linkClassNames.root,\n styles.root,\n styles.focusIndicator,\n root.as === 'a' && root.href && styles.href,\n root.as === 'button' && styles.button,\n appearance === 'subtle' && styles.subtle,\n backgroundAppearance === 'inverted' && styles.inverted,\n backgroundAppearance === 'brand' && styles.brand,\n inline && styles.inline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["shorthands","makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","textDecorationColor","colorStrokeFocus2","textDecorationLine","textDecorationStyle","outlineStyle","backgroundColor","boxSizing","color","colorBrandForegroundLink","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","margin","padding","overflow","textAlign","textDecorationThickness","strokeWidthThin","textOverflow","userSelect","colorBrandForegroundLinkHover","colorBrandForegroundLinkPressed","button","borderStyle","href","subtle","colorNeutralForeground2Link","colorNeutralForeground2LinkHover","colorNeutralForeground2LinkPressed","inline","disabled","colorNeutralForegroundDisabled","inverted","colorBrandForegroundInverted","brand","colorNeutralForegroundInvertedLink","colorNeutralForegroundInvertedLinkHover","colorNeutralForegroundInvertedLinkPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"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"}
|
|
@@ -99,9 +99,9 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
99
99
|
lj723h: "f19wldhg"
|
|
100
100
|
},
|
|
101
101
|
inverted: {
|
|
102
|
-
sj55zd: "
|
|
103
|
-
Bi91k9c: "
|
|
104
|
-
lj723h: "
|
|
102
|
+
sj55zd: "f1qz2gb0",
|
|
103
|
+
Bi91k9c: "f1ujg2k6",
|
|
104
|
+
lj723h: "f1ebemlp"
|
|
105
105
|
},
|
|
106
106
|
brand: {
|
|
107
107
|
sj55zd: "f179xftw",
|
|
@@ -155,7 +155,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
155
155
|
".f13mvf36{text-decoration-line:underline;}",
|
|
156
156
|
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
|
|
157
157
|
".fdrzuqr{cursor:not-allowed;}",
|
|
158
|
-
".
|
|
158
|
+
".f1qz2gb0{color:var(--colorBrandForegroundInverted);}",
|
|
159
159
|
".f179xftw{color:var(--colorNeutralForegroundInvertedLink);}"
|
|
160
160
|
],
|
|
161
161
|
i: [
|
|
@@ -167,7 +167,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
167
167
|
".fj1cjhr:hover{color:var(--colorNeutralForeground2LinkHover);}",
|
|
168
168
|
".fbnuktb:hover{text-decoration-line:none;}",
|
|
169
169
|
".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
|
|
170
|
-
".
|
|
170
|
+
".f1ujg2k6:hover{color:var(--colorBrandForegroundInverted);}",
|
|
171
171
|
".f1sk1dtk:hover{color:var(--colorNeutralForegroundInvertedLinkHover);}"
|
|
172
172
|
],
|
|
173
173
|
a: [
|
|
@@ -176,7 +176,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
176
176
|
".fhucn0c:active{color:var(--colorNeutralForeground2LinkPressed);}",
|
|
177
177
|
".fljg2da:active{text-decoration-line:none;}",
|
|
178
178
|
".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}",
|
|
179
|
-
".
|
|
179
|
+
".f1ebemlp:active{color:var(--colorBrandForegroundInverted);}",
|
|
180
180
|
".f182g21t:active{color:var(--colorNeutralForegroundInvertedLinkPressed);}"
|
|
181
181
|
]
|
|
182
182
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const linkClassNames = {\n root: 'fui-Link'\n};\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none'\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none'\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed\n }\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none')\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit'\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.colorNeutralForeground2Link,\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkPressed\n }\n },\n // Overrides when the Link is rendered inline within text.\n inline: {\n textDecorationLine: 'underline'\n },\n // Overrides when the Link is disabled.\n disabled: {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n ':hover': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled\n },\n ':active': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n inverted: {\n color: tokens.
|
|
1
|
+
{"version":3,"sources":["useLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const linkClassNames = {\n root: 'fui-Link'\n};\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none'\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none'\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed\n }\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none')\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit'\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.colorNeutralForeground2Link,\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkPressed\n }\n },\n // Overrides when the Link is rendered inline within text.\n inline: {\n textDecorationLine: 'underline'\n },\n // Overrides when the Link is disabled.\n disabled: {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n ':hover': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled\n },\n ':active': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n inverted: {\n color: tokens.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInverted\n },\n ':active': {\n color: tokens.colorBrandForegroundInverted\n }\n },\n brand: {\n color: tokens.colorNeutralForegroundInvertedLink,\n ':hover': {\n color: tokens.colorNeutralForegroundInvertedLinkHover\n },\n ':active': {\n color: tokens.colorNeutralForegroundInvertedLinkPressed\n }\n }\n});\nexport const useLinkStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { appearance, disabled, inline, root, backgroundAppearance } = state;\n state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);\n return state;\n};\n"],"names":["shorthands","__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","Bttzg6e","B3uz8dt","B6ihwck","g9k6zt","B486eqv","De3pzq","B7ck84d","sj55zd","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","w71qe1","Bkioxbp","ygn44y","famaaq","Bde5pd6","Bi91k9c","i089h6","lj723h","button","icvyot","vrafjx","oivjwe","wvpqe5","href","subtle","inline","disabled","inverted","brand","d","p","i","h","a","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"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"}
|
|
@@ -99,12 +99,12 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
99
99
|
}
|
|
100
100
|
},
|
|
101
101
|
inverted: {
|
|
102
|
-
color: _reacttheme.tokens.
|
|
102
|
+
color: _reacttheme.tokens.colorBrandForegroundInverted,
|
|
103
103
|
':hover': {
|
|
104
|
-
color: _reacttheme.tokens.
|
|
104
|
+
color: _reacttheme.tokens.colorBrandForegroundInverted
|
|
105
105
|
},
|
|
106
106
|
':active': {
|
|
107
|
-
color: _reacttheme.tokens.
|
|
107
|
+
color: _reacttheme.tokens.colorBrandForegroundInverted
|
|
108
108
|
}
|
|
109
109
|
},
|
|
110
110
|
brand: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LinkSlots, LinkState } from './Link.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const linkClassNames: SlotClassNames<LinkSlots> = {\n root: 'fui-Link',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none',\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none',\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed,\n },\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none'),\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit',\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.colorNeutralForeground2Link,\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkPressed,\n },\n },\n // Overrides when the Link is rendered inline within text.\n inline: {\n textDecorationLine: 'underline',\n },\n // Overrides when the Link is disabled.\n disabled: {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n\n ':hover': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':active': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n inverted: {\n color: tokens.
|
|
1
|
+
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LinkSlots, LinkState } from './Link.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const linkClassNames: SlotClassNames<LinkSlots> = {\n root: 'fui-Link',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none',\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none',\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed,\n },\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none'),\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit',\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.colorNeutralForeground2Link,\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkPressed,\n },\n },\n // Overrides when the Link is rendered inline within text.\n inline: {\n textDecorationLine: 'underline',\n },\n // Overrides when the Link is disabled.\n disabled: {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n\n ':hover': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':active': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n inverted: {\n color: tokens.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInverted,\n },\n ':active': {\n color: tokens.colorBrandForegroundInverted,\n },\n },\n brand: {\n color: tokens.colorNeutralForegroundInvertedLink,\n ':hover': {\n color: tokens.colorNeutralForegroundInvertedLinkHover,\n },\n ':active': {\n color: tokens.colorNeutralForegroundInvertedLinkPressed,\n },\n },\n});\n\nexport const useLinkStyles_unstable = (state: LinkState): LinkState => {\n 'use no memo';\n\n const styles = useStyles();\n const { appearance, disabled, inline, root, backgroundAppearance } = state;\n\n state.root.className = mergeClasses(\n linkClassNames.root,\n styles.root,\n styles.focusIndicator,\n root.as === 'a' && root.href && styles.href,\n root.as === 'button' && styles.button,\n appearance === 'subtle' && styles.subtle,\n backgroundAppearance === 'inverted' && styles.inverted,\n backgroundAppearance === 'brand' && styles.brand,\n inline && styles.inline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["shorthands","makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","textDecorationColor","colorStrokeFocus2","textDecorationLine","textDecorationStyle","outlineStyle","backgroundColor","boxSizing","color","colorBrandForegroundLink","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","margin","padding","overflow","textAlign","textDecorationThickness","strokeWidthThin","textOverflow","userSelect","colorBrandForegroundLinkHover","colorBrandForegroundLinkPressed","button","borderStyle","href","subtle","colorNeutralForeground2Link","colorNeutralForeground2LinkHover","colorNeutralForeground2LinkPressed","inline","disabled","colorNeutralForegroundDisabled","inverted","colorBrandForegroundInverted","brand","colorNeutralForegroundInvertedLink","colorNeutralForegroundInvertedLinkHover","colorNeutralForegroundInvertedLinkPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,cAAAA;;;0BAyGA+C;eAAAA;;;uBA/GwC,iBAAiB;8BACtB,0BAA0B;4BACnD,wBAAwB;AAIxC,uBAAkD;IACvD9C,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BO,oBAAgBL,6CAAAA,EAAgC;QAC9CM,qBAAqBL,kBAAAA,CAAOM,iBAAiB;QAC7CC,oBAAoB;QACpBC,qBAAqB;QACrBC,cAAc;IAChB;IACA,iBAAiB;IACjBP,MAAM;QACJ,kBAAkB;YAChBO,cAAc;QAChB;QACAC,iBAAiB;QACjBC,WAAW;QACXC,OAAOZ,kBAAAA,CAAOa,wBAAwB;QACtCC,QAAQ;QACRC,SAAS;QACTC,YAAYhB,kBAAAA,CAAOiB,cAAc;QACjCC,UAAUlB,kBAAAA,CAAOmB,eAAe;QAChCC,YAAYpB,kBAAAA,CAAOqB,iBAAiB;QACpCC,QAAQ;QACRC,SAAS;QACTC,UAAU;QACVC,WAAW;QACXlB,oBAAoB;QACpBmB,yBAAyB1B,kBAAAA,CAAO2B,eAAe;QAC/CC,cAAc;QACdC,YAAY;QAEZ,UAAU;YACRtB,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAO8B,6BAA6B;QAC7C;QAEA,WAAW;YACTvB,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAO+B,+BAA+B;QAC/C;IACF;IACA,+CAA+C;IAC/CC,QAAQ;QACN,GAAGpC,iBAAAA,CAAWqC,WAAW,CAAC,OAAO;IACnC;IACA,sEAAsE;IACtEC,MAAM;QACJhB,UAAU;IACZ;IACA,0CAA0C;IAC1CiB,QAAQ;QACNvB,OAAOZ,kBAAAA,CAAOoC,2BAA2B;QAEzC,UAAU;YACR7B,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOqC,gCAAgC;QAChD;QAEA,WAAW;YACT9B,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOsC,kCAAkC;QAClD;IACF;IACA,0DAA0D;IAC1DC,QAAQ;QACNhC,oBAAoB;IACtB;IACA,uCAAuC;IACvCiC,UAAU;QACRjC,oBAAoB;QACpBK,OAAOZ,kBAAAA,CAAOyC,8BAA8B;QAC5C3B,QAAQ;QAER,UAAU;YACRP,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOyC,8BAA8B;QAC9C;QAEA,WAAW;YACTlC,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOyC,8BAA8B;QAC9C;IACF;IACAC,UAAU;QACR9B,OAAOZ,kBAAAA,CAAO2C,4BAA4B;QAC1C,UAAU;YACR/B,OAAOZ,kBAAAA,CAAO2C,4BAA4B;QAC5C;QACA,WAAW;YACT/B,OAAOZ,kBAAAA,CAAO2C,4BAA4B;QAC5C;IACF;IACAC,OAAO;QACLhC,OAAOZ,kBAAAA,CAAO6C,kCAAkC;QAChD,UAAU;YACRjC,OAAOZ,kBAAAA,CAAO8C,uCAAuC;QACvD;QACA,WAAW;YACTlC,OAAOZ,kBAAAA,CAAO+C,yCAAyC;QACzD;IACF;AACF;AAEO,+BAA+B,CAACE;IACrC;IAEA,MAAMC,SAAS/C;IACf,MAAM,EAAEgD,UAAU,EAAEX,QAAQ,EAAED,MAAM,EAAErC,IAAI,EAAEkD,oBAAoB,EAAE,GAAGH;IAErEA,MAAM/C,IAAI,CAACmD,SAAS,OAAGvD,mBAAAA,EACrBG,eAAeC,IAAI,EACnBgD,OAAOhD,IAAI,EACXgD,OAAO9C,cAAc,EACrBF,KAAKoD,EAAE,KAAK,OAAOpD,KAAKgC,IAAI,IAAIgB,OAAOhB,IAAI,EAC3ChC,KAAKoD,EAAE,KAAK,YAAYJ,OAAOlB,MAAM,EACrCmB,eAAe,YAAYD,OAAOf,MAAM,EACxCiB,yBAAyB,cAAcF,OAAOR,QAAQ,EACtDU,yBAAyB,WAAWF,OAAON,KAAK,EAChDL,UAAUW,OAAOX,MAAM,EACvBC,YAAYU,OAAOV,QAAQ,EAC3BS,MAAM/C,IAAI,CAACmD,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-link",
|
|
3
|
-
"version": "9.7.
|
|
3
|
+
"version": "9.7.2",
|
|
4
4
|
"description": "Fluent UI React Link component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -11,20 +11,13 @@
|
|
|
11
11
|
"url": "https://github.com/microsoft/fluentui"
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
|
-
"devDependencies": {
|
|
15
|
-
"@fluentui/a11y-testing": "*",
|
|
16
|
-
"@fluentui/eslint-plugin": "*",
|
|
17
|
-
"@fluentui/react-conformance": "*",
|
|
18
|
-
"@fluentui/react-conformance-griffel": "*",
|
|
19
|
-
"@fluentui/scripts-api-extractor": "*"
|
|
20
|
-
},
|
|
21
14
|
"dependencies": {
|
|
22
15
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
23
|
-
"@fluentui/react-jsx-runtime": "^9.3.
|
|
24
|
-
"@fluentui/react-shared-contexts": "^9.26.
|
|
25
|
-
"@fluentui/react-tabster": "^9.26.
|
|
26
|
-
"@fluentui/react-theme": "^9.2.
|
|
27
|
-
"@fluentui/react-utilities": "^9.26.
|
|
16
|
+
"@fluentui/react-jsx-runtime": "^9.3.5",
|
|
17
|
+
"@fluentui/react-shared-contexts": "^9.26.1",
|
|
18
|
+
"@fluentui/react-tabster": "^9.26.12",
|
|
19
|
+
"@fluentui/react-theme": "^9.2.1",
|
|
20
|
+
"@fluentui/react-utilities": "^9.26.1",
|
|
28
21
|
"@griffel/react": "^1.5.32",
|
|
29
22
|
"@swc/helpers": "^0.5.1"
|
|
30
23
|
},
|