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

package/lib/components/Reference/useReferenceStyles.js

@@ -0,0 +1,253 @@
+import { buttonClassNames, __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+export 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'
+};
+export const referenceExtraClassNames = {
+  text: 'fai-Reference__text',
+  mediaChild: 'fai-Reference__mediaChild'
+};
+const labelFontSize = typographyStyles.caption1Strong.fontSize;
+const labelLineHeight = typographyStyles.caption1Strong.lineHeight;
+const maxPopoverWidth = '256px';
+const useReferenceClassName = __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 = __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 = __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;}"]
+});
+/**
+ * Apply styling to the Reference slots based on the state
+ */
+export const useReferenceStyles_unstable = state => {
+  const {
+    isExpanded,
+    mode,
+    layout
+  } = state;
+  const rootClassName = useReferenceClassName();
+  const styles = useStyles();
+  const labelStyles = useLabelStyles();
+  state.root.className = mergeClasses(referenceClassNames.root, rootClassName, styles[mode], styles[layout], !isExpanded && styles.closed, state.root.className);
+  if (state.citation) {
+    state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);
+  }
+  if (state.media) {
+    state.media.className = mergeClasses(referenceClassNames.media, styles.media, layout === 'popover' && styles.mediaPopover, state.media.className);
+  }
+  if (state.actions) {
+    state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);
+  }
+  state.label.className = mergeClasses(referenceClassNames.label, labelStyles.root, labelStyles[mode], !isExpanded && labelStyles.closed, state.label.className);
+  if (state.sensitivity) {
+    state.sensitivity.className = mergeClasses(referenceClassNames.sensitivity, styles.sensitivity, !isExpanded && styles.hidden, state.sensitivity.className);
+  }
+  if (state.sensitivityLabel) {
+    state.sensitivityLabel.className = mergeClasses(referenceClassNames.sensitivityLabel, styles.sensitivityLabel, !isExpanded && styles.hidden, state.sensitivityLabel.className);
+  }
+  state.metadata.className = mergeClasses(referenceClassNames.metadata, styles.metadata, !isExpanded && styles.hidden, state.metadata.className);
+  let isSubsequentText = false;
+  if (state.primaryText) {
+    state.primaryText.className = mergeClasses(referenceClassNames.primaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.primaryText.className);
+    isSubsequentText = true;
+  }
+  if (state.secondaryText) {
+    state.secondaryText.className = mergeClasses(referenceClassNames.secondaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.secondaryText.className);
+    isSubsequentText = true;
+  }
+  if (state.tertiaryText) {
+    state.tertiaryText.className = mergeClasses(referenceClassNames.tertiaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.tertiaryText.className);
+    isSubsequentText = true;
+  }
+  if (state.icon) {
+    state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);
+  }
+  state.content.className = mergeClasses(referenceClassNames.content, styles.content, !isExpanded && styles.hidden, state.content.className);
+  if (state.detailsButton) {
+    state.detailsButton.className = mergeClasses(referenceClassNames.detailsButton, styles.detailsButton, state.detailsButton.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useReferenceStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceStyles.ts"],"sourcesContent":["import {\n  buttonClassNames,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  media: 'fai-Reference__media',\n  actions: 'fai-Reference__actions',\n  sensitivity: 'fai-Reference__sensitivity',\n  sensitivityLabel: 'fai-Reference__sensitivityLabel',\n  metadata: 'fai-Reference__metadata',\n  primaryText: 'fai-Reference__primaryText',\n  secondaryText: 'fai-Reference__secondaryText',\n  tertiaryText: 'fai-Reference__tertiaryText',\n  icon: 'fai-Reference__icon',\n  label: 'fai-Reference__label',\n  content: 'fai-Reference__content',\n  detailsButton: 'fai-Reference__detailsButton',\n};\n\nexport const referenceExtraClassNames = {\n  text: 'fai-Reference__text',\n  mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  width: '100%',\n  display: 'grid',\n  gridTemplateAreas: `\n      \"citation         media            title            actions\"\n      \".                .                title            .\"\n      \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n      \"metadata         metadata         metadata         metadata\"\n      \"content          content          content          content\"\n    `,\n  gridTemplateColumns: 'min-content min-content 1fr min-content',\n  gridTemplateRows: '32px auto auto auto auto',\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  boxShadow: 'none',\n  columnGap: tokens.spacingHorizontalXS,\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: {},\n  sidecar: {\n    gridTemplateRows: '24px auto auto auto',\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalS),\n  },\n  inline: {},\n  popover: {\n    ...shorthands.borderWidth('0px'),\n    width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n    ...shorthands.padding('0px'),\n  },\n  closed: {\n    rowGap: 0,\n  },\n  citation: {\n    ...shorthands.gridArea('citation'),\n  },\n  media: {\n    ...shorthands.gridArea('media'),\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  mediaPopover: {\n    width: '16px',\n    height: '16px',\n\n    [`> .${referenceExtraClassNames.mediaChild}`]: {\n      width: '16px',\n      height: '16px',\n    },\n  },\n  actions: {\n    ...shorthands.gridArea('actions'),\n    justifySelf: 'end',\n    display: 'flex',\n    gridRowStart: 1,\n  },\n  detailsButton: {\n    [`> ${buttonClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n  },\n  sensitivity: {\n    ...shorthands.gridArea('sensitivityLabel'),\n    justifySelf: 'start',\n  },\n  sensitivityLabel: {\n    marginTop: tokens.spacingVerticalXS,\n    backgroundColor: tokens.colorNeutralBackground5,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.gridArea('sensitivityLabel'),\n    justifySelf: 'start',\n    ...shorthands.padding(0, tokens.spacingHorizontalSNudge),\n    ...typographyStyles.caption2,\n  },\n  metadata: {\n    marginTop: tokens.spacingVerticalXS,\n\n    ...shorthands.gridArea('metadata'),\n    ...typographyStyles.caption2,\n  },\n  metadataSubsequentText: {\n    position: 'relative',\n    marginLeft: tokens.spacingHorizontalS,\n\n    '&::before': {\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      left: `calc(${tokens.spacingHorizontalS} / -2)`,\n      top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n      height: typographyStyles.caption2.fontSize,\n      ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    },\n  },\n  icon: {\n    ...typographyStyles.caption2,\n    verticalAlign: 'middle',\n  },\n  content: {\n    marginTop: tokens.spacingVerticalXS,\n    ...shorthands.gridArea('content'),\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalS,\n    color: tokens.colorNeutralForeground3,\n    wordBreak: 'break-word',\n  },\n  hidden: {\n    display: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  root: {\n    ...shorthands.gridArea('title'),\n    alignSelf: 'start',\n    ...typographyStyles.caption1Strong,\n    wordBreak: 'break-word',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    display: '-webkit-box',\n    overflowY: 'hidden',\n  },\n\n  canvas: {\n    // 24px is the height of the tallest element within the reference\n    paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  sidecar: {\n    // 16px is the height of the tallest element within the reference\n    paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  closed: {\n    maxWidth: '100%',\n    '-webkit-line-clamp': '1',\n  },\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n  const { isExpanded, mode, layout } = state;\n\n  const rootClassName = useReferenceClassName();\n  const styles = useStyles();\n  const labelStyles = useLabelStyles();\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootClassName,\n    styles[mode],\n    styles[layout],\n    !isExpanded && styles.closed,\n    state.root.className,\n  );\n\n  if (state.citation) {\n    state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n  }\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      referenceClassNames.media,\n      styles.media,\n      layout === 'popover' && styles.mediaPopover,\n      state.media.className,\n    );\n  }\n\n  if (state.actions) {\n    state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n  }\n\n  state.label.className = mergeClasses(\n    referenceClassNames.label,\n    labelStyles.root,\n    labelStyles[mode],\n    !isExpanded && labelStyles.closed,\n    state.label.className,\n  );\n\n  if (state.sensitivity) {\n    state.sensitivity.className = mergeClasses(\n      referenceClassNames.sensitivity,\n      styles.sensitivity,\n      !isExpanded && styles.hidden,\n      state.sensitivity.className,\n    );\n  }\n\n  if (state.sensitivityLabel) {\n    state.sensitivityLabel.className = mergeClasses(\n      referenceClassNames.sensitivityLabel,\n      styles.sensitivityLabel,\n      !isExpanded && styles.hidden,\n      state.sensitivityLabel.className,\n    );\n  }\n\n  state.metadata.className = mergeClasses(\n    referenceClassNames.metadata,\n    styles.metadata,\n    !isExpanded && styles.hidden,\n    state.metadata.className,\n  );\n\n  let isSubsequentText = false;\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      referenceClassNames.primaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.primaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      referenceClassNames.secondaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.secondaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      referenceClassNames.tertiaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.tertiaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n  }\n  state.content.className = mergeClasses(\n    referenceClassNames.content,\n    styles.content,\n    !isExpanded && styles.hidden,\n    state.content.className,\n  );\n\n  if (state.detailsButton) {\n    state.detailsButton.className = mergeClasses(\n      referenceClassNames.detailsButton,\n      styles.detailsButton,\n      state.detailsButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceClassNames","root","citation","media","actions","sensitivity","sensitivityLabel","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","referenceExtraClassNames","text","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","boxSizing","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingVerticalS","spacingHorizontalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","useStyles","canvas","sidecar","spacingVerticalXS","inline","popover","borderWidth","spacingHorizontalM","closed","rowGap","gridArea","justifyContent","mediaPopover","height","justifySelf","gridRowStart","color","colorNeutralForeground3","marginTop","backgroundColor","colorNeutralBackground5","colorTransparentStroke","spacingHorizontalSNudge","caption2","metadataSubsequentText","position","marginLeft","left","top","borderLeft","colorNeutralStroke2","verticalAlign","flexDirection","wordBreak","hidden","useLabelStyles","alignSelf","overflowY","paddingTop","maxWidth","useReferenceStyles_unstable","state","isExpanded","mode","layout","rootClassName","styles","labelStyles","className","isSubsequentText"],"mappings":"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"}

package/lib/components/ReferenceGroup/ReferenceGroup.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { useReferenceGroup_unstable } from './useReferenceGroup';
+import { renderReferenceGroup_unstable } from './renderReferenceGroup';
+import { useReferenceGroupStyles_unstable } from './useReferenceGroupStyles';
+import { useReferenceGroupContextValues } from './useReferenceGroupContextValues';
+import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
+/**
+ * ReferenceGroup component
+ * @deprecated use `useReferenceGroup` instead.
+ */
+export const ReferenceGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useReferenceGroup_unstable(props, ref);
+  const ctxValues = useReferenceGroupContextValues(state);
+  useReferenceGroupStyles_unstable(state);
+  useCustomStyleHook('useReferenceGroupStyles')(state);
+  return renderReferenceGroup_unstable(state, ctxValues);
+});
+ReferenceGroup.displayName = 'ReferenceGroup';
+//# sourceMappingURL=ReferenceGroup.js.map

package/lib/components/ReferenceGroup/ReferenceGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ReferenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReferenceGroup_unstable } from './useReferenceGroup';\nimport { renderReferenceGroup_unstable } from './renderReferenceGroup';\nimport { useReferenceGroupStyles_unstable } from './useReferenceGroupStyles';\nimport type { ReferenceGroupProps } from './ReferenceGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useReferenceGroupContextValues } from './useReferenceGroupContextValues';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n/**\n * ReferenceGroup component\n * @deprecated use `useReferenceGroup` instead.\n */\nexport const ReferenceGroup: ForwardRefComponent<ReferenceGroupProps> = React.forwardRef((props, ref) => {\n  const state = useReferenceGroup_unstable(props, ref);\n  const ctxValues = useReferenceGroupContextValues(state);\n\n  useReferenceGroupStyles_unstable(state);\n  useCustomStyleHook('useReferenceGroupStyles')(state);\n\n  return renderReferenceGroup_unstable(state, ctxValues);\n});\n\nReferenceGroup.displayName = 'ReferenceGroup';\n"],"names":["React","useReferenceGroup_unstable","renderReferenceGroup_unstable","useReferenceGroupStyles_unstable","useReferenceGroupContextValues","useCustomStyleHook","ReferenceGroup","forwardRef","props","ref","state","ctxValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAG7E,SAASC,8BAA8B,QAAQ,mCAAmC;AAClF,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;;CAGC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAChD,MAAME,YAAYP,+BAA+BM;IAEjDP,iCAAiCO;IACjCL,mBAAmB,2BAA2BK;IAE9C,OAAOR,8BAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

package/lib/components/ReferenceGroup/ReferenceGroup.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ReferenceGroup.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ReferenceGroup.types.ts"],"sourcesContent":["import type { CopilotMode } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceGroupSlots = {\n  /**\n   * The root slot.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Label slot. Primary description of the group.\n   */\n  label: NonNullable<Slot<'span'>>;\n\n  /**\n   * Icon slot.\n   */\n  icon: Slot<'span'>;\n\n  /**\n   * Details button slot. Used to expand/collapse the group.\n   */\n  detailsButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * Content slot. Used to display the group's references. Visibility should be controlled by `detailsButton`.\n   */\n  content: NonNullable<Slot<'div'>>;\n};\n\n/**\n * ReferenceGroup Props\n */\nexport type ReferenceGroupProps = ComponentProps<Partial<ReferenceGroupSlots>, 'content'> & CopilotMode;\n\n/**\n * State used in rendering ReferenceGroup\n */\nexport type ReferenceGroupState = ComponentState<ReferenceGroupSlots> &\n  Required<Pick<ReferenceGroupProps, 'mode'>> & {\n    /**\n     * State to track if the group is open or not.\n     */\n    isOpen: boolean;\n\n    /**\n     * Callback used to open the group from a child.\n     * @returns void\n     */\n    setOpen: () => void;\n  };\n"],"names":[],"mappings":"AAAA,WAkDI"}

package/lib/components/ReferenceGroup/index.js

@@ -0,0 +1,6 @@
+export * from './ReferenceGroup';
+export * from './ReferenceGroup.types';
+export * from './renderReferenceGroup';
+export * from './useReferenceGroup';
+export * from './useReferenceGroupStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/ReferenceGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceGroup';\nexport * from './ReferenceGroup.types';\nexport * from './renderReferenceGroup';\nexport * from './useReferenceGroup';\nexport * from './useReferenceGroupStyles';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,4BAA4B"}

package/lib/components/ReferenceGroup/renderReferenceGroup.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-components';
+import { ReferenceGroupProvider } from '../../context/ReferenceGroupContext';
+/**
+ * Render the final JSX of ReferenceGroup
+ */
+export const renderReferenceGroup_unstable = (state, contextValues) => {
+  assertSlots(state);
+  var _state_detailsButton_children;
+  return /*#__PURE__*/_jsx(ReferenceGroupProvider, {
+    value: contextValues,
+    children: /*#__PURE__*/_jsxs(state.root, {
+      children: [/*#__PURE__*/_jsx(state.detailsButton, {
+        children: (_state_detailsButton_children = state.detailsButton.children) !== null && _state_detailsButton_children !== void 0 ? _state_detailsButton_children : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(state.label, {}), state.icon && /*#__PURE__*/_jsx(state.icon, {})]
+        })
+      }), /*#__PURE__*/_jsx(state.content, {})]
+    })
+  });
+};
+//# sourceMappingURL=renderReferenceGroup.js.map

package/lib/components/ReferenceGroup/renderReferenceGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderReferenceGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport { ReferenceGroupProvider } from '../../context/ReferenceGroupContext';\nimport type { ReferenceGroupState, ReferenceGroupSlots } from './ReferenceGroup.types';\nimport type { ReferenceGroupContext } from '../../context/ReferenceGroupContext';\n\n/**\n * Render the final JSX of ReferenceGroup\n */\nexport const renderReferenceGroup_unstable = (state: ReferenceGroupState, contextValues: ReferenceGroupContext) => {\n  assertSlots<ReferenceGroupSlots>(state);\n\n  return (\n    <ReferenceGroupProvider value={contextValues}>\n      <state.root>\n        <state.detailsButton>\n          {state.detailsButton.children ?? (\n            <>\n              <state.label />\n              {state.icon && <state.icon />}\n            </>\n          )}\n        </state.detailsButton>\n        <state.content />\n      </state.root>\n    </ReferenceGroupProvider>\n  );\n};\n"],"names":["assertSlots","ReferenceGroupProvider","renderReferenceGroup_unstable","state","contextValues","value","root","detailsButton","children","label","icon","content"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AACzD,SAASC,sBAAsB,QAAQ,sCAAsC;AAI7E;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,OAA4BC;IACxEJ,YAAiCG;QAMxBA;IAJT,qBACE,KAACF;QAAuBI,OAAOD;kBAC7B,cAAA,MAACD,MAAMG,IAAI;;8BACT,KAACH,MAAMI,aAAa;8BACjBJ,CAAAA,gCAAAA,MAAMI,aAAa,CAACC,QAAQ,cAA5BL,2CAAAA,8CACC;;0CACE,KAACA,MAAMM,KAAK;4BACXN,MAAMO,IAAI,kBAAI,KAACP,MAAMO,IAAI;;;;8BAIhC,KAACP,MAAMQ,OAAO;;;;AAItB,EAAE"}

package/lib/components/ReferenceGroup/useReferenceGroup.js

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { getPartitionedNativeProps } from '@fluentui/react-components';
+import { ChevronDown16Regular, ChevronUp16Regular } from '@fluentui/react-icons';
+import { mergeCallbacks, slot } from '@fluentui/react-utilities';
+import { useCopilotMode } from '@fluentui-copilot/react-provider';
+const ctxReducer = (ctx, action) => {
+  if (action.type === 'TOGGLE_OPEN') {
+    return {
+      ...ctx,
+      open: action.open
+    };
+  }
+  return ctx;
+};
+/**
+ * Create the state required to render ReferenceGroup.
+ *
+ * The returned state can be modified with hooks such as useReferenceGroupStyles_unstable,
+ * before being passed to renderReferenceGroup_unstable.
+ *
+ * @param props - props from this instance of ReferenceGroup
+ * @param ref - reference to root HTMLElement of ReferenceGroup
+ */
+export const useReferenceGroup_unstable = (props, ref) => {
+  const {
+    content,
+    detailsButton,
+    icon,
+    label,
+    root
+  } = props;
+  const mode = useCopilotMode(props.mode);
+  const [ctxValues, dispatch] = React.useReducer(ctxReducer, {
+    open: false
+  });
+  const isOpen = ctxValues.open;
+  const toggleOpen = React.useCallback(newOpen => {
+    dispatch({
+      type: 'TOGGLE_OPEN',
+      open: newOpen
+    });
+  }, [dispatch]);
+  const setOpen = React.useCallback(() => {
+    dispatch({
+      type: 'TOGGLE_OPEN',
+      open: true
+    });
+  }, [dispatch]);
+  const onDetailsButtonClick = _e => {
+    toggleOpen(!isOpen);
+  };
+  const nativeProps = getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'div'
+  });
+  const state = {
+    mode,
+    isOpen,
+    setOpen,
+    components: {
+      root: 'div',
+      label: 'span',
+      icon: 'span',
+      detailsButton: 'button',
+      content: 'div'
+    },
+    root: slot.always(root, {
+      defaultProps: nativeProps.root,
+      elementType: 'div'
+    }),
+    label: slot.always(label, {
+      elementType: 'span'
+    }),
+    icon: slot.optional(icon, {
+      defaultProps: {
+        children: isOpen ? /*#__PURE__*/React.createElement(ChevronUp16Regular, null) : /*#__PURE__*/React.createElement(ChevronDown16Regular, null)
+      },
+      renderByDefault: true,
+      elementType: 'span'
+    }),
+    detailsButton: slot.always(detailsButton, {
+      defaultProps: {
+        'aria-expanded': isOpen,
+        type: 'button'
+      },
+      elementType: 'button'
+    }),
+    content: slot.always(content, {
+      defaultProps: {
+        ref: ref,
+        // use inert as a backup if display: none is overridden in styles to enable animation
+        // inert getting added to React types is tracked here: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        inert: isOpen ? undefined : 'true',
+        ...nativeProps.primary
+      },
+      elementType: 'div'
+    })
+  };
+  state.detailsButton.onClick = mergeCallbacks(state.detailsButton.onClick, onDetailsButtonClick);
+  return state;
+};
+//# sourceMappingURL=useReferenceGroup.js.map

package/lib/components/ReferenceGroup/useReferenceGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps } from '@fluentui/react-components';\nimport { ChevronDown16Regular, ChevronUp16Regular } from '@fluentui/react-icons';\nimport { mergeCallbacks, slot } from '@fluentui/react-utilities';\nimport type { ReferenceGroupProps, ReferenceGroupState } from './ReferenceGroup.types';\nimport { useCopilotMode } from '@fluentui-copilot/react-provider';\n\ntype ReferenceGroupAction = ToggleAction;\n\ntype ToggleAction = {\n  type: 'TOGGLE_OPEN';\n  open: boolean;\n};\n\ntype ContextReducer = {\n  open: boolean;\n};\n\nconst ctxReducer = (ctx: ContextReducer, action: ReferenceGroupAction): ContextReducer => {\n  if (action.type === 'TOGGLE_OPEN') {\n    return { ...ctx, open: action.open };\n  }\n\n  return ctx;\n};\n\n/**\n * Create the state required to render ReferenceGroup.\n *\n * The returned state can be modified with hooks such as useReferenceGroupStyles_unstable,\n * before being passed to renderReferenceGroup_unstable.\n *\n * @param props - props from this instance of ReferenceGroup\n * @param ref - reference to root HTMLElement of ReferenceGroup\n */\nexport const useReferenceGroup_unstable = (\n  props: ReferenceGroupProps,\n  ref: React.Ref<HTMLElement>,\n): ReferenceGroupState => {\n  const { content, detailsButton, icon, label, root } = props;\n\n  const mode = useCopilotMode(props.mode);\n\n  const [ctxValues, dispatch] = React.useReducer(ctxReducer, { open: false });\n\n  const isOpen = ctxValues.open;\n\n  const toggleOpen = React.useCallback(\n    (newOpen: boolean) => {\n      dispatch({\n        type: 'TOGGLE_OPEN',\n        open: newOpen,\n      });\n    },\n    [dispatch],\n  );\n\n  const setOpen = React.useCallback(() => {\n    dispatch({\n      type: 'TOGGLE_OPEN',\n      open: true,\n    });\n  }, [dispatch]);\n\n  const onDetailsButtonClick = (_e: React.MouseEvent<HTMLElement>) => {\n    toggleOpen(!isOpen);\n  };\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'div',\n  });\n\n  const state: ReferenceGroupState = {\n    mode,\n    isOpen,\n    setOpen,\n    components: {\n      root: 'div',\n      label: 'span',\n      icon: 'span',\n      detailsButton: 'button',\n      content: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'div',\n    }),\n    label: slot.always(label, {\n      elementType: 'span',\n    }),\n    icon: slot.optional(icon, {\n      defaultProps: {\n        children: isOpen ? <ChevronUp16Regular /> : <ChevronDown16Regular />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    detailsButton: slot.always(detailsButton, {\n      defaultProps: {\n        'aria-expanded': isOpen,\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n    content: slot.always(content, {\n      defaultProps: {\n        ref: ref as React.Ref<HTMLDivElement>,\n        // use inert as a backup if display: none is overridden in styles to enable animation\n        // inert getting added to React types is tracked here: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        inert: isOpen ? undefined : 'true',\n        ...nativeProps.primary,\n      },\n      elementType: 'div',\n    }),\n  };\n\n  state.detailsButton.onClick = mergeCallbacks(state.detailsButton.onClick, onDetailsButtonClick);\n\n  return state;\n};\n"],"names":["React","getPartitionedNativeProps","ChevronDown16Regular","ChevronUp16Regular","mergeCallbacks","slot","useCopilotMode","ctxReducer","ctx","action","type","open","useReferenceGroup_unstable","props","ref","content","detailsButton","icon","label","root","mode","ctxValues","dispatch","useReducer","isOpen","toggleOpen","useCallback","newOpen","setOpen","onDetailsButtonClick","_e","nativeProps","primarySlotTagName","state","components","always","defaultProps","elementType","optional","children","renderByDefault","inert","undefined","primary","onClick"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,6BAA6B;AACvE,SAASC,oBAAoB,EAAEC,kBAAkB,QAAQ,wBAAwB;AACjF,SAASC,cAAc,EAAEC,IAAI,QAAQ,4BAA4B;AAEjE,SAASC,cAAc,QAAQ,mCAAmC;AAalE,MAAMC,aAAa,CAACC,KAAqBC;IACvC,IAAIA,OAAOC,IAAI,KAAK,eAAe;QACjC,OAAO;YAAE,GAAGF,GAAG;YAAEG,MAAMF,OAAOE,IAAI;QAAC;IACrC;IAEA,OAAOH;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMI,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAEC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGN;IAEtD,MAAMO,OAAOd,eAAeO,MAAMO,IAAI;IAEtC,MAAM,CAACC,WAAWC,SAAS,GAAGtB,MAAMuB,UAAU,CAAChB,YAAY;QAAEI,MAAM;IAAM;IAEzE,MAAMa,SAASH,UAAUV,IAAI;IAE7B,MAAMc,aAAazB,MAAM0B,WAAW,CAClC,CAACC;QACCL,SAAS;YACPZ,MAAM;YACNC,MAAMgB;QACR;IACF,GACA;QAACL;KAAS;IAGZ,MAAMM,UAAU5B,MAAM0B,WAAW,CAAC;QAChCJ,SAAS;YACPZ,MAAM;YACNC,MAAM;QACR;IACF,GAAG;QAACW;KAAS;IAEb,MAAMO,uBAAuB,CAACC;QAC5BL,WAAW,CAACD;IACd;IAEA,MAAMO,cAAc9B,0BAA0B;QAC5CY;QACAmB,oBAAoB;IACtB;IAEA,MAAMC,QAA6B;QACjCb;QACAI;QACAI;QACAM,YAAY;YACVf,MAAM;YACND,OAAO;YACPD,MAAM;YACND,eAAe;YACfD,SAAS;QACX;QACAI,MAAMd,KAAK8B,MAAM,CAAChB,MAAM;YACtBiB,cAAcL,YAAYZ,IAAI;YAC9BkB,aAAa;QACf;QACAnB,OAAOb,KAAK8B,MAAM,CAACjB,OAAO;YACxBmB,aAAa;QACf;QACApB,MAAMZ,KAAKiC,QAAQ,CAACrB,MAAM;YACxBmB,cAAc;gBACZG,UAAUf,uBAAS,oBAACrB,0CAAwB,oBAACD;YAC/C;YACAsC,iBAAiB;YACjBH,aAAa;QACf;QACArB,eAAeX,KAAK8B,MAAM,CAACnB,eAAe;YACxCoB,cAAc;gBACZ,iBAAiBZ;gBACjBd,MAAM;YACR;YACA2B,aAAa;QACf;QACAtB,SAASV,KAAK8B,MAAM,CAACpB,SAAS;YAC5BqB,cAAc;gBACZtB,KAAKA;gBACL,qFAAqF;gBACrF,oHAAoH;gBACpH,6DAA6D;gBAC7D,aAAa;gBACb2B,OAAOjB,SAASkB,YAAY;gBAC5B,GAAGX,YAAYY,OAAO;YACxB;YACAN,aAAa;QACf;IACF;IAEAJ,MAAMjB,aAAa,CAAC4B,OAAO,GAAGxC,eAAe6B,MAAMjB,aAAa,CAAC4B,OAAO,EAAEf;IAE1E,OAAOI;AACT,EAAE"}

package/lib/components/ReferenceGroup/useReferenceGroupContextValues.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export const useReferenceGroupContextValues = state => {
+  return React.useMemo(() => {
+    return {
+      open: state.isOpen,
+      setOpen: state.setOpen
+    };
+  }, [state.isOpen, state.setOpen]);
+};
+//# sourceMappingURL=useReferenceGroupContextValues.js.map

package/lib/components/ReferenceGroup/useReferenceGroupContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ReferenceGroupContext } from '../../context/ReferenceGroupContext';\nimport type { ReferenceGroupState } from './ReferenceGroup.types';\n\nexport const useReferenceGroupContextValues = (state: ReferenceGroupState): ReferenceGroupContext => {\n  return React.useMemo(() => {\n    return {\n      open: state.isOpen,\n      setOpen: state.setOpen,\n    };\n  }, [state.isOpen, state.setOpen]);\n};\n"],"names":["React","useReferenceGroupContextValues","state","useMemo","open","isOpen","setOpen"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,iCAAiC,CAACC;IAC7C,OAAOF,MAAMG,OAAO,CAAC;QACnB,OAAO;YACLC,MAAMF,MAAMG,MAAM;YAClBC,SAASJ,MAAMI,OAAO;QACxB;IACF,GAAG;QAACJ,MAAMG,MAAM;QAAEH,MAAMI,OAAO;KAAC;AAClC,EAAE"}

package/lib/components/ReferenceGroup/useReferenceGroupStyles.js

@@ -0,0 +1,50 @@
+import { __resetStyles, __styles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';
+export const referenceGroupClassNames = {
+  root: 'fai-ReferenceGroup',
+  label: 'fai-ReferenceGroup__label',
+  icon: 'fai-ReferenceGroup__icon',
+  detailsButton: 'fai-ReferenceGroup__detailsButton',
+  content: 'fai-ReferenceGroup__content'
+};
+const useRootClassName = __resetStyles("r1w2tk05", null, [".r1w2tk05{display:flex;flex-direction:column;width:100%;gap:var(--spacingVerticalXS);}"]);
+const useIconClassName = __resetStyles("r18biwo", null, [".r18biwo{display:inline-flex;align-items:center;}"]);
+const useDetailsButtonClassName = __resetStyles("raowymc", "rkpovx8", [".raowymc{display:inline-flex;column-gap:var(--spacingHorizontalSNudge);align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);border:0;background-color:transparent;color:var(--colorNeutralForeground3);height:24px;cursor:pointer;width:max-content;padding-left:0;padding-right:0;}", ".rkpovx8{display:inline-flex;column-gap:var(--spacingHorizontalSNudge);align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);border:0;background-color:transparent;color:var(--colorNeutralForeground3);height:24px;cursor:pointer;width:max-content;padding-right:0;padding-left:0;}"]);
+const useDetailsButtonStyles = __styles({
+  canvas: {},
+  sidecar: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  }
+}, {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
+});
+const useContentHiddenStyles = __styles({
+  base: {
+    mc9l5x: "fjseox"
+  }
+}, {
+  d: [".fjseox{display:none;}"]
+});
+/**
+ * Apply styling to the ReferenceGroup slots based on the state
+ */
+export const useReferenceGroupStyles_unstable = state => {
+  const {
+    mode,
+    isOpen
+  } = state;
+  const iconBaseClassName = useIconClassName();
+  const detailsButtonStyles = useDetailsButtonStyles();
+  const contentHiddenStyles = useContentHiddenStyles();
+  state.root.className = mergeClasses(referenceGroupClassNames.root, useRootClassName(), state.root.className);
+  state.label.className = mergeClasses(referenceGroupClassNames.label, state.label.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(referenceGroupClassNames.icon, iconBaseClassName, state.icon.className);
+  }
+  state.detailsButton.className = mergeClasses(referenceGroupClassNames.detailsButton, useDetailsButtonClassName(), detailsButtonStyles[mode], state.detailsButton.className);
+  state.content.className = mergeClasses(referenceGroupClassNames.content, !isOpen && contentHiddenStyles.base, state.content.className);
+  return state;
+};
+//# sourceMappingURL=useReferenceGroupStyles.js.map

package/lib/components/ReferenceGroup/useReferenceGroupStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceGroupStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceGroupSlots, ReferenceGroupState } from './ReferenceGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupClassNames: SlotClassNames<ReferenceGroupSlots> = {\n  root: 'fai-ReferenceGroup',\n  label: 'fai-ReferenceGroup__label',\n  icon: 'fai-ReferenceGroup__icon',\n  detailsButton: 'fai-ReferenceGroup__detailsButton',\n  content: 'fai-ReferenceGroup__content',\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '100%',\n  gap: tokens.spacingVerticalXS,\n});\n\nconst useIconClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n});\n\nconst useDetailsButtonClassName = makeResetStyles({\n  display: 'inline-flex',\n  columnGap: tokens.spacingHorizontalSNudge,\n  alignItems: 'center',\n  ...typographyStyles.body1,\n  border: 0,\n  backgroundColor: 'transparent',\n  color: tokens.colorNeutralForeground3,\n  height: '24px',\n  cursor: 'pointer',\n  width: 'max-content',\n  paddingLeft: 0,\n  paddingRight: 0,\n});\n\nconst useDetailsButtonStyles = makeStyles({\n  canvas: {},\n\n  sidecar: {\n    ...typographyStyles.caption1,\n  },\n});\n\nconst useContentHiddenStyles = makeStyles({\n  base: {\n    display: 'none',\n  },\n});\n\n/**\n * Apply styling to the ReferenceGroup slots based on the state\n */\nexport const useReferenceGroupStyles_unstable = (state: ReferenceGroupState): ReferenceGroupState => {\n  const { mode, isOpen } = state;\n\n  const iconBaseClassName = useIconClassName();\n  const detailsButtonStyles = useDetailsButtonStyles();\n  const contentHiddenStyles = useContentHiddenStyles();\n\n  state.root.className = mergeClasses(referenceGroupClassNames.root, useRootClassName(), state.root.className);\n\n  state.label.className = mergeClasses(referenceGroupClassNames.label, state.label.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceGroupClassNames.icon, iconBaseClassName, state.icon.className);\n  }\n\n  state.detailsButton.className = mergeClasses(\n    referenceGroupClassNames.detailsButton,\n    useDetailsButtonClassName(),\n    detailsButtonStyles[mode],\n    state.detailsButton.className,\n  );\n\n  state.content.className = mergeClasses(\n    referenceGroupClassNames.content,\n    !isOpen && contentHiddenStyles.base,\n    state.content.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","referenceGroupClassNames","root","label","icon","detailsButton","content","useRootClassName","display","flexDirection","width","gap","spacingVerticalXS","useIconClassName","alignItems","useDetailsButtonClassName","columnGap","spacingHorizontalSNudge","body1","border","backgroundColor","color","colorNeutralForeground3","height","cursor","paddingLeft","paddingRight","useDetailsButtonStyles","canvas","sidecar","caption1","useContentHiddenStyles","base","useReferenceGroupStyles_unstable","state","mode","isOpen","iconBaseClassName","detailsButtonStyles","contentHiddenStyles","className"],"mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIjH,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,eAAe;IACfC,SAAS;AACX,EAAE;AAEF,MAAMC,mBAAmBX,gBAAgB;IACvCY,SAAS;IACTC,eAAe;IACfC,OAAO;IACPC,KAAKZ,OAAOa,iBAAiB;AAC/B;AAEA,MAAMC,mBAAmBjB,gBAAgB;IACvCY,SAAS;IACTM,YAAY;AACd;AAEA,MAAMC,4BAA4BnB,gBAAgB;IAChDY,SAAS;IACTQ,WAAWjB,OAAOkB,uBAAuB;IACzCH,YAAY;IACZ,GAAGd,iBAAiBkB,KAAK;IACzBC,QAAQ;IACRC,iBAAiB;IACjBC,OAAOtB,OAAOuB,uBAAuB;IACrCC,QAAQ;IACRC,QAAQ;IACRd,OAAO;IACPe,aAAa;IACbC,cAAc;AAChB;AAEA,MAAMC,yBAAyB9B,WAAW;IACxC+B,QAAQ,CAAC;IAETC,SAAS;QACP,GAAG7B,iBAAiB8B,QAAQ;IAC9B;AACF;AAEA,MAAMC,yBAAyBlC,WAAW;IACxCmC,MAAM;QACJxB,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMyB,mCAAmC,CAACC;IAC/C,MAAM,EAAEC,IAAI,EAAEC,MAAM,EAAE,GAAGF;IAEzB,MAAMG,oBAAoBxB;IAC1B,MAAMyB,sBAAsBX;IAC5B,MAAMY,sBAAsBR;IAE5BG,MAAMhC,IAAI,CAACsC,SAAS,GAAG1C,aAAaG,yBAAyBC,IAAI,EAAEK,oBAAoB2B,MAAMhC,IAAI,CAACsC,SAAS;IAE3GN,MAAM/B,KAAK,CAACqC,SAAS,GAAG1C,aAAaG,yBAAyBE,KAAK,EAAE+B,MAAM/B,KAAK,CAACqC,SAAS;IAE1F,IAAIN,MAAM9B,IAAI,EAAE;QACd8B,MAAM9B,IAAI,CAACoC,SAAS,GAAG1C,aAAaG,yBAAyBG,IAAI,EAAEiC,mBAAmBH,MAAM9B,IAAI,CAACoC,SAAS;IAC5G;IAEAN,MAAM7B,aAAa,CAACmC,SAAS,GAAG1C,aAC9BG,yBAAyBI,aAAa,EACtCU,6BACAuB,mBAAmB,CAACH,KAAK,EACzBD,MAAM7B,aAAa,CAACmC,SAAS;IAG/BN,MAAM5B,OAAO,CAACkC,SAAS,GAAG1C,aACxBG,yBAAyBK,OAAO,EAChC,CAAC8B,UAAUG,oBAAoBP,IAAI,EACnCE,MAAM5B,OAAO,CAACkC,SAAS;IAGzB,OAAON;AACT,EAAE"}

package/lib/components/ReferenceGroupToggle/ReferenceGroupToggle.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useReferenceGroupToggle_unstable } from './useReferenceGroupToggle';
+import { renderReferenceGroupToggle_unstable } from './renderReferenceGroupToggle';
+import { useReferenceGroupToggleStyles_unstable } from './useReferenceGroupToggleStyles';
+// ReferenceGroupToggle component - TODO: add more docs
+export const ReferenceGroupToggle = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useReferenceGroupToggle_unstable(props, ref);
+  useReferenceGroupToggleStyles_unstable(state);
+  return renderReferenceGroupToggle_unstable(state);
+});
+ReferenceGroupToggle.displayName = 'ReferenceGroupToggle';
+//# sourceMappingURL=ReferenceGroupToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ReferenceGroupToggle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReferenceGroupToggle_unstable } from './useReferenceGroupToggle';\nimport { renderReferenceGroupToggle_unstable } from './renderReferenceGroupToggle';\nimport { useReferenceGroupToggleStyles_unstable } from './useReferenceGroupToggleStyles';\nimport type { ReferenceGroupToggleProps } from './ReferenceGroupToggle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// ReferenceGroupToggle component - TODO: add more docs\nexport const ReferenceGroupToggle: ForwardRefComponent<ReferenceGroupToggleProps> = React.forwardRef((props, ref) => {\n  const state = useReferenceGroupToggle_unstable(props, ref);\n\n  useReferenceGroupToggleStyles_unstable(state);\n  return renderReferenceGroupToggle_unstable(state);\n});\n\nReferenceGroupToggle.displayName = 'ReferenceGroupToggle';\n"],"names":["React","useReferenceGroupToggle_unstable","renderReferenceGroupToggle_unstable","useReferenceGroupToggleStyles_unstable","ReferenceGroupToggle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,kCAAkC;AAIzF,uDAAuD;AACvD,OAAO,MAAMC,qCAAuEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,QAAQP,iCAAiCK,OAAOC;IAEtDJ,uCAAuCK;IACvC,OAAON,oCAAoCM;AAC7C,GAAG;AAEHJ,qBAAqBK,WAAW,GAAG"}

package/lib/components/ReferenceGroupToggle/ReferenceGroupToggle.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ReferenceGroupToggle.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ReferenceGroupToggle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceGroupToggleSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n};\n\n/**\n * ReferenceGroupToggle Props\n */\nexport type ReferenceGroupToggleProps = ComponentProps<ReferenceGroupToggleSlots> & {\n  isOpen?: boolean;\n};\n\n/**\n * State used in rendering ReferenceGroupToggle\n */\nexport type ReferenceGroupToggleState = ComponentState<ReferenceGroupToggleSlots> &\n  Required<Pick<ReferenceGroupToggleProps, 'isOpen'>>;\n"],"names":[],"mappings":"AAAA,WAkBsD"}

package/lib/components/ReferenceGroupToggle/index.js

@@ -0,0 +1,6 @@
+export * from './ReferenceGroupToggle';
+export * from './ReferenceGroupToggle.types';
+export * from './renderReferenceGroupToggle';
+export * from './useReferenceGroupToggle';
+export * from './useReferenceGroupToggleStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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":[],"mappings":"AAAA,cAAc,yBAAyB;AACvC,cAAc,+BAA+B;AAC7C,cAAc,+BAA+B;AAC7C,cAAc,4BAA4B;AAC1C,cAAc,kCAAkC"}