@fluentui-copilot/react-reference 0.13.9 → 0.14.0

package/CHANGELOG.json

@@ -2,7 +2,43 @@
   "name": "@fluentui-copilot/react-reference",
   "entries": [
     {
-      "date": "Fri, 07 Feb 2025 02:01:25 GMT",
+      "date": "Thu, 20 Mar 2025 16:59:13 GMT",
+      "tag": "@fluentui-copilot/react-reference_v0.14.0",
+      "version": "0.14.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "makotom@microsoft.com",
+            "package": "@fluentui-copilot/react-reference",
+            "commit": "9958f308833b5b38dd8afdaf5505f87aca5d3961",
+            "comment": "chore: Updating imports of tokens to be imported from @fluentui-copilot/tokens instead of from @fluentui/react-components."
+          },
+          {
+            "author": "owcampbe@microsoft.com",
+            "package": "@fluentui-copilot/react-reference",
+            "commit": "6376749aa066e0c6270a3ef3c31b38a4ef571f1c",
+            "comment": "feat: Add designVersion=next styles to Citation, Reference, and ReferenceListOverflowButton."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 28 Feb 2025 00:27:24 GMT",
+      "tag": "@fluentui-copilot/react-reference_v0.13.10",
+      "version": "0.13.10",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-reference",
+            "commit": "f62c9c504bcdb6e39ff00c1e95b0a93eb84b7e49",
+            "comment": "fix: overflow button now included in overflow calculation, preventing it from exceeding its parent container."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 07 Feb 2025 02:02:09 GMT",
       "tag": "@fluentui-copilot/react-reference_v0.13.9",
       "version": "0.13.9",
       "comments": {

package/CHANGELOG.md

@@ -1,9 +1,28 @@
 # Change Log - @fluentui-copilot/react-reference
 
-This log was last generated on Wed, 18 Dec 2024 08:55:42 GMT and should not be manually modified.
+This log was last generated on Thu, 20 Mar 2025 16:59:13 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.14.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.14.0)
+
+Thu, 20 Mar 2025 16:59:13 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.13.10..@fluentui-copilot/react-reference_v0.14.0)
+
+### Patches
+
+- chore: Updating imports of tokens to be imported from @fluentui-copilot/tokens instead of from @fluentui/react-components. ([PR #2745](https://github.com/microsoft/fluentai/pull/2745) by makotom@microsoft.com)
+- feat: Add designVersion=next styles to Citation, Reference, and ReferenceListOverflowButton. ([PR #2805](https://github.com/microsoft/fluentai/pull/2805) by owcampbe@microsoft.com)
+
+## [0.13.10](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.13.10)
+
+Fri, 28 Feb 2025 00:27:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.13.9..@fluentui-copilot/react-reference_v0.13.10)
+
+### Patches
+
+- fix: overflow button now included in overflow calculation, preventing it from exceeding its parent container. ([PR #2703](https://github.com/microsoft/fluentai/pull/2703) by tristan.watanabe@gmail.com)
+
 ## [0.13.8](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.13.8)
 
 Wed, 18 Dec 2024 08:55:42 GMT 

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import type { ComponentState } from '@fluentui/react-components';
 import type { Context } from '@fluentui/react-context-selector';
 import type { ContextSelector } from '@fluentui/react-context-selector';
 import type { CopilotMode } from '@fluentui-copilot/react-provider';
+import type { DesignVersion } from '@fluentui-copilot/react-provider';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-components';
 import type { PreviewHeaderProps } from '@fluentui-copilot/react-preview';
@@ -26,7 +27,7 @@ export declare const citationClassNames: SlotClassNames<CitationSlots>;
 /**
  * Citation Props
  */
-export declare type CitationProps = ComponentProps<Partial<CitationSlots>> & {
+export declare type CitationProps = ComponentProps<Partial<CitationSlots>> & DesignVersion & {
     /**
      * HREF to the associated `Reference`.
      */
@@ -48,7 +49,7 @@ export declare type CitationSlots = {
 /**
  * State used in rendering Citation
  */
-export declare type CitationState = ComponentState<CitationSlots> & Required<Pick<CitationProps, 'block'>> & {
+export declare type CitationState = ComponentState<CitationSlots> & Required<Pick<CitationProps, 'block' | 'designVersion'>> & {
     isPopoverLocked: boolean;
 };
 
@@ -243,7 +244,7 @@ export declare const referenceOverflowButtonClassNames: SlotClassNames<Reference
 /**
  * ReferenceOverflowButton Props
  */
-export declare type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {
+export declare type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & DesignVersion & {
     /**
      * The text that is displayed inside of the overflow button. This text is only displayed when `children` has not been passed to the component.
      * If a string is passed, that is what is rendered verbatim.
@@ -260,7 +261,8 @@ export declare type ReferenceOverflowButtonSlots = {
 /**
  * State used in rendering ReferenceOverflowButton
  */
-export declare type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> & {
+export declare type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> & Pick<Required<ReferenceOverflowButtonProps>, 'designVersion'> & {
+    id: string;
     shouldRenderOverflowButton: boolean;
 };
 
@@ -360,7 +362,7 @@ export declare const referenceV2ExtraClassNames: {
     graphicChild: string;
 };
 
-export declare type ReferenceV2Props = ComponentProps<Partial<ReferenceV2Slots>> & {};
+export declare type ReferenceV2Props = ComponentProps<Partial<ReferenceV2Slots>> & DesignVersion & {};
 
 export declare type ReferenceV2Slots = {
     /** The root of the component that renders the reference as either a button or an anchor element. */
@@ -375,7 +377,7 @@ export declare type ReferenceV2Slots = {
     graphic?: Slot<'span'>;
 };
 
-export declare type ReferenceV2State = ComponentState<ReferenceV2Slots> & Required<Pick<ReferenceV2Props, 'id'>> & Pick<ReferenceListV2State, 'shouldUseOverflow'>;
+export declare type ReferenceV2State = ComponentState<ReferenceV2Slots> & Required<Pick<ReferenceV2Props, 'id' | 'designVersion'>> & Pick<ReferenceListV2State, 'shouldUseOverflow'>;
 
 /**
  * Render the final JSX of Citation

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

@@ -1 +1 @@
-{"version":3,"sources":["Citation.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type CitationSlots = {\n  /**\n   * The root slot.\n   */\n  root: NonNullable<Slot<'a'>>;\n};\n\n/**\n * Citation Props\n */\nexport type CitationProps = ComponentProps<Partial<CitationSlots>> & {\n  /**\n   * HREF to the associated `Reference`.\n   */\n  referenceHref?: string;\n\n  /**\n   * Whether the citation is a block citation and has no built in margins.\n   * Citations are inline by default with margins to separate them from inline text.\n   */\n  block?: boolean;\n};\n\n/**\n * State used in rendering Citation\n */\nexport type CitationState = ComponentState<CitationSlots> &\n  Required<Pick<CitationProps, 'block'>> & {\n    isPopoverLocked: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAyBA;;CAEC,GACD,WAGI"}
+{"version":3,"sources":["Citation.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type CitationSlots = {\n  /**\n   * The root slot.\n   */\n  root: NonNullable<Slot<'a'>>;\n};\n\n/**\n * Citation Props\n */\nexport type CitationProps = ComponentProps<Partial<CitationSlots>> &\n  DesignVersion & {\n    /**\n     * HREF to the associated `Reference`.\n     */\n    referenceHref?: string;\n\n    /**\n     * Whether the citation is a block citation and has no built in margins.\n     * Citations are inline by default with margins to separate them from inline text.\n     */\n    block?: boolean;\n  };\n\n/**\n * State used in rendering Citation\n */\nexport type CitationState = ComponentState<CitationSlots> &\n  Required<Pick<CitationProps, 'block' | 'designVersion'>> & {\n    isPopoverLocked: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA2BA;;CAEC,GACD,WAGI"}

package/lib/components/Citation/useCitation.js

@@ -1,5 +1,6 @@
 import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
 import { usePreviewContext_unstable } from '@fluentui-copilot/react-preview';
+import { useDesignVersion } from '@fluentui-copilot/react-provider';
 /**
  * Create the state required to render Citation.
  *
@@ -15,9 +16,11 @@ export const useCitation_unstable = (props, ref) => {
     block = false,
     ...otherProps
   } = props;
+  const designVersion = useDesignVersion(props.designVersion);
   const isPopoverLocked = usePreviewContext_unstable(ctx => ctx.isPreviewLocked) && props['aria-expanded'];
   const state = {
     block,
+    designVersion,
     isPopoverLocked,
     components: {
       root: 'a'

package/lib/components/Citation/useCitation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCitation.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { usePreviewContext_unstable } from '@fluentui-copilot/react-preview';\nimport type { CitationProps, CitationState } from './Citation.types';\n/**\n * Create the state required to render Citation.\n *\n * The returned state can be modified with hooks such as useCitationStyles_unstable,\n * before being passed to renderCitation_unstable.\n *\n * @param props - props from this instance of Citation\n * @param ref - reference to root HTMLElement of Citation\n */\nexport const useCitation_unstable = (props: CitationProps, ref: React.Ref<HTMLAnchorElement>): CitationState => {\n  const { referenceHref, block = false, ...otherProps } = props;\n\n  const isPopoverLocked = usePreviewContext_unstable(ctx => ctx.isPreviewLocked) && (props['aria-expanded'] as boolean);\n\n  const state: CitationState = {\n    block,\n    isPopoverLocked,\n    components: {\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        ref,\n        href: referenceHref,\n        role: undefined,\n        'aria-expanded': undefined,\n        ...otherProps,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n\n  return state;\n};\n"],"names":["getIntrinsicElementProps","slot","usePreviewContext_unstable","useCitation_unstable","props","ref","referenceHref","block","otherProps","isPopoverLocked","ctx","isPreviewLocked","state","components","root","always","href","role","undefined","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,6BAA6B;AAC5E,SAASC,0BAA0B,QAAQ,kCAAkC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,aAAa,EAAEC,QAAQ,KAAK,EAAE,GAAGC,YAAY,GAAGJ;IAExD,MAAMK,kBAAkBP,2BAA2BQ,CAAAA,MAAOA,IAAIC,eAAe,KAAMP,KAAK,CAAC,gBAAgB;IAEzG,MAAMQ,QAAuB;QAC3BL;QACAE;QACAI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,KAAKc,MAAM,CACff,yBAAyB,KAAK;YAC5BK;YACAW,MAAMV;YACNW,MAAMC;YACN,iBAAiBA;YACjB,GAAGV,UAAU;QACf,IACA;YAAEW,aAAa;QAAI;IAEvB;IAEA,OAAOP;AACT,EAAE"}
+{"version":3,"sources":["useCitation.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { usePreviewContext_unstable } from '@fluentui-copilot/react-preview';\nimport type { CitationProps, CitationState } from './Citation.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n/**\n * Create the state required to render Citation.\n *\n * The returned state can be modified with hooks such as useCitationStyles_unstable,\n * before being passed to renderCitation_unstable.\n *\n * @param props - props from this instance of Citation\n * @param ref - reference to root HTMLElement of Citation\n */\nexport const useCitation_unstable = (props: CitationProps, ref: React.Ref<HTMLAnchorElement>): CitationState => {\n  const { referenceHref, block = false, ...otherProps } = props;\n  const designVersion = useDesignVersion(props.designVersion);\n\n  const isPopoverLocked = usePreviewContext_unstable(ctx => ctx.isPreviewLocked) && (props['aria-expanded'] as boolean);\n\n  const state: CitationState = {\n    block,\n    designVersion,\n    isPopoverLocked,\n    components: {\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        ref,\n        href: referenceHref,\n        role: undefined,\n        'aria-expanded': undefined,\n        ...otherProps,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n\n  return state;\n};\n"],"names":["getIntrinsicElementProps","slot","usePreviewContext_unstable","useDesignVersion","useCitation_unstable","props","ref","referenceHref","block","otherProps","designVersion","isPopoverLocked","ctx","isPreviewLocked","state","components","root","always","href","role","undefined","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,6BAA6B;AAC5E,SAASC,0BAA0B,QAAQ,kCAAkC;AAE7E,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,aAAa,EAAEC,QAAQ,KAAK,EAAE,GAAGC,YAAY,GAAGJ;IACxD,MAAMK,gBAAgBP,iBAAiBE,MAAMK,aAAa;IAE1D,MAAMC,kBAAkBT,2BAA2BU,CAAAA,MAAOA,IAAIC,eAAe,KAAMR,KAAK,CAAC,gBAAgB;IAEzG,MAAMS,QAAuB;QAC3BN;QACAE;QACAC;QACAI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,KAAK;YAC5BM;YACAY,MAAMX;YACNY,MAAMC;YACN,iBAAiBA;YACjB,GAAGX,UAAU;QACf,IACA;YAAEY,aAAa;QAAI;IAEvB;IAEA,OAAOP;AACT,EAAE"}

package/lib/components/Citation/useCitationStyles.styles.js

@@ -1,4 +1,5 @@
-import { __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+import { __resetStyles, __styles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
 export const citationClassNames = {
   root: 'fai-Citation'
 };
@@ -27,15 +28,32 @@ const useCitationRootStyles = __styles({
   d: [".f22iagw{display:flex;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".fkjhhq2{color:var(--colorBrandForeground2Pressed);}", ".f1nbqb3e{border-top-color:var(--colorBrandStroke2Pressed);}", ".fah3j9v{border-right-color:var(--colorBrandStroke2Pressed);}", ".f56crja{border-left-color:var(--colorBrandStroke2Pressed);}", ".fef4ti1{border-bottom-color:var(--colorBrandStroke2Pressed);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}"],
   h: [".fbszb7v:hover{color:var(--colorBrandForeground2Pressed);}", ".ftxwbyd:hover{border-top-color:var(--colorBrandStroke2Pressed);}", ".f1p7dilp:hover{border-right-color:var(--colorBrandStroke2Pressed);}", ".f15x2k42:hover{border-left-color:var(--colorBrandStroke2Pressed);}", ".fegdlwn:hover{border-bottom-color:var(--colorBrandStroke2Pressed);}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}"]
 });
+const useNextStyles = __styles({
+  root: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu"
+  }
+}, {
+  d: [[".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }]]
+});
 /**
  * Apply styling to the Citation slots based on the state
  */
 export const useCitationStyles_unstable = state => {
   'use no memo';
 
+  const {
+    designVersion
+  } = state;
   const rootBaseClassName = useCitationBaseClassName();
   const rootStyles = useCitationRootStyles();
-  state.root.className = mergeClasses(citationClassNames.root, state.isPopoverLocked && rootStyles.isPopoverLocked, state.block && rootStyles.isBlock, rootBaseClassName, state.root.className);
+  const nextStyles = useNextStyles();
+  state.root.className = mergeClasses(citationClassNames.root, state.isPopoverLocked && rootStyles.isPopoverLocked, state.block && rootStyles.isBlock, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
   return state;
 };
 //# sourceMappingURL=useCitationStyles.styles.js.map

package/lib/components/Citation/useCitationStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCitationStyles.styles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\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  ...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\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\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 rootBaseClassName = useCitationBaseClassName();\n  const rootStyles = useCitationRootStyles();\n\n  state.root.className = mergeClasses(\n    citationClassNames.root,\n    state.isPopoverLocked && rootStyles.isPopoverLocked,\n    state.block && rootStyles.isBlock,\n    rootBaseClassName,\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","caption2Strong","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","color","colorNeutralForeground2","minWidth","height","verticalAlign","lineHeight","fontSize","borderRadius","borderRadiusMedium","textDecoration","marginLeft","spacingHorizontalXXS","marginRight","cursor","colorBrandForeground2Hover","borderColor","colorBrandStroke2Hover","colorBrandBackground2Hover","colorBrandForeground2Pressed","colorBrandStroke2Pressed","colorBrandBackground2Pressed","useCitationRootStyles","isBlock","isPopoverLocked","colorBrandBackground2","useCitationStyles_unstable","state","rootBaseClassName","rootStyles","className","block"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,2BAA2BR,gBAAgB;IAC/CS,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,YAAY;IACZ,GAAGP,iBAAiBQ,cAAc;IAElCC,iBAAiBV,OAAOW,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IACvEC,OAAOf,OAAOgB,uBAAuB;IAErCC,UAAU;IACVC,QAAQ;IACRC,eAAe,CAAC,MAAM,EAAElB,iBAAiBQ,cAAc,CAACW,UAAU,CAAC,GAAG,EAAEnB,iBAAiBQ,cAAc,CAACY,QAAQ,CAAC,MAAM,CAAC;IAExHC,cAActB,OAAOuB,kBAAkB;IAEvCC,gBAAgB;IAEhBC,YAAYzB,OAAO0B,oBAAoB;IACvCC,aAAa3B,OAAO0B,oBAAoB;IAExC,UAAU;QACRE,QAAQ;QACRb,OAAOf,OAAO6B,0BAA0B;QACxCC,aAAa9B,OAAO+B,sBAAsB;QAC1CrB,iBAAiBV,OAAOgC,0BAA0B;IACpD;IAEA,iBAAiB;QACfJ,QAAQ;QACRb,OAAOf,OAAOiC,4BAA4B;QAC1CH,aAAa9B,OAAOkC,wBAAwB;QAC5CxB,iBAAiBV,OAAOmC,4BAA4B;IACtD;AACF;AAEA,MAAMC,wBAAwBvC,WAAW;IACvCwC,SAAS;QACPhC,SAAS;QACToB,YAAY;QACZE,aAAa;IACf;IACAW,iBAAiB;QACfvB,OAAOf,OAAOiC,4BAA4B;QAC1C,GAAGlC,WAAW+B,WAAW,CAAC9B,OAAOkC,wBAAwB,CAAC;QAC1DxB,iBAAiBV,OAAOuC,qBAAqB;QAC7C,UAAU;YACRxB,OAAOf,OAAOiC,4BAA4B;YAC1C,GAAGlC,WAAW+B,WAAW,CAAC9B,OAAOkC,wBAAwB,CAAC;YAC1DxB,iBAAiBV,OAAOuC,qBAAqB;QAC/C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,oBAAoBtC;IAC1B,MAAMuC,aAAaP;IAEnBK,MAAMtC,IAAI,CAACyC,SAAS,GAAG9C,aACrBI,mBAAmBC,IAAI,EACvBsC,MAAMH,eAAe,IAAIK,WAAWL,eAAe,EACnDG,MAAMI,KAAK,IAAIF,WAAWN,OAAO,EACjCK,mBACAD,MAAMtC,IAAI,CAACyC,SAAS;IAGtB,OAAOH;AACT,EAAE"}
+{"version":3,"sources":["useCitationStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';\nimport { tokens } 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  ...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\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","typographyStyles","tokens","citationClassNames","root","useCitationBaseClassName","display","justifyContent","boxSizing","alignItems","caption2Strong","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","color","colorNeutralForeground2","minWidth","height","verticalAlign","lineHeight","fontSize","borderRadius","borderRadiusMedium","textDecoration","marginLeft","spacingHorizontalXXS","marginRight","cursor","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,EAAEC,gBAAgB,QAAQ,6BAA6B;AACrH,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,2BAA2BR,gBAAgB;IAC/CS,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,YAAY;IACZ,GAAGR,iBAAiBS,cAAc;IAElCC,iBAAiBT,OAAOU,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEX,OAAOY,eAAe,CAAC,OAAO,EAAEZ,OAAOa,mBAAmB,CAAC,CAAC;IACvEC,OAAOd,OAAOe,uBAAuB;IAErCC,UAAU;IACVC,QAAQ;IACRC,eAAe,CAAC,MAAM,EAAEnB,iBAAiBS,cAAc,CAACW,UAAU,CAAC,GAAG,EAAEpB,iBAAiBS,cAAc,CAACY,QAAQ,CAAC,MAAM,CAAC;IAExHC,cAAcrB,OAAOsB,kBAAkB;IAEvCC,gBAAgB;IAEhBC,YAAYxB,OAAOyB,oBAAoB;IACvCC,aAAa1B,OAAOyB,oBAAoB;IAExC,UAAU;QACRE,QAAQ;QACRb,OAAOd,OAAO4B,0BAA0B;QACxCC,aAAa7B,OAAO8B,sBAAsB;QAC1CrB,iBAAiBT,OAAO+B,0BAA0B;IACpD;IAEA,iBAAiB;QACfJ,QAAQ;QACRb,OAAOd,OAAOgC,4BAA4B;QAC1CH,aAAa7B,OAAOiC,wBAAwB;QAC5CxB,iBAAiBT,OAAOkC,4BAA4B;IACtD;AACF;AAEA,MAAMC,wBAAwBvC,WAAW;IACvCwC,SAAS;QACPhC,SAAS;QACToB,YAAY;QACZE,aAAa;IACf;IACAW,iBAAiB;QACfvB,OAAOd,OAAOgC,4BAA4B;QAC1C,GAAGlC,WAAW+B,WAAW,CAAC7B,OAAOiC,wBAAwB,CAAC;QAC1DxB,iBAAiBT,OAAOsC,qBAAqB;QAC7C,UAAU;YACRxB,OAAOd,OAAOgC,4BAA4B;YAC1C,GAAGlC,WAAW+B,WAAW,CAAC7B,OAAOiC,wBAAwB,CAAC;YAC1DxB,iBAAiBT,OAAOsC,qBAAqB;QAC/C;IACF;AACF;AAEA,MAAMC,gBAAgB3C,WAAW;IAAEM,MAAM;QAAEmB,cAAcrB,OAAOwC,kBAAkB;IAAC;AAAE;AAErF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoBzC;IAC1B,MAAM0C,aAAaV;IACnB,MAAMW,aAAaP;IAEnBG,MAAMxC,IAAI,CAAC6C,SAAS,GAAGlD,aACrBI,mBAAmBC,IAAI,EACvBwC,MAAML,eAAe,IAAIQ,WAAWR,eAAe,EACnDK,MAAMM,KAAK,IAAIH,WAAWT,OAAO,EACjCQ,mBACAD,kBAAkB,UAAUG,WAAW5C,IAAI,EAC3CwC,MAAMxC,IAAI,CAAC6C,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib/components/Reference/useReferenceStyles.styles.js

@@ -1,4 +1,5 @@
-import { buttonClassNames, __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+import { buttonClassNames, __resetStyles, __styles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
 /** deprecated Use ReferenceV2 component, hooks and types instead. */
 export const referenceClassNames = {
   root: 'fai-Reference',

package/lib/components/Reference/useReferenceStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n  buttonClassNames,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  media: 'fai-Reference__media',\n  actions: 'fai-Reference__actions',\n  sensitivity: 'fai-Reference__sensitivity',\n  metadata: 'fai-Reference__metadata',\n  primaryText: 'fai-Reference__primaryText',\n  secondaryText: 'fai-Reference__secondaryText',\n  tertiaryText: 'fai-Reference__tertiaryText',\n  icon: 'fai-Reference__icon',\n  label: 'fai-Reference__label',\n  content: 'fai-Reference__content',\n  detailsButton: 'fai-Reference__detailsButton',\n};\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceExtraClassNames = {\n  text: 'fai-Reference__text',\n  mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  width: '100%',\n  display: 'grid',\n  gridTemplateAreas: `\n      \"citation         media            title            actions\"\n      \".                .                title            .\"\n      \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n      \"metadata         metadata         metadata         metadata\"\n      \"content          content          content          content\"\n    `,\n  gridTemplateColumns: 'min-content min-content 1fr min-content',\n  gridTemplateRows: '32px auto auto auto auto',\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  boxShadow: 'none',\n  columnGap: tokens.spacingHorizontalXS,\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: {},\n  sidecar: {\n    gridTemplateRows: '24px auto auto auto',\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  },\n  inline: {},\n  popover: {\n    ...shorthands.borderWidth('0px'),\n    width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n    padding: '0px',\n  },\n  closed: {\n    rowGap: 0,\n  },\n  citation: {\n    gridArea: 'citation',\n  },\n  media: {\n    gridArea: 'media',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  mediaPopover: {\n    width: '16px',\n    height: '16px',\n\n    [`> .${referenceExtraClassNames.mediaChild}`]: {\n      width: '16px',\n      height: '16px',\n    },\n  },\n  actions: {\n    gridArea: 'actions',\n    justifySelf: 'end',\n    display: 'flex',\n    gridRowStart: 1,\n  },\n  detailsButton: {\n    [`> ${buttonClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n  },\n  sensitivity: {\n    gridArea: 'sensitivityLabel',\n    justifySelf: 'start',\n  },\n  metadata: {\n    marginTop: tokens.spacingVerticalXS,\n\n    gridArea: 'metadata',\n    ...typographyStyles.caption2,\n  },\n  metadataSubsequentText: {\n    position: 'relative',\n    marginLeft: tokens.spacingHorizontalS,\n\n    '&::before': {\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      left: `calc(${tokens.spacingHorizontalS} / -2)`,\n      top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n      height: typographyStyles.caption2.fontSize,\n      ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    },\n  },\n  icon: {\n    ...typographyStyles.caption2,\n    verticalAlign: 'middle',\n  },\n  content: {\n    marginTop: tokens.spacingVerticalXS,\n    gridArea: 'content',\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalS,\n    color: tokens.colorNeutralForeground3,\n    wordBreak: 'break-word',\n  },\n  hidden: {\n    display: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  root: {\n    gridArea: 'title',\n    alignSelf: 'start',\n    ...typographyStyles.caption1Strong,\n    wordBreak: 'break-word',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    display: '-webkit-box',\n    overflowY: 'hidden',\n  },\n\n  canvas: {\n    // 24px is the height of the tallest element within the reference\n    paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  sidecar: {\n    // 16px is the height of the tallest element within the reference\n    paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  closed: {\n    maxWidth: '100%',\n    '-webkit-line-clamp': '1',\n  },\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n *\n * deprecated Use ReferenceV2 component, hooks and types instead.\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n  'use no memo';\n\n  const { isExpanded, mode, layout } = state;\n\n  const rootClassName = useReferenceClassName();\n  const styles = useStyles();\n  const labelStyles = useLabelStyles();\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootClassName,\n    styles[mode],\n    styles[layout],\n    !isExpanded && styles.closed,\n    state.root.className,\n  );\n\n  if (state.citation) {\n    state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n  }\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      referenceClassNames.media,\n      styles.media,\n      layout === 'popover' && styles.mediaPopover,\n      state.media.className,\n    );\n  }\n\n  if (state.actions) {\n    state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n  }\n\n  state.label.className = mergeClasses(\n    referenceClassNames.label,\n    labelStyles.root,\n    labelStyles[mode],\n    !isExpanded && labelStyles.closed,\n    state.label.className,\n  );\n\n  if (state.sensitivity) {\n    state.sensitivity.className = mergeClasses(\n      referenceClassNames.sensitivity,\n      styles.sensitivity,\n      !isExpanded && styles.hidden,\n      state.sensitivity.className,\n    );\n  }\n\n  state.metadata.className = mergeClasses(\n    referenceClassNames.metadata,\n    styles.metadata,\n    !isExpanded && styles.hidden,\n    state.metadata.className,\n  );\n\n  let isSubsequentText = false;\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      referenceClassNames.primaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.primaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      referenceClassNames.secondaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.secondaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      referenceClassNames.tertiaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.tertiaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n  }\n  state.content.className = mergeClasses(\n    referenceClassNames.content,\n    styles.content,\n    !isExpanded && styles.hidden,\n    state.content.className,\n  );\n\n  if (state.detailsButton) {\n    state.detailsButton.className = mergeClasses(\n      referenceClassNames.detailsButton,\n      styles.detailsButton,\n      state.detailsButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceClassNames","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","referenceExtraClassNames","text","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","boxSizing","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingVerticalS","spacingHorizontalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","useStyles","canvas","sidecar","spacingVerticalXS","inline","popover","borderWidth","spacingHorizontalM","closed","rowGap","gridArea","justifyContent","mediaPopover","height","justifySelf","gridRowStart","color","colorNeutralForeground3","marginTop","caption2","metadataSubsequentText","position","marginLeft","left","top","borderLeft","colorNeutralStroke2","verticalAlign","flexDirection","wordBreak","hidden","useLabelStyles","alignSelf","overflowY","paddingTop","maxWidth","useReferenceStyles_unstable","state","isExpanded","mode","layout","rootClassName","styles","labelStyles","className","isSubsequentText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,gBAAgB,EAChBC,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,mEAAmE,GACnE,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,UAAU;IACVC,OAAO;IACPC,SAAS;IACTC,aAAa;IACbC,UAAU;IACVC,aAAa;IACbC,eAAe;IACfC,cAAc;IACdC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,eAAe;AACjB,EAAE;AAEF,mEAAmE,GACnE,OAAO,MAAMC,2BAA2B;IACtCC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF,MAAMC,gBAAgBlB,iBAAiBmB,cAAc,CAACC,QAAQ;AAC9D,MAAMC,kBAAkBrB,iBAAiBmB,cAAc,CAACG,UAAU;AAElE,MAAMC,kBAAkB;AAExB,MAAMC,wBAAwB7B,gBAAgB;IAC5C8B,WAAW;IACXC,OAAO;IACPC,SAAS;IACTC,mBAAmB,CAAC;;;;;;IAMlB,CAAC;IACHC,qBAAqB;IACrBC,kBAAkB;IAClBC,QAAQ,CAAC,EAAEhC,OAAOiC,eAAe,CAAC,OAAO,EAAEjC,OAAOkC,mBAAmB,CAAC,CAAC;IACvEC,cAAcnC,OAAOoC,kBAAkB;IACvCC,SAAS,CAAC,EAAErC,OAAOsC,gBAAgB,CAAC,CAAC,EAAEtC,OAAOuC,kBAAkB,CAAC,CAAC;IAClEC,WAAW;IACXC,WAAWzC,OAAO0C,mBAAmB;IACrCC,YAAY;AACd;AAEA,MAAMC,YAAY/C,WAAW;IAC3BgD,QAAQ,CAAC;IACTC,SAAS;QACPf,kBAAkB;QAClBM,SAAS,CAAC,EAAErC,OAAO+C,iBAAiB,CAAC,CAAC,EAAE/C,OAAOuC,kBAAkB,CAAC,CAAC;IACrE;IACAS,QAAQ,CAAC;IACTC,SAAS;QACP,GAAGlD,WAAWmD,WAAW,CAAC,MAAM;QAChCvB,OAAO,CAAC,KAAK,EAAEH,gBAAgB,IAAI,EAAExB,OAAOmD,kBAAkB,CAAC,MAAM,CAAC;QACtEd,SAAS;IACX;IACAe,QAAQ;QACNC,QAAQ;IACV;IACAjD,UAAU;QACRkD,UAAU;IACZ;IACAjD,OAAO;QACLiD,UAAU;QACV1B,SAAS;QACTe,YAAY;QACZY,gBAAgB;IAClB;IACAC,cAAc;QACZ7B,OAAO;QACP8B,QAAQ;QAER,CAAC,CAAC,GAAG,EAAEzC,yBAAyBE,UAAU,CAAC,CAAC,CAAC,EAAE;YAC7CS,OAAO;YACP8B,QAAQ;QACV;IACF;IACAnD,SAAS;QACPgD,UAAU;QACVI,aAAa;QACb9B,SAAS;QACT+B,cAAc;IAChB;IACA5C,eAAe;QACb,CAAC,CAAC,EAAE,EAAEpB,iBAAiBiB,IAAI,CAAC,CAAC,CAAC,EAAE;YAC9BgD,OAAO5D,OAAO6D,uBAAuB;QACvC;IACF;IACAtD,aAAa;QACX+C,UAAU;QACVI,aAAa;IACf;IACAlD,UAAU;QACRsD,WAAW9D,OAAO+C,iBAAiB;QAEnCO,UAAU;QACV,GAAGrD,iBAAiB8D,QAAQ;IAC9B;IACAC,wBAAwB;QACtBC,UAAU;QACVC,YAAYlE,OAAOuC,kBAAkB;QAErC,aAAa;YACXzB,SAAS;YACTc,SAAS;YACTqC,UAAU;YACVE,MAAM,CAAC,KAAK,EAAEnE,OAAOuC,kBAAkB,CAAC,MAAM,CAAC;YAC/C6B,KAAK,CAAC,MAAM,EAAEnE,iBAAiB8D,QAAQ,CAACxC,UAAU,CAAC,GAAG,EAAEtB,iBAAiB8D,QAAQ,CAAC1C,QAAQ,CAAC,MAAM,CAAC;YAClGoC,QAAQxD,iBAAiB8D,QAAQ,CAAC1C,QAAQ;YAC1C,GAAGtB,WAAWsE,UAAU,CAACrE,OAAOiC,eAAe,EAAE,SAASjC,OAAOsE,mBAAmB,CAAC;QACvF;IACF;IACA1D,MAAM;QACJ,GAAGX,iBAAiB8D,QAAQ;QAC5BQ,eAAe;IACjB;IACAzD,SAAS;QACPgD,WAAW9D,OAAO+C,iBAAiB;QACnCO,UAAU;QACV1B,SAAS;QACT4C,eAAe;QACfnB,QAAQrD,OAAOsC,gBAAgB;QAC/BsB,OAAO5D,OAAO6D,uBAAuB;QACrCY,WAAW;IACb;IACAC,QAAQ;QACN9C,SAAS;IACX;AACF;AAEA,MAAM+C,iBAAiB9E,WAAW;IAChCM,MAAM;QACJmD,UAAU;QACVsB,WAAW;QACX,GAAG3E,iBAAiBmB,cAAc;QAClCqD,WAAW;QACX,sBAAsB;QACtB,sBAAsB;QACtB7C,SAAS;QACTiD,WAAW;IACb;IAEAhC,QAAQ;QACN,iEAAiE;QACjEiC,YAAY,CAAC,oBAAoB,EAAExD,gBAAgB,GAAG,EAAEH,cAAc,EAAE,CAAC;IAC3E;IAEA2B,SAAS;QACP,iEAAiE;QACjEgC,YAAY,CAAC,oBAAoB,EAAExD,gBAAgB,GAAG,EAAEH,cAAc,EAAE,CAAC;IAC3E;IAEAiC,QAAQ;QACN2B,UAAU;QACV,sBAAsB;IACxB;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,MAAM,EAAE,GAAGH;IAErC,MAAMI,gBAAgB5D;IACtB,MAAM6D,SAAS1C;IACf,MAAM2C,cAAcZ;IACpBM,MAAM9E,IAAI,CAACqF,SAAS,GAAG1F,aACrBI,oBAAoBC,IAAI,EACxBkF,eACAC,MAAM,CAACH,KAAK,EACZG,MAAM,CAACF,OAAO,EACd,CAACF,cAAcI,OAAOlC,MAAM,EAC5B6B,MAAM9E,IAAI,CAACqF,SAAS;IAGtB,IAAIP,MAAM7E,QAAQ,EAAE;QAClB6E,MAAM7E,QAAQ,CAACoF,SAAS,GAAG1F,aAAaI,oBAAoBE,QAAQ,EAAEkF,OAAOlF,QAAQ,EAAE6E,MAAM7E,QAAQ,CAACoF,SAAS;IACjH;IAEA,IAAIP,MAAM5E,KAAK,EAAE;QACf4E,MAAM5E,KAAK,CAACmF,SAAS,GAAG1F,aACtBI,oBAAoBG,KAAK,EACzBiF,OAAOjF,KAAK,EACZ+E,WAAW,aAAaE,OAAO9B,YAAY,EAC3CyB,MAAM5E,KAAK,CAACmF,SAAS;IAEzB;IAEA,IAAIP,MAAM3E,OAAO,EAAE;QACjB2E,MAAM3E,OAAO,CAACkF,SAAS,GAAG1F,aAAaI,oBAAoBI,OAAO,EAAEgF,OAAOhF,OAAO,EAAE2E,MAAM3E,OAAO,CAACkF,SAAS;IAC7G;IAEAP,MAAMpE,KAAK,CAAC2E,SAAS,GAAG1F,aACtBI,oBAAoBW,KAAK,EACzB0E,YAAYpF,IAAI,EAChBoF,WAAW,CAACJ,KAAK,EACjB,CAACD,cAAcK,YAAYnC,MAAM,EACjC6B,MAAMpE,KAAK,CAAC2E,SAAS;IAGvB,IAAIP,MAAM1E,WAAW,EAAE;QACrB0E,MAAM1E,WAAW,CAACiF,SAAS,GAAG1F,aAC5BI,oBAAoBK,WAAW,EAC/B+E,OAAO/E,WAAW,EAClB,CAAC2E,cAAcI,OAAOZ,MAAM,EAC5BO,MAAM1E,WAAW,CAACiF,SAAS;IAE/B;IAEAP,MAAMzE,QAAQ,CAACgF,SAAS,GAAG1F,aACzBI,oBAAoBM,QAAQ,EAC5B8E,OAAO9E,QAAQ,EACf,CAAC0E,cAAcI,OAAOZ,MAAM,EAC5BO,MAAMzE,QAAQ,CAACgF,SAAS;IAG1B,IAAIC,mBAAmB;IACvB,IAAIR,MAAMxE,WAAW,EAAE;QACrBwE,MAAMxE,WAAW,CAAC+E,SAAS,GAAG1F,aAC5BI,oBAAoBO,WAAW,EAC/BO,yBAAyBC,IAAI,EAC7BwE,oBAAoBH,OAAOtB,sBAAsB,EACjDiB,MAAMxE,WAAW,CAAC+E,SAAS;QAE7BC,mBAAmB;IACrB;IAEA,IAAIR,MAAMvE,aAAa,EAAE;QACvBuE,MAAMvE,aAAa,CAAC8E,SAAS,GAAG1F,aAC9BI,oBAAoBQ,aAAa,EACjCM,yBAAyBC,IAAI,EAC7BwE,oBAAoBH,OAAOtB,sBAAsB,EACjDiB,MAAMvE,aAAa,CAAC8E,SAAS;QAE/BC,mBAAmB;IACrB;IAEA,IAAIR,MAAMtE,YAAY,EAAE;QACtBsE,MAAMtE,YAAY,CAAC6E,SAAS,GAAG1F,aAC7BI,oBAAoBS,YAAY,EAChCK,yBAAyBC,IAAI,EAC7BwE,oBAAoBH,OAAOtB,sBAAsB,EACjDiB,MAAMtE,YAAY,CAAC6E,SAAS;QAE9BC,mBAAmB;IACrB;IAEA,IAAIR,MAAMrE,IAAI,EAAE;QACdqE,MAAMrE,IAAI,CAAC4E,SAAS,GAAG1F,aAAaI,oBAAoBU,IAAI,EAAE0E,OAAO1E,IAAI,EAAEqE,MAAMrE,IAAI,CAAC4E,SAAS;IACjG;IACAP,MAAMnE,OAAO,CAAC0E,SAAS,GAAG1F,aACxBI,oBAAoBY,OAAO,EAC3BwE,OAAOxE,OAAO,EACd,CAACoE,cAAcI,OAAOZ,MAAM,EAC5BO,MAAMnE,OAAO,CAAC0E,SAAS;IAGzB,IAAIP,MAAMlE,aAAa,EAAE;QACvBkE,MAAMlE,aAAa,CAACyE,SAAS,GAAG1F,aAC9BI,oBAAoBa,aAAa,EACjCuE,OAAOvE,aAAa,EACpBkE,MAAMlE,aAAa,CAACyE,SAAS;IAEjC;IAEA,OAAOP;AACT,EAAE"}
+{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n  buttonClassNames,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  media: 'fai-Reference__media',\n  actions: 'fai-Reference__actions',\n  sensitivity: 'fai-Reference__sensitivity',\n  metadata: 'fai-Reference__metadata',\n  primaryText: 'fai-Reference__primaryText',\n  secondaryText: 'fai-Reference__secondaryText',\n  tertiaryText: 'fai-Reference__tertiaryText',\n  icon: 'fai-Reference__icon',\n  label: 'fai-Reference__label',\n  content: 'fai-Reference__content',\n  detailsButton: 'fai-Reference__detailsButton',\n};\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceExtraClassNames = {\n  text: 'fai-Reference__text',\n  mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  width: '100%',\n  display: 'grid',\n  gridTemplateAreas: `\n      \"citation         media            title            actions\"\n      \".                .                title            .\"\n      \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n      \"metadata         metadata         metadata         metadata\"\n      \"content          content          content          content\"\n    `,\n  gridTemplateColumns: 'min-content min-content 1fr min-content',\n  gridTemplateRows: '32px auto auto auto auto',\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  boxShadow: 'none',\n  columnGap: tokens.spacingHorizontalXS,\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: {},\n  sidecar: {\n    gridTemplateRows: '24px auto auto auto',\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  },\n  inline: {},\n  popover: {\n    ...shorthands.borderWidth('0px'),\n    width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n    padding: '0px',\n  },\n  closed: {\n    rowGap: 0,\n  },\n  citation: {\n    gridArea: 'citation',\n  },\n  media: {\n    gridArea: 'media',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  mediaPopover: {\n    width: '16px',\n    height: '16px',\n\n    [`> .${referenceExtraClassNames.mediaChild}`]: {\n      width: '16px',\n      height: '16px',\n    },\n  },\n  actions: {\n    gridArea: 'actions',\n    justifySelf: 'end',\n    display: 'flex',\n    gridRowStart: 1,\n  },\n  detailsButton: {\n    [`> ${buttonClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n  },\n  sensitivity: {\n    gridArea: 'sensitivityLabel',\n    justifySelf: 'start',\n  },\n  metadata: {\n    marginTop: tokens.spacingVerticalXS,\n\n    gridArea: 'metadata',\n    ...typographyStyles.caption2,\n  },\n  metadataSubsequentText: {\n    position: 'relative',\n    marginLeft: tokens.spacingHorizontalS,\n\n    '&::before': {\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      left: `calc(${tokens.spacingHorizontalS} / -2)`,\n      top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n      height: typographyStyles.caption2.fontSize,\n      ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    },\n  },\n  icon: {\n    ...typographyStyles.caption2,\n    verticalAlign: 'middle',\n  },\n  content: {\n    marginTop: tokens.spacingVerticalXS,\n    gridArea: 'content',\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalS,\n    color: tokens.colorNeutralForeground3,\n    wordBreak: 'break-word',\n  },\n  hidden: {\n    display: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  root: {\n    gridArea: 'title',\n    alignSelf: 'start',\n    ...typographyStyles.caption1Strong,\n    wordBreak: 'break-word',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    display: '-webkit-box',\n    overflowY: 'hidden',\n  },\n\n  canvas: {\n    // 24px is the height of the tallest element within the reference\n    paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  sidecar: {\n    // 16px is the height of the tallest element within the reference\n    paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  closed: {\n    maxWidth: '100%',\n    '-webkit-line-clamp': '1',\n  },\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n *\n * deprecated Use ReferenceV2 component, hooks and types instead.\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n  'use no memo';\n\n  const { isExpanded, mode, layout } = state;\n\n  const rootClassName = useReferenceClassName();\n  const styles = useStyles();\n  const labelStyles = useLabelStyles();\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootClassName,\n    styles[mode],\n    styles[layout],\n    !isExpanded && styles.closed,\n    state.root.className,\n  );\n\n  if (state.citation) {\n    state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n  }\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      referenceClassNames.media,\n      styles.media,\n      layout === 'popover' && styles.mediaPopover,\n      state.media.className,\n    );\n  }\n\n  if (state.actions) {\n    state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n  }\n\n  state.label.className = mergeClasses(\n    referenceClassNames.label,\n    labelStyles.root,\n    labelStyles[mode],\n    !isExpanded && labelStyles.closed,\n    state.label.className,\n  );\n\n  if (state.sensitivity) {\n    state.sensitivity.className = mergeClasses(\n      referenceClassNames.sensitivity,\n      styles.sensitivity,\n      !isExpanded && styles.hidden,\n      state.sensitivity.className,\n    );\n  }\n\n  state.metadata.className = mergeClasses(\n    referenceClassNames.metadata,\n    styles.metadata,\n    !isExpanded && styles.hidden,\n    state.metadata.className,\n  );\n\n  let isSubsequentText = false;\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      referenceClassNames.primaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.primaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      referenceClassNames.secondaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.secondaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      referenceClassNames.tertiaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.tertiaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n  }\n  state.content.className = mergeClasses(\n    referenceClassNames.content,\n    styles.content,\n    !isExpanded && styles.hidden,\n    state.content.className,\n  );\n\n  if (state.detailsButton) {\n    state.detailsButton.className = mergeClasses(\n      referenceClassNames.detailsButton,\n      styles.detailsButton,\n      state.detailsButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","typographyStyles","tokens","referenceClassNames","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","referenceExtraClassNames","text","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","boxSizing","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingVerticalS","spacingHorizontalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","useStyles","canvas","sidecar","spacingVerticalXS","inline","popover","borderWidth","spacingHorizontalM","closed","rowGap","gridArea","justifyContent","mediaPopover","height","justifySelf","gridRowStart","color","colorNeutralForeground3","marginTop","caption2","metadataSubsequentText","position","marginLeft","left","top","borderLeft","colorNeutralStroke2","verticalAlign","flexDirection","wordBreak","hidden","useLabelStyles","alignSelf","overflowY","paddingTop","maxWidth","useReferenceStyles_unstable","state","isExpanded","mode","layout","rootClassName","styles","labelStyles","className","isSubsequentText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js

@@ -1,4 +1,5 @@
-import { __resetStyles, __styles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';
+import { __resetStyles, __styles, mergeClasses, typographyStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
 export const referenceGroupToggleClassNames = {
   root: 'fai-ReferenceGroupToggle',
   icon: 'fai-ReferenceGroupToggle__icon'

package/lib/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceGroupToggleStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceGroupToggleSlots, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupToggleClassNames: SlotClassNames<ReferenceGroupToggleSlots> = {\n  root: 'fai-ReferenceGroupToggle',\n  icon: 'fai-ReferenceGroupToggle__icon',\n};\n\nconst useButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  columnGap: tokens.spacingHorizontalSNudge,\n  alignItems: 'center',\n  ...typographyStyles.caption1,\n  border: 0,\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground3,\n  cursor: 'pointer',\n  width: 'max-content',\n  padding: `${tokens.spacingVerticalXS} 0`,\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: { ...typographyStyles.caption1 },\n  sidecar: {\n    ...typographyStyles.caption2,\n  },\n});\n\n/**\n * Apply styling to the ReferenceGroupToggle slots based on the state\n */\nexport const useReferenceGroupToggleStyles_unstable = (state: ReferenceGroupToggleState): ReferenceGroupToggleState => {\n  'use no memo';\n\n  const { mode } = state;\n  const styles = useStyles();\n\n  const iconBaseClassName = useIconBaseClassName();\n  const buttonBaseClassName = useButtonBaseClassName();\n  state.root.className = mergeClasses(\n    referenceGroupToggleClassNames.root,\n    buttonBaseClassName,\n    styles[mode],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","referenceGroupToggleClassNames","root","icon","useButtonBaseClassName","display","columnGap","spacingHorizontalSNudge","alignItems","caption1","border","backgroundColor","colorTransparentBackground","color","colorNeutralForeground3","cursor","width","padding","spacingVerticalXS","useIconBaseClassName","useStyles","canvas","sidecar","caption2","useReferenceGroupToggleStyles_unstable","state","mode","styles","iconBaseClassName","buttonBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIjH,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBR,gBAAgB;IAC7CS,SAAS;IACTC,WAAWP,OAAOQ,uBAAuB;IACzCC,YAAY;IACZ,GAAGR,iBAAiBS,QAAQ;IAC5BC,QAAQ;IACRC,iBAAiBZ,OAAOa,0BAA0B;IAClDC,OAAOd,OAAOe,uBAAuB;IACrCC,QAAQ;IACRC,OAAO;IACPC,SAAS,CAAC,EAAElB,OAAOmB,iBAAiB,CAAC,EAAE,CAAC;AAC1C;AAEA,MAAMC,uBAAuBvB,gBAAgB;IAC3CS,SAAS;IACTG,YAAY;AACd;AAEA,MAAMY,YAAYvB,WAAW;IAC3BwB,QAAQ;QAAE,GAAGrB,iBAAiBS,QAAQ;IAAC;IACvCa,SAAS;QACP,GAAGtB,iBAAiBuB,QAAQ;IAC9B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,SAASP;IAEf,MAAMQ,oBAAoBT;IAC1B,MAAMU,sBAAsBzB;IAC5BqB,MAAMvB,IAAI,CAAC4B,SAAS,GAAGhC,aACrBG,+BAA+BC,IAAI,EACnC2B,qBACAF,MAAM,CAACD,KAAK,EACZD,MAAMvB,IAAI,CAAC4B,SAAS;IAGtB,IAAIL,MAAMtB,IAAI,EAAE;QACdsB,MAAMtB,IAAI,CAAC2B,SAAS,GAAGhC,aAAaG,+BAA+BE,IAAI,EAAEyB,mBAAmBH,MAAMtB,IAAI,CAAC2B,SAAS;IAClH;IAEA,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["useReferenceGroupToggleStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { ReferenceGroupToggleSlots, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupToggleClassNames: SlotClassNames<ReferenceGroupToggleSlots> = {\n  root: 'fai-ReferenceGroupToggle',\n  icon: 'fai-ReferenceGroupToggle__icon',\n};\n\nconst useButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  columnGap: tokens.spacingHorizontalSNudge,\n  alignItems: 'center',\n  ...typographyStyles.caption1,\n  border: 0,\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground3,\n  cursor: 'pointer',\n  width: 'max-content',\n  padding: `${tokens.spacingVerticalXS} 0`,\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: { ...typographyStyles.caption1 },\n  sidecar: {\n    ...typographyStyles.caption2,\n  },\n});\n\n/**\n * Apply styling to the ReferenceGroupToggle slots based on the state\n */\nexport const useReferenceGroupToggleStyles_unstable = (state: ReferenceGroupToggleState): ReferenceGroupToggleState => {\n  'use no memo';\n\n  const { mode } = state;\n  const styles = useStyles();\n\n  const iconBaseClassName = useIconBaseClassName();\n  const buttonBaseClassName = useButtonBaseClassName();\n  state.root.className = mergeClasses(\n    referenceGroupToggleClassNames.root,\n    buttonBaseClassName,\n    styles[mode],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","referenceGroupToggleClassNames","root","icon","useButtonBaseClassName","display","columnGap","spacingHorizontalSNudge","alignItems","caption1","border","backgroundColor","colorTransparentBackground","color","colorNeutralForeground3","cursor","width","padding","spacingVerticalXS","useIconBaseClassName","useStyles","canvas","sidecar","caption2","useReferenceGroupToggleStyles_unstable","state","mode","styles","iconBaseClassName","buttonBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,gBAAgB,QAAQ,6BAA6B;AACzG,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBR,gBAAgB;IAC7CS,SAAS;IACTC,WAAWN,OAAOO,uBAAuB;IACzCC,YAAY;IACZ,GAAGT,iBAAiBU,QAAQ;IAC5BC,QAAQ;IACRC,iBAAiBX,OAAOY,0BAA0B;IAClDC,OAAOb,OAAOc,uBAAuB;IACrCC,QAAQ;IACRC,OAAO;IACPC,SAAS,CAAC,EAAEjB,OAAOkB,iBAAiB,CAAC,EAAE,CAAC;AAC1C;AAEA,MAAMC,uBAAuBvB,gBAAgB;IAC3CS,SAAS;IACTG,YAAY;AACd;AAEA,MAAMY,YAAYvB,WAAW;IAC3BwB,QAAQ;QAAE,GAAGtB,iBAAiBU,QAAQ;IAAC;IACvCa,SAAS;QACP,GAAGvB,iBAAiBwB,QAAQ;IAC9B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,SAASP;IAEf,MAAMQ,oBAAoBT;IAC1B,MAAMU,sBAAsBzB;IAC5BqB,MAAMvB,IAAI,CAAC4B,SAAS,GAAGhC,aACrBG,+BAA+BC,IAAI,EACnC2B,qBACAF,MAAM,CAACD,KAAK,EACZD,MAAMvB,IAAI,CAAC4B,SAAS;IAGtB,IAAIL,MAAMtB,IAAI,EAAE;QACdsB,MAAMtB,IAAI,CAAC2B,SAAS,GAAGhC,aAAaG,+BAA+BE,IAAI,EAAEyB,mBAAmBH,MAAMtB,IAAI,CAAC2B,SAAS;IAClH;IAEA,OAAOL;AACT,EAAE"}

package/lib/components/ReferenceList/useReferenceListStyles.styles.js

@@ -1,4 +1,5 @@
-import { __resetStyles, mergeClasses, tokens } from '@fluentui/react-components';
+import { __resetStyles, mergeClasses } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
 /** deprecated Use ReferenceListV2 component, hooks and types instead. */
 export const referenceListClassNames = {
   root: 'fai-ReferenceList'

package/lib/components/ReferenceList/useReferenceListStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\n/** deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n  root: 'fai-ReferenceList',\n};\n\n/** deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport const referenceListItemClassName = 'fai-ReferenceList__item';\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n  padding: 0,\n  margin: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: tokens.spacingVerticalS,\n\n  [`> .${referenceListItemClassName}`]: {\n    listStyleType: 'none',\n  },\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n *\n * deprecated Use ReferenceListV2 component, hooks and types instead.\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(referenceListClassNames.root, useRootClassName(), state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","referenceListClassNames","root","referenceListItemClassName","useRootClassName","padding","margin","display","flexDirection","gap","spacingVerticalS","listStyleType","useReferenceListStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,uEAAuE,GACvE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,uEAAuE,GACvE,OAAO,MAAMC,6BAA6B,0BAA0B;AAEpE;;CAEC,GACD,MAAMC,mBAAmBN,gBAAgB;IACvCO,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,KAAKT,OAAOU,gBAAgB;IAE5B,CAAC,CAAC,GAAG,EAAEP,2BAA2B,CAAC,CAAC,EAAE;QACpCQ,eAAe;IACjB;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAA,MAAMX,IAAI,CAACY,SAAS,GAAGf,aAAaE,wBAAwBC,IAAI,EAAEE,oBAAoBS,MAAMX,IAAI,CAACY,SAAS;IAE1G,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, 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\n/** deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n  root: 'fai-ReferenceList',\n};\n\n/** deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport const referenceListItemClassName = 'fai-ReferenceList__item';\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n  padding: 0,\n  margin: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: tokens.spacingVerticalS,\n\n  [`> .${referenceListItemClassName}`]: {\n    listStyleType: 'none',\n  },\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n *\n * deprecated Use ReferenceListV2 component, hooks and types instead.\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(referenceListClassNames.root, useRootClassName(), state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","referenceListClassNames","root","referenceListItemClassName","useRootClassName","padding","margin","display","flexDirection","gap","spacingVerticalS","listStyleType","useReferenceListStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,6BAA6B;AAC3E,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,uEAAuE,GACvE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,uEAAuE,GACvE,OAAO,MAAMC,6BAA6B,0BAA0B;AAEpE;;CAEC,GACD,MAAMC,mBAAmBN,gBAAgB;IACvCO,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,KAAKT,OAAOU,gBAAgB;IAE5B,CAAC,CAAC,GAAG,EAAEP,2BAA2B,CAAC,CAAC,EAAE;QACpCQ,eAAe;IACjB;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAA,MAAMX,IAAI,CAACY,SAAS,GAAGf,aAAaE,wBAAwBC,IAAI,EAAEE,oBAAoBS,MAAMX,IAAI,CAACY,SAAS;IAE1G,OAAOD;AACT,EAAE"}

package/lib/components/reference-v2/Reference/Reference.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n  /** The root of the component that renders the reference as either a button or an anchor element. */\n  root: NonNullable<Slot<'button', 'a'>>;\n\n  /** The number of the citation this reference corresponds to. */\n  citation?: Slot<'span'>;\n\n  /** A divider that visually separates the citation from the content of the reference. */\n  divider?: Slot<'span'>;\n\n  /** A space containing the content of the reference, which goes into an ellipsis if it overflows. */\n  content?: Slot<'span'>;\n\n  /** A space within the content slot where a graphic such as an icon or an image can be displayed before the rest of the content. */\n  graphic?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & {};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n  Required<Pick<ReferenceProps, 'id'>> &\n  Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":"AAsBA,WAEgD"}
+{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n  /** The root of the component that renders the reference as either a button or an anchor element. */\n  root: NonNullable<Slot<'button', 'a'>>;\n\n  /** The number of the citation this reference corresponds to. */\n  citation?: Slot<'span'>;\n\n  /** A divider that visually separates the citation from the content of the reference. */\n  divider?: Slot<'span'>;\n\n  /** A space containing the content of the reference, which goes into an ellipsis if it overflows. */\n  content?: Slot<'span'>;\n\n  /** A space within the content slot where a graphic such as an icon or an image can be displayed before the rest of the content. */\n  graphic?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & DesignVersion & {};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n  Required<Pick<ReferenceProps, 'id' | 'designVersion'>> &\n  Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":"AAuBA,WAEgD"}

package/lib/components/reference-v2/Reference/useReference.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';
 import { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';
 import { referenceExtraClassNames } from './useReferenceStyles.styles';
+import { useDesignVersion } from '@fluentui-copilot/react-provider';
 /**
  * Create the state required to render Reference.
  *
@@ -17,6 +18,7 @@ export const useReference_unstable = (props, ref) => {
     children,
     id
   } = props;
+  const designVersion = useDesignVersion(props.designVersion);
   const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);
   const referenceId = useId('reference-', id);
   const elementType = as || (props.href ? 'a' : 'button');
@@ -41,6 +43,7 @@ export const useReference_unstable = (props, ref) => {
     renderByDefault: citation !== undefined && content !== undefined
   });
   const state = {
+    designVersion,
     id: referenceId,
     shouldUseOverflow,
     components: {

package/lib/components/reference-v2/Reference/useReference.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles.styles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n  props: ReferenceProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n  const { as, children, id } = props;\n\n  const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n  const referenceId = useId('reference-', id);\n\n  const elementType = as || ((props as JSX.IntrinsicElements['a']).href ? 'a' : 'button');\n  const propsWithAssignedAs = {\n    type: elementType === 'button' ? 'button' : undefined,\n    ...props,\n    as: elementType,\n    id: referenceId,\n  } as ReferenceProps;\n\n  const citation = slot.optional(props.citation, { elementType: 'span' });\n  const graphic = slot.optional(props.graphic, { elementType: 'span' });\n  const content = slot.optional(props.content, {\n    elementType: 'span',\n    renderByDefault: graphic !== undefined || !!children,\n  });\n  const divider = slot.optional(props.divider, {\n    elementType: 'span',\n    renderByDefault: citation !== undefined && content !== undefined,\n  });\n\n  const state: ReferenceState = {\n    id: referenceId,\n    shouldUseOverflow,\n\n    components: {\n      root: elementType,\n      citation: 'span',\n      divider: 'span',\n      graphic: 'span',\n      content: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(elementType, {\n        ref,\n        ...propsWithAssignedAs,\n      }),\n      { elementType },\n    ),\n    citation,\n    divider,\n    content,\n    graphic,\n  };\n\n  if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n    state.graphic.children = React.cloneElement(state.graphic.children, {\n      className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n    });\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useId","useReferenceListContext_unstable","referenceExtraClassNames","useReference_unstable","props","ref","as","children","id","shouldUseOverflow","ctx","referenceId","elementType","href","propsWithAssignedAs","type","undefined","citation","optional","graphic","content","renderByDefault","divider","state","components","root","always","isValidElement","cloneElement","className","graphicChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AACjG,SAASC,gCAAgC,QAAQ,sDAAsD;AACvG,SAASC,wBAAwB,QAAQ,8BAA8B;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,EAAE,EAAE,GAAGJ;IAE7B,MAAMK,oBAAoBR,iCAAiCS,CAAAA,MAAOA,IAAID,iBAAiB;IAEvF,MAAME,cAAcX,MAAM,cAAcQ;IAExC,MAAMI,cAAcN,MAAO,CAAA,AAACF,MAAqCS,IAAI,GAAG,MAAM,QAAO;IACrF,MAAMC,sBAAsB;QAC1BC,MAAMH,gBAAgB,WAAW,WAAWI;QAC5C,GAAGZ,KAAK;QACRE,IAAIM;QACJJ,IAAIG;IACN;IAEA,MAAMM,WAAWlB,KAAKmB,QAAQ,CAACd,MAAMa,QAAQ,EAAE;QAAEL,aAAa;IAAO;IACrE,MAAMO,UAAUpB,KAAKmB,QAAQ,CAACd,MAAMe,OAAO,EAAE;QAAEP,aAAa;IAAO;IACnE,MAAMQ,UAAUrB,KAAKmB,QAAQ,CAACd,MAAMgB,OAAO,EAAE;QAC3CR,aAAa;QACbS,iBAAiBF,YAAYH,aAAa,CAAC,CAACT;IAC9C;IACA,MAAMe,UAAUvB,KAAKmB,QAAQ,CAACd,MAAMkB,OAAO,EAAE;QAC3CV,aAAa;QACbS,iBAAiBJ,aAAaD,aAAaI,YAAYJ;IACzD;IAEA,MAAMO,QAAwB;QAC5Bf,IAAIG;QACJF;QAEAe,YAAY;YACVC,MAAMb;YACNK,UAAU;YACVK,SAAS;YACTH,SAAS;YACTC,SAAS;QACX;QAEAK,MAAM1B,KAAK2B,MAAM,CACf7B,yBAAyBe,aAAa;YACpCP;YACA,GAAGS,mBAAmB;QACxB,IACA;YAAEF;QAAY;QAEhBK;QACAK;QACAF;QACAD;IACF;IAEA,IAAII,MAAMJ,OAAO,IAAIvB,MAAM+B,cAAc,CAAcJ,MAAMJ,OAAO,CAACZ,QAAQ,GAAG;QAC9EgB,MAAMJ,OAAO,CAACZ,QAAQ,GAAGX,MAAMgC,YAAY,CAACL,MAAMJ,OAAO,CAACZ,QAAQ,EAAE;YAClEsB,WAAW/B,aAAayB,MAAMJ,OAAO,CAACZ,QAAQ,CAACH,KAAK,CAACyB,SAAS,EAAE3B,yBAAyB4B,YAAY;QACvG;IACF;IAEA,OAAOP;AACT,EAAE"}
+{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles.styles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n  props: ReferenceProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n  const { as, children, id } = props;\n\n  const designVersion = useDesignVersion(props.designVersion);\n\n  const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n  const referenceId = useId('reference-', id);\n\n  const elementType = as || ((props as JSX.IntrinsicElements['a']).href ? 'a' : 'button');\n  const propsWithAssignedAs = {\n    type: elementType === 'button' ? 'button' : undefined,\n    ...props,\n    as: elementType,\n    id: referenceId,\n  } as ReferenceProps;\n\n  const citation = slot.optional(props.citation, { elementType: 'span' });\n  const graphic = slot.optional(props.graphic, { elementType: 'span' });\n  const content = slot.optional(props.content, {\n    elementType: 'span',\n    renderByDefault: graphic !== undefined || !!children,\n  });\n  const divider = slot.optional(props.divider, {\n    elementType: 'span',\n    renderByDefault: citation !== undefined && content !== undefined,\n  });\n\n  const state: ReferenceState = {\n    designVersion,\n    id: referenceId,\n    shouldUseOverflow,\n\n    components: {\n      root: elementType,\n      citation: 'span',\n      divider: 'span',\n      graphic: 'span',\n      content: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(elementType, {\n        ref,\n        ...propsWithAssignedAs,\n      }),\n      { elementType },\n    ),\n    citation,\n    divider,\n    content,\n    graphic,\n  };\n\n  if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n    state.graphic.children = React.cloneElement(state.graphic.children, {\n      className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n    });\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useId","useReferenceListContext_unstable","referenceExtraClassNames","useDesignVersion","useReference_unstable","props","ref","as","children","id","designVersion","shouldUseOverflow","ctx","referenceId","elementType","href","propsWithAssignedAs","type","undefined","citation","optional","graphic","content","renderByDefault","divider","state","components","root","always","isValidElement","cloneElement","className","graphicChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AACjG,SAASC,gCAAgC,QAAQ,sDAAsD;AACvG,SAASC,wBAAwB,QAAQ,8BAA8B;AAEvE,SAASC,gBAAgB,QAAQ,mCAAmC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,EAAE,EAAE,GAAGJ;IAE7B,MAAMK,gBAAgBP,iBAAiBE,MAAMK,aAAa;IAE1D,MAAMC,oBAAoBV,iCAAiCW,CAAAA,MAAOA,IAAID,iBAAiB;IAEvF,MAAME,cAAcb,MAAM,cAAcS;IAExC,MAAMK,cAAcP,MAAO,CAAA,AAACF,MAAqCU,IAAI,GAAG,MAAM,QAAO;IACrF,MAAMC,sBAAsB;QAC1BC,MAAMH,gBAAgB,WAAW,WAAWI;QAC5C,GAAGb,KAAK;QACRE,IAAIO;QACJL,IAAII;IACN;IAEA,MAAMM,WAAWpB,KAAKqB,QAAQ,CAACf,MAAMc,QAAQ,EAAE;QAAEL,aAAa;IAAO;IACrE,MAAMO,UAAUtB,KAAKqB,QAAQ,CAACf,MAAMgB,OAAO,EAAE;QAAEP,aAAa;IAAO;IACnE,MAAMQ,UAAUvB,KAAKqB,QAAQ,CAACf,MAAMiB,OAAO,EAAE;QAC3CR,aAAa;QACbS,iBAAiBF,YAAYH,aAAa,CAAC,CAACV;IAC9C;IACA,MAAMgB,UAAUzB,KAAKqB,QAAQ,CAACf,MAAMmB,OAAO,EAAE;QAC3CV,aAAa;QACbS,iBAAiBJ,aAAaD,aAAaI,YAAYJ;IACzD;IAEA,MAAMO,QAAwB;QAC5Bf;QACAD,IAAII;QACJF;QAEAe,YAAY;YACVC,MAAMb;YACNK,UAAU;YACVK,SAAS;YACTH,SAAS;YACTC,SAAS;QACX;QAEAK,MAAM5B,KAAK6B,MAAM,CACf/B,yBAAyBiB,aAAa;YACpCR;YACA,GAAGU,mBAAmB;QACxB,IACA;YAAEF;QAAY;QAEhBK;QACAK;QACAF;QACAD;IACF;IAEA,IAAII,MAAMJ,OAAO,IAAIzB,MAAMiC,cAAc,CAAcJ,MAAMJ,OAAO,CAACb,QAAQ,GAAG;QAC9EiB,MAAMJ,OAAO,CAACb,QAAQ,GAAGZ,MAAMkC,YAAY,CAACL,MAAMJ,OAAO,CAACb,QAAQ,EAAE;YAClEuB,WAAWjC,aAAa2B,MAAMJ,OAAO,CAACb,QAAQ,CAACH,KAAK,CAAC0B,SAAS,EAAE7B,yBAAyB8B,YAAY;QACvG;IACF;IAEA,OAAOP;AACT,EAAE"}

package/lib/components/reference-v2/Reference/useReferenceStyles.styles.js

@@ -1,4 +1,5 @@
-import { __resetStyles, __styles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';
+import { __resetStyles, __styles, mergeClasses, typographyStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
 export const referenceClassNames = {
   root: 'fai-Reference',
   citation: 'fai-Reference__citation',
@@ -19,6 +20,19 @@ export const useRootStyles = __styles({
 }, {
   d: [".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}"]
 });
+const useRootNextStyles = __styles({
+  root: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu"
+  }
+}, {
+  d: [[".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }]]
+});
 const useCitationBaseClassName = __resetStyles("rzdip90", null, [".rzdip90{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase100);}"]);
 const useDividerBaseClassName = __resetStyles("r1eyqaw5", null, [".r1eyqaw5{background-color:var(--colorNeutralStroke2);height:16px;margin:var(--spacingVerticalNone) var(--spacingHorizontalXS);width:1px;}"]);
 const useGraphicBaseClassName = __resetStyles("rpyrgl4", null, [".rpyrgl4{display:inline-flex;font-size:16px;height:16px;line-height:16px;width:16px;}", ".rpyrgl4>.fai-Reference__graphicChild{height:16px;width:16px;}"]);
@@ -29,12 +43,16 @@ const useContentBaseClassName = __resetStyles("r1ycou3l", null, [".r1ycou3l{alig
 export const useReferenceStyles_unstable = state => {
   'use no memo';
 
+  const {
+    designVersion
+  } = state;
   const rootBaseClassName = useRootBaseClassName();
+  const rootNextStyles = useRootNextStyles();
   const citationBaseClassName = useCitationBaseClassName();
   const dividerBaseClassName = useDividerBaseClassName();
   const contentBaseClassName = useContentBaseClassName();
   const graphicBaseClassName = useGraphicBaseClassName();
-  state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, state.root.className);
+  state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
   if (state.citation) {
     state.citation.className = mergeClasses(referenceClassNames.citation, citationBaseClassName, state.citation.className);
   }

package/lib/components/reference-v2/Reference/useReferenceStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\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 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 rootBaseClassName = useRootBaseClassName();\n  const citationBaseClassName = useCitationBaseClassName();\n  const dividerBaseClassName = useDividerBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const graphicBaseClassName = useGraphicBaseClassName();\n\n  state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, state.root.className);\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","useCitationBaseClassName","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useGraphicBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","textAlign","wordBreak","caption1","useReferenceStyles_unstable","state","rootBaseClassName","citationBaseClassName","dividerBaseClassName","contentBaseClassName","graphicBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIjH,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,UAAU;IACVC,SAAS;IACTC,SAAS;IACTC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,2BAA2B;IACtCC,cAAc;AAChB,EAAE;AAEF,MAAMC,eAAe;AAErB,MAAMC,uBAAuBd,gBAAgB;IAC3Ce,YAAY;IACZC,iBAAiBb,OAAOc,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEf,OAAOgB,eAAe,CAAC,OAAO,EAAEhB,OAAOiB,mBAAmB,CAAC,CAAC;IACvEC,cAAclB,OAAOmB,kBAAkB;IACvCC,WAAW;IACXC,OAAOrB,OAAOsB,uBAAuB;IACrCC,WAAWvB,OAAOwB,oBAAoB;IACtCC,SAAS;IACTC,YAAY;IACZC,gBAAgB;IAChBC,UAAU;IACVC,WAAW;IACXC,SAAS,CAAC,EAAE9B,OAAO+B,kBAAkB,CAAC,CAAC,EAAE/B,OAAOgC,kBAAkB,CAAC,CAAC;IACpEC,gBAAgB;IAEhB,UAAU;QACRpB,iBAAiBb,OAAOkC,4BAA4B;QACpDC,aAAanC,OAAOoC,wBAAwB;QAC5Cf,OAAOrB,OAAOqC,4BAA4B;QAE1C,CAAC,CAAC,GAAG,EAAEnC,oBAAoBG,OAAO,CAAC,CAAC,CAAC,EAAE;YACrCQ,iBAAiBb,OAAOoC,wBAAwB;QAClD;IACF;IAEA,iBAAiB;QACfvB,iBAAiBb,OAAOsC,8BAA8B;QACtDH,aAAanC,OAAOuC,0BAA0B;QAC9ClB,OAAOrB,OAAOwC,8BAA8B;QAE5C,CAAC,CAAC,GAAG,EAAEtC,oBAAoBG,OAAO,CAAC,CAAC,CAAC,EAAE;YACrCQ,iBAAiBb,OAAOuC,0BAA0B;QACpD;IACF;AACF;AAEA,OAAO,MAAME,gBAAgB3C,WAAW;IACtC4C,UAAU;QACRd,UAAU;QACVe,OAAO;IACT;AACF,GAAG;AAEH,MAAMC,2BAA2B/C,gBAAgB;IAC/C,GAAGI,iBAAiB4C,cAAc;AACpC;AAEA,MAAMC,0BAA0BjD,gBAAgB;IAC9CgB,iBAAiBb,OAAOiB,mBAAmB;IAC3C8B,QAAQ;IACRC,QAAQ,CAAC,EAAEhD,OAAOiD,mBAAmB,CAAC,CAAC,EAAEjD,OAAOkD,mBAAmB,CAAC,CAAC;IACrEP,OAAO;AACT;AAEA,MAAMQ,0BAA0BtD,gBAAgB;IAC9C4B,SAAS;IACT2B,UAAU1C;IACVqC,QAAQrC;IACR2C,YAAY3C;IACZiC,OAAOjC;IAEP,CAAC,CAAC,GAAG,EAAEF,yBAAyBC,YAAY,CAAC,CAAC,CAAC,EAAE;QAC/CsC,QAAQrC;QACRiC,OAAOjC;IACT;AACF;AAEA,MAAM4C,0BAA0BzD,gBAAgB;IAC9Ce,YAAY;IACZW,WAAWvB,OAAOuD,uBAAuB;IACzC9B,SAAS;IACT+B,WAAW;IACXC,WAAW;IACX,GAAGxD,iBAAiByD,QAAQ;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,oBAAoBlD;IAC1B,MAAMmD,wBAAwBlB;IAC9B,MAAMmB,uBAAuBjB;IAC7B,MAAMkB,uBAAuBV;IAC7B,MAAMW,uBAAuBd;IAE7BS,MAAMzD,IAAI,CAAC+D,SAAS,GAAGnE,aAAaG,oBAAoBC,IAAI,EAAE0D,mBAAmBD,MAAMzD,IAAI,CAAC+D,SAAS;IAErG,IAAIN,MAAMxD,QAAQ,EAAE;QAClBwD,MAAMxD,QAAQ,CAAC8D,SAAS,GAAGnE,aACzBG,oBAAoBE,QAAQ,EAC5B0D,uBACAF,MAAMxD,QAAQ,CAAC8D,SAAS;IAE5B;IAEA,IAAIN,MAAMvD,OAAO,EAAE;QACjBuD,MAAMvD,OAAO,CAAC6D,SAAS,GAAGnE,aAAaG,oBAAoBG,OAAO,EAAE0D,sBAAsBH,MAAMvD,OAAO,CAAC6D,SAAS;IACnH;IAEA,IAAIN,MAAMrD,OAAO,EAAE;QACjBqD,MAAMrD,OAAO,CAAC2D,SAAS,GAAGnE,aAAaG,oBAAoBK,OAAO,EAAEyD,sBAAsBJ,MAAMrD,OAAO,CAAC2D,SAAS;IACnH;IAEA,IAAIN,MAAMtD,OAAO,EAAE;QACjBsD,MAAMtD,OAAO,CAAC4D,SAAS,GAAGnE,aAAaG,oBAAoBI,OAAO,EAAE2D,sBAAsBL,MAAMtD,OAAO,CAAC4D,SAAS;IACnH;IAEA,OAAON;AACT,EAAE"}
+{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } 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","typographyStyles","tokens","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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"}

package/lib/components/reference-v2/ReferenceList/useReferenceList.js

@@ -46,11 +46,13 @@ export const useReferenceList_unstable = (props, ref) => {
     setAreReferencesExpanded(false);
   }, []);
   const shouldUseOverflow = (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) && maxVisibleReferences !== undefined && !areReferencesExpanded;
+  // Since the overflow button is an OverflowItem that's always visible, we need to account for it.
+  const minVisibleOverflowItems = minVisibleReferences ? minVisibleReferences + 1 : 1;
   const state = {
     areReferencesExpanded,
     overflowButtonTriggeredViaKeyboard,
     maxVisibleReferences,
-    minVisibleReferences,
+    minVisibleReferences: minVisibleOverflowItems,
     referenceListRef,
     shouldUseOverflow,
     totalReferencesCount,