@fluentui-copilot/react-preview 0.0.0-nightly-20250708-0404-c05494d1.1 → 0.0.0-nightly-20250708-1433-52f2b6b1.1

package/lib/components/PreviewContent/PreviewContent.js

@@ -2,10 +2,9 @@ import * as React from 'react';
 import { usePreviewContent_unstable } from './usePreviewContent';
 import { renderPreviewContent_unstable } from './renderPreviewContent';
 import { usePreviewContentStyles_unstable } from './usePreviewContentStyles.styles';
-export const PreviewContent = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = usePreviewContent_unstable(props, ref);
-  usePreviewContentStyles_unstable(state);
-  return renderPreviewContent_unstable(state);
+export const PreviewContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = usePreviewContent_unstable(props, ref);
+    usePreviewContentStyles_unstable(state);
+    return renderPreviewContent_unstable(state);
 });
 PreviewContent.displayName = 'PreviewContent';
-//# sourceMappingURL=PreviewContent.js.map

package/lib/components/PreviewContent/PreviewContent.types.js

@@ -1,4 +1,3 @@
 /**
  * State used in rendering PreviewContent
- */export {};
-//# sourceMappingURL=PreviewContent.types.js.map
+ */ export { };

package/lib/components/PreviewContent/index.js

@@ -2,4 +2,3 @@ export { PreviewContent } from './PreviewContent';
 export { renderPreviewContent_unstable } from './renderPreviewContent';
 export { usePreviewContent_unstable } from './usePreviewContent';
 export { previewContentClassNames, usePreviewContentStyles_unstable } from './usePreviewContentStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/PreviewContent/renderPreviewContent.js

@@ -1,10 +1,8 @@
-import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of PreviewContent
- */
-export const renderPreviewContent_unstable = state => {
-  assertSlots(state);
-  return /*#__PURE__*/_jsx(state.root, {});
+ */ export const renderPreviewContent_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
 };
-//# sourceMappingURL=renderPreviewContent.js.map

package/lib/components/PreviewContent/usePreviewContent.js

@@ -7,18 +7,16 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
  *
  * @param props - props from this instance of PreviewContent
  * @param ref - reference to root HTMLElement of PreviewContent
- */
-export const usePreviewContent_unstable = (props, ref) => {
-  return {
-    components: {
-      root: 'div'
-    },
-    root: slot.always(getIntrinsicElementProps('div', {
-      ref,
-      ...props
-    }), {
-      elementType: 'div'
-    })
-  };
+ */ export const usePreviewContent_unstable = (props, ref)=>{
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
 };
-//# sourceMappingURL=usePreviewContent.js.map

package/lib/components/PreviewContent/usePreviewContentStyles.styles.raw.js

@@ -0,0 +1,26 @@
+import { makeResetStyles, mergeClasses } from '@fluentui/react-components';
+import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
+export const previewContentClassNames = {
+    root: 'fai-PreviewContent'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = makeResetStyles({
+    color: tokens.colorNeutralForeground3,
+    display: 'flex',
+    flexDirection: 'column',
+    maxWidth: `calc(256px - ${tokens.spacingHorizontalXS} * 2)`,
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
+    rowGap: tokens.spacingVerticalXS,
+    wordBreak: 'break-word',
+    boxSizing: 'border-box',
+    ...typographyStyles.caption1
+});
+/**
+ * Apply styling to the PreviewContent slots based on the state
+ */ export const usePreviewContentStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = mergeClasses(previewContentClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+};

package/lib/components/PreviewContent/usePreviewContentStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePreviewContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { PreviewContentSlots, PreviewContentState } from './PreviewContent.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewContentClassNames: SlotClassNames<PreviewContentSlots> = {\n  root: 'fai-PreviewContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground3,\n  display: 'flex',\n  flexDirection: 'column',\n  maxWidth: `calc(256px - ${tokens.spacingHorizontalXS} * 2)`,\n  padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  rowGap: tokens.spacingVerticalXS,\n  wordBreak: 'break-word',\n  boxSizing: 'border-box',\n  ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the PreviewContent slots based on the state\n */\nexport const usePreviewContentStyles_unstable = (state: PreviewContentState): PreviewContentState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(previewContentClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","previewContentClassNames","root","useRootBaseClassName","color","colorNeutralForeground3","display","flexDirection","maxWidth","spacingHorizontalXS","padding","spacingVerticalS","spacingHorizontalS","rowGap","spacingVerticalXS","wordBreak","boxSizing","caption1","usePreviewContentStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,6BAA6B;AAC3E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAIpE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBN,gBAAgB;IAC3CO,OAAOL,OAAOM,uBAAuB;IACrCC,SAAS;IACTC,eAAe;IACfC,UAAU,CAAC,aAAa,EAAET,OAAOU,mBAAmB,CAAC,KAAK,CAAC;IAC3DC,SAAS,CAAC,EAAEX,OAAOY,gBAAgB,CAAC,CAAC,EAAEZ,OAAOa,kBAAkB,CAAC,CAAC;IAClEC,QAAQd,OAAOe,iBAAiB;IAChCC,WAAW;IACXC,WAAW;IACX,GAAGhB,iBAAiBiB,QAAQ;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBjB;IAE1BgB,MAAMjB,IAAI,CAACmB,SAAS,GAAGvB,aAAaG,yBAAyBC,IAAI,EAAEkB,mBAAmBD,MAAMjB,IAAI,CAACmB,SAAS;IAE1G,OAAOF;AACT,EAAE"}

package/lib/components/PreviewHeader/PreviewHeader.js

@@ -2,10 +2,9 @@ import * as React from 'react';
 import { usePreviewHeader_unstable } from './usePreviewHeader';
 import { renderPreviewHeader_unstable } from './renderPreviewHeader';
 import { usePreviewHeaderStyles_unstable } from './usePreviewHeaderStyles.styles';
-export const PreviewHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = usePreviewHeader_unstable(props, ref);
-  usePreviewHeaderStyles_unstable(state);
-  return renderPreviewHeader_unstable(state);
+export const PreviewHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = usePreviewHeader_unstable(props, ref);
+    usePreviewHeaderStyles_unstable(state);
+    return renderPreviewHeader_unstable(state);
 });
 PreviewHeader.displayName = 'PreviewHeader';
-//# sourceMappingURL=PreviewHeader.js.map

package/lib/components/PreviewHeader/PreviewHeader.types.js

@@ -1,4 +1,3 @@
 /**
  * State used in rendering PreviewHeader
- */export {};
-//# sourceMappingURL=PreviewHeader.types.js.map
+ */ export { };

package/lib/components/PreviewHeader/index.js

@@ -2,4 +2,3 @@ export { PreviewHeader } from './PreviewHeader';
 export { renderPreviewHeader_unstable } from './renderPreviewHeader';
 export { usePreviewHeader_unstable } from './usePreviewHeader';
 export { previewHeaderClassNames, previewHeaderExtraClassNames, usePreviewHeaderStyles_unstable } from './usePreviewHeaderStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/PreviewHeader/renderPreviewHeader.js

@@ -1,12 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of PreviewHeader
- */
-export const renderPreviewHeader_unstable = state => {
-  assertSlots(state);
-  return /*#__PURE__*/_jsxs(state.root, {
-    children: [state.citation && /*#__PURE__*/_jsx(state.citation, {}), state.media && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.label, {}), state.actions && /*#__PURE__*/_jsx(state.actions, {})]
-  });
+ */ export const renderPreviewHeader_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.citation && /*#__PURE__*/ _jsx(state.citation, {}),
+            state.media && /*#__PURE__*/ _jsx(state.media, {}),
+            /*#__PURE__*/ _jsx(state.label, {}),
+            state.actions && /*#__PURE__*/ _jsx(state.actions, {})
+        ]
+    });
 };
-//# sourceMappingURL=renderPreviewHeader.js.map

package/lib/components/PreviewHeader/usePreviewHeader.js

@@ -9,60 +9,52 @@ import { previewHeaderExtraClassNames } from './usePreviewHeaderStyles.styles';
  *
  * @param props - props from this instance of PreviewHeader
  * @param ref - reference to root HTMLElement of PreviewHeader
- */
-export const usePreviewHeader_unstable = (props, ref) => {
-  var _state_media;
-  const {
-    actions,
-    children,
-    citation,
-    label,
-    media
-  } = props;
-  const mediaId = useId('media');
-  const state = {
-    components: {
-      root: 'div',
-      actions: 'div',
-      citation: 'span',
-      label: 'span',
-      media: 'div'
-    },
-    root: slot.always(getIntrinsicElementProps('div', {
-      ref,
-      ...props
-    }), {
-      elementType: 'div'
-    }),
-    actions: slot.optional(actions, {
-      elementType: 'div'
-    }),
-    citation: slot.optional(citation, {
-      elementType: 'span'
-    }),
-    label: slot.always(label, {
-      defaultProps: {
-        children
-      },
-      elementType: 'span'
-    }),
-    media: slot.optional(media, {
-      defaultProps: {
-        id: mediaId
-      },
-      elementType: 'div'
-    })
-  };
-  if ((_state_media = state.media) === null || _state_media === void 0 ? void 0 : _state_media.id) {
-    var _state_label_ariadescribedby;
-    var _state_label_ariadescribedby_concat;
-    state.label['aria-describedby'] = (_state_label_ariadescribedby_concat = (_state_label_ariadescribedby = state.label['aria-describedby']) === null || _state_label_ariadescribedby === void 0 ? void 0 : _state_label_ariadescribedby.concat(state.media.id)) !== null && _state_label_ariadescribedby_concat !== void 0 ? _state_label_ariadescribedby_concat : state.media.id;
-  }
-  if (state.media && React.isValidElement(state.media.children)) {
-    state.media.children = React.cloneElement(state.media.children, {
-      className: mergeClasses(state.media.children.props.className, previewHeaderExtraClassNames.mediaChild)
-    });
-  }
-  return state;
+ */ export const usePreviewHeader_unstable = (props, ref)=>{
+    var _state_media;
+    const { actions, children, citation, label, media } = props;
+    const mediaId = useId('media');
+    const state = {
+        components: {
+            root: 'div',
+            actions: 'div',
+            citation: 'span',
+            label: 'span',
+            media: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        actions: slot.optional(actions, {
+            elementType: 'div'
+        }),
+        citation: slot.optional(citation, {
+            elementType: 'span'
+        }),
+        label: slot.always(label, {
+            defaultProps: {
+                children
+            },
+            elementType: 'span'
+        }),
+        media: slot.optional(media, {
+            defaultProps: {
+                id: mediaId
+            },
+            elementType: 'div'
+        })
+    };
+    if ((_state_media = state.media) === null || _state_media === void 0 ? void 0 : _state_media.id) {
+        var _state_label_ariadescribedby;
+        var _state_label_ariadescribedby_concat;
+        state.label['aria-describedby'] = (_state_label_ariadescribedby_concat = (_state_label_ariadescribedby = state.label['aria-describedby']) === null || _state_label_ariadescribedby === void 0 ? void 0 : _state_label_ariadescribedby.concat(state.media.id)) !== null && _state_label_ariadescribedby_concat !== void 0 ? _state_label_ariadescribedby_concat : state.media.id;
+    }
+    if (state.media && React.isValidElement(state.media.children)) {
+        state.media.children = React.cloneElement(state.media.children, {
+            className: mergeClasses(state.media.children.props.className, previewHeaderExtraClassNames.mediaChild)
+        });
+    }
+    return state;
 };
-//# sourceMappingURL=usePreviewHeader.js.map

package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.raw.js

@@ -0,0 +1,110 @@
+import { linkClassNames, makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const previewHeaderClassNames = {
+    root: 'fai-PreviewHeader',
+    actions: 'fai-PreviewHeader__actions',
+    citation: 'fai-PreviewHeader__citation',
+    label: 'fai-PreviewHeader__label',
+    media: 'fai-PreviewHeader__media'
+};
+export const previewHeaderExtraClassNames = {
+    mediaChild: 'fai-PreviewHeader__mediaChild'
+};
+const labelFontSize = typographyStyles.caption1Strong.fontSize;
+const labelLineHeight = typographyStyles.caption1Strong.lineHeight;
+const useActionsBaseClassName = makeResetStyles({
+    gridRow: 1,
+    justifySelf: 'end'
+});
+const useCitationBaseClassName = makeResetStyles({
+    gridRow: 1
+});
+const useLabelBaseClassName = makeResetStyles({
+    alignSelf: 'start',
+    display: '-webkit-box',
+    gridRow: '1 / 3',
+    overflowY: 'hidden',
+    // 16px is the height of the tallest element within the preview header
+    paddingTop: `calc((16px / 2) - (${labelLineHeight} - ${labelFontSize}))`,
+    wordBreak: 'break-word',
+    '-webkit-box-orient': 'vertical',
+    '-webkit-line-clamp': '2',
+    ...typographyStyles.caption1Strong,
+    [`& .${linkClassNames.root}`]: {
+        ...typographyStyles.caption1Strong,
+        color: tokens.colorNeutralForeground3,
+        ':hover': {
+            color: tokens.colorNeutralForeground3Hover
+        },
+        ':hover:active': {
+            color: tokens.colorNeutralForeground3Pressed
+        }
+    }
+});
+const useMediaBaseClassName = makeResetStyles({
+    gridRow: 1,
+    height: '16px',
+    lineHeight: 0,
+    width: '16px',
+    [`> .${previewHeaderExtraClassNames.mediaChild}`]: {
+        height: '16px',
+        width: '16px'
+    }
+});
+const useRootBaseClassName = makeResetStyles({
+    alignItems: 'center',
+    columnGap: tokens.spacingHorizontalXS,
+    display: 'grid',
+    gridTemplateRows: '24px'
+});
+// Since the grid track that needs to grow is not always guaranteed to be the first or the last, but can change positions
+// based on the slots present, we need to conditionally set the grid template columns based on the slots present.
+const useRootStyles = makeStyles({
+    onlyLabel: {
+        gridTemplateColumns: '1fr'
+    },
+    previousAndLabel: {
+        gridTemplateColumns: 'min-content 1fr'
+    },
+    labelAndActions: {
+        gridTemplateColumns: '1fr min-content'
+    },
+    citationMediaLabel: {
+        gridTemplateColumns: 'min-content min-content 1fr'
+    },
+    previousLabelActions: {
+        gridTemplateColumns: 'min-content 1fr min-content'
+    },
+    all: {
+        gridTemplateColumns: 'min-content min-content 1fr min-content'
+    }
+});
+/**
+ * Apply styling to the PreviewHeader slots based on the state
+ */ export const usePreviewHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const actionsBaseClassName = useActionsBaseClassName();
+    const citationBaseClassName = useCitationBaseClassName();
+    const labelBaseClassName = useLabelBaseClassName();
+    const mediaBaseClassName = useMediaBaseClassName();
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    let actionsPresent = false;
+    if (state.actions) {
+        actionsPresent = true;
+        state.actions.className = mergeClasses(previewHeaderClassNames.actions, actionsBaseClassName, state.actions.className);
+    }
+    let citationPresent = false;
+    if (state.citation) {
+        citationPresent = true;
+        state.citation.className = mergeClasses(previewHeaderClassNames.citation, citationBaseClassName, state.citation.className);
+    }
+    state.label.className = mergeClasses(previewHeaderClassNames.label, labelBaseClassName, state.label.className);
+    let mediaPresent = false;
+    if (state.media) {
+        mediaPresent = true;
+        state.media.className = mergeClasses(previewHeaderClassNames.media, mediaBaseClassName, state.media.className);
+    }
+    state.root.className = mergeClasses(previewHeaderClassNames.root, rootBaseClassName, !citationPresent && !mediaPresent && !actionsPresent && rootStyles.onlyLabel, (citationPresent && !mediaPresent || mediaPresent && !citationPresent) && !actionsPresent && rootStyles.previousAndLabel, !citationPresent && !mediaPresent && actionsPresent && rootStyles.labelAndActions, citationPresent && mediaPresent && !actionsPresent && rootStyles.citationMediaLabel, (citationPresent && !mediaPresent || mediaPresent && !citationPresent) && actionsPresent && rootStyles.previousLabelActions, citationPresent && mediaPresent && actionsPresent && rootStyles.all, state.root.className);
+    return state;
+};

package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePreviewHeaderStyles.styles.ts"],"sourcesContent":["import {\n  linkClassNames,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PreviewHeaderSlots, PreviewHeaderState } from './PreviewHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewHeaderClassNames: SlotClassNames<PreviewHeaderSlots> = {\n  root: 'fai-PreviewHeader',\n  actions: 'fai-PreviewHeader__actions',\n  citation: 'fai-PreviewHeader__citation',\n  label: 'fai-PreviewHeader__label',\n  media: 'fai-PreviewHeader__media',\n};\n\nexport const previewHeaderExtraClassNames = {\n  mediaChild: 'fai-PreviewHeader__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst useActionsBaseClassName = makeResetStyles({\n  gridRow: 1,\n  justifySelf: 'end',\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n  gridRow: 1,\n});\n\nconst useLabelBaseClassName = makeResetStyles({\n  alignSelf: 'start',\n  display: '-webkit-box',\n  gridRow: '1 / 3',\n  overflowY: 'hidden',\n  // 16px is the height of the tallest element within the preview header\n  paddingTop: `calc((16px / 2) - (${labelLineHeight} - ${labelFontSize}))`,\n  wordBreak: 'break-word',\n\n  '-webkit-box-orient': 'vertical',\n  '-webkit-line-clamp': '2',\n\n  ...typographyStyles.caption1Strong,\n\n  [`& .${linkClassNames.root}`]: {\n    ...typographyStyles.caption1Strong,\n    color: tokens.colorNeutralForeground3,\n\n    ':hover': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n    ':hover:active': {\n      color: tokens.colorNeutralForeground3Pressed,\n    },\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  gridRow: 1,\n  height: '16px',\n  lineHeight: 0,\n  width: '16px',\n\n  [`> .${previewHeaderExtraClassNames.mediaChild}`]: {\n    height: '16px',\n    width: '16px',\n  },\n});\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  columnGap: tokens.spacingHorizontalXS,\n  display: 'grid',\n  gridTemplateRows: '24px',\n});\n\n// Since the grid track that needs to grow is not always guaranteed to be the first or the last, but can change positions\n// based on the slots present, we need to conditionally set the grid template columns based on the slots present.\nconst useRootStyles = makeStyles({\n  onlyLabel: {\n    gridTemplateColumns: '1fr',\n  },\n  previousAndLabel: {\n    gridTemplateColumns: 'min-content 1fr',\n  },\n  labelAndActions: {\n    gridTemplateColumns: '1fr min-content',\n  },\n  citationMediaLabel: {\n    gridTemplateColumns: 'min-content min-content 1fr',\n  },\n  previousLabelActions: {\n    gridTemplateColumns: 'min-content 1fr min-content',\n  },\n  all: {\n    gridTemplateColumns: 'min-content min-content 1fr min-content',\n  },\n});\n\n/**\n * Apply styling to the PreviewHeader slots based on the state\n */\nexport const usePreviewHeaderStyles_unstable = (state: PreviewHeaderState): PreviewHeaderState => {\n  'use no memo';\n\n  const actionsBaseClassName = useActionsBaseClassName();\n  const citationBaseClassName = useCitationBaseClassName();\n  const labelBaseClassName = useLabelBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n\n  let actionsPresent = false;\n  if (state.actions) {\n    actionsPresent = true;\n    state.actions.className = mergeClasses(\n      previewHeaderClassNames.actions,\n      actionsBaseClassName,\n      state.actions.className,\n    );\n  }\n\n  let citationPresent = false;\n  if (state.citation) {\n    citationPresent = true;\n    state.citation.className = mergeClasses(\n      previewHeaderClassNames.citation,\n      citationBaseClassName,\n      state.citation.className,\n    );\n  }\n\n  state.label.className = mergeClasses(previewHeaderClassNames.label, labelBaseClassName, state.label.className);\n\n  let mediaPresent = false;\n  if (state.media) {\n    mediaPresent = true;\n    state.media.className = mergeClasses(previewHeaderClassNames.media, mediaBaseClassName, state.media.className);\n  }\n\n  state.root.className = mergeClasses(\n    previewHeaderClassNames.root,\n    rootBaseClassName,\n    !citationPresent && !mediaPresent && !actionsPresent && rootStyles.onlyLabel,\n    ((citationPresent && !mediaPresent) || (mediaPresent && !citationPresent)) &&\n      !actionsPresent &&\n      rootStyles.previousAndLabel,\n    !citationPresent && !mediaPresent && actionsPresent && rootStyles.labelAndActions,\n    citationPresent && mediaPresent && !actionsPresent && rootStyles.citationMediaLabel,\n    ((citationPresent && !mediaPresent) || (mediaPresent && !citationPresent)) &&\n      actionsPresent &&\n      rootStyles.previousLabelActions,\n    citationPresent && mediaPresent && actionsPresent && rootStyles.all,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["linkClassNames","makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","previewHeaderClassNames","root","actions","citation","label","media","previewHeaderExtraClassNames","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","useActionsBaseClassName","gridRow","justifySelf","useCitationBaseClassName","useLabelBaseClassName","alignSelf","display","overflowY","paddingTop","wordBreak","color","colorNeutralForeground3","colorNeutralForeground3Hover","colorNeutralForeground3Pressed","useMediaBaseClassName","height","width","useRootBaseClassName","alignItems","columnGap","spacingHorizontalXS","gridTemplateRows","useRootStyles","onlyLabel","gridTemplateColumns","previousAndLabel","labelAndActions","citationMediaLabel","previousLabelActions","all","usePreviewHeaderStyles_unstable","state","actionsBaseClassName","citationBaseClassName","labelBaseClassName","mediaBaseClassName","rootBaseClassName","rootStyles","actionsPresent","className","citationPresent","mediaPresent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/PreviewMetadata/PreviewMetadata.js

@@ -2,10 +2,9 @@ import * as React from 'react';
 import { usePreviewMetadata_unstable } from './usePreviewMetadata';
 import { renderPreviewMetadata_unstable } from './renderPreviewMetadata';
 import { usePreviewMetadataStyles_unstable } from './usePreviewMetadataStyles.styles';
-export const PreviewMetadata = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = usePreviewMetadata_unstable(props, ref);
-  usePreviewMetadataStyles_unstable(state);
-  return renderPreviewMetadata_unstable(state);
+export const PreviewMetadata = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = usePreviewMetadata_unstable(props, ref);
+    usePreviewMetadataStyles_unstable(state);
+    return renderPreviewMetadata_unstable(state);
 });
 PreviewMetadata.displayName = 'PreviewMetadata';
-//# sourceMappingURL=PreviewMetadata.js.map

package/lib/components/PreviewMetadata/PreviewMetadata.types.js

@@ -1,4 +1,3 @@
 /**
  * State used in rendering PreviewMetadata
- */export {};
-//# sourceMappingURL=PreviewMetadata.types.js.map
+ */ export { };

package/lib/components/PreviewMetadata/index.js

@@ -2,4 +2,3 @@ export { PreviewMetadata } from './PreviewMetadata';
 export { renderPreviewMetadata_unstable } from './renderPreviewMetadata';
 export { usePreviewMetadata_unstable } from './usePreviewMetadata';
 export { previewMetadataClassNames, usePreviewMetadataStyles_unstable } from './usePreviewMetadataStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/PreviewMetadata/renderPreviewMetadata.js

@@ -1,12 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of PreviewMetadata
- */
-export const renderPreviewMetadata_unstable = state => {
-  assertSlots(state);
-  return /*#__PURE__*/_jsxs(state.root, {
-    children: [state.primaryText && /*#__PURE__*/_jsx(state.primaryText, {}), state.secondaryText && /*#__PURE__*/_jsx(state.secondaryText, {}), state.tertiaryText && /*#__PURE__*/_jsx(state.tertiaryText, {}), state.icon && /*#__PURE__*/_jsx(state.icon, {}), state.root.children]
-  });
+ */ export const renderPreviewMetadata_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.primaryText && /*#__PURE__*/ _jsx(state.primaryText, {}),
+            state.secondaryText && /*#__PURE__*/ _jsx(state.secondaryText, {}),
+            state.tertiaryText && /*#__PURE__*/ _jsx(state.tertiaryText, {}),
+            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            state.root.children
+        ]
+    });
 };
-//# sourceMappingURL=renderPreviewMetadata.js.map

package/lib/components/PreviewMetadata/usePreviewMetadata.js

@@ -7,40 +7,33 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
  *
  * @param props - props from this instance of PreviewMetadata
  * @param ref - reference to root HTMLElement of PreviewMetadata
- */
-export const usePreviewMetadata_unstable = (props, ref) => {
-  const {
-    icon,
-    primaryText,
-    secondaryText,
-    tertiaryText
-  } = props;
-  return {
-    components: {
-      root: 'div',
-      icon: 'span',
-      primaryText: 'span',
-      secondaryText: 'span',
-      tertiaryText: 'span'
-    },
-    root: slot.always(getIntrinsicElementProps('div', {
-      ref,
-      ...props
-    }), {
-      elementType: 'div'
-    }),
-    icon: slot.optional(icon, {
-      elementType: 'span'
-    }),
-    primaryText: slot.optional(primaryText, {
-      elementType: 'span'
-    }),
-    secondaryText: slot.optional(secondaryText, {
-      elementType: 'span'
-    }),
-    tertiaryText: slot.optional(tertiaryText, {
-      elementType: 'span'
-    })
-  };
+ */ export const usePreviewMetadata_unstable = (props, ref)=>{
+    const { icon, primaryText, secondaryText, tertiaryText } = props;
+    return {
+        components: {
+            root: 'div',
+            icon: 'span',
+            primaryText: 'span',
+            secondaryText: 'span',
+            tertiaryText: 'span'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        icon: slot.optional(icon, {
+            elementType: 'span'
+        }),
+        primaryText: slot.optional(primaryText, {
+            elementType: 'span'
+        }),
+        secondaryText: slot.optional(secondaryText, {
+            elementType: 'span'
+        }),
+        tertiaryText: slot.optional(tertiaryText, {
+            elementType: 'span'
+        })
+    };
 };
-//# sourceMappingURL=usePreviewMetadata.js.map

package/lib/components/PreviewMetadata/usePreviewMetadataStyles.styles.raw.js

@@ -0,0 +1,56 @@
+import { makeResetStyles, makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const previewMetadataClassNames = {
+    root: 'fai-PreviewMetadata',
+    icon: 'fai-PreviewMetadata__icon',
+    primaryText: 'fai-PreviewMetadata__primaryText',
+    secondaryText: 'fai-PreviewMetadata__secondaryText',
+    tertiaryText: 'fai-PreviewMetadata__tertiaryText'
+};
+const useRootBaseClassName = makeResetStyles({
+    ...typographyStyles.caption2
+});
+const useIconBaseClassName = makeResetStyles({
+    marginLeft: tokens.spacingHorizontalSNudge,
+    verticalAlign: 'middle'
+});
+const useTextStyles = makeStyles({
+    subsequentText: {
+        marginLeft: `calc(${tokens.spacingHorizontalSNudge} * 2)`,
+        position: 'relative',
+        '&::before': {
+            ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
+            content: '""',
+            display: 'block',
+            height: typographyStyles.caption2.fontSize,
+            left: `calc(-1 * ${tokens.spacingHorizontalSNudge})`,
+            position: 'absolute',
+            top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`
+        }
+    }
+});
+/**
+ * Apply styling to the PreviewMetadata slots based on the state
+ */ export const usePreviewMetadataStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const iconBaseClassName = useIconBaseClassName();
+    const textStyles = useTextStyles();
+    state.root.className = mergeClasses(previewMetadataClassNames.root, rootBaseClassName, state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(previewMetadataClassNames.icon, iconBaseClassName, state.icon.className);
+    }
+    let isSubsequentAfterText = false;
+    if (state.primaryText) {
+        state.primaryText.className = mergeClasses(previewMetadataClassNames.primaryText, state.primaryText.className);
+        isSubsequentAfterText = true;
+    }
+    if (state.secondaryText) {
+        state.secondaryText.className = mergeClasses(previewMetadataClassNames.secondaryText, isSubsequentAfterText && textStyles.subsequentText, state.secondaryText.className);
+        isSubsequentAfterText = true;
+    }
+    if (state.tertiaryText) {
+        state.tertiaryText.className = mergeClasses(previewMetadataClassNames.tertiaryText, isSubsequentAfterText && textStyles.subsequentText, state.tertiaryText.className);
+    }
+    return state;
+};

package/lib/components/PreviewMetadata/usePreviewMetadataStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePreviewMetadataStyles.styles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PreviewMetadataSlots, PreviewMetadataState } from './PreviewMetadata.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewMetadataClassNames: SlotClassNames<PreviewMetadataSlots> = {\n  root: 'fai-PreviewMetadata',\n  icon: 'fai-PreviewMetadata__icon',\n  primaryText: 'fai-PreviewMetadata__primaryText',\n  secondaryText: 'fai-PreviewMetadata__secondaryText',\n  tertiaryText: 'fai-PreviewMetadata__tertiaryText',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  ...typographyStyles.caption2,\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  marginLeft: tokens.spacingHorizontalSNudge,\n  verticalAlign: 'middle',\n});\n\nconst useTextStyles = makeStyles({\n  subsequentText: {\n    marginLeft: `calc(${tokens.spacingHorizontalSNudge} * 2)`,\n    position: 'relative',\n\n    '&::before': {\n      ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n      content: '\"\"',\n      display: 'block',\n      height: typographyStyles.caption2.fontSize,\n      left: `calc(-1 * ${tokens.spacingHorizontalSNudge})`,\n      position: 'absolute',\n      top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n    },\n  },\n});\n\n/**\n * Apply styling to the PreviewMetadata slots based on the state\n */\nexport const usePreviewMetadataStyles_unstable = (state: PreviewMetadataState): PreviewMetadataState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const iconBaseClassName = useIconBaseClassName();\n  const textStyles = useTextStyles();\n\n  state.root.className = mergeClasses(previewMetadataClassNames.root, rootBaseClassName, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(previewMetadataClassNames.icon, iconBaseClassName, state.icon.className);\n  }\n\n  let isSubsequentAfterText = false;\n\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(previewMetadataClassNames.primaryText, state.primaryText.className);\n    isSubsequentAfterText = true;\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      previewMetadataClassNames.secondaryText,\n      isSubsequentAfterText && textStyles.subsequentText,\n      state.secondaryText.className,\n    );\n    isSubsequentAfterText = true;\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      previewMetadataClassNames.tertiaryText,\n      isSubsequentAfterText && textStyles.subsequentText,\n      state.tertiaryText.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","typographyStyles","tokens","previewMetadataClassNames","root","icon","primaryText","secondaryText","tertiaryText","useRootBaseClassName","caption2","useIconBaseClassName","marginLeft","spacingHorizontalSNudge","verticalAlign","useTextStyles","subsequentText","position","borderLeft","strokeWidthThin","colorNeutralStroke2","content","display","height","fontSize","left","top","lineHeight","usePreviewMetadataStyles_unstable","state","rootBaseClassName","iconBaseClassName","textStyles","className","isSubsequentAfterText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,gBAAgB,QACX,6BAA6B;AACpC,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,MAAM;IACNC,aAAa;IACbC,eAAe;IACfC,cAAc;AAChB,EAAE;AAEF,MAAMC,uBAAuBZ,gBAAgB;IAC3C,GAAGI,iBAAiBS,QAAQ;AAC9B;AAEA,MAAMC,uBAAuBd,gBAAgB;IAC3Ce,YAAYV,OAAOW,uBAAuB;IAC1CC,eAAe;AACjB;AAEA,MAAMC,gBAAgBjB,WAAW;IAC/BkB,gBAAgB;QACdJ,YAAY,CAAC,KAAK,EAAEV,OAAOW,uBAAuB,CAAC,KAAK,CAAC;QACzDI,UAAU;QAEV,aAAa;YACX,GAAGjB,WAAWkB,UAAU,CAAChB,OAAOiB,eAAe,EAAE,SAASjB,OAAOkB,mBAAmB,CAAC;YACrFC,SAAS;YACTC,SAAS;YACTC,QAAQtB,iBAAiBS,QAAQ,CAACc,QAAQ;YAC1CC,MAAM,CAAC,UAAU,EAAEvB,OAAOW,uBAAuB,CAAC,CAAC,CAAC;YACpDI,UAAU;YACVS,KAAK,CAAC,MAAM,EAAEzB,iBAAiBS,QAAQ,CAACiB,UAAU,CAAC,GAAG,EAAE1B,iBAAiBS,QAAQ,CAACc,QAAQ,CAAC,MAAM,CAAC;QACpG;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMI,oCAAoC,CAACC;IAChD;IAEA,MAAMC,oBAAoBrB;IAC1B,MAAMsB,oBAAoBpB;IAC1B,MAAMqB,aAAajB;IAEnBc,MAAMzB,IAAI,CAAC6B,SAAS,GAAGlC,aAAaI,0BAA0BC,IAAI,EAAE0B,mBAAmBD,MAAMzB,IAAI,CAAC6B,SAAS;IAE3G,IAAIJ,MAAMxB,IAAI,EAAE;QACdwB,MAAMxB,IAAI,CAAC4B,SAAS,GAAGlC,aAAaI,0BAA0BE,IAAI,EAAE0B,mBAAmBF,MAAMxB,IAAI,CAAC4B,SAAS;IAC7G;IAEA,IAAIC,wBAAwB;IAE5B,IAAIL,MAAMvB,WAAW,EAAE;QACrBuB,MAAMvB,WAAW,CAAC2B,SAAS,GAAGlC,aAAaI,0BAA0BG,WAAW,EAAEuB,MAAMvB,WAAW,CAAC2B,SAAS;QAC7GC,wBAAwB;IAC1B;IAEA,IAAIL,MAAMtB,aAAa,EAAE;QACvBsB,MAAMtB,aAAa,CAAC0B,SAAS,GAAGlC,aAC9BI,0BAA0BI,aAAa,EACvC2B,yBAAyBF,WAAWhB,cAAc,EAClDa,MAAMtB,aAAa,CAAC0B,SAAS;QAE/BC,wBAAwB;IAC1B;IAEA,IAAIL,MAAMrB,YAAY,EAAE;QACtBqB,MAAMrB,YAAY,CAACyB,SAAS,GAAGlC,aAC7BI,0BAA0BK,YAAY,EACtC0B,yBAAyBF,WAAWhB,cAAc,EAClDa,MAAMrB,YAAY,CAACyB,SAAS;IAEhC;IAEA,OAAOJ;AACT,EAAE"}

package/lib/components/PreviewSurface/PreviewSurface.js

@@ -2,10 +2,9 @@ import * as React from 'react';
 import { usePreviewSurface_unstable } from './usePreviewSurface';
 import { renderPreviewSurface_unstable } from './renderPreviewSurface';
 import { usePreviewSurfaceStyles_unstable } from './usePreviewSurfaceStyles.styles';
-export const PreviewSurface = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = usePreviewSurface_unstable(props, ref);
-  usePreviewSurfaceStyles_unstable(state);
-  return renderPreviewSurface_unstable(state);
+export const PreviewSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = usePreviewSurface_unstable(props, ref);
+    usePreviewSurfaceStyles_unstable(state);
+    return renderPreviewSurface_unstable(state);
 });
 PreviewSurface.displayName = 'PreviewSurface';
-//# sourceMappingURL=PreviewSurface.js.map

package/lib/components/PreviewSurface/PreviewSurface.types.js

@@ -1,4 +1,3 @@
 /**
  * State used in rendering PreviewSurface
- */export {};
-//# sourceMappingURL=PreviewSurface.types.js.map
+ */ export { };