@fluentui-copilot/react-reference 0.0.0-nightly-20250717-0405-eecbae35.1 → 0.0.0-nightly-20250718-0405-8e705578.1
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.json +18 -3
- package/CHANGELOG.md +13 -4
- package/lib/components/Citation/useCitationStyles.styles.raw.js +69 -0
- package/lib/components/Citation/useCitationStyles.styles.raw.js.map +1 -0
- package/lib/components/Reference/useReferenceStyles.styles.raw.js +110 -0
- package/lib/components/Reference/useReferenceStyles.styles.raw.js.map +1 -0
- package/lib/components/ReferenceList/useReferenceListStyles.styles.raw.js +47 -0
- package/lib/components/ReferenceList/useReferenceListStyles.styles.raw.js.map +1 -0
- package/lib/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js +45 -0
- package/lib/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Citation/useCitationStyles.styles.raw.js +85 -0
- package/lib-commonjs/components/Citation/useCitationStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Reference/useReferenceStyles.styles.raw.js +132 -0
- package/lib-commonjs/components/Reference/useReferenceStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/ReferenceList/useReferenceListStyles.styles.raw.js +63 -0
- package/lib-commonjs/components/ReferenceList/useReferenceListStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js +61 -0
- package/lib-commonjs/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js.map +1 -0
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-reference",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Fri, 18 Jul 2025 04:12:23 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-20250718-0405-8e705578.1",
|
|
7
|
+
"version": "0.0.0-nightly-20250718-0405-8e705578.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,6 +16,21 @@
|
|
|
16
16
|
]
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Thu, 17 Jul 2025 17:49:25 GMT",
|
|
21
|
+
"tag": "@fluentui-copilot/react-reference_v0.16.3",
|
|
22
|
+
"version": "0.16.3",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "hochelmartin@gmail.com",
|
|
27
|
+
"package": "@fluentui-copilot/react-reference",
|
|
28
|
+
"commit": "fef5160c07333e8d9996952a305b34e357604919",
|
|
29
|
+
"comment": "feat: enable griffel raw styles"
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
},
|
|
19
34
|
{
|
|
20
35
|
"date": "Tue, 01 Jul 2025 14:45:29 GMT",
|
|
21
36
|
"tag": "@fluentui-copilot/react-reference_v0.16.2",
|
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-reference
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 18 Jul 2025 04:12:23 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20250718-0405-8e705578.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.0.0-nightly-20250718-0405-8e705578.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.16.
|
|
9
|
+
Fri, 18 Jul 2025 04:12:23 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.16.3..@fluentui-copilot/react-reference_v0.0.0-nightly-20250718-0405-8e705578.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
15
|
|
|
16
|
+
## [0.16.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.16.3)
|
|
17
|
+
|
|
18
|
+
Thu, 17 Jul 2025 17:49:25 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.16.2..@fluentui-copilot/react-reference_v0.16.3)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- feat: enable griffel raw styles ([PR #3227](https://github.com/microsoft/fluentai/pull/3227) by hochelmartin@gmail.com)
|
|
24
|
+
|
|
16
25
|
## [0.16.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.16.2)
|
|
17
26
|
|
|
18
27
|
Tue, 01 Jul 2025 14:45:29 GMT
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
|
|
3
|
+
export const citationClassNames = {
|
|
4
|
+
root: 'fai-Citation'
|
|
5
|
+
};
|
|
6
|
+
const useCitationBaseClassName = makeResetStyles({
|
|
7
|
+
display: 'inline-flex',
|
|
8
|
+
justifyContent: 'center',
|
|
9
|
+
boxSizing: 'border-box',
|
|
10
|
+
alignItems: 'center',
|
|
11
|
+
cursor: 'pointer',
|
|
12
|
+
...typographyStyles.caption2Strong,
|
|
13
|
+
backgroundColor: tokens.colorNeutralBackground3,
|
|
14
|
+
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
|
|
15
|
+
color: tokens.colorNeutralForeground2,
|
|
16
|
+
minWidth: '14px',
|
|
17
|
+
height: '14px',
|
|
18
|
+
verticalAlign: `calc((${typographyStyles.caption2Strong.lineHeight} - ${typographyStyles.caption2Strong.fontSize}) / 2)`,
|
|
19
|
+
paddingInline: tokens.spacingHorizontalXXS,
|
|
20
|
+
borderRadius: tokens.borderRadiusMedium,
|
|
21
|
+
textDecoration: 'none',
|
|
22
|
+
marginLeft: tokens.spacingHorizontalXXS,
|
|
23
|
+
marginRight: tokens.spacingHorizontalXXS,
|
|
24
|
+
':hover': {
|
|
25
|
+
cursor: 'pointer',
|
|
26
|
+
color: tokens.colorBrandForeground2Hover,
|
|
27
|
+
borderColor: tokens.colorBrandStroke2Hover,
|
|
28
|
+
backgroundColor: tokens.colorBrandBackground2Hover
|
|
29
|
+
},
|
|
30
|
+
':hover:active': {
|
|
31
|
+
cursor: 'pointer',
|
|
32
|
+
color: tokens.colorBrandForeground2Pressed,
|
|
33
|
+
borderColor: tokens.colorBrandStroke2Pressed,
|
|
34
|
+
backgroundColor: tokens.colorBrandBackground2Pressed
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
const useCitationRootStyles = makeStyles({
|
|
38
|
+
isBlock: {
|
|
39
|
+
display: 'flex',
|
|
40
|
+
marginLeft: 0,
|
|
41
|
+
marginRight: 0
|
|
42
|
+
},
|
|
43
|
+
isPopoverLocked: {
|
|
44
|
+
color: tokens.colorBrandForeground2Pressed,
|
|
45
|
+
...shorthands.borderColor(tokens.colorBrandStroke2Pressed),
|
|
46
|
+
backgroundColor: tokens.colorBrandBackground2,
|
|
47
|
+
':hover': {
|
|
48
|
+
color: tokens.colorBrandForeground2Pressed,
|
|
49
|
+
...shorthands.borderColor(tokens.colorBrandStroke2Pressed),
|
|
50
|
+
backgroundColor: tokens.colorBrandBackground2
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
const useNextStyles = makeStyles({
|
|
55
|
+
root: {
|
|
56
|
+
borderRadius: tokens.borderRadiusXLarge
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
/**
|
|
60
|
+
* Apply styling to the Citation slots based on the state
|
|
61
|
+
*/ export const useCitationStyles_unstable = (state)=>{
|
|
62
|
+
'use no memo';
|
|
63
|
+
const { designVersion } = state;
|
|
64
|
+
const rootBaseClassName = useCitationBaseClassName();
|
|
65
|
+
const rootStyles = useCitationRootStyles();
|
|
66
|
+
const nextStyles = useNextStyles();
|
|
67
|
+
state.root.className = mergeClasses(citationClassNames.root, state.isPopoverLocked && rootStyles.isPopoverLocked, state.block && rootStyles.isBlock, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
|
|
68
|
+
return state;
|
|
69
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useCitationStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { CitationSlots, CitationState } from './Citation.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const citationClassNames: SlotClassNames<CitationSlots> = {\n root: 'fai-Citation',\n};\n\nconst useCitationBaseClassName = makeResetStyles({\n display: 'inline-flex',\n justifyContent: 'center',\n boxSizing: 'border-box',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.caption2Strong,\n\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n color: tokens.colorNeutralForeground2,\n\n minWidth: '14px',\n height: '14px',\n verticalAlign: `calc((${typographyStyles.caption2Strong.lineHeight} - ${typographyStyles.caption2Strong.fontSize}) / 2)`,\n paddingInline: tokens.spacingHorizontalXXS,\n\n borderRadius: tokens.borderRadiusMedium,\n\n textDecoration: 'none',\n\n marginLeft: tokens.spacingHorizontalXXS,\n marginRight: tokens.spacingHorizontalXXS,\n\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Hover,\n borderColor: tokens.colorBrandStroke2Hover,\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n\n ':hover:active': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Pressed,\n borderColor: tokens.colorBrandStroke2Pressed,\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n});\n\nconst useCitationRootStyles = makeStyles({\n isBlock: {\n display: 'flex',\n marginLeft: 0,\n marginRight: 0,\n },\n isPopoverLocked: {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n ':hover': {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n },\n },\n});\n\nconst useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\n/**\n * Apply styling to the Citation slots based on the state\n */\nexport const useCitationStyles_unstable = (state: CitationState): CitationState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const rootBaseClassName = useCitationBaseClassName();\n const rootStyles = useCitationRootStyles();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n citationClassNames.root,\n state.isPopoverLocked && rootStyles.isPopoverLocked,\n state.block && rootStyles.isBlock,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","citationClassNames","root","useCitationBaseClassName","display","justifyContent","boxSizing","alignItems","cursor","caption2Strong","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","color","colorNeutralForeground2","minWidth","height","verticalAlign","lineHeight","fontSize","paddingInline","spacingHorizontalXXS","borderRadius","borderRadiusMedium","textDecoration","marginLeft","marginRight","colorBrandForeground2Hover","borderColor","colorBrandStroke2Hover","colorBrandBackground2Hover","colorBrandForeground2Pressed","colorBrandStroke2Pressed","colorBrandBackground2Pressed","useCitationRootStyles","isBlock","isPopoverLocked","colorBrandBackground2","useNextStyles","borderRadiusXLarge","useCitationStyles_unstable","state","designVersion","rootBaseClassName","rootStyles","nextStyles","className","block"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,6BAA6B;AACnG,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAIpE,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,2BAA2BR,gBAAgB;IAC/CS,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,YAAY;IACZC,QAAQ;IACR,GAAGR,iBAAiBS,cAAc;IAElCC,iBAAiBX,OAAOY,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEb,OAAOc,eAAe,CAAC,OAAO,EAAEd,OAAOe,mBAAmB,CAAC,CAAC;IACvEC,OAAOhB,OAAOiB,uBAAuB;IAErCC,UAAU;IACVC,QAAQ;IACRC,eAAe,CAAC,MAAM,EAAEnB,iBAAiBS,cAAc,CAACW,UAAU,CAAC,GAAG,EAAEpB,iBAAiBS,cAAc,CAACY,QAAQ,CAAC,MAAM,CAAC;IACxHC,eAAevB,OAAOwB,oBAAoB;IAE1CC,cAAczB,OAAO0B,kBAAkB;IAEvCC,gBAAgB;IAEhBC,YAAY5B,OAAOwB,oBAAoB;IACvCK,aAAa7B,OAAOwB,oBAAoB;IAExC,UAAU;QACRf,QAAQ;QACRO,OAAOhB,OAAO8B,0BAA0B;QACxCC,aAAa/B,OAAOgC,sBAAsB;QAC1CrB,iBAAiBX,OAAOiC,0BAA0B;IACpD;IAEA,iBAAiB;QACfxB,QAAQ;QACRO,OAAOhB,OAAOkC,4BAA4B;QAC1CH,aAAa/B,OAAOmC,wBAAwB;QAC5CxB,iBAAiBX,OAAOoC,4BAA4B;IACtD;AACF;AAEA,MAAMC,wBAAwBxC,WAAW;IACvCyC,SAAS;QACPjC,SAAS;QACTuB,YAAY;QACZC,aAAa;IACf;IACAU,iBAAiB;QACfvB,OAAOhB,OAAOkC,4BAA4B;QAC1C,GAAGnC,WAAWgC,WAAW,CAAC/B,OAAOmC,wBAAwB,CAAC;QAC1DxB,iBAAiBX,OAAOwC,qBAAqB;QAC7C,UAAU;YACRxB,OAAOhB,OAAOkC,4BAA4B;YAC1C,GAAGnC,WAAWgC,WAAW,CAAC/B,OAAOmC,wBAAwB,CAAC;YAC1DxB,iBAAiBX,OAAOwC,qBAAqB;QAC/C;IACF;AACF;AAEA,MAAMC,gBAAgB5C,WAAW;IAAEM,MAAM;QAAEsB,cAAczB,OAAO0C,kBAAkB;IAAC;AAAE;AAErF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoB1C;IAC1B,MAAM2C,aAAaV;IACnB,MAAMW,aAAaP;IAEnBG,MAAMzC,IAAI,CAAC8C,SAAS,GAAGnD,aACrBI,mBAAmBC,IAAI,EACvByC,MAAML,eAAe,IAAIQ,WAAWR,eAAe,EACnDK,MAAMM,KAAK,IAAIH,WAAWT,OAAO,EACjCQ,mBACAD,kBAAkB,UAAUG,WAAW7C,IAAI,EAC3CyC,MAAMzC,IAAI,CAAC8C,SAAS;IAGtB,OAAOL;AACT,EAAE"}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
|
|
3
|
+
export const referenceClassNames = {
|
|
4
|
+
root: 'fai-Reference',
|
|
5
|
+
citation: 'fai-Reference__citation',
|
|
6
|
+
divider: 'fai-Reference__divider',
|
|
7
|
+
graphic: 'fai-Reference__graphic',
|
|
8
|
+
content: 'fai-Reference__content'
|
|
9
|
+
};
|
|
10
|
+
export const referenceExtraClassNames = {
|
|
11
|
+
graphicChild: 'fai-Reference__graphicChild'
|
|
12
|
+
};
|
|
13
|
+
const GRAPHIC_SIZE = '16px';
|
|
14
|
+
const useRootBaseClassName = makeResetStyles({
|
|
15
|
+
alignItems: 'center',
|
|
16
|
+
backgroundColor: tokens.colorNeutralBackground3,
|
|
17
|
+
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
|
|
18
|
+
borderRadius: tokens.borderRadiusMedium,
|
|
19
|
+
boxSizing: 'border-box',
|
|
20
|
+
color: tokens.colorNeutralForeground2,
|
|
21
|
+
columnGap: tokens.spacingHorizontalXXS,
|
|
22
|
+
display: 'inline-flex',
|
|
23
|
+
flexShrink: 0,
|
|
24
|
+
justifyContent: 'center',
|
|
25
|
+
maxWidth: '100%',
|
|
26
|
+
minHeight: '24px',
|
|
27
|
+
padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
|
|
28
|
+
textDecoration: 'none',
|
|
29
|
+
':hover': {
|
|
30
|
+
backgroundColor: tokens.colorNeutralBackground3Hover,
|
|
31
|
+
borderColor: tokens.colorNeutralStroke1Hover,
|
|
32
|
+
color: tokens.colorNeutralForeground2Hover,
|
|
33
|
+
[`& .${referenceClassNames.divider}`]: {
|
|
34
|
+
backgroundColor: tokens.colorNeutralStroke1Hover
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
':hover:active': {
|
|
38
|
+
backgroundColor: tokens.colorNeutralBackground3Pressed,
|
|
39
|
+
borderColor: tokens.colorNeutralStroke1Pressed,
|
|
40
|
+
color: tokens.colorNeutralForeground2Pressed,
|
|
41
|
+
[`& .${referenceClassNames.divider}`]: {
|
|
42
|
+
backgroundColor: tokens.colorNeutralStroke1Pressed
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
export const useRootStyles = makeStyles({
|
|
47
|
+
overflow: {
|
|
48
|
+
maxWidth: '100%',
|
|
49
|
+
width: '100%'
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
const useRootNextStyles = makeStyles({
|
|
53
|
+
root: {
|
|
54
|
+
borderRadius: tokens.borderRadiusXLarge
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
const useCitationBaseClassName = makeResetStyles({
|
|
58
|
+
...typographyStyles.caption2Strong
|
|
59
|
+
});
|
|
60
|
+
const useDividerBaseClassName = makeResetStyles({
|
|
61
|
+
backgroundColor: tokens.colorNeutralStroke2,
|
|
62
|
+
height: '16px',
|
|
63
|
+
margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,
|
|
64
|
+
width: '1px'
|
|
65
|
+
});
|
|
66
|
+
const useGraphicBaseClassName = makeResetStyles({
|
|
67
|
+
display: 'inline-flex',
|
|
68
|
+
fontSize: GRAPHIC_SIZE,
|
|
69
|
+
height: GRAPHIC_SIZE,
|
|
70
|
+
lineHeight: GRAPHIC_SIZE,
|
|
71
|
+
width: GRAPHIC_SIZE,
|
|
72
|
+
[`> .${referenceExtraClassNames.graphicChild}`]: {
|
|
73
|
+
height: GRAPHIC_SIZE,
|
|
74
|
+
width: GRAPHIC_SIZE
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
const useContentBaseClassName = makeResetStyles({
|
|
78
|
+
alignItems: 'center',
|
|
79
|
+
columnGap: tokens.spacingHorizontalSNudge,
|
|
80
|
+
display: 'inline-flex',
|
|
81
|
+
textAlign: 'start',
|
|
82
|
+
wordBreak: 'break-word',
|
|
83
|
+
...typographyStyles.caption1
|
|
84
|
+
});
|
|
85
|
+
/**
|
|
86
|
+
* Apply styling to the Reference slots based on the state
|
|
87
|
+
*/ export const useReferenceStyles_unstable = (state)=>{
|
|
88
|
+
'use no memo';
|
|
89
|
+
const { designVersion } = state;
|
|
90
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
91
|
+
const rootNextStyles = useRootNextStyles();
|
|
92
|
+
const citationBaseClassName = useCitationBaseClassName();
|
|
93
|
+
const dividerBaseClassName = useDividerBaseClassName();
|
|
94
|
+
const contentBaseClassName = useContentBaseClassName();
|
|
95
|
+
const graphicBaseClassName = useGraphicBaseClassName();
|
|
96
|
+
state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
|
|
97
|
+
if (state.citation) {
|
|
98
|
+
state.citation.className = mergeClasses(referenceClassNames.citation, citationBaseClassName, state.citation.className);
|
|
99
|
+
}
|
|
100
|
+
if (state.divider) {
|
|
101
|
+
state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);
|
|
102
|
+
}
|
|
103
|
+
if (state.content) {
|
|
104
|
+
state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);
|
|
105
|
+
}
|
|
106
|
+
if (state.graphic) {
|
|
107
|
+
state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);
|
|
108
|
+
}
|
|
109
|
+
return state;
|
|
110
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n root: 'fai-Reference',\n citation: 'fai-Reference__citation',\n divider: 'fai-Reference__divider',\n graphic: 'fai-Reference__graphic',\n content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground2,\n columnGap: tokens.spacingHorizontalXXS,\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n maxWidth: '100%',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n textDecoration: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n});\n\nexport const useRootStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useRootNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\nconst useCitationBaseClassName = makeResetStyles({\n ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n backgroundColor: tokens.colorNeutralStroke2,\n height: '16px',\n margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n width: '1px',\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\n display: 'inline-flex',\n fontSize: GRAPHIC_SIZE,\n height: GRAPHIC_SIZE,\n lineHeight: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n\n [`> .${referenceExtraClassNames.graphicChild}`]: {\n height: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n textAlign: 'start',\n wordBreak: 'break-word',\n ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootNextStyles = useRootNextStyles();\n const citationBaseClassName = useCitationBaseClassName();\n const dividerBaseClassName = useDividerBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const graphicBaseClassName = useGraphicBaseClassName();\n\n state.root.className = mergeClasses(\n referenceClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && rootNextStyles.root,\n state.root.className,\n );\n\n if (state.citation) {\n state.citation.className = mergeClasses(\n referenceClassNames.citation,\n citationBaseClassName,\n state.citation.className,\n );\n }\n\n if (state.divider) {\n state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n }\n\n if (state.graphic) {\n state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","referenceClassNames","root","citation","divider","graphic","content","referenceExtraClassNames","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","boxSizing","color","colorNeutralForeground2","columnGap","spacingHorizontalXXS","display","flexShrink","justifyContent","maxWidth","minHeight","padding","spacingVerticalXXS","spacingHorizontalS","textDecoration","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useRootStyles","overflow","width","useRootNextStyles","borderRadiusXLarge","useCitationBaseClassName","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useGraphicBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","textAlign","wordBreak","caption1","useReferenceStyles_unstable","state","designVersion","rootBaseClassName","rootNextStyles","citationBaseClassName","dividerBaseClassName","contentBaseClassName","graphicBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
|
+
export const referenceListClassNames = {
|
|
4
|
+
root: 'fai-ReferenceList',
|
|
5
|
+
arrowableRegion: 'fai-ReferenceList__arrowableRegion',
|
|
6
|
+
showMoreButton: 'fai-ReferenceList__showMoreButton',
|
|
7
|
+
showLessButton: 'fai-ReferenceList__showLessButton'
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Styles for the root slot
|
|
11
|
+
*/ const useRootBaseClassName = makeResetStyles({
|
|
12
|
+
display: 'flex',
|
|
13
|
+
flexDirection: 'row',
|
|
14
|
+
gap: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`
|
|
15
|
+
});
|
|
16
|
+
const useRootStyles = makeStyles({
|
|
17
|
+
referencesExpanded: {
|
|
18
|
+
flexWrap: 'wrap'
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
const useArrowableRegionBaseClassName = makeResetStyles({
|
|
22
|
+
display: 'contents',
|
|
23
|
+
maxWidth: '100%'
|
|
24
|
+
});
|
|
25
|
+
const useOverflowButtonBaseClassName = makeResetStyles({
|
|
26
|
+
display: 'inline-flex',
|
|
27
|
+
flexShrink: 0
|
|
28
|
+
});
|
|
29
|
+
/**
|
|
30
|
+
* Apply styling to the ReferenceList slots based on the state
|
|
31
|
+
*/ export const useReferenceListStyles_unstable = (state)=>{
|
|
32
|
+
'use no memo';
|
|
33
|
+
const { areReferencesExpanded, shouldUseOverflow } = state;
|
|
34
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
35
|
+
const arrowableRegionBaseClassName = useArrowableRegionBaseClassName();
|
|
36
|
+
const overflowButtonBaseClassName = useOverflowButtonBaseClassName();
|
|
37
|
+
const rootStyles = useRootStyles();
|
|
38
|
+
state.root.className = mergeClasses(referenceListClassNames.root, rootBaseClassName, (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded, state.root.className);
|
|
39
|
+
state.arrowableRegion.className = mergeClasses(referenceListClassNames.arrowableRegion, arrowableRegionBaseClassName, state.arrowableRegion.className);
|
|
40
|
+
if (state.showMoreButton) {
|
|
41
|
+
state.showMoreButton.className = mergeClasses(referenceListClassNames.showMoreButton, overflowButtonBaseClassName, state.showMoreButton.className);
|
|
42
|
+
}
|
|
43
|
+
if (state.showLessButton) {
|
|
44
|
+
state.showLessButton.className = mergeClasses(referenceListClassNames.showLessButton, overflowButtonBaseClassName, state.showLessButton.className);
|
|
45
|
+
}
|
|
46
|
+
return state;
|
|
47
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n root: 'fai-ReferenceList',\n arrowableRegion: 'fai-ReferenceList__arrowableRegion',\n showMoreButton: 'fai-ReferenceList__showMoreButton',\n showLessButton: 'fai-ReferenceList__showLessButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n gap: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n});\n\nconst useRootStyles = makeStyles({\n referencesExpanded: {\n flexWrap: 'wrap',\n },\n});\n\nconst useArrowableRegionBaseClassName = makeResetStyles({\n display: 'contents',\n maxWidth: '100%',\n});\n\nconst useOverflowButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexShrink: 0,\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n 'use no memo';\n\n const { areReferencesExpanded, shouldUseOverflow } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const arrowableRegionBaseClassName = useArrowableRegionBaseClassName();\n const overflowButtonBaseClassName = useOverflowButtonBaseClassName();\n const rootStyles = useRootStyles();\n\n state.root.className = mergeClasses(\n referenceListClassNames.root,\n rootBaseClassName,\n (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded,\n state.root.className,\n );\n\n state.arrowableRegion.className = mergeClasses(\n referenceListClassNames.arrowableRegion,\n arrowableRegionBaseClassName,\n state.arrowableRegion.className,\n );\n\n if (state.showMoreButton) {\n state.showMoreButton.className = mergeClasses(\n referenceListClassNames.showMoreButton,\n overflowButtonBaseClassName,\n state.showMoreButton.className,\n );\n }\n\n if (state.showLessButton) {\n state.showLessButton.className = mergeClasses(\n referenceListClassNames.showLessButton,\n overflowButtonBaseClassName,\n state.showLessButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","referenceListClassNames","root","arrowableRegion","showMoreButton","showLessButton","useRootBaseClassName","display","flexDirection","gap","spacingVerticalXS","spacingHorizontalXS","useRootStyles","referencesExpanded","flexWrap","useArrowableRegionBaseClassName","maxWidth","useOverflowButtonBaseClassName","flexShrink","useReferenceListStyles_unstable","state","areReferencesExpanded","shouldUseOverflow","rootBaseClassName","arrowableRegionBaseClassName","overflowButtonBaseClassName","rootStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AACvF,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,iBAAiB;IACjBC,gBAAgB;IAChBC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBT,gBAAgB;IAC3CU,SAAS;IACTC,eAAe;IACfC,KAAK,CAAC,EAAET,OAAOU,iBAAiB,CAAC,CAAC,EAAEV,OAAOW,mBAAmB,CAAC,CAAC;AAClE;AAEA,MAAMC,gBAAgBd,WAAW;IAC/Be,oBAAoB;QAClBC,UAAU;IACZ;AACF;AAEA,MAAMC,kCAAkClB,gBAAgB;IACtDU,SAAS;IACTS,UAAU;AACZ;AAEA,MAAMC,iCAAiCpB,gBAAgB;IACrDU,SAAS;IACTW,YAAY;AACd;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAE,GAAGF;IAErD,MAAMG,oBAAoBjB;IAC1B,MAAMkB,+BAA+BT;IACrC,MAAMU,8BAA8BR;IACpC,MAAMS,aAAad;IAEnBQ,MAAMlB,IAAI,CAACyB,SAAS,GAAG5B,aACrBE,wBAAwBC,IAAI,EAC5BqB,mBACA,AAACF,CAAAA,yBAAyB,CAACC,iBAAgB,KAAMI,WAAWb,kBAAkB,EAC9EO,MAAMlB,IAAI,CAACyB,SAAS;IAGtBP,MAAMjB,eAAe,CAACwB,SAAS,GAAG5B,aAChCE,wBAAwBE,eAAe,EACvCqB,8BACAJ,MAAMjB,eAAe,CAACwB,SAAS;IAGjC,IAAIP,MAAMhB,cAAc,EAAE;QACxBgB,MAAMhB,cAAc,CAACuB,SAAS,GAAG5B,aAC/BE,wBAAwBG,cAAc,EACtCqB,6BACAL,MAAMhB,cAAc,CAACuB,SAAS;IAElC;IAEA,IAAIP,MAAMf,cAAc,EAAE;QACxBe,MAAMf,cAAc,CAACsB,SAAS,GAAG5B,aAC/BE,wBAAwBI,cAAc,EACtCoB,6BACAL,MAAMf,cAAc,CAACsB,SAAS;IAElC;IAEA,OAAOP;AACT,EAAE"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
|
|
3
|
+
export const referenceOverflowButtonClassNames = {
|
|
4
|
+
root: 'fai-ReferenceOverflowButton'
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* Styles for the root slot
|
|
8
|
+
*/ const useRootBaseClassName = makeResetStyles({
|
|
9
|
+
alignItems: 'center',
|
|
10
|
+
backgroundColor: tokens.colorNeutralBackground3,
|
|
11
|
+
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
|
|
12
|
+
borderRadius: tokens.borderRadiusMedium,
|
|
13
|
+
color: tokens.colorNeutralForeground2,
|
|
14
|
+
cursor: 'pointer',
|
|
15
|
+
display: 'inline-flex',
|
|
16
|
+
justifyContent: 'center',
|
|
17
|
+
minHeight: '24px',
|
|
18
|
+
padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
|
|
19
|
+
...typographyStyles.caption1,
|
|
20
|
+
':hover': {
|
|
21
|
+
backgroundColor: tokens.colorNeutralBackground3Hover,
|
|
22
|
+
borderColor: tokens.colorNeutralStroke1Hover,
|
|
23
|
+
color: tokens.colorNeutralForeground2Hover
|
|
24
|
+
},
|
|
25
|
+
':hover:active': {
|
|
26
|
+
backgroundColor: tokens.colorNeutralBackground3Pressed,
|
|
27
|
+
borderColor: tokens.colorNeutralStroke1Pressed,
|
|
28
|
+
color: tokens.colorNeutralForeground2Pressed
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
const useNextStyles = makeStyles({
|
|
32
|
+
root: {
|
|
33
|
+
borderRadius: tokens.borderRadiusXLarge
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
/**
|
|
37
|
+
* Apply styling to the ReferenceOverflowButton slots based on the state
|
|
38
|
+
*/ export const useReferenceOverflowButtonStyles_unstable = (state)=>{
|
|
39
|
+
'use no memo';
|
|
40
|
+
const { designVersion } = state;
|
|
41
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
42
|
+
const nextStyles = useNextStyles();
|
|
43
|
+
state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
|
|
44
|
+
return state;
|
|
45
|
+
};
|
package/lib/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n cursor: 'pointer',\n display: 'inline-flex',\n justifyContent: 'center',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n ...typographyStyles.caption1,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n});\n\nconst useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n referenceOverflowButtonClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","referenceOverflowButtonClassNames","root","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","cursor","display","justifyContent","minHeight","padding","spacingVerticalXXS","spacingHorizontalS","caption1","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useNextStyles","borderRadiusXLarge","useReferenceOverflowButtonStyles_unstable","state","designVersion","rootBaseClassName","nextStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AACvF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAIpE,OAAO,MAAMC,oCAAkF;IAC7FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,YAAY;IACZC,iBAAiBN,OAAOO,uBAAuB;IAC/CC,QAAQ,CAAC,EAAER,OAAOS,eAAe,CAAC,OAAO,EAAET,OAAOU,mBAAmB,CAAC,CAAC;IACvEC,cAAcX,OAAOY,kBAAkB;IACvCC,OAAOb,OAAOc,uBAAuB;IACrCC,QAAQ;IACRC,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,SAAS,CAAC,EAAEnB,OAAOoB,kBAAkB,CAAC,CAAC,EAAEpB,OAAOqB,kBAAkB,CAAC,CAAC;IACpE,GAAGpB,iBAAiBqB,QAAQ;IAE5B,UAAU;QACRhB,iBAAiBN,OAAOuB,4BAA4B;QACpDC,aAAaxB,OAAOyB,wBAAwB;QAC5CZ,OAAOb,OAAO0B,4BAA4B;IAC5C;IAEA,iBAAiB;QACfpB,iBAAiBN,OAAO2B,8BAA8B;QACtDH,aAAaxB,OAAO4B,0BAA0B;QAC9Cf,OAAOb,OAAO6B,8BAA8B;IAC9C;AACF;AAEA,MAAMC,gBAAgBhC,WAAW;IAAEK,MAAM;QAAEQ,cAAcX,OAAO+B,kBAAkB;IAAC;AAAE;AAErF;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CACvDC;IAEA;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoB/B;IAC1B,MAAMgC,aAAaN;IAEnBG,MAAM9B,IAAI,CAACkC,SAAS,GAAGtC,aACrBG,kCAAkCC,IAAI,EACtCgC,mBACAD,kBAAkB,UAAUE,WAAWjC,IAAI,EAC3C8B,MAAM9B,IAAI,CAACkC,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
citationClassNames: function() {
|
|
13
|
+
return citationClassNames;
|
|
14
|
+
},
|
|
15
|
+
useCitationStyles_unstable: function() {
|
|
16
|
+
return useCitationStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _reactcomponents = require("@fluentui/react-components");
|
|
20
|
+
const _tokens = require("@fluentui-copilot/tokens");
|
|
21
|
+
const citationClassNames = {
|
|
22
|
+
root: 'fai-Citation'
|
|
23
|
+
};
|
|
24
|
+
const useCitationBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
25
|
+
display: 'inline-flex',
|
|
26
|
+
justifyContent: 'center',
|
|
27
|
+
boxSizing: 'border-box',
|
|
28
|
+
alignItems: 'center',
|
|
29
|
+
cursor: 'pointer',
|
|
30
|
+
..._tokens.typographyStyles.caption2Strong,
|
|
31
|
+
backgroundColor: _tokens.tokens.colorNeutralBackground3,
|
|
32
|
+
border: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorNeutralStroke2}`,
|
|
33
|
+
color: _tokens.tokens.colorNeutralForeground2,
|
|
34
|
+
minWidth: '14px',
|
|
35
|
+
height: '14px',
|
|
36
|
+
verticalAlign: `calc((${_tokens.typographyStyles.caption2Strong.lineHeight} - ${_tokens.typographyStyles.caption2Strong.fontSize}) / 2)`,
|
|
37
|
+
paddingInline: _tokens.tokens.spacingHorizontalXXS,
|
|
38
|
+
borderRadius: _tokens.tokens.borderRadiusMedium,
|
|
39
|
+
textDecoration: 'none',
|
|
40
|
+
marginLeft: _tokens.tokens.spacingHorizontalXXS,
|
|
41
|
+
marginRight: _tokens.tokens.spacingHorizontalXXS,
|
|
42
|
+
':hover': {
|
|
43
|
+
cursor: 'pointer',
|
|
44
|
+
color: _tokens.tokens.colorBrandForeground2Hover,
|
|
45
|
+
borderColor: _tokens.tokens.colorBrandStroke2Hover,
|
|
46
|
+
backgroundColor: _tokens.tokens.colorBrandBackground2Hover
|
|
47
|
+
},
|
|
48
|
+
':hover:active': {
|
|
49
|
+
cursor: 'pointer',
|
|
50
|
+
color: _tokens.tokens.colorBrandForeground2Pressed,
|
|
51
|
+
borderColor: _tokens.tokens.colorBrandStroke2Pressed,
|
|
52
|
+
backgroundColor: _tokens.tokens.colorBrandBackground2Pressed
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
const useCitationRootStyles = (0, _reactcomponents.makeStyles)({
|
|
56
|
+
isBlock: {
|
|
57
|
+
display: 'flex',
|
|
58
|
+
marginLeft: 0,
|
|
59
|
+
marginRight: 0
|
|
60
|
+
},
|
|
61
|
+
isPopoverLocked: {
|
|
62
|
+
color: _tokens.tokens.colorBrandForeground2Pressed,
|
|
63
|
+
..._reactcomponents.shorthands.borderColor(_tokens.tokens.colorBrandStroke2Pressed),
|
|
64
|
+
backgroundColor: _tokens.tokens.colorBrandBackground2,
|
|
65
|
+
':hover': {
|
|
66
|
+
color: _tokens.tokens.colorBrandForeground2Pressed,
|
|
67
|
+
..._reactcomponents.shorthands.borderColor(_tokens.tokens.colorBrandStroke2Pressed),
|
|
68
|
+
backgroundColor: _tokens.tokens.colorBrandBackground2
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
const useNextStyles = (0, _reactcomponents.makeStyles)({
|
|
73
|
+
root: {
|
|
74
|
+
borderRadius: _tokens.tokens.borderRadiusXLarge
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
const useCitationStyles_unstable = (state)=>{
|
|
78
|
+
'use no memo';
|
|
79
|
+
const { designVersion } = state;
|
|
80
|
+
const rootBaseClassName = useCitationBaseClassName();
|
|
81
|
+
const rootStyles = useCitationRootStyles();
|
|
82
|
+
const nextStyles = useNextStyles();
|
|
83
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(citationClassNames.root, state.isPopoverLocked && rootStyles.isPopoverLocked, state.block && rootStyles.isBlock, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
|
|
84
|
+
return state;
|
|
85
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useCitationStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { CitationSlots, CitationState } from './Citation.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const citationClassNames: SlotClassNames<CitationSlots> = {\n root: 'fai-Citation',\n};\n\nconst useCitationBaseClassName = makeResetStyles({\n display: 'inline-flex',\n justifyContent: 'center',\n boxSizing: 'border-box',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.caption2Strong,\n\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n color: tokens.colorNeutralForeground2,\n\n minWidth: '14px',\n height: '14px',\n verticalAlign: `calc((${typographyStyles.caption2Strong.lineHeight} - ${typographyStyles.caption2Strong.fontSize}) / 2)`,\n paddingInline: tokens.spacingHorizontalXXS,\n\n borderRadius: tokens.borderRadiusMedium,\n\n textDecoration: 'none',\n\n marginLeft: tokens.spacingHorizontalXXS,\n marginRight: tokens.spacingHorizontalXXS,\n\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Hover,\n borderColor: tokens.colorBrandStroke2Hover,\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n\n ':hover:active': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Pressed,\n borderColor: tokens.colorBrandStroke2Pressed,\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n});\n\nconst useCitationRootStyles = makeStyles({\n isBlock: {\n display: 'flex',\n marginLeft: 0,\n marginRight: 0,\n },\n isPopoverLocked: {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n ':hover': {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n },\n },\n});\n\nconst useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\n/**\n * Apply styling to the Citation slots based on the state\n */\nexport const useCitationStyles_unstable = (state: CitationState): CitationState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const rootBaseClassName = useCitationBaseClassName();\n const rootStyles = useCitationRootStyles();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n citationClassNames.root,\n state.isPopoverLocked && rootStyles.isPopoverLocked,\n state.block && rootStyles.isBlock,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["citationClassNames","useCitationStyles_unstable","root","useCitationBaseClassName","makeResetStyles","display","justifyContent","boxSizing","alignItems","cursor","typographyStyles","caption2Strong","backgroundColor","tokens","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","color","colorNeutralForeground2","minWidth","height","verticalAlign","lineHeight","fontSize","paddingInline","spacingHorizontalXXS","borderRadius","borderRadiusMedium","textDecoration","marginLeft","marginRight","colorBrandForeground2Hover","borderColor","colorBrandStroke2Hover","colorBrandBackground2Hover","colorBrandForeground2Pressed","colorBrandStroke2Pressed","colorBrandBackground2Pressed","useCitationRootStyles","makeStyles","isBlock","isPopoverLocked","shorthands","colorBrandBackground2","useNextStyles","borderRadiusXLarge","state","designVersion","rootBaseClassName","rootStyles","nextStyles","className","mergeClasses","block"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,kBAAAA;eAAAA;;IAkEAC,0BAAAA;eAAAA;;;iCAvEyD;wBAC7B;AAIlC,MAAMD,qBAAoD;IAC/DE,MAAM;AACR;AAEA,MAAMC,2BAA2BC,IAAAA,gCAAAA,EAAgB;IAC/CC,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,YAAY;IACZC,QAAQ;IACR,GAAGC,wBAAAA,CAAiBC,cAAc;IAElCC,iBAAiBC,cAAAA,CAAOC,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEF,cAAAA,CAAOG,eAAe,CAAC,OAAO,EAAEH,cAAAA,CAAOI,mBAAmB,CAAC,CAAC;IACvEC,OAAOL,cAAAA,CAAOM,uBAAuB;IAErCC,UAAU;IACVC,QAAQ;IACRC,eAAe,CAAC,MAAM,EAAEZ,wBAAAA,CAAiBC,cAAc,CAACY,UAAU,CAAC,GAAG,EAAEb,wBAAAA,CAAiBC,cAAc,CAACa,QAAQ,CAAC,MAAM,CAAC;IACxHC,eAAeZ,cAAAA,CAAOa,oBAAoB;IAE1CC,cAAcd,cAAAA,CAAOe,kBAAkB;IAEvCC,gBAAgB;IAEhBC,YAAYjB,cAAAA,CAAOa,oBAAoB;IACvCK,aAAalB,cAAAA,CAAOa,oBAAoB;IAExC,UAAU;QACRjB,QAAQ;QACRS,OAAOL,cAAAA,CAAOmB,0BAA0B;QACxCC,aAAapB,cAAAA,CAAOqB,sBAAsB;QAC1CtB,iBAAiBC,cAAAA,CAAOsB,0BAA0B;IACpD;IAEA,iBAAiB;QACf1B,QAAQ;QACRS,OAAOL,cAAAA,CAAOuB,4BAA4B;QAC1CH,aAAapB,cAAAA,CAAOwB,wBAAwB;QAC5CzB,iBAAiBC,cAAAA,CAAOyB,4BAA4B;IACtD;AACF;AAEA,MAAMC,wBAAwBC,IAAAA,2BAAAA,EAAW;IACvCC,SAAS;QACPpC,SAAS;QACTyB,YAAY;QACZC,aAAa;IACf;IACAW,iBAAiB;QACfxB,OAAOL,cAAAA,CAAOuB,4BAA4B;QAC1C,GAAGO,2BAAAA,CAAWV,WAAW,CAACpB,cAAAA,CAAOwB,wBAAwB,CAAC;QAC1DzB,iBAAiBC,cAAAA,CAAO+B,qBAAqB;QAC7C,UAAU;YACR1B,OAAOL,cAAAA,CAAOuB,4BAA4B;YAC1C,GAAGO,2BAAAA,CAAWV,WAAW,CAACpB,cAAAA,CAAOwB,wBAAwB,CAAC;YAC1DzB,iBAAiBC,cAAAA,CAAO+B,qBAAqB;QAC/C;IACF;AACF;AAEA,MAAMC,gBAAgBL,IAAAA,2BAAAA,EAAW;IAAEtC,MAAM;QAAEyB,cAAcd,cAAAA,CAAOiC,kBAAkB;IAAC;AAAE;AAK9E,MAAM7C,6BAA6B,CAAC8C;IACzC;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoB9C;IAC1B,MAAM+C,aAAaX;IACnB,MAAMY,aAAaN;IAEnBE,MAAM7C,IAAI,CAACkD,SAAS,GAAGC,IAAAA,6BAAAA,EACrBrD,mBAAmBE,IAAI,EACvB6C,MAAML,eAAe,IAAIQ,WAAWR,eAAe,EACnDK,MAAMO,KAAK,IAAIJ,WAAWT,OAAO,EACjCQ,mBACAD,kBAAkB,UAAUG,WAAWjD,IAAI,EAC3C6C,MAAM7C,IAAI,CAACkD,SAAS;IAGtB,OAAOL;AACT"}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
referenceClassNames: function() {
|
|
13
|
+
return referenceClassNames;
|
|
14
|
+
},
|
|
15
|
+
referenceExtraClassNames: function() {
|
|
16
|
+
return referenceExtraClassNames;
|
|
17
|
+
},
|
|
18
|
+
useReferenceStyles_unstable: function() {
|
|
19
|
+
return useReferenceStyles_unstable;
|
|
20
|
+
},
|
|
21
|
+
useRootStyles: function() {
|
|
22
|
+
return useRootStyles;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
const _reactcomponents = require("@fluentui/react-components");
|
|
26
|
+
const _tokens = require("@fluentui-copilot/tokens");
|
|
27
|
+
const referenceClassNames = {
|
|
28
|
+
root: 'fai-Reference',
|
|
29
|
+
citation: 'fai-Reference__citation',
|
|
30
|
+
divider: 'fai-Reference__divider',
|
|
31
|
+
graphic: 'fai-Reference__graphic',
|
|
32
|
+
content: 'fai-Reference__content'
|
|
33
|
+
};
|
|
34
|
+
const referenceExtraClassNames = {
|
|
35
|
+
graphicChild: 'fai-Reference__graphicChild'
|
|
36
|
+
};
|
|
37
|
+
const GRAPHIC_SIZE = '16px';
|
|
38
|
+
const useRootBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
39
|
+
alignItems: 'center',
|
|
40
|
+
backgroundColor: _tokens.tokens.colorNeutralBackground3,
|
|
41
|
+
border: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorNeutralStroke2}`,
|
|
42
|
+
borderRadius: _tokens.tokens.borderRadiusMedium,
|
|
43
|
+
boxSizing: 'border-box',
|
|
44
|
+
color: _tokens.tokens.colorNeutralForeground2,
|
|
45
|
+
columnGap: _tokens.tokens.spacingHorizontalXXS,
|
|
46
|
+
display: 'inline-flex',
|
|
47
|
+
flexShrink: 0,
|
|
48
|
+
justifyContent: 'center',
|
|
49
|
+
maxWidth: '100%',
|
|
50
|
+
minHeight: '24px',
|
|
51
|
+
padding: `${_tokens.tokens.spacingVerticalXXS} ${_tokens.tokens.spacingHorizontalS}`,
|
|
52
|
+
textDecoration: 'none',
|
|
53
|
+
':hover': {
|
|
54
|
+
backgroundColor: _tokens.tokens.colorNeutralBackground3Hover,
|
|
55
|
+
borderColor: _tokens.tokens.colorNeutralStroke1Hover,
|
|
56
|
+
color: _tokens.tokens.colorNeutralForeground2Hover,
|
|
57
|
+
[`& .${referenceClassNames.divider}`]: {
|
|
58
|
+
backgroundColor: _tokens.tokens.colorNeutralStroke1Hover
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
':hover:active': {
|
|
62
|
+
backgroundColor: _tokens.tokens.colorNeutralBackground3Pressed,
|
|
63
|
+
borderColor: _tokens.tokens.colorNeutralStroke1Pressed,
|
|
64
|
+
color: _tokens.tokens.colorNeutralForeground2Pressed,
|
|
65
|
+
[`& .${referenceClassNames.divider}`]: {
|
|
66
|
+
backgroundColor: _tokens.tokens.colorNeutralStroke1Pressed
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
const useRootStyles = (0, _reactcomponents.makeStyles)({
|
|
71
|
+
overflow: {
|
|
72
|
+
maxWidth: '100%',
|
|
73
|
+
width: '100%'
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
const useRootNextStyles = (0, _reactcomponents.makeStyles)({
|
|
77
|
+
root: {
|
|
78
|
+
borderRadius: _tokens.tokens.borderRadiusXLarge
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
const useCitationBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
82
|
+
..._tokens.typographyStyles.caption2Strong
|
|
83
|
+
});
|
|
84
|
+
const useDividerBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
85
|
+
backgroundColor: _tokens.tokens.colorNeutralStroke2,
|
|
86
|
+
height: '16px',
|
|
87
|
+
margin: `${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalXS}`,
|
|
88
|
+
width: '1px'
|
|
89
|
+
});
|
|
90
|
+
const useGraphicBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
91
|
+
display: 'inline-flex',
|
|
92
|
+
fontSize: GRAPHIC_SIZE,
|
|
93
|
+
height: GRAPHIC_SIZE,
|
|
94
|
+
lineHeight: GRAPHIC_SIZE,
|
|
95
|
+
width: GRAPHIC_SIZE,
|
|
96
|
+
[`> .${referenceExtraClassNames.graphicChild}`]: {
|
|
97
|
+
height: GRAPHIC_SIZE,
|
|
98
|
+
width: GRAPHIC_SIZE
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
const useContentBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
102
|
+
alignItems: 'center',
|
|
103
|
+
columnGap: _tokens.tokens.spacingHorizontalSNudge,
|
|
104
|
+
display: 'inline-flex',
|
|
105
|
+
textAlign: 'start',
|
|
106
|
+
wordBreak: 'break-word',
|
|
107
|
+
..._tokens.typographyStyles.caption1
|
|
108
|
+
});
|
|
109
|
+
const useReferenceStyles_unstable = (state)=>{
|
|
110
|
+
'use no memo';
|
|
111
|
+
const { designVersion } = state;
|
|
112
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
113
|
+
const rootNextStyles = useRootNextStyles();
|
|
114
|
+
const citationBaseClassName = useCitationBaseClassName();
|
|
115
|
+
const dividerBaseClassName = useDividerBaseClassName();
|
|
116
|
+
const contentBaseClassName = useContentBaseClassName();
|
|
117
|
+
const graphicBaseClassName = useGraphicBaseClassName();
|
|
118
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
|
|
119
|
+
if (state.citation) {
|
|
120
|
+
state.citation.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.citation, citationBaseClassName, state.citation.className);
|
|
121
|
+
}
|
|
122
|
+
if (state.divider) {
|
|
123
|
+
state.divider.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.divider, dividerBaseClassName, state.divider.className);
|
|
124
|
+
}
|
|
125
|
+
if (state.content) {
|
|
126
|
+
state.content.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.content, contentBaseClassName, state.content.className);
|
|
127
|
+
}
|
|
128
|
+
if (state.graphic) {
|
|
129
|
+
state.graphic.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);
|
|
130
|
+
}
|
|
131
|
+
return state;
|
|
132
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n root: 'fai-Reference',\n citation: 'fai-Reference__citation',\n divider: 'fai-Reference__divider',\n graphic: 'fai-Reference__graphic',\n content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground2,\n columnGap: tokens.spacingHorizontalXXS,\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n maxWidth: '100%',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n textDecoration: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n});\n\nexport const useRootStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useRootNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\nconst useCitationBaseClassName = makeResetStyles({\n ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n backgroundColor: tokens.colorNeutralStroke2,\n height: '16px',\n margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n width: '1px',\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\n display: 'inline-flex',\n fontSize: GRAPHIC_SIZE,\n height: GRAPHIC_SIZE,\n lineHeight: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n\n [`> .${referenceExtraClassNames.graphicChild}`]: {\n height: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n textAlign: 'start',\n wordBreak: 'break-word',\n ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootNextStyles = useRootNextStyles();\n const citationBaseClassName = useCitationBaseClassName();\n const dividerBaseClassName = useDividerBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const graphicBaseClassName = useGraphicBaseClassName();\n\n state.root.className = mergeClasses(\n referenceClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && rootNextStyles.root,\n state.root.className,\n );\n\n if (state.citation) {\n state.citation.className = mergeClasses(\n referenceClassNames.citation,\n citationBaseClassName,\n state.citation.className,\n );\n }\n\n if (state.divider) {\n state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n }\n\n if (state.graphic) {\n state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n }\n\n return state;\n};\n"],"names":["referenceClassNames","referenceExtraClassNames","useReferenceStyles_unstable","useRootStyles","root","citation","divider","graphic","content","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","makeResetStyles","alignItems","backgroundColor","tokens","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","boxSizing","color","colorNeutralForeground2","columnGap","spacingHorizontalXXS","display","flexShrink","justifyContent","maxWidth","minHeight","padding","spacingVerticalXXS","spacingHorizontalS","textDecoration","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","makeStyles","overflow","width","useRootNextStyles","borderRadiusXLarge","useCitationBaseClassName","typographyStyles","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useGraphicBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","textAlign","wordBreak","caption1","state","designVersion","rootBaseClassName","rootNextStyles","citationBaseClassName","dividerBaseClassName","contentBaseClassName","graphicBaseClassName","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
referenceListClassNames: function() {
|
|
13
|
+
return referenceListClassNames;
|
|
14
|
+
},
|
|
15
|
+
useReferenceListStyles_unstable: function() {
|
|
16
|
+
return useReferenceListStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _reactcomponents = require("@fluentui/react-components");
|
|
20
|
+
const _tokens = require("@fluentui-copilot/tokens");
|
|
21
|
+
const referenceListClassNames = {
|
|
22
|
+
root: 'fai-ReferenceList',
|
|
23
|
+
arrowableRegion: 'fai-ReferenceList__arrowableRegion',
|
|
24
|
+
showMoreButton: 'fai-ReferenceList__showMoreButton',
|
|
25
|
+
showLessButton: 'fai-ReferenceList__showLessButton'
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* Styles for the root slot
|
|
29
|
+
*/ const useRootBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
30
|
+
display: 'flex',
|
|
31
|
+
flexDirection: 'row',
|
|
32
|
+
gap: `${_tokens.tokens.spacingVerticalXS} ${_tokens.tokens.spacingHorizontalXS}`
|
|
33
|
+
});
|
|
34
|
+
const useRootStyles = (0, _reactcomponents.makeStyles)({
|
|
35
|
+
referencesExpanded: {
|
|
36
|
+
flexWrap: 'wrap'
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
const useArrowableRegionBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
40
|
+
display: 'contents',
|
|
41
|
+
maxWidth: '100%'
|
|
42
|
+
});
|
|
43
|
+
const useOverflowButtonBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
44
|
+
display: 'inline-flex',
|
|
45
|
+
flexShrink: 0
|
|
46
|
+
});
|
|
47
|
+
const useReferenceListStyles_unstable = (state)=>{
|
|
48
|
+
'use no memo';
|
|
49
|
+
const { areReferencesExpanded, shouldUseOverflow } = state;
|
|
50
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
51
|
+
const arrowableRegionBaseClassName = useArrowableRegionBaseClassName();
|
|
52
|
+
const overflowButtonBaseClassName = useOverflowButtonBaseClassName();
|
|
53
|
+
const rootStyles = useRootStyles();
|
|
54
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.root, rootBaseClassName, (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded, state.root.className);
|
|
55
|
+
state.arrowableRegion.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.arrowableRegion, arrowableRegionBaseClassName, state.arrowableRegion.className);
|
|
56
|
+
if (state.showMoreButton) {
|
|
57
|
+
state.showMoreButton.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.showMoreButton, overflowButtonBaseClassName, state.showMoreButton.className);
|
|
58
|
+
}
|
|
59
|
+
if (state.showLessButton) {
|
|
60
|
+
state.showLessButton.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.showLessButton, overflowButtonBaseClassName, state.showLessButton.className);
|
|
61
|
+
}
|
|
62
|
+
return state;
|
|
63
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n root: 'fai-ReferenceList',\n arrowableRegion: 'fai-ReferenceList__arrowableRegion',\n showMoreButton: 'fai-ReferenceList__showMoreButton',\n showLessButton: 'fai-ReferenceList__showLessButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n gap: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n});\n\nconst useRootStyles = makeStyles({\n referencesExpanded: {\n flexWrap: 'wrap',\n },\n});\n\nconst useArrowableRegionBaseClassName = makeResetStyles({\n display: 'contents',\n maxWidth: '100%',\n});\n\nconst useOverflowButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexShrink: 0,\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n 'use no memo';\n\n const { areReferencesExpanded, shouldUseOverflow } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const arrowableRegionBaseClassName = useArrowableRegionBaseClassName();\n const overflowButtonBaseClassName = useOverflowButtonBaseClassName();\n const rootStyles = useRootStyles();\n\n state.root.className = mergeClasses(\n referenceListClassNames.root,\n rootBaseClassName,\n (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded,\n state.root.className,\n );\n\n state.arrowableRegion.className = mergeClasses(\n referenceListClassNames.arrowableRegion,\n arrowableRegionBaseClassName,\n state.arrowableRegion.className,\n );\n\n if (state.showMoreButton) {\n state.showMoreButton.className = mergeClasses(\n referenceListClassNames.showMoreButton,\n overflowButtonBaseClassName,\n state.showMoreButton.className,\n );\n }\n\n if (state.showLessButton) {\n state.showLessButton.className = mergeClasses(\n referenceListClassNames.showLessButton,\n overflowButtonBaseClassName,\n state.showLessButton.className,\n );\n }\n\n return state;\n};\n"],"names":["referenceListClassNames","useReferenceListStyles_unstable","root","arrowableRegion","showMoreButton","showLessButton","useRootBaseClassName","makeResetStyles","display","flexDirection","gap","tokens","spacingVerticalXS","spacingHorizontalXS","useRootStyles","makeStyles","referencesExpanded","flexWrap","useArrowableRegionBaseClassName","maxWidth","useOverflowButtonBaseClassName","flexShrink","state","areReferencesExpanded","shouldUseOverflow","rootBaseClassName","arrowableRegionBaseClassName","overflowButtonBaseClassName","rootStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,uBAAAA;eAAAA;;IAmCAC,+BAAAA;eAAAA;;;iCAxC6C;wBACnC;AAIhB,MAAMD,0BAA8D;IACzEE,MAAM;IACNC,iBAAiB;IACjBC,gBAAgB;IAChBC,gBAAgB;AAClB;AAEA;;CAEC,GACD,MAAMC,uBAAuBC,IAAAA,gCAAAA,EAAgB;IAC3CC,SAAS;IACTC,eAAe;IACfC,KAAK,CAAC,EAAEC,cAAAA,CAAOC,iBAAiB,CAAC,CAAC,EAAED,cAAAA,CAAOE,mBAAmB,CAAC,CAAC;AAClE;AAEA,MAAMC,gBAAgBC,IAAAA,2BAAAA,EAAW;IAC/BC,oBAAoB;QAClBC,UAAU;IACZ;AACF;AAEA,MAAMC,kCAAkCX,IAAAA,gCAAAA,EAAgB;IACtDC,SAAS;IACTW,UAAU;AACZ;AAEA,MAAMC,iCAAiCb,IAAAA,gCAAAA,EAAgB;IACrDC,SAAS;IACTa,YAAY;AACd;AAKO,MAAMpB,kCAAkC,CAACqB;IAC9C;IAEA,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAE,GAAGF;IAErD,MAAMG,oBAAoBnB;IAC1B,MAAMoB,+BAA+BR;IACrC,MAAMS,8BAA8BP;IACpC,MAAMQ,aAAad;IAEnBQ,MAAMpB,IAAI,CAAC2B,SAAS,GAAGC,IAAAA,6BAAAA,EACrB9B,wBAAwBE,IAAI,EAC5BuB,mBACA,AAACF,CAAAA,yBAAyB,CAACC,iBAAAA,KAAsBI,WAAWZ,kBAAkB,EAC9EM,MAAMpB,IAAI,CAAC2B,SAAS;IAGtBP,MAAMnB,eAAe,CAAC0B,SAAS,GAAGC,IAAAA,6BAAAA,EAChC9B,wBAAwBG,eAAe,EACvCuB,8BACAJ,MAAMnB,eAAe,CAAC0B,SAAS;IAGjC,IAAIP,MAAMlB,cAAc,EAAE;QACxBkB,MAAMlB,cAAc,CAACyB,SAAS,GAAGC,IAAAA,6BAAAA,EAC/B9B,wBAAwBI,cAAc,EACtCuB,6BACAL,MAAMlB,cAAc,CAACyB,SAAS;IAElC;IAEA,IAAIP,MAAMjB,cAAc,EAAE;QACxBiB,MAAMjB,cAAc,CAACwB,SAAS,GAAGC,IAAAA,6BAAAA,EAC/B9B,wBAAwBK,cAAc,EACtCsB,6BACAL,MAAMjB,cAAc,CAACwB,SAAS;IAElC;IAEA,OAAOP;AACT"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
referenceOverflowButtonClassNames: function() {
|
|
13
|
+
return referenceOverflowButtonClassNames;
|
|
14
|
+
},
|
|
15
|
+
useReferenceOverflowButtonStyles_unstable: function() {
|
|
16
|
+
return useReferenceOverflowButtonStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _reactcomponents = require("@fluentui/react-components");
|
|
20
|
+
const _tokens = require("@fluentui-copilot/tokens");
|
|
21
|
+
const referenceOverflowButtonClassNames = {
|
|
22
|
+
root: 'fai-ReferenceOverflowButton'
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Styles for the root slot
|
|
26
|
+
*/ const useRootBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
27
|
+
alignItems: 'center',
|
|
28
|
+
backgroundColor: _tokens.tokens.colorNeutralBackground3,
|
|
29
|
+
border: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorNeutralStroke2}`,
|
|
30
|
+
borderRadius: _tokens.tokens.borderRadiusMedium,
|
|
31
|
+
color: _tokens.tokens.colorNeutralForeground2,
|
|
32
|
+
cursor: 'pointer',
|
|
33
|
+
display: 'inline-flex',
|
|
34
|
+
justifyContent: 'center',
|
|
35
|
+
minHeight: '24px',
|
|
36
|
+
padding: `${_tokens.tokens.spacingVerticalXXS} ${_tokens.tokens.spacingHorizontalS}`,
|
|
37
|
+
..._tokens.typographyStyles.caption1,
|
|
38
|
+
':hover': {
|
|
39
|
+
backgroundColor: _tokens.tokens.colorNeutralBackground3Hover,
|
|
40
|
+
borderColor: _tokens.tokens.colorNeutralStroke1Hover,
|
|
41
|
+
color: _tokens.tokens.colorNeutralForeground2Hover
|
|
42
|
+
},
|
|
43
|
+
':hover:active': {
|
|
44
|
+
backgroundColor: _tokens.tokens.colorNeutralBackground3Pressed,
|
|
45
|
+
borderColor: _tokens.tokens.colorNeutralStroke1Pressed,
|
|
46
|
+
color: _tokens.tokens.colorNeutralForeground2Pressed
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
const useNextStyles = (0, _reactcomponents.makeStyles)({
|
|
50
|
+
root: {
|
|
51
|
+
borderRadius: _tokens.tokens.borderRadiusXLarge
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
const useReferenceOverflowButtonStyles_unstable = (state)=>{
|
|
55
|
+
'use no memo';
|
|
56
|
+
const { designVersion } = state;
|
|
57
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
58
|
+
const nextStyles = useNextStyles();
|
|
59
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(referenceOverflowButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
|
|
60
|
+
return state;
|
|
61
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n cursor: 'pointer',\n display: 'inline-flex',\n justifyContent: 'center',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n ...typographyStyles.caption1,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n});\n\nconst useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n referenceOverflowButtonClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["referenceOverflowButtonClassNames","useReferenceOverflowButtonStyles_unstable","root","useRootBaseClassName","makeResetStyles","alignItems","backgroundColor","tokens","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","cursor","display","justifyContent","minHeight","padding","spacingVerticalXXS","spacingHorizontalS","typographyStyles","caption1","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useNextStyles","makeStyles","borderRadiusXLarge","state","designVersion","rootBaseClassName","nextStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,iCAAAA;eAAAA;;IAsCAC,yCAAAA;eAAAA;;;iCA3C6C;wBACjB;AAIlC,MAAMD,oCAAkF;IAC7FE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,uBAAuBC,IAAAA,gCAAAA,EAAgB;IAC3CC,YAAY;IACZC,iBAAiBC,cAAAA,CAAOC,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEF,cAAAA,CAAOG,eAAe,CAAC,OAAO,EAAEH,cAAAA,CAAOI,mBAAmB,CAAC,CAAC;IACvEC,cAAcL,cAAAA,CAAOM,kBAAkB;IACvCC,OAAOP,cAAAA,CAAOQ,uBAAuB;IACrCC,QAAQ;IACRC,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,SAAS,CAAC,EAAEb,cAAAA,CAAOc,kBAAkB,CAAC,CAAC,EAAEd,cAAAA,CAAOe,kBAAkB,CAAC,CAAC;IACpE,GAAGC,wBAAAA,CAAiBC,QAAQ;IAE5B,UAAU;QACRlB,iBAAiBC,cAAAA,CAAOkB,4BAA4B;QACpDC,aAAanB,cAAAA,CAAOoB,wBAAwB;QAC5Cb,OAAOP,cAAAA,CAAOqB,4BAA4B;IAC5C;IAEA,iBAAiB;QACftB,iBAAiBC,cAAAA,CAAOsB,8BAA8B;QACtDH,aAAanB,cAAAA,CAAOuB,0BAA0B;QAC9ChB,OAAOP,cAAAA,CAAOwB,8BAA8B;IAC9C;AACF;AAEA,MAAMC,gBAAgBC,IAAAA,2BAAAA,EAAW;IAAE/B,MAAM;QAAEU,cAAcL,cAAAA,CAAO2B,kBAAkB;IAAC;AAAE;AAK9E,MAAMjC,4CAA4C,CACvDkC;IAEA;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoBlC;IAC1B,MAAMmC,aAAaN;IAEnBG,MAAMjC,IAAI,CAACqC,SAAS,GAAGC,IAAAA,6BAAAA,EACrBxC,kCAAkCE,IAAI,EACtCmC,mBACAD,kBAAkB,UAAUE,WAAWpC,IAAI,EAC3CiC,MAAMjC,IAAI,CAACqC,SAAS;IAGtB,OAAOJ;AACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-reference",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20250718-0405-8e705578.1",
|
|
4
4
|
"description": "Fluent AI controls for citations and references",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-preview": "0.0.0-nightly-
|
|
16
|
-
"@fluentui-copilot/react-provider": "0.0.0-nightly-
|
|
17
|
-
"@fluentui-copilot/react-sensitivity-label": "0.0.0-nightly-
|
|
18
|
-
"@fluentui-copilot/react-utilities": "0.0.0-nightly-
|
|
19
|
-
"@fluentui-copilot/tokens": "0.0.0-nightly-
|
|
15
|
+
"@fluentui-copilot/react-preview": "0.0.0-nightly-20250718-0405-8e705578.1",
|
|
16
|
+
"@fluentui-copilot/react-provider": "0.0.0-nightly-20250718-0405-8e705578.1",
|
|
17
|
+
"@fluentui-copilot/react-sensitivity-label": "0.0.0-nightly-20250718-0405-8e705578.1",
|
|
18
|
+
"@fluentui-copilot/react-utilities": "0.0.0-nightly-20250718-0405-8e705578.1",
|
|
19
|
+
"@fluentui-copilot/tokens": "0.0.0-nightly-20250718-0405-8e705578.1",
|
|
20
20
|
"@swc/helpers": "^0.5.1"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|