@fluentui-copilot/react-reference 0.11.2 → 0.11.3

package/lib-commonjs/components/ReferenceGroupToggle/index.js

@@ -7,5 +7,5 @@ _export_star._(require("./ReferenceGroupToggle"), exports);
 _export_star._(require("./ReferenceGroupToggle.types"), exports);
 _export_star._(require("./renderReferenceGroupToggle"), exports);
 _export_star._(require("./useReferenceGroupToggle"), exports);
-_export_star._(require("./useReferenceGroupToggleStyles"), exports);
+_export_star._(require("./useReferenceGroupToggleStyles.styles"), exports);
  //# sourceMappingURL=index.js.map

package/lib-commonjs/components/ReferenceGroupToggle/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceGroupToggle';\nexport * from './ReferenceGroupToggle.types';\nexport * from './renderReferenceGroupToggle';\nexport * from './useReferenceGroupToggle';\nexport * from './useReferenceGroupToggleStyles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceGroupToggle';\nexport * from './ReferenceGroupToggle.types';\nexport * from './renderReferenceGroupToggle';\nexport * from './useReferenceGroupToggle';\nexport * from './useReferenceGroupToggleStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggle.js

@@ -12,9 +12,12 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
 const _reacticons = require("@fluentui/react-icons");
+const _reactprovider = require("@fluentui-copilot/react-provider");
 const useReferenceGroupToggle_unstable = (props, ref)=>{
     const { isOpen = false } = props;
+    const mode = (0, _reactprovider.useCopilotMode)(props.mode);
     return {
+        mode,
         isOpen,
         components: {
             root: 'button',

package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceGroupToggle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { ChevronDown16Regular, ChevronUp16Regular } from '@fluentui/react-icons';\nimport type { ReferenceGroupToggleProps, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\n\n/**\n * Create the state required to render ReferenceGroupToggle.\n *\n * The returned state can be modified with hooks such as useReferenceGroupToggleStyles_unstable,\n * before being passed to renderReferenceGroupToggle_unstable.\n *\n * @param props - props from this instance of ReferenceGroupToggle\n * @param ref - reference to root HTMLElement of ReferenceGroupToggle\n */\nexport const useReferenceGroupToggle_unstable = (\n  props: ReferenceGroupToggleProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceGroupToggleState => {\n  const { isOpen = false } = props;\n\n  return {\n    isOpen,\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-expanded': isOpen,\n        type: 'button',\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n    icon: slot.optional(props.icon, {\n      defaultProps: {\n        children: isOpen ? <ChevronUp16Regular /> : <ChevronDown16Regular />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["isOpen","props","root","ref","type","getIntrinsicElementProps","elementType","icon","defaultProps","optional","renderByDefault","React","createElement","ChevronUp16Regular","ChevronDown16Regular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBUA;;;eAAAA;;;;iEAlBa;iCACwB;4BACU;AAgBvD,MAAQA,mCAAmBC,CAAAA,OAAAA;UAE3B,WACED,KAAAA;;;oBAIA;kBACAE;kBAEIC;;mCAEAC,CAAAA,MAAM,CAAAC,IAAAA,yCAAA,EAAA,UAAA;;6BAGRL;kBAAEM;eAAsBL,KAAA;YAE1BM;yBACEC;;mCAEA,CAAAC,QAAA,CAAAR,MAAAM,IAAA,EAAA;0BACAG;0BACAJ,SAAa,WAAA,GAAAK,OAAAC,aAAA,CAAAC,8BAAA,EAAA,QAAA,WAAA,GAAAF,OAAAC,aAAA,CAAAE,gCAAA,EAAA;;YAEjBJ,iBAAA;YACAJ,aAAA"}
+{"version":3,"sources":["useReferenceGroupToggle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { ChevronDown16Regular, ChevronUp16Regular } from '@fluentui/react-icons';\nimport type { ReferenceGroupToggleProps, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport { useCopilotMode } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render ReferenceGroupToggle.\n *\n * The returned state can be modified with hooks such as useReferenceGroupToggleStyles_unstable,\n * before being passed to renderReferenceGroupToggle_unstable.\n *\n * @param props - props from this instance of ReferenceGroupToggle\n * @param ref - reference to root HTMLElement of ReferenceGroupToggle\n */\nexport const useReferenceGroupToggle_unstable = (\n  props: ReferenceGroupToggleProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceGroupToggleState => {\n  const { isOpen = false } = props;\n\n  const mode = useCopilotMode(props.mode);\n  return {\n    mode,\n    isOpen,\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-expanded': isOpen,\n        type: 'button',\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n    icon: slot.optional(props.icon, {\n      defaultProps: {\n        children: isOpen ? <ChevronUp16Regular /> : <ChevronDown16Regular />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["isOpen","props","components","root","ref","type","getIntrinsicElementProps","elementType","icon","defaultProps","optional","renderByDefault","React","createElement","ChevronUp16Regular","ChevronDown16Regular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBUA;;;eAAAA;;;;iEAnBa;iCACwB;4BACU;+BAE1B;AAe7B,MAAQA,mCAAmBC,CAAAA,OAAAA;UAE3B,EACAD,SAAO,KAAA;UAELA,OAAAA,IAAAA,6BAAAA,EAAAA,MAAAA,IAAAA;WACAE;;;oBAGA;kBACAC;kBAEIC;;mCAEAC,CAAAA,MAAM,CAAAC,IAAAA,yCAAA,EAAA,UAAA;;6BAGRN;kBAAEO;eAAsBN,KAAA;YAE1BO;yBACEC;;mCAEA,CAAAC,QAAA,CAAAT,MAAAO,IAAA,EAAA;0BACAG;0BACAJ,SAAa,WAAA,GAAAK,OAAAC,aAAA,CAAAC,8BAAA,EAAA,QAAA,WAAA,GAAAF,OAAAC,aAAA,CAAAE,gCAAA,EAAA;;YAEjBJ,iBAAA;YACAJ,aAAA"}

package/lib-commonjs/components/ReferenceGroupToggle/{useReferenceGroupToggleStyles.js → useReferenceGroupToggleStyles.styles.js}

@@ -28,12 +28,38 @@ const useButtonBaseClassName = (0, _reactcomponents.__resetStyles)("rctdkan", "r
 const useIconBaseClassName = (0, _reactcomponents.__resetStyles)("r18biwo", null, [
     ".r18biwo{display:inline-flex;align-items:center;}"
 ]);
+const useStyles = (0, _reactcomponents.__styles)({
+    canvas: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm"
+    },
+    sidecar: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "f13mqy1h",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fcpl73t"
+    }
+}, {
+    d: [
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f13mqy1h{font-size:var(--fontSizeBase100);}",
+        ".fcpl73t{line-height:var(--lineHeightBase100);}"
+    ]
+});
 const useReferenceGroupToggleStyles_unstable = (state)=>{
+    'use no memo';
+    const { mode } = state;
+    const styles = useStyles();
     const iconBaseClassName = useIconBaseClassName();
     const buttonBaseClassName = useButtonBaseClassName();
-    state.root.className = (0, _reactcomponents.mergeClasses)(referenceGroupToggleClassNames.root, buttonBaseClassName, state.root.className);
+    state.root.className = (0, _reactcomponents.mergeClasses)(referenceGroupToggleClassNames.root, buttonBaseClassName, styles[mode], state.root.className);
     if (state.icon) {
         state.icon.className = (0, _reactcomponents.mergeClasses)(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);
     }
     return state;
-}; //# sourceMappingURL=useReferenceGroupToggleStyles.js.map
+}; //# sourceMappingURL=useReferenceGroupToggleStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceGroupToggleStyles.styles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} 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  ...shorthands.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":["referenceGroupToggleClassNames","typographyStyles","root","icon","useButtonBaseClassName","makeResetStyles","display","__resetStyles","columnGap","tokens","spacingHorizontalSNudge","alignItems","Bahqtrf","border","backgroundColor","color","shorthands","Be2twd7","Bhrd7zp","useIconBaseClassName","d","useStyles","state","styles","iconBaseClassName","buttonBaseClassName","className","mergeClasses","mode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,8BAAAA;eAAAA;;IA0BNC,sCAAyB;eAAzBA;;;iCA/BW;AAKX,MAAMD,iCAA4E;UACvFE;UACAC;AACF;AAEA,MAAMC,yBAAyBC,IAAAA,8BAAAA,EAAAA,WAAgB,WAAA;IAAA;IAAA;CAAA;MAC7CC,uBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,YAAWC,IAAAA,yBAAOC,EAAAA;YAClBC;QACAC,SAAGX;QACHY,SAAQ;QACRC,SAAAA;QACAC,SAAON;;aAEA;QACPG,SAAGI;QACLC,SAAA;QAEAC,SAAMC;QACJb,SAAS;;AAEX,GAAA;IAEAc,GAAA;QAAMC;QAAuB;QAAA;QAAA;QAAA;QAAA;KAAA;;MAGtBpB,yCAAyBqB,CAAAA;;IAIhC,MAAA,QAEC,GACDA;UACEC,SAAAF;UAEAG,oBAAiBF;UACjBG,sBAAeJ;UAEfnB,IAAMsB,CAAAA,SAAAA,GAAAA,IAAAA,6BAAoBL,EAAAA,+BAAAA,IAAAA,EAAAA,qBAAAA,MAAAA,CAAAA,KAAAA,EAAAA,MAAAA,IAAAA,CAAAA,SAAAA;QAC1BG,MAAMG,IAAAA,EAAAA;QACNH,MAAMpB,IAAI,CAACwB,SAAS,GAAGC,IAAAA,6BAAAA,EACrB3B,+BAA+BE,IAAI,EACnCuB,mBAAAA,MACAF,IAAOK,CAAAA,SACPN;;WAIAA;mEAGKA"}

package/lib-commonjs/components/ReferenceList/ReferenceList.js

@@ -12,11 +12,11 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useReferenceList = require("./useReferenceList");
 const _renderReferenceList = require("./renderReferenceList");
-const _useReferenceListStyles = require("./useReferenceListStyles");
+const _useReferenceListStylesstyles = require("./useReferenceListStyles.styles");
 const _reactprovider = require("@fluentui-copilot/react-provider");
 const ReferenceList = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useReferenceList.useReferenceList_unstable)(props, ref);
-    (0, _useReferenceListStyles.useReferenceListStyles_unstable)(state);
+    (0, _useReferenceListStylesstyles.useReferenceListStyles_unstable)(state);
     (0, _reactprovider.useCustomStyleHook)('useReferenceListStyles')(state);
     return (0, _renderReferenceList.renderReferenceList_unstable)(state);
 });

package/lib-commonjs/components/ReferenceList/ReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReferenceList_unstable } from './useReferenceList';\nimport { renderReferenceList_unstable } from './renderReferenceList';\nimport { useReferenceListStyles_unstable } from './useReferenceListStyles';\nimport type { ReferenceListProps } from './ReferenceList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n//ReferenceList component - TODO: add more docs\nexport const ReferenceList: ForwardRefComponent<ReferenceListProps> = React.forwardRef((props, ref) => {\n  const state = useReferenceList_unstable(props, ref);\n\n  useReferenceListStyles_unstable(state);\n  useCustomStyleHook('useReferenceListStyles')(state);\n\n  return renderReferenceList_unstable(state);\n});\n\nReferenceList.displayName = 'ReferenceList';\n"],"names":["ReferenceList","React","forwardRef","props","state","useReferenceList_unstable","useReferenceListStyles_unstable","useCustomStyleHook","renderReferenceList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;kCACmB;qCACG;wCACG;+BAGb;AAG5B,MAAMA,gBAAAA,WAAAA,GAAAA,OAAyDC,UAAMC,CAAU,CAACC,OAACA;UACtFC,QAAMA,IAAAA,2CAAQC,EAAAA,OAA0BF;+DAExCG,EAAAA;yCACAC,EAAAA,0BAAmBH;WAEnBI,IAAAA,iDAAOA,EAAAA;AACT;AAEAR,cAAcS,WAAW,GAAG"}
+{"version":3,"sources":["ReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReferenceList_unstable } from './useReferenceList';\nimport { renderReferenceList_unstable } from './renderReferenceList';\nimport { useReferenceListStyles_unstable } from './useReferenceListStyles.styles';\nimport type { ReferenceListProps } from './ReferenceList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n//ReferenceList component - TODO: add more docs\nexport const ReferenceList: ForwardRefComponent<ReferenceListProps> = React.forwardRef((props, ref) => {\n  const state = useReferenceList_unstable(props, ref);\n\n  useReferenceListStyles_unstable(state);\n  useCustomStyleHook('useReferenceListStyles')(state);\n\n  return renderReferenceList_unstable(state);\n});\n\nReferenceList.displayName = 'ReferenceList';\n"],"names":["ReferenceList","React","forwardRef","props","state","useReferenceList_unstable","useReferenceListStyles_unstable","useCustomStyleHook","renderReferenceList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;kCACmB;qCACG;8CACG;+BAGb;AAG5B,MAAMA,gBAAAA,WAAAA,GAAAA,OAAyDC,UAAMC,CAAU,CAACC,OAACA;UACtFC,QAAMA,IAAAA,2CAAQC,EAAAA,OAA0BF;qEAExCG,EAAAA;yCACAC,EAAAA,0BAAmBH;WAEnBI,IAAAA,iDAAOA,EAAAA;AACT;AAEAR,cAAcS,WAAW,GAAG"}

package/lib-commonjs/components/ReferenceList/index.js

@@ -7,5 +7,5 @@ _export_star._(require("./ReferenceList"), exports);
 _export_star._(require("./ReferenceList.types"), exports);
 _export_star._(require("./renderReferenceList"), exports);
 _export_star._(require("./useReferenceList"), exports);
-_export_star._(require("./useReferenceListStyles"), exports);
+_export_star._(require("./useReferenceListStyles.styles"), exports);
  //# sourceMappingURL=index.js.map

package/lib-commonjs/components/ReferenceList/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceList';\nexport * from './ReferenceList.types';\nexport * from './renderReferenceList';\nexport * from './useReferenceList';\nexport * from './useReferenceListStyles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceList';\nexport * from './ReferenceList.types';\nexport * from './renderReferenceList';\nexport * from './useReferenceList';\nexport * from './useReferenceListStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/ReferenceList/useReferenceList.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useReferenceList_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
-const _useReferenceListStyles = require("./useReferenceListStyles");
+const _useReferenceListStylesstyles = require("./useReferenceListStyles.styles");
 const useReferenceList_unstable = (props, ref)=>{
     return {
         components: {
@@ -21,7 +21,7 @@ const useReferenceList_unstable = (props, ref)=>{
             ref,
             ...props,
             children: _react.Children.map(props.children, (child)=>/*#__PURE__*/ _react.createElement("li", {
-                    className: _useReferenceListStyles.referenceListItemClassName
+                    className: _useReferenceListStylesstyles.referenceListItemClassName
                 }, child))
         }), {
             elementType: 'ol'

package/lib-commonjs/components/ReferenceList/useReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { referenceListItemClassName } from './useReferenceListStyles';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLOListElement>,\n): ReferenceListState => {\n  return {\n    components: {\n      root: 'ol',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('ol', {\n        ref,\n        ...props,\n        children: React.Children.map(props.children, child => <li className={referenceListItemClassName}>{child}</li>),\n      }),\n      { elementType: 'ol' },\n    ),\n  };\n};\n"],"names":["useReferenceList_unstable","props","ref","components","root","children","className","referenceListItemClassName","child"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBSA;;;eAAAA;;;;iEApBc;iCACwB;wCAEJ;AAiBzC,MAAOA,4BAAA,CAAAC,OAAAC;WACLC;oBACEC;kBACF;;mCAGIF,CAAAA,MAAAA,CAAAA,IAAAA,yCAAAA,EAAAA,MAAAA;;oBAEAG;6BAA0DC,QAAAA,CAAWC,GAAAA,CAAAA,MAAAA,QAAAA,EAAAA,CAAAA,QAAAA,WAAAA,GAAAA,OAAAA,aAAAA,CAAAA,MAAAA;+BAA6BC,kDAAAA;mBACpGA;;yBACoB;QAExB;IACA"}
+{"version":3,"sources":["useReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { referenceListItemClassName } from './useReferenceListStyles.styles';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLOListElement>,\n): ReferenceListState => {\n  return {\n    components: {\n      root: 'ol',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('ol', {\n        ref,\n        ...props,\n        children: React.Children.map(props.children, child => <li className={referenceListItemClassName}>{child}</li>),\n      }),\n      { elementType: 'ol' },\n    ),\n  };\n};\n"],"names":["useReferenceList_unstable","props","ref","components","root","children","className","referenceListItemClassName","child"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBSA;;;eAAAA;;;;iEApBc;iCACwB;8CAEJ;AAiBzC,MAAOA,4BAAA,CAAAC,OAAAC;WACLC;oBACEC;kBACF;;mCAGIF,CAAAA,MAAAA,CAAAA,IAAAA,yCAAAA,EAAAA,MAAAA;;oBAEAG;6BAA0DC,QAAAA,CAAWC,GAAAA,CAAAA,MAAAA,QAAAA,EAAAA,CAAAA,QAAAA,WAAAA,GAAAA,OAAAA,aAAAA,CAAAA,MAAAA;+BAA6BC,wDAAAA;mBACpGA;;yBACoB;QAExB;IACA"}

package/lib-commonjs/components/ReferenceList/{useReferenceListStyles.js → useReferenceListStyles.styles.js}

@@ -31,6 +31,7 @@ const referenceListItemClassName = 'fai-ReferenceList__item';
     ".rc0s888>.fai-ReferenceList__item{list-style-type:none;}"
 ]);
 const useReferenceListStyles_unstable = (state)=>{
+    'use no memo';
     state.root.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.root, useRootClassName(), state.root.className);
     return state;
-}; //# sourceMappingURL=useReferenceListStyles.js.map
+}; //# sourceMappingURL=useReferenceListStyles.styles.js.map

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

@@ -0,0 +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\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n  root: 'fai-ReferenceList',\n};\n\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 */\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":["referenceListClassNames","referenceListItemClassName","tokens","root","padding","__resetStyles","gap","state","className","mergeClasses","useRootClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAAA;eAAAA;;IAIAC,0BAAAA;eAAAA;;IAUNC,+BAAuB;eAAvBA;;;iCAlBuC;AAIvC,MAAMF,0BAA8D;UACzEG;AACF;AAEO,MAAMF,6BAA6B;AAE1C;;CAEC,SAECG,mBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;AAITC,MAAKJ,kCAAuBK,CAAAA;;UAI5BJ,IAAA,CAAAK,SAAA,GAAAC,IAAAA,6BAAA,EAAAT,wBAAAG,IAAA,EAAAO,oBAAAH,MAAAJ,IAAA,CAAAK,SAAA;IACF,OAAAD;AAEA"}

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

@@ -12,10 +12,10 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useReference = require("./useReference");
 const _renderReference = require("./renderReference");
-const _useReferenceStyles = require("./useReferenceStyles");
+const _useReferenceStylesstyles = require("./useReferenceStyles.styles");
 const Reference = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useReference.useReference_unstable)(props, ref);
-    (0, _useReferenceStyles.useReferenceStyles_unstable)(state);
+    (0, _useReferenceStylesstyles.useReferenceStyles_unstable)(state);
     return (0, _renderReference.renderReference_unstable)(state);
 });
 Reference.displayName = 'Reference'; //# sourceMappingURL=Reference.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["Reference.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReference_unstable } from './useReference';\nimport { renderReference_unstable } from './renderReference';\nimport { useReferenceStyles_unstable } from './useReferenceStyles';\nimport type { ReferenceProps } from './Reference.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const Reference: ForwardRefComponent<ReferenceProps> = React.forwardRef((props, ref) => {\n  const state = useReference_unstable(props, ref);\n\n  useReferenceStyles_unstable(state);\n  return renderReference_unstable(state);\n});\n\nReference.displayName = 'Reference';\n"],"names":["Reference","React","forwardRef","props","state","useReference_unstable","useReferenceStyles_unstable","renderReference_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;8BACe;iCACG;oCACG;AAIrC,MAAMA,YAAAA,WAAAA,GAAAA,OAAiDC,UAAMC,CAAU,CAACC,OAACA;UAC9EC,QAAMA,IAAAA,mCAAQC,EAAAA,OAAsBF;uDAEpCG,EAAAA;WACAC,IAAAA,yCAAOA,EAAAA;AACT;AAEAP,UAAUQ,WAAW,GAAG"}
+{"version":3,"sources":["Reference.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReference_unstable } from './useReference';\nimport { renderReference_unstable } from './renderReference';\nimport { useReferenceStyles_unstable } from './useReferenceStyles.styles';\nimport type { ReferenceProps } from './Reference.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const Reference: ForwardRefComponent<ReferenceProps> = React.forwardRef((props, ref) => {\n  const state = useReference_unstable(props, ref);\n\n  useReferenceStyles_unstable(state);\n  return renderReference_unstable(state);\n});\n\nReference.displayName = 'Reference';\n"],"names":["Reference","React","forwardRef","props","state","useReference_unstable","useReferenceStyles_unstable","renderReference_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;8BACe;iCACG;0CACG;AAIrC,MAAMA,YAAAA,WAAAA,GAAAA,OAAiDC,UAAMC,CAAU,CAACC,OAACA;UAC9EC,QAAMA,IAAAA,mCAAQC,EAAAA,OAAsBF;6DAEpCG,EAAAA;WACAC,IAAAA,yCAAOA,EAAAA;AACT;AAEAP,UAAUQ,WAAW,GAAG"}

package/lib-commonjs/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  root: NonNullable<Slot<'button'>>;\n  citation?: Slot<'span'>;\n  divider?: Slot<'span'>;\n  content?: Slot<'span'>;\n  media?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & {\n  /**\n   * The appearance of the reference.\n   * @default 'lighter'\n   */\n  appearance?: 'lighter' | 'darker';\n};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n  Required<Pick<ReferenceProps, 'appearance' | 'id'>> &\n  Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":""}
+{"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  root: NonNullable<Slot<'button', 'a'>>;\n  citation?: Slot<'span'>;\n  divider?: Slot<'span'>;\n  content?: Slot<'span'>;\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":""}

package/lib-commonjs/components/reference-v2/Reference/index.js

@@ -10,13 +10,13 @@ function _export(target, all) {
 }
 _export(exports, {
     referenceClassNames: function() {
-        return _useReferenceStyles.referenceClassNames;
+        return _useReferenceStylesstyles.referenceClassNames;
     },
     referenceExtraClassNames: function() {
-        return _useReferenceStyles.referenceExtraClassNames;
+        return _useReferenceStylesstyles.referenceExtraClassNames;
     },
     useReferenceStyles_unstable: function() {
-        return _useReferenceStyles.useReferenceStyles_unstable;
+        return _useReferenceStylesstyles.useReferenceStyles_unstable;
     }
 });
 const _export_star = require("@swc/helpers/_/_export_star");
@@ -24,5 +24,5 @@ _export_star._(require("./Reference"), exports);
 _export_star._(require("./Reference.types"), exports);
 _export_star._(require("./renderReference"), exports);
 _export_star._(require("./useReference"), exports);
-const _useReferenceStyles = require("./useReferenceStyles");
+const _useReferenceStylesstyles = require("./useReferenceStyles.styles");
  //# sourceMappingURL=index.js.map

package/lib-commonjs/components/reference-v2/Reference/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Reference';\nexport * from './Reference.types';\nexport * from './renderReference';\nexport * from './useReference';\nexport { referenceClassNames, referenceExtraClassNames, useReferenceStyles_unstable } from './useReferenceStyles';\n"],"names":["referenceClassNames","referenceExtraClassNames","useReferenceStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAISA,mBAAmB;eAAnBA,uCAAmB;;IAAEC,wBAAwB;eAAxBA,4CAAwB;;IAAEC,2BAA2B;eAA3BA,+CAA2B;;;;uBAJrE;uBACA;uBACA;uBACA;oCAC6E"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Reference';\nexport * from './Reference.types';\nexport * from './renderReference';\nexport * from './useReference';\nexport {\n  referenceClassNames,\n  referenceExtraClassNames,\n  useReferenceStyles_unstable,\n} from './useReferenceStyles.styles';\n"],"names":["referenceClassNames","referenceExtraClassNames","useReferenceStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKEA,mBAAmB;eAAnBA,6CAAmB;;IACnBC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,2BAA2B;eAA3BA,qDAA2B;;;;uBAPf;uBACA;uBACA;uBACA;0CAKP"}

package/lib-commonjs/components/reference-v2/Reference/renderReference.js

@@ -19,7 +19,7 @@ const renderReference_unstable = (state)=>{
             state.divider && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.divider, {}),
             state.content && /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.content, {
                 children: [
-                    state.media && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.media, {}),
+                    state.graphic && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.graphic, {}),
                     state.root.children
                 ]
             })

package/lib-commonjs/components/reference-v2/Reference/renderReference.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderReference.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceState, ReferenceSlots } from './Reference.types';\n\nexport const renderReference_unstable = (state: ReferenceState) => {\n  assertSlots<ReferenceSlots>(state);\n\n  const { id, shouldUseOverflow } = state;\n\n  const reference = (\n    <state.root>\n      {state.citation && <state.citation />}\n      {state.divider && <state.divider />}\n      {state.content && (\n        <state.content>\n          {state.media && <state.media />}\n          {state.root.children}\n        </state.content>\n      )}\n    </state.root>\n  );\n\n  return shouldUseOverflow ? (\n    <OverflowItem key={id} id={id}>\n      {reference}\n    </OverflowItem>\n  ) : (\n    reference\n  );\n};\n"],"names":["renderReference_unstable","state","assertSlots","id","divider","_jsxs","root","content","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;iCAE0C;AAGnC,MAAMA,2BAA2BC,CAAAA;oCACtCC,EAAAA;UAEA,EAEAC,EAAA;sBAGWC,WAAO,GAAAC,IAAAA,gBAAA,EAAAJ,MAAIK,IAACL,EAAAA;kBAClBA;YAAAA,MAAMM,QAAO,IAAA,WACZ,GAAAC,IAAAA,eAACP,EAAAA,MAAMM,QAAO,EAAA,CAAA;YAAAN,MAAAG,OAAA,IAAA,WAAA,GAAAI,IAAAA,eAAA,EAAAP,MAAAG,OAAA,EAAA,CAAA;YAAAH,MAAAM,OAAA,IAAA,WAAA,GAAAF,IAAAA,gBAAA,EAAAJ,MAAAM,OAAA,EAAA;;;;;;;;;;;;8CASSJ"}
+{"version":3,"sources":["renderReference.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceState, ReferenceSlots } from './Reference.types';\n\nexport const renderReference_unstable = (state: ReferenceState) => {\n  assertSlots<ReferenceSlots>(state);\n\n  const { id, shouldUseOverflow } = state;\n\n  const reference = (\n    <state.root>\n      {state.citation && <state.citation />}\n      {state.divider && <state.divider />}\n      {state.content && (\n        <state.content>\n          {state.graphic && <state.graphic />}\n          {state.root.children}\n        </state.content>\n      )}\n    </state.root>\n  );\n\n  return shouldUseOverflow ? (\n    <OverflowItem key={id} id={id}>\n      {reference}\n    </OverflowItem>\n  ) : (\n    reference\n  );\n};\n"],"names":["renderReference_unstable","state","assertSlots","id","divider","_jsxs","root","content","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;iCAE0C;AAGnC,MAAMA,2BAA2BC,CAAAA;oCACtCC,EAAAA;UAEA,EAEAC,EAAA;sBAGWC,WAAO,GAAAC,IAAAA,gBAAA,EAAAJ,MAAIK,IAACL,EAAAA;kBAClBA;YAAAA,MAAMM,QAAO,IAAA,WACZ,GAAAC,IAAAA,eAACP,EAAAA,MAAMM,QAAO,EAAA,CAAA;YAAAN,MAAAG,OAAA,IAAA,WAAA,GAAAI,IAAAA,eAAA,EAAAP,MAAAG,OAAA,EAAA,CAAA;YAAAH,MAAAM,OAAA,IAAA,WAAA,GAAAF,IAAAA,gBAAA,EAAAJ,MAAAM,OAAA,EAAA;;;;;;;;;;;;8CASSJ"}

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

@@ -12,38 +12,33 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
 const _referenceListContext = require("../../../contexts/reference-v2/referenceListContext");
-const _useReferenceStyles = require("./useReferenceStyles");
+const _useReferenceStylesstyles = require("./useReferenceStyles.styles");
 const useReference_unstable = (props, ref)=>{
     const { children, id } = props;
-    const { ctxAppearance, shouldUseOverflow } = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>({
-            ctxAppearance: ctx.appearance,
-            shouldUseOverflow: ctx.shouldUseOverflow
-        }));
-    const appearance = props.appearance || ctxAppearance;
+    const shouldUseOverflow = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.shouldUseOverflow);
     const referenceId = (0, _reactcomponents.useId)('reference-', id);
     const citation = _reactcomponents.slot.optional(props.citation, {
         elementType: 'span'
     });
-    const media = _reactcomponents.slot.optional(props.media, {
+    const graphic = _reactcomponents.slot.optional(props.graphic, {
         elementType: 'span'
     });
     const content = _reactcomponents.slot.optional(props.content, {
         elementType: 'span',
-        renderByDefault: media !== undefined || !!children
+        renderByDefault: graphic !== undefined || !!children
     });
     const divider = _reactcomponents.slot.optional(props.divider, {
         elementType: 'span',
         renderByDefault: citation !== undefined && content !== undefined
     });
     const state = {
-        appearance,
         id: referenceId,
         shouldUseOverflow,
         components: {
             root: 'button',
             citation: 'span',
             divider: 'span',
-            media: 'span',
+            graphic: 'span',
             content: 'span'
         },
         root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('button', {
@@ -56,11 +51,11 @@ const useReference_unstable = (props, ref)=>{
         citation,
         divider,
         content,
-        media
+        graphic
     };
-    if (state.media && /*#__PURE__*/ _react.isValidElement(state.media.children)) {
-        state.media.children = /*#__PURE__*/ _react.cloneElement(state.media.children, {
-            className: (0, _reactcomponents.mergeClasses)(state.media.children.props.className, _useReferenceStyles.referenceExtraClassNames.mediaChild)
+    if (state.graphic && /*#__PURE__*/ _react.isValidElement(state.graphic.children)) {
+        state.graphic.children = /*#__PURE__*/ _react.cloneElement(state.graphic.children, {
+            className: (0, _reactcomponents.mergeClasses)(state.graphic.children.props.className, _useReferenceStylesstyles.referenceExtraClassNames.graphicChild)
         });
     }
     return state;

package/lib-commonjs/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';\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 = (props: ReferenceProps, ref: React.Ref<HTMLButtonElement>): ReferenceState => {\n  const { children, id } = props;\n\n  const { ctxAppearance, shouldUseOverflow } = useReferenceListContext_unstable(ctx => ({\n    ctxAppearance: ctx.appearance,\n    shouldUseOverflow: ctx.shouldUseOverflow,\n  }));\n  const appearance = props.appearance || ctxAppearance;\n\n  const referenceId = useId('reference-', id);\n\n  const citation = slot.optional(props.citation, { elementType: 'span' });\n  const media = slot.optional(props.media, { elementType: 'span' });\n  const content = slot.optional(props.content, {\n    elementType: 'span',\n    renderByDefault: media !== 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    appearance,\n    id: referenceId,\n    shouldUseOverflow,\n\n    components: {\n      root: 'button',\n      citation: 'span',\n      divider: 'span',\n      media: 'span',\n      content: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        ...props,\n        id: referenceId,\n      }),\n      { elementType: 'button' },\n    ),\n    citation,\n    divider,\n    content,\n    media,\n  };\n\n  if (state.media && React.isValidElement<HTMLElement>(state.media.children)) {\n    state.media.children = React.cloneElement(state.media.children, {\n      className: mergeClasses(state.media.children.props.className, referenceExtraClassNames.mediaChild),\n    });\n  }\n\n  return state;\n};\n"],"names":["children","props","ctxAppearance","referenceId","shouldUseOverflow","slot","ctx","appearance","optional","content","elementType","citation","renderByDefault","media","divider","state","components","undefined","ref","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBUA;;;eAAAA;;;;iEAhBa;iCAC6C;sCACnB;oCACR;AAavC,MAAQA,wBAAiBC,CAAAA,OAAAA;UAEzB,UACEC;UAGF,EAEAA,aAAMC,EAENC,iBAAiBC,+DAA6C,EAAAC,CAAAA,MAAA,CAAA;YAAOJ,eAAAI,IAAAC,UAAA;YACrEH,mBAAmBI,IAAAA,iBAAoB;;UAAwBD,aAAAN,MAAAM,UAAA,IAAAL;UAC/DC,cAAgBE,IAAAA,sBAAKG,EAAAA,cAAeC;UAClCC,WAAAA,qBAAa,CAAAF,QAAA,CAAAP,MAAAU,QAAA,EAAA;qBACbC;;UAEFC,QAAMC,qBAAUT,CAAAA,QAAKG,CAAAA,MAASP,KAAMa,EAAAA;qBAClCJ;;UAEFD,UAAAJ,qBAAA,CAAAG,QAAA,CAAAP,MAAAQ,OAAA,EAAA;QAEAC,aAAMK;yBACJR,UAAAA,aAAAA,CAAAA,CAAAA;;UAEAH,UAAAA,qBAAAA,CAAAA,QAAAA,CAAAA,MAAAA,OAAAA,EAAAA;qBAEAY;yBACQL,aAAAM,aAAAR,YAAAQ;;kBAENH;;;;oBAKIT;kBAEFa;sBACGjB;qBACHkB;mBAEF;qBAAET;;cAEJC,qBAAAA,CAAAA,MAAAA,CAAAA,IAAAA,yCAAAA,EAAAA,UAAAA;;eAEAF,KAAAA;gBACAI;QACF,IAAA;YAEAH,aAAe;;;;QAIfD;QAEAI;IACA"}
+{"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 { children, id } = props;\n\n  const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n  const referenceId = useId('reference-', id);\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: 'button',\n      citation: 'span',\n      divider: 'span',\n      graphic: 'span',\n      content: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        ...props,\n        id: referenceId,\n      }),\n      { elementType: 'button' },\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":["children","props","referenceId","id","shouldUseOverflow","useReferenceListContext_unstable","ctx","slot","optional","graphic","elementType","citation","renderByDefault","content","divider","undefined","root","ref","always","getIntrinsicElementProps","state","React","isValidElement","className","mergeClasses","referenceExtraClassNames","graphicChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBUA;;;eAAAA;;;;iEAnBa;iCAC6C;sCACnB;0CACR;AAgBvC,MAAQA,wBAAiBC,CAAAA,OAAAA;UAEzB,EAEAD,QAAME,EAENC,EAAA;UAAqEC,oBAAAC,IAAAA,sDAAA,EAAAC,CAAAA,MAAAA,IAAAF,iBAAA;UACrEF,cAAgBK,IAAAA,sBAAKC,EAAAA,cAAeC;UAAWC,WAAAA,qBAAa,CAAAF,QAAA,CAAAP,MAAAU,QAAA,EAAA;QAAOD,aAAA;;UAEjEA,UAAAA,qBAAa,CAAAF,QAAA,CAAAP,MAAAQ,OAAA,EAAA;qBACbG;;UAEFC,UAAMC,qBAAUP,CAAAA,QAAKC,CAAAA,MAASP,OAAMa,EAAO;qBACzCJ;yBACAE,YAAiBD,aAAaI,CAAAA,CAAAA;;UAGhCD,UAA8BP,qBAAA,CAAAC,QAAA,CAAAP,MAAAa,OAAA,EAAA;qBACxBZ;yBACJE,aAAAA,aAAAA,YAAAA;;kBAGEY;;;oBAGAP;kBACAI;sBACF;qBAEMN;qBAEFU;qBACGhB;;cAELM,qBACA,CAAAW,MAAA,CAAAC,IAAAA,yCAAA,EAAA,UAAA;;eAAwBlB,KAAA;gBAE1BU;YACAG;yBACAD;;QAEFF;QAEAG;;;;QAIAM,MAAAX,OAAA,kBAAAY,OAAAC,cAAA,CAAAF,MAAAX,OAAA,CAAAT,QAAA,GAAA;QAEAoB,MAAAX,OAAOW,CAAAA,QAAAA,iBAAAA,OAAAA,YAAAA,CAAAA,MAAAA,OAAAA,CAAAA,QAAAA,EAAAA;YACPG,WAAAC,IAAAA,6BAAA,EAAAJ,MAAAX,OAAA,CAAAT,QAAA,CAAAC,KAAA,CAAAsB,SAAA,EAAAE,kDAAA,CAAAC,YAAA"}

package/lib-commonjs/components/reference-v2/Reference/{useReferenceStyles.js → useReferenceStyles.styles.js}

@@ -27,13 +27,13 @@ const referenceClassNames = {
     root: 'fai-Reference',
     citation: 'fai-Reference__citation',
     divider: 'fai-Reference__divider',
-    media: 'fai-Reference__media',
+    graphic: 'fai-Reference__graphic',
     content: 'fai-Reference__content'
 };
 const referenceExtraClassNames = {
-    mediaChild: 'fai-Reference__mediaChild'
+    graphicChild: 'fai-Reference__graphicChild'
 };
-const MEDIA_SIZE = '16px';
+const GRAPHIC_SIZE = '16px';
 const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1aeqif9", null, [
     ".r1aeqif9{align-items:center;background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);box-sizing:border-box;color:var(--colorNeutralForeground2);column-gap:var(--spacingHorizontalXXS);display:flex;flex-shrink:0;justify-content:center;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);}",
     ".r1aeqif9:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}",
@@ -42,36 +42,12 @@ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1aeqif9", nul
     ".r1aeqif9:hover:active .fai-Reference__divider{background-color:var(--colorNeutralStroke1Pressed);}"
 ]);
 const useRootStyles = (0, _reactcomponents.__styles)({
-    darker: {
-        De3pzq: "f3vzo32",
-        g2u3we: "fj3muxo",
-        h3c5rm: [
-            "f1akhkt",
-            "f1lxtadh"
-        ],
-        B9xav0g: "f1aperda",
-        zhjwy3: [
-            "f1lxtadh",
-            "f1akhkt"
-        ],
-        Jwef8y: "f14vf7cg",
-        iro3zm: "fho4vwd"
-    },
     overflow: {
         a9b677: "fly5x3f"
     }
 }, {
     d: [
-        ".f3vzo32{background-color:var(--colorNeutralBackground5);}",
-        ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}",
-        ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}",
-        ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}",
-        ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}",
         ".fly5x3f{width:100%;}"
-    ],
-    h: [
-        ".f14vf7cg:hover{background-color:var(--colorNeutralBackground5Hover);}",
-        ".fho4vwd:hover:active{background-color:var(--colorNeutralBackground5Pressed);}"
     ]
 });
 const useCitationBaseClassName = (0, _reactcomponents.__resetStyles)("rzdip90", null, [
@@ -80,43 +56,32 @@ const useCitationBaseClassName = (0, _reactcomponents.__resetStyles)("rzdip90",
 const useDividerBaseClassName = (0, _reactcomponents.__resetStyles)("r1eyqaw5", null, [
     ".r1eyqaw5{background-color:var(--colorNeutralStroke2);height:16px;margin:var(--spacingVerticalNone) var(--spacingHorizontalXS);width:1px;}"
 ]);
-const useDividerStyles = (0, _reactcomponents.__styles)({
-    darker: {
-        De3pzq: "f1d3jkam"
-    }
-}, {
-    d: [
-        ".f1d3jkam{background-color:var(--colorNeutralStroke1);}"
-    ]
-});
-const useMediaBaseClassName = (0, _reactcomponents.__resetStyles)("r4nw7iy", null, [
-    ".r4nw7iy{font-size:16px;height:16px;line-height:16px;width:16px;}",
-    ".r4nw7iy>.fai-Reference__mediaChild{height:16px;width:16px;}"
+const useGraphicBaseClassName = (0, _reactcomponents.__resetStyles)("rjrtsj7", null, [
+    ".rjrtsj7{font-size:16px;height:16px;line-height:16px;width:16px;}",
+    ".rjrtsj7>.fai-Reference__graphicChild{height:16px;width:16px;}"
 ]);
 const useContentBaseClassName = (0, _reactcomponents.__resetStyles)("r1yvxokd", null, [
     ".r1yvxokd{column-gap:var(--spacingHorizontalSNudge);display:inline-flex;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"
 ]);
 const useReferenceStyles_unstable = (state)=>{
-    const { appearance } = state;
+    'use no memo';
     const rootBaseClassName = useRootBaseClassName();
     const citationBaseClassName = useCitationBaseClassName();
     const dividerBaseClassName = useDividerBaseClassName();
     const contentBaseClassName = useContentBaseClassName();
-    const mediaBaseClassName = useMediaBaseClassName();
-    const rootStyles = useRootStyles();
-    const dividerStyles = useDividerStyles();
-    state.root.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.root, rootBaseClassName, appearance === 'darker' && rootStyles.darker, state.root.className);
+    const graphicBaseClassName = useGraphicBaseClassName();
+    state.root.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.root, rootBaseClassName, state.root.className);
     if (state.citation) {
         state.citation.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.citation, citationBaseClassName, state.citation.className);
     }
     if (state.divider) {
-        state.divider.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.divider, dividerBaseClassName, appearance === 'darker' && dividerStyles.darker, state.divider.className);
+        state.divider.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.divider, dividerBaseClassName, state.divider.className);
     }
     if (state.content) {
         state.content.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.content, contentBaseClassName, state.content.className);
     }
-    if (state.media) {
-        state.media.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.media, mediaBaseClassName, state.media.className);
+    if (state.graphic) {
+        state.graphic.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);
     }
     return state;
-}; //# sourceMappingURL=useReferenceStyles.js.map
+}; //# sourceMappingURL=useReferenceStyles.styles.js.map

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

@@ -0,0 +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: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\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    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  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  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'inline-flex',\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":["referenceClassNames","referenceExtraClassNames","color","colorNeutralForeground2Hover","alignItems","root","citation","divider","graphic","content","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","makeResetStyles","__styles","backgroundColor","border","colorNeutralForeground2","display","__resetStyles","flexShrink","justifyContent","padding","spacingVerticalXXS","tokens","spacingHorizontalS","rootBaseClassName","citationBaseClassName","useCitationBaseClassName","dividerBaseClassName","useDividerBaseClassName","borderColor","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","state","className","mergeClasses","overflow","width","contentBaseClassName","graphicBaseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,mBAAAA;eAAAA;;IAQAC,wBAAAA;eAAAA;;IAsBTC,2BAAcC;eAAdD;;IAfFE,aAAY;eAAZA;;;iCAnB0E;AAIrE,MAAMJ,sBAAsD;UACjEK;cACAC;aACAC;aACAC;aACAC;AACF;AAEO,MAAMR,2BAA2B;kBACtCS;AACF;AAEA,MAAMC,eAAe;AAErB,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAAA;AAC3CT,MAAAA,gBAAYU,IAAAA,yBAAA,EAAA;cACZC;QACAC,QAAQ;;;OAGRd;QAAAA;KAAce;;MAEdC,2BAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,0BAAYD,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MACZE,0BAAgBF,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;MAChBG,0BAAmBC,IAAAA,8BAAsBC,EAAAA,YAAOC,MAAAA;IAAAA;CAAoB;MAKlEvB,8BAAcC,CAAAA;;UAIduB,oBAAAd;UACFe,wBAAAC;UAEAC,uBAAiBC;UACff,uBAAiBS;UACjBO,uBAAoBC;UACpB9B,IAAAA,CAAAA,SAAc+B,GAAAA,IAAAA,6BAAAA,EAAAA,oBAA8B5B,IAAA,EAAAqB,mBAAAQ,MAAA7B,IAAA,CAAA8B,SAAA;cAE1C7B,QAAKN,EAAAA;sBACLe,CAAAA,SAAAA,GAAiBS,IAAAA,6BAAOQ,EAAAA,oBAA0B1B,QAAA,EAAAqB,uBAAAO,MAAA5B,QAAA,CAAA6B,SAAA;;QAEtDD,MAAA3B,OAAA,EAAA;QACF2B,MAAA3B,OAAA,CAAA4B,SAAA,GAAAC,IAAAA,6BAAA,EAAApC,oBAAAO,OAAA,EAAAsB,sBAAAK,MAAA3B,OAAA,CAAA4B,SAAA;IAEA;QACEE,MAAAA,OAAU,EAAA;cACRC,OAAO,CAAAH,SAAA,GAAAC,IAAAA,6BAAA,EAAApC,oBAAAS,OAAA,EAAA8B,sBAAAL,MAAAzB,OAAA,CAAA0B,SAAA;;IAEX,IAAGD,MAAA1B,OAAA,EAAA;QAEH0B,MAAMN,OAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAA2Bf,EAAAA,oBAAgBL,OAAA,EAAAgC,sBAAAN,MAAA1B,OAAA,CAAA2B,SAAA;;IAEjD,OAAAD;AAEA,wDAC6C"}

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

@@ -12,12 +12,12 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _renderReferenceList = require("./renderReferenceList");
 const _useReferenceList = require("./useReferenceList");
-const _useReferenceListStyles = require("./useReferenceListStyles");
+const _useReferenceListStylesstyles = require("./useReferenceListStyles.styles");
 const _useReferenceListContextValues = require("./useReferenceListContextValues");
 const ReferenceList = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useReferenceList.useReferenceList_unstable)(props, ref);
     const referenceListContextValues = (0, _useReferenceListContextValues.useReferenceListContextValues_unstable)(state);
-    (0, _useReferenceListStyles.useReferenceListStyles_unstable)(state);
+    (0, _useReferenceListStylesstyles.useReferenceListStyles_unstable)(state);
     return (0, _renderReferenceList.renderReferenceList_unstable)(state, referenceListContextValues);
 });
 ReferenceList.displayName = 'ReferenceList'; //# sourceMappingURL=ReferenceList.js.map

package/lib-commonjs/components/reference-v2/ReferenceList/ReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { renderReferenceList_unstable } from './renderReferenceList';\nimport { useReferenceList_unstable } from './useReferenceList';\nimport { useReferenceListStyles_unstable } from './useReferenceListStyles';\nimport { useReferenceListContextValues_unstable } from './useReferenceListContextValues';\nimport type { ReferenceListProps } from './ReferenceList.types';\n\nexport const ReferenceList: ForwardRefComponent<ReferenceListProps> = React.forwardRef((props, ref) => {\n  const state = useReferenceList_unstable(props, ref);\n  const referenceListContextValues = useReferenceListContextValues_unstable(state);\n\n  useReferenceListStyles_unstable(state);\n\n  return renderReferenceList_unstable(state, referenceListContextValues);\n});\n\nReferenceList.displayName = 'ReferenceList';\n"],"names":["ReferenceList","React","forwardRef","props","state","useReferenceList_unstable","referenceListContextValues","useReferenceListContextValues_unstable","useReferenceListStyles_unstable","renderReferenceList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;qCAEsB;kCACH;wCACM;+CACO;AAGhD,MAAMA,gBAAAA,WAAAA,GAAAA,OAAyDC,UAAMC,CAAU,CAACC,OAACA;UACtFC,QAAMA,IAAAA,2CAAQC,EAAAA,OAA0BF;UACxCG,6BAAMA,IAAAA,qEAA6BC,EAAAA;+DAEnCC,EAAAA;WAEAC,IAAAA,iDAAOA,EAAAA,OAA6BL;AACtC;AAEAJ,cAAcU,WAAW,GAAG"}
+{"version":3,"sources":["ReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { renderReferenceList_unstable } from './renderReferenceList';\nimport { useReferenceList_unstable } from './useReferenceList';\nimport { useReferenceListStyles_unstable } from './useReferenceListStyles.styles';\nimport { useReferenceListContextValues_unstable } from './useReferenceListContextValues';\nimport type { ReferenceListProps } from './ReferenceList.types';\n\nexport const ReferenceList: ForwardRefComponent<ReferenceListProps> = React.forwardRef((props, ref) => {\n  const state = useReferenceList_unstable(props, ref);\n  const referenceListContextValues = useReferenceListContextValues_unstable(state);\n\n  useReferenceListStyles_unstable(state);\n\n  return renderReferenceList_unstable(state, referenceListContextValues);\n});\n\nReferenceList.displayName = 'ReferenceList';\n"],"names":["ReferenceList","React","forwardRef","props","state","useReferenceList_unstable","referenceListContextValues","useReferenceListContextValues_unstable","useReferenceListStyles_unstable","renderReferenceList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;qCAEsB;kCACH;8CACM;+CACO;AAGhD,MAAMA,gBAAAA,WAAAA,GAAAA,OAAyDC,UAAMC,CAAU,CAACC,OAACA;UACtFC,QAAMA,IAAAA,2CAAQC,EAAAA,OAA0BF;UACxCG,6BAAMA,IAAAA,qEAA6BC,EAAAA;qEAEnCC,EAAAA;WAEAC,IAAAA,iDAAOA,EAAAA,OAA6BL;AACtC;AAEAJ,cAAcU,WAAW,GAAG"}

package/lib-commonjs/components/reference-v2/ReferenceList/ReferenceList.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n  root: NonNullable<Slot<'div'>>;\n  showMoreButton?: Slot<'span'>;\n  showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n  /**\n   * The appearance of the reference.\n   * @default 'lighter'\n   */\n  appearance?: 'lighter' | 'darker';\n\n  /**\n   * The maximum number of references to display before the overflow button is shown even if there is\n   * enough space available to show more.\n   * If not set, the overflow functionality will be disabled.\n   * @default undefined\n   */\n  maxVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n  Required<Pick<ReferenceListProps, 'appearance'>> & {\n    areReferencesExpanded: boolean;\n    overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n    previousOverflowCount: React.MutableRefObject<number>;\n    shouldUseOverflow: boolean;\n  };\n\nexport type ReferenceListContextValues = {\n  referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n  root: NonNullable<Slot<'div'>>;\n  showMoreButton?: Slot<'span'>;\n  showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n  /**\n   * The maximum number of references to display before the overflow button is shown even if there is\n   * enough space available to show more.\n   * If not set, the overflow functionality will be disabled.\n   * @default undefined\n   */\n  maxVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n  Pick<ReferenceListProps, 'maxVisibleReferences'> & {\n    areReferencesExpanded: boolean;\n    overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n    referenceListRef: React.RefObject<HTMLDivElement>;\n    shouldUseOverflow: boolean;\n    totalReferencesCount: number;\n  };\n\nexport type ReferenceListContextValues = {\n  referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/reference-v2/ReferenceList/index.js

@@ -7,5 +7,5 @@ _export_star._(require("./ReferenceList"), exports);
 _export_star._(require("./ReferenceList.types"), exports);
 _export_star._(require("./renderReferenceList"), exports);
 _export_star._(require("./useReferenceList"), exports);
-_export_star._(require("./useReferenceListStyles"), exports);
+_export_star._(require("./useReferenceListStyles.styles"), exports);
  //# sourceMappingURL=index.js.map

package/lib-commonjs/components/reference-v2/ReferenceList/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceList';\nexport * from './ReferenceList.types';\nexport * from './renderReferenceList';\nexport * from './useReferenceList';\nexport * from './useReferenceListStyles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceList';\nexport * from './ReferenceList.types';\nexport * from './renderReferenceList';\nexport * from './useReferenceList';\nexport * from './useReferenceListStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -11,15 +11,17 @@ Object.defineProperty(exports, "useReferenceList_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
-const _useReferenceStyles = require("../Reference/useReferenceStyles");
+const _useReferenceStylesstyles = require("../Reference/useReferenceStyles.styles");
 const useReferenceList_unstable = (props, ref)=>{
-    const { appearance = 'lighter', children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
+    const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
     const [areReferencesExpanded, setAreReferencesExpanded] = _react.useState(false);
-    const referenceInOverflowClassName = (0, _useReferenceStyles.useRootStyles)().overflow;
+    const referenceListRef = _react.useRef(null);
+    const referenceInOverflowClassName = (0, _useReferenceStylesstyles.useRootStyles)().overflow;
+    const childrenArray = _react.Children.toArray(children);
+    const totalReferencesCount = childrenArray.length;
     const resolvedChildren = _react.useMemo(()=>{
         if (maxVisibleReferences !== undefined && !areReferencesExpanded) {
             const results = [];
-            const childrenArray = _react.Children.toArray(children);
             for(let index = 0; index < childrenArray.length; index++){
                 const child = childrenArray[index];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -38,11 +40,10 @@ const useReferenceList_unstable = (props, ref)=>{
     }, [
         areReferencesExpanded,
         children,
+        childrenArray,
         maxVisibleReferences,
         referenceInOverflowClassName
     ]);
-    // We keep track of the previous overflow count to determine element to move focus to when expanding the references via keyboard.
-    const previousOverflowCount = _react.useRef(0);
     // We keep track of whether we are interacting with the overflow button via keyboard or not.
     const overflowButtonTriggeredViaKeyboard = _react.useRef(false);
     const focusAttributes = (0, _reactcomponents.useArrowNavigationGroup)({
@@ -58,18 +59,19 @@ const useReferenceList_unstable = (props, ref)=>{
     }, []);
     const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;
     const state = {
-        appearance,
         areReferencesExpanded,
         overflowButtonTriggeredViaKeyboard,
-        previousOverflowCount,
+        maxVisibleReferences,
+        referenceListRef,
         shouldUseOverflow,
+        totalReferencesCount,
         components: {
             root: 'div',
             showMoreButton: 'span',
             showLessButton: 'span'
         },
         root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
-            ref,
+            ref: (0, _reactcomponents.useMergedRefs)(ref, referenceListRef),
             ...focusAttributes,
             ...rest,
             children: resolvedChildren