@fluentui-copilot/react-preview 0.0.0-nightly-20251010-0406-7df7c6d1.1 → 0.0.0-nightly-20251013-0406-7c7739c8.1

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

@@ -0,0 +1,75 @@
+import { linkClassNames, __resetStyles, __styles, 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 = __resetStyles("ry18yy9", null, [".ry18yy9{grid-row:1;justify-self:end;}"]);
+const useCitationBaseClassName = __resetStyles("ry1eqmj", null, [".ry1eqmj{grid-row:1;}"]);
+const useLabelBaseClassName = __resetStyles("rattnj5", null, [".rattnj5{align-self:start;display:-webkit-box;grid-row:1/3;overflow-y:hidden;padding-top:calc((16px / 2) - (var(--lineHeightBase200) - var(--fontSizeBase200)));word-break:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);}", ".rattnj5 .fui-Link{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3);}", ".rattnj5 .fui-Link:hover{color:var(--colorNeutralForeground3Hover);}", ".rattnj5 .fui-Link:hover:active{color:var(--colorNeutralForeground3Pressed);}"]);
+const useMediaBaseClassName = __resetStyles("rcisese", null, [".rcisese{grid-row:1;height:16px;line-height:0;width:16px;}", ".rcisese>.fai-PreviewHeader__mediaChild{height:16px;width:16px;}"]);
+const useRootBaseClassName = __resetStyles("r1xjnine", null, [".r1xjnine{align-items:center;column-gap:var(--spacingHorizontalXS);display:grid;grid-template-rows: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 = __styles({
+  onlyLabel: {
+    Budl1dq: "f1c2z91y"
+  },
+  previousAndLabel: {
+    Budl1dq: "f157hhv8"
+  },
+  labelAndActions: {
+    Budl1dq: "fkdjblp"
+  },
+  citationMediaLabel: {
+    Budl1dq: "f1ydiic3"
+  },
+  previousLabelActions: {
+    Budl1dq: "fn2gjqi"
+  },
+  all: {
+    Budl1dq: "f10lv8pf"
+  }
+}, {
+  d: [".f1c2z91y{grid-template-columns:1fr;}", ".f157hhv8{grid-template-columns:min-content 1fr;}", ".fkdjblp{grid-template-columns:1fr min-content;}", ".f1ydiic3{grid-template-columns:min-content min-content 1fr;}", ".fn2gjqi{grid-template-columns:min-content 1fr min-content;}", ".f10lv8pf{grid-template-columns: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;
+};
+//# sourceMappingURL=usePreviewHeaderStyles.styles.js.map

package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.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/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

@@ -0,0 +1,10 @@
+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);
+});
+PreviewMetadata.displayName = 'PreviewMetadata';

package/lib/components/PreviewMetadata/PreviewMetadata.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewMetadata.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePreviewMetadata_unstable } from './usePreviewMetadata';\nimport { renderPreviewMetadata_unstable } from './renderPreviewMetadata';\nimport { usePreviewMetadataStyles_unstable } from './usePreviewMetadataStyles.styles';\nimport type { PreviewMetadataProps } from './PreviewMetadata.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const PreviewMetadata: ForwardRefComponent<PreviewMetadataProps> = React.forwardRef((props, ref) => {\n  const state = usePreviewMetadata_unstable(props, ref);\n\n  usePreviewMetadataStyles_unstable(state);\n  return renderPreviewMetadata_unstable(state);\n});\n\nPreviewMetadata.displayName = 'PreviewMetadata';\n"],"names":["React","usePreviewMetadata_unstable","renderPreviewMetadata_unstable","usePreviewMetadataStyles_unstable","PreviewMetadata","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAItF,OAAO,MAAMC,gCAA6DJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAClC,OAAON,+BAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering PreviewMetadata
+ */ export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewMetadata.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type PreviewMetadataSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Icon slot in the metadata displayed after all text.\n   */\n  icon: Slot<'span'>;\n\n  /**\n   * First text displayed in the metadata.\n   */\n  primaryText: Slot<'span'>;\n\n  /**\n   * Second text displayed in the metadata.\n   */\n  secondaryText: Slot<'span'>;\n\n  /**\n   * Third text displayed in the metadata.\n   */\n  tertiaryText: Slot<'span'>;\n};\n\n/**\n * PreviewMetadata Props\n */\nexport type PreviewMetadataProps = ComponentProps<Partial<PreviewMetadataSlots>>;\n\n/**\n * State used in rendering PreviewMetadata\n */\nexport type PreviewMetadataState = ComponentState<PreviewMetadataSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AA+BA;;CAEC,GACD,WAAwE"}

package/lib/components/PreviewMetadata/index.js

@@ -0,0 +1,4 @@
+export { PreviewMetadata } from './PreviewMetadata';
+export { renderPreviewMetadata_unstable } from './renderPreviewMetadata';
+export { usePreviewMetadata_unstable } from './usePreviewMetadata';
+export { previewMetadataClassNames, usePreviewMetadataStyles_unstable } from './usePreviewMetadataStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { PreviewMetadata } from './PreviewMetadata';\nexport type { PreviewMetadataProps, PreviewMetadataSlots, PreviewMetadataState } from './PreviewMetadata.types';\nexport { renderPreviewMetadata_unstable } from './renderPreviewMetadata';\nexport { usePreviewMetadata_unstable } from './usePreviewMetadata';\nexport { previewMetadataClassNames, usePreviewMetadataStyles_unstable } from './usePreviewMetadataStyles.styles';\n"],"names":["PreviewMetadata","renderPreviewMetadata_unstable","usePreviewMetadata_unstable","previewMetadataClassNames","usePreviewMetadataStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}

package/lib/components/PreviewMetadata/renderPreviewMetadata.js

@@ -0,0 +1,16 @@
+  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
+        ]
+    });
+};

package/lib/components/PreviewMetadata/renderPreviewMetadata.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderPreviewMetadata.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { JSXElement } from '@fluentui/react-components';\nimport type { PreviewMetadataState, PreviewMetadataSlots } from './PreviewMetadata.types';\n\n/**\n * Render the final JSX of PreviewMetadata\n */\nexport const renderPreviewMetadata_unstable = (state: PreviewMetadataState): JSXElement => {\n  assertSlots<PreviewMetadataSlots>(state);\n\n  return (\n    <state.root>\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n      {state.tertiaryText && <state.tertiaryText />}\n      {state.icon && <state.icon />}\n      {state.root.children}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderPreviewMetadata_unstable","state","root","primaryText","secondaryText","tertiaryText","icon","children"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAIzD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,WAAW,kBAAI,KAACF,MAAME,WAAW;YACvCF,MAAMG,aAAa,kBAAI,KAACH,MAAMG,aAAa;YAC3CH,MAAMI,YAAY,kBAAI,KAACJ,MAAMI,YAAY;YACzCJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;YACzBL,MAAMC,IAAI,CAACK,QAAQ;;;AAG1B,EAAE"}

package/lib/components/PreviewMetadata/usePreviewMetadata.js

@@ -0,0 +1,39 @@
+import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
+/**
+ * Create the state required to render PreviewMetadata.
+ *
+ * The returned state can be modified with hooks such as usePreviewMetadataStyles_unstable,
+ * before being passed to renderPreviewMetadata_unstable.
+ *
+ * @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'
+        })
+    };
+};

package/lib/components/PreviewMetadata/usePreviewMetadata.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePreviewMetadata.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport type { PreviewMetadataProps, PreviewMetadataState } from './PreviewMetadata.types';\n\n/**\n * Create the state required to render PreviewMetadata.\n *\n * The returned state can be modified with hooks such as usePreviewMetadataStyles_unstable,\n * before being passed to renderPreviewMetadata_unstable.\n *\n * @param props - props from this instance of PreviewMetadata\n * @param ref - reference to root HTMLElement of PreviewMetadata\n */\nexport const usePreviewMetadata_unstable = (\n  props: PreviewMetadataProps,\n  ref: React.Ref<HTMLDivElement>,\n): PreviewMetadataState => {\n  const { icon, primaryText, secondaryText, tertiaryText } = props;\n\n  return {\n    components: {\n      root: 'div',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(icon, { elementType: 'span' }),\n    primaryText: slot.optional(primaryText, { elementType: 'span' }),\n    secondaryText: slot.optional(secondaryText, { elementType: 'span' }),\n    tertiaryText: slot.optional(tertiaryText, { elementType: 'span' }),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","usePreviewMetadata_unstable","props","ref","icon","primaryText","secondaryText","tertiaryText","components","root","always","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,6BAA6B;AAG5E;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,WAAW,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAAGL;IAE3D,OAAO;QACLM,YAAY;YACVC,MAAM;YACNL,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,cAAc;QAChB;QACAE,MAAMT,KAAKU,MAAM,CACfX,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBP,MAAMJ,KAAKY,QAAQ,CAACR,MAAM;YAAEO,aAAa;QAAO;QAChDN,aAAaL,KAAKY,QAAQ,CAACP,aAAa;YAAEM,aAAa;QAAO;QAC9DL,eAAeN,KAAKY,QAAQ,CAACN,eAAe;YAAEK,aAAa;QAAO;QAClEJ,cAAcP,KAAKY,QAAQ,CAACL,cAAc;YAAEI,aAAa;QAAO;IAClE;AACF,EAAE"}

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

@@ -0,0 +1,56 @@
+import { __resetStyles, __styles, 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 = __resetStyles("rt76a44", null, [".rt76a44{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase100);}"]);
+const useIconBaseClassName = __resetStyles("rldr52y", "rl7w8fj", [".rldr52y{margin-left:var(--spacingHorizontalSNudge);vertical-align:middle;}", ".rl7w8fj{margin-right:var(--spacingHorizontalSNudge);vertical-align:middle;}"]);
+const useTextStyles = __styles({
+  subsequentText: {
+    Frg6f3: ["f3qjkxx", "fm9m4my"],
+    qhf8xq: "f10pi13n",
+    uvfttm: ["f1x8pvcy", "f9sc749"],
+    Bbv0w2i: ["f1jpmc5p", "f1yq6w5o"],
+    Bm6vgfq: ["fjml6kk", "f1geml7w"],
+    Ftih45: "f1wl9k8s",
+    Br0sdwz: "f1aocrix",
+    Baz25je: "f8pn7wt",
+    Fbdkly: ["fy871ps", "f15er23e"],
+    Brfgrao: "f1j7ml58",
+    Bciustq: "f1wl9tmt"
+  }
+}, {
+  d: [".f3qjkxx{margin-left:calc(var(--spacingHorizontalSNudge) * 2);}", ".fm9m4my{margin-right:calc(var(--spacingHorizontalSNudge) * 2);}", ".f10pi13n{position:relative;}", ".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);}", ".f1wl9k8s::before{content:\"\";}", ".f1aocrix::before{display:block;}", ".f8pn7wt::before{height:var(--fontSizeBase100);}", ".fy871ps::before{left:calc(-1 * var(--spacingHorizontalSNudge));}", ".f15er23e::before{right:calc(-1 * var(--spacingHorizontalSNudge));}", ".f1j7ml58::before{position:absolute;}", ".f1wl9tmt::before{top:calc((var(--lineHeightBase100) - var(--fontSizeBase100)) / 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;
+};
+//# sourceMappingURL=usePreviewMetadataStyles.styles.js.map

package/lib/components/PreviewMetadata/usePreviewMetadataStyles.styles.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/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

@@ -0,0 +1,10 @@
+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);
+});
+PreviewSurface.displayName = 'PreviewSurface';

package/lib/components/PreviewSurface/PreviewSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePreviewSurface_unstable } from './usePreviewSurface';\nimport { renderPreviewSurface_unstable } from './renderPreviewSurface';\nimport { usePreviewSurfaceStyles_unstable } from './usePreviewSurfaceStyles.styles';\nimport type { PreviewSurfaceProps } from './PreviewSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const PreviewSurface: ForwardRefComponent<PreviewSurfaceProps> = React.forwardRef((props, ref) => {\n  const state = usePreviewSurface_unstable(props, ref);\n\n  usePreviewSurfaceStyles_unstable(state);\n\n  return renderPreviewSurface_unstable(state);\n});\n\nPreviewSurface.displayName = 'PreviewSurface';\n"],"names":["React","usePreviewSurface_unstable","renderPreviewSurface_unstable","usePreviewSurfaceStyles_unstable","PreviewSurface","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAIpF,OAAO,MAAMC,+BAA2DJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQP,2BAA2BK,OAAOC;IAEhDJ,iCAAiCK;IAEjC,OAAON,8BAA8BM;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering PreviewSurface
+ */ export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewSurface.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type {\n  ComponentProps,\n  ComponentState,\n  PopoverSurfaceProps,\n  PopoverSurfaceSlots,\n  PopoverSurfaceState,\n} from '@fluentui/react-components';\n\nexport type PreviewSurfaceSlots = PopoverSurfaceSlots & {};\n\n/**\n * PreviewSurface Props\n */\nexport type PreviewSurfaceProps = ComponentProps<PreviewSurfaceSlots> & PopoverSurfaceProps & DesignVersion & {};\n\n/**\n * State used in rendering PreviewSurface\n */\nexport type PreviewSurfaceState = ComponentState<PreviewSurfaceSlots> &\n  PopoverSurfaceState &\n  Pick<Required<PreviewSurfaceProps>, 'designVersion'> & {};\n"],"names":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC,GACD,WAE4D"}

package/lib/components/PreviewSurface/index.js

@@ -0,0 +1,4 @@
+export { PreviewSurface } from './PreviewSurface';
+export { renderPreviewSurface_unstable } from './renderPreviewSurface';
+export { usePreviewSurface_unstable } from './usePreviewSurface';
+export { previewSurfaceClassNames, usePreviewSurfaceStyles_unstable } from './usePreviewSurfaceStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { PreviewSurface } from './PreviewSurface';\nexport type { PreviewSurfaceProps, PreviewSurfaceSlots, PreviewSurfaceState } from './PreviewSurface.types';\nexport { renderPreviewSurface_unstable } from './renderPreviewSurface';\nexport { usePreviewSurface_unstable } from './usePreviewSurface';\nexport { previewSurfaceClassNames, usePreviewSurfaceStyles_unstable } from './usePreviewSurfaceStyles.styles';\n"],"names":["PreviewSurface","renderPreviewSurface_unstable","usePreviewSurface_unstable","previewSurfaceClassNames","usePreviewSurfaceStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}

package/lib/components/PreviewSurface/renderPreviewSurface.js

@@ -0,0 +1,6 @@
+import { renderPopoverSurface_unstable } from '@fluentui/react-components';
+/**
+ * Render the final JSX of PreviewSurface
+ */ export const renderPreviewSurface_unstable = (state)=>{
+    return renderPopoverSurface_unstable(state);
+};

package/lib/components/PreviewSurface/renderPreviewSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderPreviewSurface.tsx"],"sourcesContent":["import { renderPopoverSurface_unstable } from '@fluentui/react-components';\nimport type { JSXElement } from '@fluentui/react-components';\nimport type { PreviewSurfaceState } from './PreviewSurface.types';\n\n/**\n * Render the final JSX of PreviewSurface\n */\nexport const renderPreviewSurface_unstable = (state: PreviewSurfaceState): JSXElement => {\n  return renderPopoverSurface_unstable(state);\n};\n"],"names":["renderPopoverSurface_unstable","renderPreviewSurface_unstable","state"],"rangeMappings":";;;;;","mappings":"AAAA,SAASA,6BAA6B,QAAQ,6BAA6B;AAI3E;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,OAAOF,8BAA8BE;AACvC,EAAE"}

package/lib/components/PreviewSurface/usePreviewSurface.js

@@ -0,0 +1,18 @@
+import { usePopoverSurface_unstable } from '@fluentui/react-components';
+import { useDesignVersion } from '@fluentui-copilot/react-provider';
+// If you add JSX to this file, be sure to change the file type to .tsx
+/**
+ * Create the state required to render PreviewSurface.
+ *
+ * The returned state can be modified with hooks such as usePreviewSurfaceStyles_unstable,
+ * before being passed to renderPreviewSurface_unstable.
+ *
+ * @param props - props from this instance of PreviewSurface
+ * @param ref - reference to root HTMLElement of PreviewSurface
+ */ export const usePreviewSurface_unstable = (props, ref)=>{
+    const designVersion = useDesignVersion(props.designVersion);
+    return {
+        designVersion,
+        ...usePopoverSurface_unstable(props, ref)
+    };
+};

package/lib/components/PreviewSurface/usePreviewSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePreviewSurface.ts"],"sourcesContent":["import type * as React from 'react';\nimport { usePopoverSurface_unstable } from '@fluentui/react-components';\nimport type { PreviewSurfaceProps, PreviewSurfaceState } from './PreviewSurface.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render PreviewSurface.\n *\n * The returned state can be modified with hooks such as usePreviewSurfaceStyles_unstable,\n * before being passed to renderPreviewSurface_unstable.\n *\n * @param props - props from this instance of PreviewSurface\n * @param ref - reference to root HTMLElement of PreviewSurface\n */\nexport const usePreviewSurface_unstable = (\n  props: PreviewSurfaceProps,\n  ref: React.Ref<HTMLDivElement>,\n): PreviewSurfaceState => {\n  const designVersion = useDesignVersion(props.designVersion);\n  return { designVersion, ...usePopoverSurface_unstable(props, ref) };\n};\n"],"names":["usePopoverSurface_unstable","useDesignVersion","usePreviewSurface_unstable","props","ref","designVersion"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,gBAAgB,QAAQ,mCAAmC;AAEpE,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,gBAAgBJ,iBAAiBE,MAAME,aAAa;IAC1D,OAAO;QAAEA;QAAe,GAAGL,2BAA2BG,OAAOC,IAAI;IAAC;AACpE,EAAE"}

package/lib/components/PreviewSurface/usePreviewSurfaceStyles.styles.js

@@ -0,0 +1,51 @@
+import { __styles, mergeClasses, usePopoverSurfaceStyles_unstable } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const previewSurfaceClassNames = {
+  root: 'fai-PreviewSurface'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootStyles = __styles({
+  base: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f16d74zd",
+    B7ck84d: "f1ewtqcl"
+  }
+}, {
+  d: [[".f16d74zd{padding:var(--spacingVerticalXS) var(--spacingHorizontalXS);}", {
+    p: -1
+  }], ".f1ewtqcl{box-sizing:border-box;}"]
+});
+const useNextStyles = __styles({
+  root: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu"
+  }
+}, {
+  d: [[".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the PreviewSurface slots based on the state
+ */
+export const usePreviewSurfaceStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    designVersion
+  } = state;
+  const rootStyles = useRootStyles();
+  const nextStyles = useNextStyles();
+  state.root.className = mergeClasses(previewSurfaceClassNames.root, rootStyles.base, designVersion === 'next' && nextStyles.root, state.root.className);
+  usePopoverSurfaceStyles_unstable(state);
+  return state;
+};
+//# sourceMappingURL=usePreviewSurfaceStyles.styles.js.map