@fluentui-copilot/react-reference 0.0.0-nightly-20240313-0404-8abc883d.1

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

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useReference_unstable", {
+    enumerable: true,
+    get: function() {
+        return useReference_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 _reacticons = require("@fluentui/react-icons");
+const _useReferenceStyles = require("./useReferenceStyles");
+const _Citation = require("../Citation");
+const _ReferenceGroupContext = require("../../context/ReferenceGroupContext");
+const _reactprovider = require("@fluentui-copilot/react-provider");
+const useReference_unstable = (props, ref)=>{
+    const { index, referenceId, citationHref, excerpt, layout = 'inline' } = props;
+    const mode = (0, _reactprovider.useCopilotMode)(props.mode);
+    const labelId = (0, _reactcomponents.useId)();
+    const mediaId = (0, _reactcomponents.useId)();
+    const [isExpanded, setIsExpanded] = _react.useState(layout === 'popover' ? true : false);
+    const setPopoverOpen = (0, _reactcomponents.usePopoverContext_unstable)((context)=>context.setOpen);
+    const onExpandClick = (_e)=>{
+        setIsExpanded(!isExpanded);
+    };
+    const label = _reactcomponents.slot.always(props.label, {
+        defaultProps: {
+            id: labelId
+        },
+        elementType: 'div'
+    });
+    const media = _reactcomponents.slot.optional(props.media, {
+        defaultProps: {
+            id: mediaId
+        },
+        elementType: 'div'
+    });
+    if (media && /*#__PURE__*/ _react.isValidElement(media.children)) {
+        media.children = /*#__PURE__*/ _react.cloneElement(media.children, {
+            className: (0, _reactcomponents.mergeClasses)(media.children.props.className, _useReferenceStyles.referenceExtraClassNames.mediaChild)
+        });
+    }
+    if (media === null || media === void 0 ? void 0 : media.id) {
+        var _label_ariadescribedby;
+        var _label_ariadescribedby_concat;
+        label['aria-describedby'] = (_label_ariadescribedby_concat = (_label_ariadescribedby = label['aria-describedby']) === null || _label_ariadescribedby === void 0 ? void 0 : _label_ariadescribedby.concat(media.id)) !== null && _label_ariadescribedby_concat !== void 0 ? _label_ariadescribedby_concat : media.id;
+    }
+    const ariaLabelledByProp = props['aria-labelledby'];
+    const groupSemantics = _react.useMemo(()=>{
+        return layout === 'inline' ? {
+            role: 'group',
+            'aria-labelledby': `${ariaLabelledByProp !== null && ariaLabelledByProp !== void 0 ? ariaLabelledByProp : ''} ${label.id}`,
+            tabIndex: -1
+        } : {};
+    }, [
+        layout,
+        ariaLabelledByProp,
+        label.id
+    ]);
+    // Within a popup, a citation should function as a close button
+    const citationProps = _react.useMemo(()=>{
+        const onPopoverCloseClick = (e)=>{
+            setPopoverOpen(e, false);
+            // don't navigate
+            e.preventDefault();
+        };
+        return layout === 'popover' ? {
+            referenceHref: '#',
+            tabIndex: -1,
+            'aria-label': `Reference ${index}, close`,
+            onClick: onPopoverCloseClick
+        } : {
+            referenceHref: citationHref
+        };
+    }, [
+        layout,
+        citationHref,
+        index,
+        setPopoverOpen
+    ]);
+    const state = {
+        isExpanded,
+        mode: layout === 'popover' ? 'sidecar' : mode,
+        layout,
+        index,
+        components: {
+            root: 'div',
+            citation: 'div',
+            media: 'div',
+            actions: 'div',
+            label: 'div',
+            sensitivity: 'span',
+            sensitivityLabel: 'span',
+            metadata: 'div',
+            content: 'div',
+            primaryText: 'span',
+            secondaryText: 'span',
+            tertiaryText: 'span',
+            icon: 'span',
+            detailsButton: _reactcomponents.Button
+        },
+        root: _reactcomponents.slot.always((0, _reactcomponents.getNativeElementProps)('div', {
+            ref,
+            id: referenceId,
+            ...groupSemantics,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        citation: _reactcomponents.slot.optional(props.citation, {
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(_Citation.Citation, {
+                    block: true,
+                    referenceId: referenceId,
+                    ...citationProps
+                }, index)
+            },
+            renderByDefault: true,
+            elementType: 'div'
+        }),
+        media,
+        actions: _reactcomponents.slot.optional(layout === 'inline' ? props.actions : null, {
+            renderByDefault: true,
+            elementType: 'div'
+        }),
+        label,
+        sensitivity: _reactcomponents.slot.optional(props.sensitivity, {
+            elementType: 'span'
+        }),
+        sensitivityLabel: _reactcomponents.slot.optional(props.sensitivityLabel, {
+            elementType: 'span'
+        }),
+        metadata: _reactcomponents.slot.always(props.metadata, {
+            elementType: 'div'
+        }),
+        primaryText: _reactcomponents.slot.optional(props.primaryText, {
+            defaultProps: {
+                hidden: !isExpanded
+            },
+            elementType: 'span'
+        }),
+        secondaryText: _reactcomponents.slot.optional(props.secondaryText, {
+            defaultProps: {
+                hidden: !isExpanded
+            },
+            elementType: 'span'
+        }),
+        tertiaryText: _reactcomponents.slot.optional(props.tertiaryText, {
+            defaultProps: {
+                hidden: !isExpanded
+            },
+            elementType: 'span'
+        }),
+        icon: _reactcomponents.slot.optional(props.icon, {
+            elementType: 'span'
+        }),
+        content: _reactcomponents.slot.always(props.content, {
+            defaultProps: {
+                children: excerpt && /*#__PURE__*/ _react.createElement(_reactcomponents.Caption1, null, excerpt)
+            },
+            elementType: 'div'
+        }),
+        detailsButton: _reactcomponents.slot.optional(layout === 'inline' ? props.detailsButton : null, {
+            defaultProps: {
+                appearance: 'transparent',
+                'aria-expanded': isExpanded,
+                'aria-label': 'show details',
+                size: mode === 'sidecar' ? 'small' : 'medium',
+                icon: {
+                    children: getIcon(isExpanded, mode)
+                }
+            },
+            renderByDefault: true,
+            elementType: _reactcomponents.Button
+        })
+    };
+    if (state.detailsButton) {
+        const onClick = state.detailsButton.onClick;
+        state.detailsButton.onClick = (0, _reactcomponents.mergeCallbacks)(onClick, onExpandClick);
+    }
+    const referenceGroupSetOpen = (0, _ReferenceGroupContext.useReferenceGroupSetOpen)();
+    const onTargettedByCitation = (e)=>{
+        var _e_relatedTarget;
+        const relatedTargetHash = (_e_relatedTarget = e.relatedTarget) === null || _e_relatedTarget === void 0 ? void 0 : _e_relatedTarget.hash;
+        if (relatedTargetHash && relatedTargetHash.substring(1) === referenceId) {
+            referenceGroupSetOpen();
+            setIsExpanded(true);
+        }
+    };
+    state.root.onFocus = (0, _reactcomponents.mergeCallbacks)(state.root.onFocus, onTargettedByCitation);
+    return state;
+};
+const getIcon = (isExpanded, mode)=>{
+    if (mode === 'sidecar') {
+        return !isExpanded ? /*#__PURE__*/ _react.createElement(_reacticons.ChevronDown16Regular, null) : /*#__PURE__*/ _react.createElement(_reacticons.ChevronUp16Regular, null);
+    }
+    return !isExpanded ? /*#__PURE__*/ _react.createElement(_reacticons.ChevronDown24Regular, null) : /*#__PURE__*/ _react.createElement(_reacticons.ChevronUp24Regular, null);
+}; //# sourceMappingURL=useReference.js.map

package/lib-commonjs/components/Reference/useReference.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useReference.js"],"sourcesContent":["import * as React from 'react';\nimport { Button, Caption1, getNativeElementProps, mergeCallbacks, mergeClasses, slot, useId, usePopoverContext_unstable as usePopoverContext } from '@fluentui/react-components';\nimport { ChevronDown24Regular, ChevronUp24Regular, ChevronDown16Regular, ChevronUp16Regular } from '@fluentui/react-icons';\nimport { referenceExtraClassNames } from './useReferenceStyles';\nimport { Citation } from '../Citation';\nimport { useReferenceGroupSetOpen } from '../../context/ReferenceGroupContext';\nimport { useCopilotMode } from '@fluentui-copilot/react-provider';\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, ref) => {\n  const {\n    index,\n    referenceId,\n    citationHref,\n    excerpt,\n    layout = 'inline'\n  } = props;\n  const mode = useCopilotMode(props.mode);\n  const labelId = useId();\n  const mediaId = useId();\n  const [isExpanded, setIsExpanded] = React.useState(layout === 'popover' ? true : false);\n  const setPopoverOpen = usePopoverContext(context => context.setOpen);\n  const onExpandClick = _e => {\n    setIsExpanded(!isExpanded);\n  };\n  const label = slot.always(props.label, {\n    defaultProps: {\n      id: labelId\n    },\n    elementType: 'div'\n  });\n  const media = slot.optional(props.media, {\n    defaultProps: {\n      id: mediaId\n    },\n    elementType: 'div'\n  });\n  if (media && /*#__PURE__*/React.isValidElement(media.children)) {\n    media.children = /*#__PURE__*/React.cloneElement(media.children, {\n      className: mergeClasses(media.children.props.className, referenceExtraClassNames.mediaChild)\n    });\n  }\n  if (media === null || media === void 0 ? void 0 : media.id) {\n    var _label_ariadescribedby;\n    var _label_ariadescribedby_concat;\n    label['aria-describedby'] = (_label_ariadescribedby_concat = (_label_ariadescribedby = label['aria-describedby']) === null || _label_ariadescribedby === void 0 ? void 0 : _label_ariadescribedby.concat(media.id)) !== null && _label_ariadescribedby_concat !== void 0 ? _label_ariadescribedby_concat : media.id;\n  }\n  const ariaLabelledByProp = props['aria-labelledby'];\n  const groupSemantics = React.useMemo(() => {\n    return layout === 'inline' ? {\n      role: 'group',\n      'aria-labelledby': `${ariaLabelledByProp !== null && ariaLabelledByProp !== void 0 ? ariaLabelledByProp : ''} ${label.id}`,\n      tabIndex: -1\n    } : {};\n  }, [layout, ariaLabelledByProp, label.id]);\n  // Within a popup, a citation should function as a close button\n  const citationProps = React.useMemo(() => {\n    const onPopoverCloseClick = e => {\n      setPopoverOpen(e, false);\n      // don't navigate\n      e.preventDefault();\n    };\n    return layout === 'popover' ? {\n      referenceHref: '#',\n      tabIndex: -1,\n      'aria-label': `Reference ${index}, close`,\n      onClick: onPopoverCloseClick\n    } : {\n      referenceHref: citationHref\n    };\n  }, [layout, citationHref, index, setPopoverOpen]);\n  const state = {\n    isExpanded,\n    mode: layout === 'popover' ? 'sidecar' : mode,\n    layout,\n    index,\n    components: {\n      root: 'div',\n      citation: 'div',\n      media: 'div',\n      actions: 'div',\n      label: 'div',\n      sensitivity: 'span',\n      sensitivityLabel: 'span',\n      metadata: 'div',\n      content: 'div',\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      icon: 'span',\n      detailsButton: Button\n    },\n    root: slot.always(getNativeElementProps('div', {\n      ref,\n      id: referenceId,\n      ...groupSemantics,\n      ...props\n    }), {\n      elementType: 'div'\n    }),\n    citation: slot.optional(props.citation, {\n      defaultProps: {\n        children: /*#__PURE__*/React.createElement(Citation, {\n          block: true,\n          referenceId: referenceId,\n          ...citationProps\n        }, index)\n      },\n      renderByDefault: true,\n      elementType: 'div'\n    }),\n    media,\n    actions: slot.optional(layout === 'inline' ? props.actions : null, {\n      renderByDefault: true,\n      elementType: 'div'\n    }),\n    label,\n    sensitivity: slot.optional(props.sensitivity, {\n      elementType: 'span'\n    }),\n    sensitivityLabel: slot.optional(props.sensitivityLabel, {\n      elementType: 'span'\n    }),\n    metadata: slot.always(props.metadata, {\n      elementType: 'div'\n    }),\n    primaryText: slot.optional(props.primaryText, {\n      defaultProps: {\n        hidden: !isExpanded\n      },\n      elementType: 'span'\n    }),\n    secondaryText: slot.optional(props.secondaryText, {\n      defaultProps: {\n        hidden: !isExpanded\n      },\n      elementType: 'span'\n    }),\n    tertiaryText: slot.optional(props.tertiaryText, {\n      defaultProps: {\n        hidden: !isExpanded\n      },\n      elementType: 'span'\n    }),\n    icon: slot.optional(props.icon, {\n      elementType: 'span'\n    }),\n    content: slot.always(props.content, {\n      defaultProps: {\n        children: excerpt && /*#__PURE__*/React.createElement(Caption1, null, excerpt)\n      },\n      elementType: 'div'\n    }),\n    detailsButton: slot.optional(layout === 'inline' ? props.detailsButton : null, {\n      defaultProps: {\n        appearance: 'transparent',\n        'aria-expanded': isExpanded,\n        'aria-label': 'show details',\n        size: mode === 'sidecar' ? 'small' : 'medium',\n        icon: {\n          children: getIcon(isExpanded, mode)\n        }\n      },\n      renderByDefault: true,\n      elementType: Button\n    })\n  };\n  if (state.detailsButton) {\n    const onClick = state.detailsButton.onClick;\n    state.detailsButton.onClick = mergeCallbacks(onClick, onExpandClick);\n  }\n  const referenceGroupSetOpen = useReferenceGroupSetOpen();\n  const onTargettedByCitation = e => {\n    var _e_relatedTarget;\n    const relatedTargetHash = (_e_relatedTarget = e.relatedTarget) === null || _e_relatedTarget === void 0 ? void 0 : _e_relatedTarget.hash;\n    if (relatedTargetHash && relatedTargetHash.substring(1) === referenceId) {\n      referenceGroupSetOpen();\n      setIsExpanded(true);\n    }\n  };\n  state.root.onFocus = mergeCallbacks(state.root.onFocus, onTargettedByCitation);\n  return state;\n};\nconst getIcon = (isExpanded, mode) => {\n  if (mode === 'sidecar') {\n    return !isExpanded ? /*#__PURE__*/React.createElement(ChevronDown16Regular, null) : /*#__PURE__*/React.createElement(ChevronUp16Regular, null);\n  }\n  return !isExpanded ? /*#__PURE__*/React.createElement(ChevronDown24Regular, null) : /*#__PURE__*/React.createElement(ChevronUp24Regular, null);\n};\n//# sourceMappingURL=useReference.js.map"],"names":["useReference_unstable","props","ref","index","referenceId","citationHref","excerpt","layout","mode","useCopilotMode","labelId","useId","mediaId","isExpanded","setIsExpanded","React","useState","setPopoverOpen","usePopoverContext","context","setOpen","onExpandClick","_e","label","slot","always","defaultProps","id","elementType","media","optional","isValidElement","children","cloneElement","className","mergeClasses","referenceExtraClassNames","mediaChild","_label_ariadescribedby","_label_ariadescribedby_concat","concat","ariaLabelledByProp","groupSemantics","useMemo","role","tabIndex","citationProps","onPopoverCloseClick","e","preventDefault","referenceHref","onClick","state","components","root","citation","actions","sensitivity","sensitivityLabel","metadata","content","primaryText","secondaryText","tertiaryText","icon","detailsButton","Button","getNativeElementProps","createElement","Citation","block","renderByDefault","hidden","Caption1","appearance","size","getIcon","mergeCallbacks","referenceGroupSetOpen","useReferenceGroupSetOpen","onTargettedByCitation","_e_relatedTarget","relatedTargetHash","relatedTarget","hash","substring","onFocus","ChevronDown16Regular","ChevronUp16Regular","ChevronDown24Regular","ChevronUp24Regular"],"mappings":"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"}

package/lib-commonjs/components/Reference/useReferenceStyles.js

@@ -0,0 +1,454 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    referenceClassNames: function() {
+        return referenceClassNames;
+    },
+    referenceExtraClassNames: function() {
+        return referenceExtraClassNames;
+    },
+    useReferenceStyles_unstable: function() {
+        return useReferenceStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const referenceClassNames = {
+    root: 'fai-Reference',
+    citation: 'fai-Reference__citation',
+    media: 'fai-Reference__media',
+    actions: 'fai-Reference__actions',
+    sensitivity: 'fai-Reference__sensitivity',
+    sensitivityLabel: 'fai-Reference__sensitivityLabel',
+    metadata: 'fai-Reference__metadata',
+    primaryText: 'fai-Reference__primaryText',
+    secondaryText: 'fai-Reference__secondaryText',
+    tertiaryText: 'fai-Reference__tertiaryText',
+    icon: 'fai-Reference__icon',
+    label: 'fai-Reference__label',
+    content: 'fai-Reference__content',
+    detailsButton: 'fai-Reference__detailsButton'
+};
+const referenceExtraClassNames = {
+    text: 'fai-Reference__text',
+    mediaChild: 'fai-Reference__mediaChild'
+};
+const labelFontSize = _reactcomponents.typographyStyles.caption1Strong.fontSize;
+const labelLineHeight = _reactcomponents.typographyStyles.caption1Strong.lineHeight;
+const maxPopoverWidth = '256px';
+const useReferenceClassName = (0, _reactcomponents.__resetStyles)("r8mog99", null, [
+    ".r8mog99{box-sizing:border-box;width:100%;display:grid;grid-template-areas:\"citation         media            title            actions\" \".                .                title            .\" \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\" \"metadata         metadata         metadata         metadata\" \"content          content          content          content\";grid-template-columns:min-content min-content 1fr min-content;grid-template-rows:32px auto auto auto auto;border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);padding:var(--spacingVerticalS) var(--spacingHorizontalS);box-shadow:none;column-gap:var(--spacingHorizontalXS);align-items:center;}"
+]);
+const useStyles = (0, _reactcomponents.__styles)({
+    canvas: {},
+    sidecar: {
+        wkccdc: "f2e0fxj",
+        z8tnut: "f1ywm7hm",
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ],
+        Byoj8tv: "f14wxoun",
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ]
+    },
+    inline: {},
+    popover: {
+        B4j52fo: "f1pit55b",
+        Bekrc4i: [
+            "f1orqat1",
+            "ffbvwxd"
+        ],
+        Bn0qgzm: "f136mcbi",
+        ibv6hh: [
+            "ffbvwxd",
+            "f1orqat1"
+        ],
+        a9b677: "f1uniyfe",
+        z8tnut: "f1nbblvp",
+        z189sj: [
+            "fifp7yv",
+            "f1asdtw4"
+        ],
+        Byoj8tv: "f1ov4xf1",
+        uwmqm3: [
+            "f1asdtw4",
+            "fifp7yv"
+        ]
+    },
+    closed: {
+        Belr9w4: "f1sff6ri"
+    },
+    citation: {
+        Ijaq50: "fwllpr6",
+        Br312pm: "fx0qcsv",
+        nk6f5a: "f1ldxewp",
+        Bw0ie65: "ftmncab"
+    },
+    media: {
+        Ijaq50: "f11uok23",
+        Br312pm: "f1qdfnnj",
+        nk6f5a: "f1s27gz",
+        Bw0ie65: "f86d0yl",
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59",
+        Brf1p80: "f4d9j23"
+    },
+    mediaPopover: {
+        a9b677: "fjw5fx7",
+        Bqenvij: "fd461yt",
+        psn4ub: "fe9dio4",
+        vf399t: "f1ojxjpn"
+    },
+    actions: {
+        Ijaq50: "f16hsg94",
+        Br312pm: "f35n22n",
+        nk6f5a: "fh3uimt",
+        Bw0ie65: "fnh4yke",
+        Bdqf98w: "f1a7i8kp",
+        mc9l5x: "f22iagw"
+    },
+    detailsButton: {
+        D5xksd: "fzmnlw3"
+    },
+    sensitivity: {
+        Ijaq50: "fpymh5q",
+        Br312pm: "fjieyc3",
+        nk6f5a: "f18utan",
+        Bw0ie65: "f15c84mf",
+        Bdqf98w: "fsxvdwy"
+    },
+    sensitivityLabel: {
+        B6of3ja: "fww94b8",
+        De3pzq: "f3vzo32",
+        B4j52fo: "f192inf7",
+        Bekrc4i: [
+            "f5tn483",
+            "f1ojsxk5"
+        ],
+        Bn0qgzm: "f1vxd6vx",
+        ibv6hh: [
+            "f1ojsxk5",
+            "f5tn483"
+        ],
+        icvyot: "fzkkow9",
+        vrafjx: [
+            "fcdblym",
+            "fjik90z"
+        ],
+        oivjwe: "fg706s2",
+        wvpqe5: [
+            "fjik90z",
+            "fcdblym"
+        ],
+        g2u3we: "fghlq4f",
+        h3c5rm: [
+            "f1gn591s",
+            "fjscplz"
+        ],
+        B9xav0g: "fb073pr",
+        zhjwy3: [
+            "fjscplz",
+            "f1gn591s"
+        ],
+        Bbmb7ep: [
+            "f1aa9q02",
+            "f16jpd5f"
+        ],
+        Beyfa6y: [
+            "f16jpd5f",
+            "f1aa9q02"
+        ],
+        B7oj6ja: [
+            "f1jar5jt",
+            "fyu767a"
+        ],
+        Btl43ni: [
+            "fyu767a",
+            "f1jar5jt"
+        ],
+        Ijaq50: "fpymh5q",
+        Br312pm: "fjieyc3",
+        nk6f5a: "f18utan",
+        Bw0ie65: "f15c84mf",
+        Bdqf98w: "fsxvdwy",
+        z8tnut: "f1g0x7ka",
+        z189sj: [
+            "fdw0yi8",
+            "fk8j09s"
+        ],
+        Byoj8tv: "f1qch9an",
+        uwmqm3: [
+            "fk8j09s",
+            "fdw0yi8"
+        ],
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "f13mqy1h",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fcpl73t"
+    },
+    metadata: {
+        B6of3ja: "fww94b8",
+        Ijaq50: "f1md2vp3",
+        Br312pm: "f1y0qc5c",
+        nk6f5a: "f179ty8e",
+        Bw0ie65: "f83o9dc",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "f13mqy1h",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fcpl73t"
+    },
+    metadataSubsequentText: {
+        qhf8xq: "f10pi13n",
+        Frg6f3: [
+            "foyynoy",
+            "f1vcna3q"
+        ],
+        Ftih45: "f1wl9k8s",
+        Br0sdwz: "f1aocrix",
+        Brfgrao: "f1j7ml58",
+        Fbdkly: [
+            "f1s1fjay",
+            "f15a459s"
+        ],
+        Bciustq: "f1wl9tmt",
+        Baz25je: "f8pn7wt",
+        uvfttm: [
+            "f1x8pvcy",
+            "f9sc749"
+        ],
+        Bbv0w2i: [
+            "f1jpmc5p",
+            "f1yq6w5o"
+        ],
+        Bm6vgfq: [
+            "fjml6kk",
+            "f1geml7w"
+        ]
+    },
+    icon: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "f13mqy1h",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fcpl73t",
+        ha4doy: "fmrv4ls"
+    },
+    content: {
+        B6of3ja: "fww94b8",
+        Ijaq50: "fxwmwwq",
+        Br312pm: "f1e0gndy",
+        nk6f5a: "f4zz6gv",
+        Bw0ie65: "f7idnck",
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        Belr9w4: "f1wn3y0l",
+        sj55zd: "f11d4kpn",
+        Biipf1f: "f9ijwd5"
+    },
+    hidden: {
+        mc9l5x: "fjseox"
+    }
+}, {
+    d: [
+        ".f2e0fxj{grid-template-rows:24px auto auto auto;}",
+        ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
+        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
+        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
+        ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
+        ".f1pit55b{border-top-width:0px;}",
+        ".f1orqat1{border-right-width:0px;}",
+        ".ffbvwxd{border-left-width:0px;}",
+        ".f136mcbi{border-bottom-width:0px;}",
+        ".f1uniyfe{width:calc(256px - (var(--spacingHorizontalM) * 2));}",
+        ".f1nbblvp{padding-top:0px;}",
+        ".fifp7yv{padding-right:0px;}",
+        ".f1asdtw4{padding-left:0px;}",
+        ".f1ov4xf1{padding-bottom:0px;}",
+        ".f1sff6ri{row-gap:0;}",
+        ".fwllpr6{grid-row-start:citation;}",
+        ".fx0qcsv{grid-column-start:citation;}",
+        ".f1ldxewp{grid-row-end:citation;}",
+        ".ftmncab{grid-column-end:citation;}",
+        ".f11uok23{grid-row-start:media;}",
+        ".f1qdfnnj{grid-column-start:media;}",
+        ".f1s27gz{grid-row-end:media;}",
+        ".f86d0yl{grid-column-end:media;}",
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}",
+        ".f4d9j23{justify-content:center;}",
+        ".fjw5fx7{width:16px;}",
+        ".fd461yt{height:16px;}",
+        ".fe9dio4>.fai-Reference__mediaChild{width:16px;}",
+        ".f1ojxjpn>.fai-Reference__mediaChild{height:16px;}",
+        ".f16hsg94{grid-row-start:1;}",
+        ".f35n22n{grid-column-start:actions;}",
+        ".fh3uimt{grid-row-end:actions;}",
+        ".fnh4yke{grid-column-end:actions;}",
+        ".f1a7i8kp{justify-self:end;}",
+        ".fzmnlw3>fui-Button__icon{color:var(--colorNeutralForeground3);}",
+        ".fpymh5q{grid-row-start:sensitivityLabel;}",
+        ".fjieyc3{grid-column-start:sensitivityLabel;}",
+        ".f18utan{grid-row-end:sensitivityLabel;}",
+        ".f15c84mf{grid-column-end:sensitivityLabel;}",
+        ".fsxvdwy{justify-self:start;}",
+        ".fww94b8{margin-top:var(--spacingVerticalXS);}",
+        ".f3vzo32{background-color:var(--colorNeutralBackground5);}",
+        ".f192inf7{border-top-width:var(--strokeWidthThin);}",
+        ".f5tn483{border-right-width:var(--strokeWidthThin);}",
+        ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}",
+        ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}",
+        ".fzkkow9{border-top-style:solid;}",
+        ".fcdblym{border-right-style:solid;}",
+        ".fjik90z{border-left-style:solid;}",
+        ".fg706s2{border-bottom-style:solid;}",
+        ".fghlq4f{border-top-color:var(--colorTransparentStroke);}",
+        ".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
+        ".fjscplz{border-left-color:var(--colorTransparentStroke);}",
+        ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}",
+        ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}",
+        ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}",
+        ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}",
+        ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}",
+        ".f1g0x7ka{padding-top:0;}",
+        ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
+        ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
+        ".f1qch9an{padding-bottom:0;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".f13mqy1h{font-size:var(--fontSizeBase100);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fcpl73t{line-height:var(--lineHeightBase100);}",
+        ".f1md2vp3{grid-row-start:metadata;}",
+        ".f1y0qc5c{grid-column-start:metadata;}",
+        ".f179ty8e{grid-row-end:metadata;}",
+        ".f83o9dc{grid-column-end:metadata;}",
+        ".f10pi13n{position:relative;}",
+        ".foyynoy{margin-left:var(--spacingHorizontalS);}",
+        ".f1vcna3q{margin-right:var(--spacingHorizontalS);}",
+        ".f1wl9k8s::before{content:\"\";}",
+        ".f1aocrix::before{display:block;}",
+        ".f1j7ml58::before{position:absolute;}",
+        ".f1s1fjay::before{left:calc(var(--spacingHorizontalS) / -2);}",
+        ".f15a459s::before{right:calc(var(--spacingHorizontalS) / -2);}",
+        ".f1wl9tmt::before{top:calc((var(--lineHeightBase100) - var(--fontSizeBase100)) / 2);}",
+        ".f8pn7wt::before{height:var(--fontSizeBase100);}",
+        ".f1x8pvcy::before{border-left-width:var(--strokeWidthThin);}",
+        ".f9sc749::before{border-right-width:var(--strokeWidthThin);}",
+        ".f1jpmc5p::before{border-left-style:solid;}",
+        ".f1yq6w5o::before{border-right-style:solid;}",
+        ".fjml6kk::before{border-left-color:var(--colorNeutralStroke2);}",
+        ".f1geml7w::before{border-right-color:var(--colorNeutralStroke2);}",
+        ".fmrv4ls{vertical-align:middle;}",
+        ".fxwmwwq{grid-row-start:content;}",
+        ".f1e0gndy{grid-column-start:content;}",
+        ".f4zz6gv{grid-row-end:content;}",
+        ".f7idnck{grid-column-end:content;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".f1wn3y0l{row-gap:var(--spacingVerticalS);}",
+        ".f11d4kpn{color:var(--colorNeutralForeground3);}",
+        ".f9ijwd5{word-break:break-word;}",
+        ".fjseox{display:none;}"
+    ]
+});
+const useLabelStyles = (0, _reactcomponents.__styles)({
+    root: {
+        Ijaq50: "faq1aip",
+        Br312pm: "f1m489tg",
+        nk6f5a: "fv2srd9",
+        Bw0ie65: "f1tz6hh8",
+        qb2dma: "f9h729m",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fwrc4pm",
+        Biipf1f: "f9ijwd5",
+        Fd1uvx: "fpfc2by",
+        Bh9c35c: "f1lvsx7g",
+        mc9l5x: "f1rvi9lw",
+        Bmxbyg5: "f1sil6mw"
+    },
+    canvas: {
+        z8tnut: "f1vd4pcd"
+    },
+    sidecar: {
+        z8tnut: "f1u9e4k4"
+    },
+    closed: {
+        B2u0y6b: "f6dzj5z",
+        Bh9c35c: "fvvof4m"
+    }
+}, {
+    d: [
+        ".faq1aip{grid-row-start:title;}",
+        ".f1m489tg{grid-column-start:title;}",
+        ".fv2srd9{grid-row-end:title;}",
+        ".f1tz6hh8{grid-column-end:title;}",
+        ".f9h729m{align-self:start;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f9ijwd5{word-break:break-word;}",
+        ".fpfc2by{-webkit-box-orient:vertical;}",
+        ".f1lvsx7g{-webkit-line-clamp:2;}",
+        ".f1rvi9lw{display:-webkit-box;}",
+        ".f1sil6mw{overflow-y:hidden;}",
+        ".f1vd4pcd{padding-top:calc((24px / 2 ) - (var(--lineHeightBase200) - var(--fontSizeBase200)));}",
+        ".f1u9e4k4{padding-top:calc((16px / 2 ) - (var(--lineHeightBase200) - var(--fontSizeBase200)));}",
+        ".f6dzj5z{max-width:100%;}",
+        ".fvvof4m{-webkit-line-clamp:1;}"
+    ]
+});
+const useReferenceStyles_unstable = (state)=>{
+    const { isExpanded, mode, layout } = state;
+    const rootClassName = useReferenceClassName();
+    const styles = useStyles();
+    const labelStyles = useLabelStyles();
+    state.root.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.root, rootClassName, styles[mode], styles[layout], !isExpanded && styles.closed, state.root.className);
+    if (state.citation) {
+        state.citation.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.citation, styles.citation, state.citation.className);
+    }
+    if (state.media) {
+        state.media.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.media, styles.media, layout === 'popover' && styles.mediaPopover, state.media.className);
+    }
+    if (state.actions) {
+        state.actions.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.actions, styles.actions, state.actions.className);
+    }
+    state.label.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.label, labelStyles.root, labelStyles[mode], !isExpanded && labelStyles.closed, state.label.className);
+    if (state.sensitivity) {
+        state.sensitivity.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.sensitivity, styles.sensitivity, !isExpanded && styles.hidden, state.sensitivity.className);
+    }
+    if (state.sensitivityLabel) {
+        state.sensitivityLabel.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.sensitivityLabel, styles.sensitivityLabel, !isExpanded && styles.hidden, state.sensitivityLabel.className);
+    }
+    state.metadata.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.metadata, styles.metadata, !isExpanded && styles.hidden, state.metadata.className);
+    let isSubsequentText = false;
+    if (state.primaryText) {
+        state.primaryText.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.primaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.primaryText.className);
+        isSubsequentText = true;
+    }
+    if (state.secondaryText) {
+        state.secondaryText.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.secondaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.secondaryText.className);
+        isSubsequentText = true;
+    }
+    if (state.tertiaryText) {
+        state.tertiaryText.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.tertiaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.tertiaryText.className);
+        isSubsequentText = true;
+    }
+    if (state.icon) {
+        state.icon.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.icon, styles.icon, state.icon.className);
+    }
+    state.content.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.content, styles.content, !isExpanded && styles.hidden, state.content.className);
+    if (state.detailsButton) {
+        state.detailsButton.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.detailsButton, styles.detailsButton, state.detailsButton.className);
+    }
+    return state;
+}; //# sourceMappingURL=useReferenceStyles.js.map