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

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui-copilot/react-suggestions",
   "entries": [
     {
-      "date": "Fri, 10 Oct 2025 04:08:18 GMT",
-      "tag": "@fluentui-copilot/react-suggestions_v0.0.0-nightly-20251010-0406-7df7c6d1.1",
-      "version": "0.0.0-nightly-20251010-0406-7df7c6d1.1",
+      "date": "Mon, 13 Oct 2025 04:14:18 GMT",
+      "tag": "@fluentui-copilot/react-suggestions_v0.0.0-nightly-20251013-0406-7c7739c8.1",
+      "version": "0.0.0-nightly-20251013-0406-7c7739c8.1",
       "comments": {
         "prerelease": [
           {

package/CHANGELOG.md

@@ -1,13 +1,13 @@
 # Change Log - @fluentui-copilot/react-suggestions
 
-This log was last generated on Fri, 10 Oct 2025 04:08:18 GMT and should not be manually modified.
+This log was last generated on Mon, 13 Oct 2025 04:14:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20251010-0406-7df7c6d1.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.0.0-nightly-20251010-0406-7df7c6d1.1)
+## [0.0.0-nightly-20251013-0406-7c7739c8.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.0.0-nightly-20251013-0406-7c7739c8.1)
 
-Fri, 10 Oct 2025 04:08:18 GMT 
-[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.13.3..@fluentui-copilot/react-suggestions_v0.0.0-nightly-20251010-0406-7df7c6d1.1)
+Mon, 13 Oct 2025 04:14:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.13.3..@fluentui-copilot/react-suggestions_v0.0.0-nightly-20251013-0406-7c7739c8.1)
 
 ### Changes
 

package/dist/index.d.ts

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+
+import type { ButtonProps } from '@fluentui/react-components';
+import type { ButtonSlots } from '@fluentui/react-components';
+import type { ButtonState } from '@fluentui/react-components';
+import type { ComponentProps } from '@fluentui/react-components';
+import type { ComponentState } from '@fluentui/react-components';
+import type { CopilotMode } from '@fluentui-copilot/react-provider';
+import type { DesignVersion } from '@fluentui-copilot/react-provider';
+import type { ForwardRefComponent } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
+import type { Slot } from '@fluentui/react-components';
+import type { SlotClassNames } from '@fluentui/react-components';
+import type { TooltipProps } from '@fluentui/react-components';
+
+/**
+ * Render the final JSX of SuggestionList
+ */
+export declare const renderSuggestionList_unstable: (state: SuggestionListState) => JSXElement;
+
+export declare const Suggestion: ForwardRefComponent<SuggestionProps>;
+
+export declare const suggestionClassNames: SlotClassNames<ButtonSlots>;
+
+export declare const SuggestionList: ForwardRefComponent<SuggestionListProps>;
+
+export declare const suggestionListClassNames: SlotClassNames<SuggestionListSlots>;
+
+/**
+ * SuggestionList Props
+ */
+export declare type SuggestionListProps = ComponentProps<SuggestionListSlots> & {
+    /**
+     * The horizontal alignment of the SuggestionsList.
+     * @default 'end'
+     */
+    horizontalAlignment?: 'start' | 'end';
+};
+
+export declare type SuggestionListSlots = {
+    root: Slot<'div'>;
+    action?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering SuggestionList
+ */
+export declare type SuggestionListState = ComponentState<SuggestionListSlots> & Required<Pick<SuggestionListProps, 'horizontalAlignment'>>;
+
+export declare type SuggestionProps = CopilotMode & DesignVersion & ComponentProps<SuggestionSlots> & Omit<ButtonProps, keyof ButtonSlots>;
+
+export declare type SuggestionSlots = ButtonSlots;
+
+export declare type SuggestionState = ComponentState<SuggestionSlots> & Required<Pick<SuggestionProps, 'mode' | 'designVersion'>> & Omit<ButtonState, keyof ButtonSlots>;
+
+export declare type TooltipComponent = React.FunctionComponent<Partial<TooltipProps>>;
+
+export declare const useSuggestion_unstable: (props: SuggestionProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => SuggestionState;
+
+/**
+ * Create the state required to render SuggestionList.
+ *
+ * The returned state can be modified with hooks such as useSuggestionListStyles_unstable,
+ * before being passed to renderSuggestionList_unstable.
+ *
+ * @param props - props from this instance of SuggestionList
+ * @param ref - reference to root HTMLElement of SuggestionList
+ */
+export declare const useSuggestionList_unstable: (props: SuggestionListProps, ref: React.Ref<HTMLDivElement>) => SuggestionListState;
+
+/**
+ * Apply styling to the SuggestionList slots based on the state
+ */
+export declare const useSuggestionListStyles_unstable: (state: SuggestionListState) => SuggestionListState;
+
+export declare const useSuggestionStyles_unstable: (state: SuggestionState) => SuggestionState;
+
+export { }

package/lib/Suggestion.js

@@ -0,0 +1 @@
+export { Suggestion, suggestionClassNames, useSuggestionStyles_unstable, useSuggestion_unstable } from './components/Suggestion/index';

package/lib/Suggestion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Suggestion.ts"],"sourcesContent":["export type { SuggestionProps, SuggestionSlots, SuggestionState } from './components/Suggestion/index';\nexport {\n  Suggestion,\n  suggestionClassNames,\n  useSuggestionStyles_unstable,\n  useSuggestion_unstable,\n} from './components/Suggestion/index';\n"],"names":["Suggestion","suggestionClassNames","useSuggestionStyles_unstable","useSuggestion_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}

package/lib/SuggestionList.js

@@ -0,0 +1 @@
+export { SuggestionList, renderSuggestionList_unstable, suggestionListClassNames, useSuggestionListStyles_unstable, useSuggestionList_unstable } from './components/SuggestionList/index';

package/lib/SuggestionList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SuggestionList.ts"],"sourcesContent":["export type { SuggestionListProps, SuggestionListSlots, SuggestionListState, TooltipComponent } from './components/SuggestionList/index';\nexport { SuggestionList, renderSuggestionList_unstable, suggestionListClassNames, useSuggestionListStyles_unstable, useSuggestionList_unstable } from './components/SuggestionList/index';\n"],"names":["SuggestionList","renderSuggestionList_unstable","suggestionListClassNames","useSuggestionListStyles_unstable","useSuggestionList_unstable"],"rangeMappings":"","mappings":"AACA,SAASA,cAAc,EAAEC,6BAA6B,EAAEC,wBAAwB,EAAEC,gCAAgC,EAAEC,0BAA0B,QAAQ,oCAAoC"}

package/lib/components/Suggestion/Suggestion.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useSuggestionStyles_unstable } from './useSuggestionStyles.styles';
+import { renderButton_unstable, useButtonStyles_unstable } from '@fluentui/react-components';
+import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
+import { useSuggestion_unstable } from './useSuggestion';
+// Suggestion component - TODO: add more docs
+export const Suggestion = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    'use no memo';
+    const state = useSuggestion_unstable(props, ref);
+    state.appearance = props.appearance || 'outline';
+    useButtonStyles_unstable(state);
+    useSuggestionStyles_unstable(state);
+    useCustomStyleHook('useSuggestionStyles')(state);
+    return renderButton_unstable(state);
+});
+Suggestion.displayName = 'Suggestion';

package/lib/components/Suggestion/Suggestion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Suggestion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSuggestionStyles_unstable } from './useSuggestionStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { renderButton_unstable, useButtonStyles_unstable } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\nimport { useSuggestion_unstable } from './useSuggestion';\nimport type { SuggestionProps } from './Suggestion.types';\n\n// Suggestion component - TODO: add more docs\nexport const Suggestion: ForwardRefComponent<SuggestionProps> = React.forwardRef((props, ref) => {\n  'use no memo';\n\n  const state = useSuggestion_unstable(props, ref);\n  state.appearance = props.appearance || 'outline';\n  useButtonStyles_unstable(state);\n  useSuggestionStyles_unstable(state);\n  useCustomStyleHook('useSuggestionStyles')(state);\n\n  return renderButton_unstable(state);\n});\n\nSuggestion.displayName = 'Suggestion';\n"],"names":["React","useSuggestionStyles_unstable","renderButton_unstable","useButtonStyles_unstable","useCustomStyleHook","useSuggestion_unstable","Suggestion","forwardRef","props","ref","state","appearance","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,4BAA4B,QAAQ,+BAA+B;AAE5E,SAASC,qBAAqB,EAAEC,wBAAwB,QAAQ,6BAA6B;AAC7F,SAASC,kBAAkB,QAAQ,mCAAmC;AACtE,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD,6CAA6C;AAC7C,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF;IAEA,MAAMC,QAAQL,uBAAuBG,OAAOC;IAC5CC,MAAMC,UAAU,GAAGH,MAAMG,UAAU,IAAI;IACvCR,yBAAyBO;IACzBT,6BAA6BS;IAC7BN,mBAAmB,uBAAuBM;IAE1C,OAAOR,sBAAsBQ;AAC/B,GAAG;AAEHJ,WAAWM,WAAW,GAAG"}

package/lib/components/Suggestion/Suggestion.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Suggestion.types.ts"],"sourcesContent":["import type { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ButtonProps, ButtonSlots, ButtonState, ComponentProps, ComponentState } from '@fluentui/react-components';\n\nexport type SuggestionSlots = ButtonSlots;\n\nexport type SuggestionProps = CopilotMode &\n  DesignVersion &\n  ComponentProps<SuggestionSlots> &\n  Omit<ButtonProps, keyof ButtonSlots>;\n\nexport type SuggestionState = ComponentState<SuggestionSlots> &\n  Required<Pick<SuggestionProps, 'mode' | 'designVersion'>> &\n  Omit<ButtonState, keyof ButtonSlots>;\n"],"names":[],"rangeMappings":"","mappings":"AAUA,WAEuC"}

package/lib/components/Suggestion/index.js

@@ -0,0 +1,3 @@
+export { Suggestion } from './Suggestion';
+export { useSuggestion_unstable } from './useSuggestion';
+export { suggestionClassNames, useSuggestionStyles_unstable } from './useSuggestionStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { Suggestion } from './Suggestion';\nexport type { SuggestionProps, SuggestionSlots, SuggestionState } from './Suggestion.types';\nexport { useSuggestion_unstable } from './useSuggestion';\nexport { suggestionClassNames, useSuggestionStyles_unstable } from './useSuggestionStyles.styles';\n"],"names":["Suggestion","useSuggestion_unstable","suggestionClassNames","useSuggestionStyles_unstable"],"rangeMappings":";;","mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

package/lib/components/Suggestion/useSuggestion.js

@@ -0,0 +1,12 @@
+import { useButton_unstable } from '@fluentui/react-components';
+import { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';
+export const useSuggestion_unstable = (props, ref)=>{
+    const buttonState = useButton_unstable(props, ref);
+    const mode = useCopilotMode(props.mode);
+    const designVersion = useDesignVersion(props.designVersion);
+    return {
+        ...buttonState,
+        mode,
+        designVersion
+    };
+};

package/lib/components/Suggestion/useSuggestion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useSuggestion.ts"],"sourcesContent":["import { useButton_unstable } from '@fluentui/react-components';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\nimport type { SuggestionProps, SuggestionState } from './Suggestion.types';\n\nexport const useSuggestion_unstable = (\n  props: SuggestionProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SuggestionState => {\n  const buttonState = useButton_unstable(props, ref);\n  const mode = useCopilotMode(props.mode);\n  const designVersion = useDesignVersion(props.designVersion);\n  return { ...buttonState, mode, designVersion };\n};\n"],"names":["useButton_unstable","useCopilotMode","useDesignVersion","useSuggestion_unstable","props","ref","buttonState","mode","designVersion"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,SAASA,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,mCAAmC;AAGpF,OAAO,MAAMC,yBAAyB,CACpCC,OACAC;IAEA,MAAMC,cAAcN,mBAAmBI,OAAOC;IAC9C,MAAME,OAAON,eAAeG,MAAMG,IAAI;IACtC,MAAMC,gBAAgBN,iBAAiBE,MAAMI,aAAa;IAC1D,OAAO;QAAE,GAAGF,WAAW;QAAEC;QAAMC;IAAc;AAC/C,EAAE"}

package/lib/components/Suggestion/useSuggestionStyles.styles.js

@@ -0,0 +1,162 @@
+import { __styles, mergeClasses, shorthands } from '@fluentui/react-components';
+import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
+export const suggestionClassNames = {
+  root: 'fai-Suggestion',
+  icon: 'fai-Suggestion__icon'
+};
+const useSuggestionStyles = __styles({
+  root: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    B4j52fo: "f5ogflp",
+    Bekrc4i: ["f1hqa2wf", "finvdd3"],
+    Bn0qgzm: "f1f09k3d",
+    ibv6hh: ["finvdd3", "f1hqa2wf"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "f161y7kd",
+    h3c5rm: ["f1c8dzaj", "f1sl6hi9"],
+    B9xav0g: "f1619yhw",
+    zhjwy3: ["f1sl6hi9", "f1c8dzaj"],
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fcca7b8",
+    sj55zd: "fkfq4zb",
+    fsow6f: "fpgzoln"
+  },
+  enabled: {
+    B9di4we: "fxuoarf",
+    B1f0e9u: ["f1qi0eim", "fiwk2rq"],
+    bb0oo: "f1jsw6og",
+    B88lpqa: ["fiwk2rq", "f1qi0eim"],
+    grrwut: "f1ggo121",
+    Bejlia0: "f1jg9xd",
+    v5djml: "fihmelj",
+    Bptf8dt: ["fs1n9un", "f1u9p12n"],
+    j4j8r: "f12ds35j",
+    H566xl: ["f1u9p12n", "fs1n9un"],
+    a9g2gr: "fezean8",
+    rgbxn1: "f1yr11xb"
+  },
+  canvas: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1m1tk10"
+  }
+}, {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }], [".fcca7b8{padding:var(--spacingVerticalXS) var(--spacingVerticalS);}", {
+    p: -1
+  }], ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fpgzoln{text-align:start;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".f1m1tk10{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalM);}", {
+    p: -1
+  }]],
+  m: [["@media (forced-colors: none){.fxuoarf:hover{border-top-color:var(--colorBrandStroke2Hover);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f1qi0eim:hover{border-right-color:var(--colorBrandStroke2Hover);}.fiwk2rq:hover{border-left-color:var(--colorBrandStroke2Hover);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f1jsw6og:hover{border-bottom-color:var(--colorBrandStroke2Hover);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f1ggo121:hover{color:var(--colorBrandForeground2Hover);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f1jg9xd:hover{background-color:var(--colorBrandBackground2Hover);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.fihmelj:active:hover{border-top-color:var(--colorBrandStroke2Pressed);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f1u9p12n:active:hover{border-left-color:var(--colorBrandStroke2Pressed);}.fs1n9un:active:hover{border-right-color:var(--colorBrandStroke2Pressed);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f12ds35j:active:hover{border-bottom-color:var(--colorBrandStroke2Pressed);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.fezean8:active:hover{color:var(--colorBrandForeground2Pressed);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f1yr11xb:active:hover{background-color:var(--colorBrandBackground2Pressed);}}", {
+    m: "(forced-colors: none)"
+  }]]
+});
+const useNextStyles = __styles({
+  root: {
+    qh2i5f: "f1m56mwy",
+    Bvf7fsn: "frhssjw",
+    Be2twd7: "fy9rknc",
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "f68mrw8",
+    h3c5rm: ["f7pw515", "fw35ms5"],
+    B9xav0g: "frpde29",
+    zhjwy3: ["fw35ms5", "f7pw515"],
+    De3pzq: "fhovq9v"
+  },
+  enabled: {
+    B9di4we: "f106pmgz",
+    B1f0e9u: ["fesy4wo", "f9xbgkc"],
+    bb0oo: "fil0yj2",
+    B88lpqa: ["f9xbgkc", "fesy4wo"],
+    grrwut: "fnx31mg",
+    Bejlia0: "feiahij",
+    v5djml: "f1ytgj83",
+    Bptf8dt: ["f16m5b8m", "fwlads5"],
+    j4j8r: "f17ux6es",
+    H566xl: ["fwlads5", "f16m5b8m"],
+    a9g2gr: "f1kqxwtj",
+    rgbxn1: "f10o6k9l"
+  }
+}, {
+  d: [".f1m56mwy{padding-horizontal:var(--spacingHorizontalM);padding-horizontal:var(--spacingHorizontalM);}", ".frhssjw{padding-vertical:var(--spacingVerticalSNudge);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
+  m: [["@media (forced-colors: none){.f106pmgz:hover{border-top-color:var(--colorNeutralStroke2);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f9xbgkc:hover{border-left-color:var(--colorNeutralStroke2);}.fesy4wo:hover{border-right-color:var(--colorNeutralStroke2);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.fil0yj2:hover{border-bottom-color:var(--colorNeutralStroke2);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.fnx31mg:hover{color:var(--colorNeutralForeground2Hover);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.feiahij:hover{background-color:var(--colorSubtleBackgroundHover);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f1ytgj83:active:hover{border-top-color:var(--colorNeutralStroke2);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f16m5b8m:active:hover{border-right-color:var(--colorNeutralStroke2);}.fwlads5:active:hover{border-left-color:var(--colorNeutralStroke2);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f17ux6es:active:hover{border-bottom-color:var(--colorNeutralStroke2);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f1kqxwtj:active:hover{color:var(--colorNeutralForeground2Pressed);}}", {
+    m: "(forced-colors: none)"
+  }], ["@media (forced-colors: none){.f10o6k9l:active:hover{background-color:var(--colorSubtleBackgroundPressed);}}", {
+    m: "(forced-colors: none)"
+  }]]
+});
+export const useSuggestionStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    designVersion,
+    mode
+  } = state;
+  const styles = useSuggestionStyles();
+  const nextStyles = useNextStyles();
+  state.root.className = mergeClasses(suggestionClassNames.root, styles.root, mode === 'canvas' && styles.canvas, designVersion === 'next' && nextStyles.root, !state.disabled && styles.enabled, designVersion === 'next' && !state.disabled && nextStyles.enabled, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useSuggestionStyles.styles.js.map

package/lib/components/Suggestion/useSuggestionStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { SlotClassNames, ButtonSlots } from '@fluentui/react-components';\nimport type { SuggestionState } from './Suggestion.types';\n\nexport const suggestionClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fai-Suggestion',\n  icon: 'fai-Suggestion__icon',\n};\n\nconst useSuggestionStyles = makeStyles({\n  root: {\n    ...typographyStyles.caption1,\n    //  Brand/M365/140\n    ...shorthands.border('1px', 'solid', tokens.colorBrandStroke2),\n    borderRadius: tokens.borderRadiusXLarge,\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalS}`,\n    color: tokens.colorNeutralForeground2,\n    textAlign: 'start',\n    // remove this MQ once https://github.com/microsoft/fluentui/issues/28552 is resolved\n    // media queries have zero specificity\n  },\n  enabled: {\n    '@media (forced-colors: none)': {\n      ':hover': {\n        //  Brand/M365/120\n        ...shorthands.borderColor(tokens.colorBrandStroke2Hover),\n        color: tokens.colorBrandForeground2Hover,\n        backgroundColor: tokens.colorBrandBackground2Hover,\n      },\n      // Figma states 'on hover and pressed state'\n      ':active:hover': {\n        //  Brand/M365/120\n        ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n        color: tokens.colorBrandForeground2Pressed,\n        backgroundColor: tokens.colorBrandBackground2Pressed,\n      },\n    },\n  },\n  canvas: {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalM}`,\n  },\n});\n\nconst useNextStyles = makeStyles({\n  root: {\n    paddingHorizontal: tokens.spacingHorizontalM,\n    paddingVertical: tokens.spacingVerticalSNudge,\n    fontSize: tokens.fontSizeBase200,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    backgroundColor: tokens.colorSubtleBackground,\n  },\n  enabled: {\n    '@media (forced-colors: none)': {\n      ':hover': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke2),\n        color: tokens.colorNeutralForeground2Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active:hover': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke2),\n        color: tokens.colorNeutralForeground2Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n  },\n});\n\nexport const useSuggestionStyles_unstable = (state: SuggestionState): SuggestionState => {\n  'use no memo';\n\n  const { designVersion, mode } = state;\n\n  const styles = useSuggestionStyles();\n  const nextStyles = useNextStyles();\n  state.root.className = mergeClasses(\n    suggestionClassNames.root,\n    styles.root,\n    mode === 'canvas' && styles.canvas,\n    designVersion === 'next' && nextStyles.root,\n    !state.disabled && styles.enabled,\n    designVersion === 'next' && !state.disabled && nextStyles.enabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","suggestionClassNames","root","icon","useSuggestionStyles","caption1","border","colorBrandStroke2","borderRadius","borderRadiusXLarge","padding","spacingVerticalXS","spacingVerticalS","color","colorNeutralForeground2","textAlign","enabled","borderColor","colorBrandStroke2Hover","colorBrandForeground2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandStroke2Pressed","colorBrandForeground2Pressed","colorBrandBackground2Pressed","canvas","body1","spacingVerticalSNudge","spacingHorizontalM","useNextStyles","paddingHorizontal","paddingVertical","fontSize","fontSizeBase200","strokeWidthThin","colorNeutralStroke2","colorSubtleBackground","colorNeutralForeground2Hover","colorSubtleBackgroundHover","colorNeutralForeground2Pressed","colorSubtleBackgroundPressed","useSuggestionStyles_unstable","state","designVersion","mode","styles","nextStyles","className","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,6BAA6B;AAClF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAIpE,OAAO,MAAMC,uBAAoD;IAC/DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,sBAAsBR,WAAW;IACrCM,MAAM;QACJ,GAAGF,iBAAiBK,QAAQ;QAC5B,kBAAkB;QAClB,GAAGP,WAAWQ,MAAM,CAAC,OAAO,SAASP,OAAOQ,iBAAiB,CAAC;QAC9DC,cAAcT,OAAOU,kBAAkB;QACvCC,SAAS,CAAC,EAAEX,OAAOY,iBAAiB,CAAC,CAAC,EAAEZ,OAAOa,gBAAgB,CAAC,CAAC;QACjEC,OAAOd,OAAOe,uBAAuB;QACrCC,WAAW;IAGb;IACAC,SAAS;QACP,gCAAgC;YAC9B,UAAU;gBACR,kBAAkB;gBAClB,GAAGlB,WAAWmB,WAAW,CAAClB,OAAOmB,sBAAsB,CAAC;gBACxDL,OAAOd,OAAOoB,0BAA0B;gBACxCC,iBAAiBrB,OAAOsB,0BAA0B;YACpD;YACA,4CAA4C;YAC5C,iBAAiB;gBACf,kBAAkB;gBAClB,GAAGvB,WAAWmB,WAAW,CAAClB,OAAOuB,wBAAwB,CAAC;gBAC1DT,OAAOd,OAAOwB,4BAA4B;gBAC1CH,iBAAiBrB,OAAOyB,4BAA4B;YACtD;QACF;IACF;IACAC,QAAQ;QACN,GAAGzB,iBAAiB0B,KAAK;QACzBhB,SAAS,CAAC,EAAEX,OAAO4B,qBAAqB,CAAC,CAAC,EAAE5B,OAAO6B,kBAAkB,CAAC,CAAC;IACzE;AACF;AAEA,MAAMC,gBAAgBjC,WAAW;IAC/BM,MAAM;QACJ4B,mBAAmB/B,OAAO6B,kBAAkB;QAC5CG,iBAAiBhC,OAAO4B,qBAAqB;QAC7CK,UAAUjC,OAAOkC,eAAe;QAChC,GAAGnC,WAAWQ,MAAM,CAACP,OAAOmC,eAAe,EAAE,SAASnC,OAAOoC,mBAAmB,CAAC;QACjFf,iBAAiBrB,OAAOqC,qBAAqB;IAC/C;IACApB,SAAS;QACP,gCAAgC;YAC9B,UAAU;gBACR,GAAGlB,WAAWmB,WAAW,CAAClB,OAAOoC,mBAAmB,CAAC;gBACrDtB,OAAOd,OAAOsC,4BAA4B;gBAC1CjB,iBAAiBrB,OAAOuC,0BAA0B;YACpD;YACA,iBAAiB;gBACf,GAAGxC,WAAWmB,WAAW,CAAClB,OAAOoC,mBAAmB,CAAC;gBACrDtB,OAAOd,OAAOwC,8BAA8B;gBAC5CnB,iBAAiBrB,OAAOyC,4BAA4B;YACtD;QACF;IACF;AACF;AAEA,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGF;IAEhC,MAAMG,SAASzC;IACf,MAAM0C,aAAajB;IACnBa,MAAMxC,IAAI,CAAC6C,SAAS,GAAGlD,aACrBI,qBAAqBC,IAAI,EACzB2C,OAAO3C,IAAI,EACX0C,SAAS,YAAYC,OAAOpB,MAAM,EAClCkB,kBAAkB,UAAUG,WAAW5C,IAAI,EAC3C,CAACwC,MAAMM,QAAQ,IAAIH,OAAO7B,OAAO,EACjC2B,kBAAkB,UAAU,CAACD,MAAMM,QAAQ,IAAIF,WAAW9B,OAAO,EACjE0B,MAAMxC,IAAI,CAAC6C,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib/components/Suggestion/useSuggestionStyles.styles.raw.js

@@ -0,0 +1,69 @@
+import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';
+import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
+export const suggestionClassNames = {
+    root: 'fai-Suggestion',
+    icon: 'fai-Suggestion__icon'
+};
+const useSuggestionStyles = makeStyles({
+    root: {
+        ...typographyStyles.caption1,
+        //  Brand/M365/140
+        ...shorthands.border('1px', 'solid', tokens.colorBrandStroke2),
+        borderRadius: tokens.borderRadiusXLarge,
+        padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalS}`,
+        color: tokens.colorNeutralForeground2,
+        textAlign: 'start'
+    },
+    enabled: {
+        '@media (forced-colors: none)': {
+            ':hover': {
+                //  Brand/M365/120
+                ...shorthands.borderColor(tokens.colorBrandStroke2Hover),
+                color: tokens.colorBrandForeground2Hover,
+                backgroundColor: tokens.colorBrandBackground2Hover
+            },
+            // Figma states 'on hover and pressed state'
+            ':active:hover': {
+                //  Brand/M365/120
+                ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),
+                color: tokens.colorBrandForeground2Pressed,
+                backgroundColor: tokens.colorBrandBackground2Pressed
+            }
+        }
+    },
+    canvas: {
+        ...typographyStyles.body1,
+        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalM}`
+    }
+});
+const useNextStyles = makeStyles({
+    root: {
+        paddingHorizontal: tokens.spacingHorizontalM,
+        paddingVertical: tokens.spacingVerticalSNudge,
+        fontSize: tokens.fontSizeBase200,
+        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
+        backgroundColor: tokens.colorSubtleBackground
+    },
+    enabled: {
+        '@media (forced-colors: none)': {
+            ':hover': {
+                ...shorthands.borderColor(tokens.colorNeutralStroke2),
+                color: tokens.colorNeutralForeground2Hover,
+                backgroundColor: tokens.colorSubtleBackgroundHover
+            },
+            ':active:hover': {
+                ...shorthands.borderColor(tokens.colorNeutralStroke2),
+                color: tokens.colorNeutralForeground2Pressed,
+                backgroundColor: tokens.colorSubtleBackgroundPressed
+            }
+        }
+    }
+});
+export const useSuggestionStyles_unstable = (state)=>{
+    'use no memo';
+    const { designVersion, mode } = state;
+    const styles = useSuggestionStyles();
+    const nextStyles = useNextStyles();
+    state.root.className = mergeClasses(suggestionClassNames.root, styles.root, mode === 'canvas' && styles.canvas, designVersion === 'next' && nextStyles.root, !state.disabled && styles.enabled, designVersion === 'next' && !state.disabled && nextStyles.enabled, state.root.className);
+    return state;
+};

package/lib/components/Suggestion/useSuggestionStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { SlotClassNames, ButtonSlots } from '@fluentui/react-components';\nimport type { SuggestionState } from './Suggestion.types';\n\nexport const suggestionClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fai-Suggestion',\n  icon: 'fai-Suggestion__icon',\n};\n\nconst useSuggestionStyles = makeStyles({\n  root: {\n    ...typographyStyles.caption1,\n    //  Brand/M365/140\n    ...shorthands.border('1px', 'solid', tokens.colorBrandStroke2),\n    borderRadius: tokens.borderRadiusXLarge,\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalS}`,\n    color: tokens.colorNeutralForeground2,\n    textAlign: 'start',\n    // remove this MQ once https://github.com/microsoft/fluentui/issues/28552 is resolved\n    // media queries have zero specificity\n  },\n  enabled: {\n    '@media (forced-colors: none)': {\n      ':hover': {\n        //  Brand/M365/120\n        ...shorthands.borderColor(tokens.colorBrandStroke2Hover),\n        color: tokens.colorBrandForeground2Hover,\n        backgroundColor: tokens.colorBrandBackground2Hover,\n      },\n      // Figma states 'on hover and pressed state'\n      ':active:hover': {\n        //  Brand/M365/120\n        ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n        color: tokens.colorBrandForeground2Pressed,\n        backgroundColor: tokens.colorBrandBackground2Pressed,\n      },\n    },\n  },\n  canvas: {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalM}`,\n  },\n});\n\nconst useNextStyles = makeStyles({\n  root: {\n    paddingHorizontal: tokens.spacingHorizontalM,\n    paddingVertical: tokens.spacingVerticalSNudge,\n    fontSize: tokens.fontSizeBase200,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    backgroundColor: tokens.colorSubtleBackground,\n  },\n  enabled: {\n    '@media (forced-colors: none)': {\n      ':hover': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke2),\n        color: tokens.colorNeutralForeground2Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active:hover': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke2),\n        color: tokens.colorNeutralForeground2Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n  },\n});\n\nexport const useSuggestionStyles_unstable = (state: SuggestionState): SuggestionState => {\n  'use no memo';\n\n  const { designVersion, mode } = state;\n\n  const styles = useSuggestionStyles();\n  const nextStyles = useNextStyles();\n  state.root.className = mergeClasses(\n    suggestionClassNames.root,\n    styles.root,\n    mode === 'canvas' && styles.canvas,\n    designVersion === 'next' && nextStyles.root,\n    !state.disabled && styles.enabled,\n    designVersion === 'next' && !state.disabled && nextStyles.enabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","suggestionClassNames","root","icon","useSuggestionStyles","caption1","border","colorBrandStroke2","borderRadius","borderRadiusXLarge","padding","spacingVerticalXS","spacingVerticalS","color","colorNeutralForeground2","textAlign","enabled","borderColor","colorBrandStroke2Hover","colorBrandForeground2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandStroke2Pressed","colorBrandForeground2Pressed","colorBrandBackground2Pressed","canvas","body1","spacingVerticalSNudge","spacingHorizontalM","useNextStyles","paddingHorizontal","paddingVertical","fontSize","fontSizeBase200","strokeWidthThin","colorNeutralStroke2","colorSubtleBackground","colorNeutralForeground2Hover","colorSubtleBackgroundHover","colorNeutralForeground2Pressed","colorSubtleBackgroundPressed","useSuggestionStyles_unstable","state","designVersion","mode","styles","nextStyles","className","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,6BAA6B;AAClF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAIpE,OAAO,MAAMC,uBAAoD;IAC/DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,sBAAsBR,WAAW;IACrCM,MAAM;QACJ,GAAGF,iBAAiBK,QAAQ;QAC5B,kBAAkB;QAClB,GAAGP,WAAWQ,MAAM,CAAC,OAAO,SAASP,OAAOQ,iBAAiB,CAAC;QAC9DC,cAAcT,OAAOU,kBAAkB;QACvCC,SAAS,CAAC,EAAEX,OAAOY,iBAAiB,CAAC,CAAC,EAAEZ,OAAOa,gBAAgB,CAAC,CAAC;QACjEC,OAAOd,OAAOe,uBAAuB;QACrCC,WAAW;IAGb;IACAC,SAAS;QACP,gCAAgC;YAC9B,UAAU;gBACR,kBAAkB;gBAClB,GAAGlB,WAAWmB,WAAW,CAAClB,OAAOmB,sBAAsB,CAAC;gBACxDL,OAAOd,OAAOoB,0BAA0B;gBACxCC,iBAAiBrB,OAAOsB,0BAA0B;YACpD;YACA,4CAA4C;YAC5C,iBAAiB;gBACf,kBAAkB;gBAClB,GAAGvB,WAAWmB,WAAW,CAAClB,OAAOuB,wBAAwB,CAAC;gBAC1DT,OAAOd,OAAOwB,4BAA4B;gBAC1CH,iBAAiBrB,OAAOyB,4BAA4B;YACtD;QACF;IACF;IACAC,QAAQ;QACN,GAAGzB,iBAAiB0B,KAAK;QACzBhB,SAAS,CAAC,EAAEX,OAAO4B,qBAAqB,CAAC,CAAC,EAAE5B,OAAO6B,kBAAkB,CAAC,CAAC;IACzE;AACF;AAEA,MAAMC,gBAAgBjC,WAAW;IAC/BM,MAAM;QACJ4B,mBAAmB/B,OAAO6B,kBAAkB;QAC5CG,iBAAiBhC,OAAO4B,qBAAqB;QAC7CK,UAAUjC,OAAOkC,eAAe;QAChC,GAAGnC,WAAWQ,MAAM,CAACP,OAAOmC,eAAe,EAAE,SAASnC,OAAOoC,mBAAmB,CAAC;QACjFf,iBAAiBrB,OAAOqC,qBAAqB;IAC/C;IACApB,SAAS;QACP,gCAAgC;YAC9B,UAAU;gBACR,GAAGlB,WAAWmB,WAAW,CAAClB,OAAOoC,mBAAmB,CAAC;gBACrDtB,OAAOd,OAAOsC,4BAA4B;gBAC1CjB,iBAAiBrB,OAAOuC,0BAA0B;YACpD;YACA,iBAAiB;gBACf,GAAGxC,WAAWmB,WAAW,CAAClB,OAAOoC,mBAAmB,CAAC;gBACrDtB,OAAOd,OAAOwC,8BAA8B;gBAC5CnB,iBAAiBrB,OAAOyC,4BAA4B;YACtD;QACF;IACF;AACF;AAEA,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGF;IAEhC,MAAMG,SAASzC;IACf,MAAM0C,aAAajB;IACnBa,MAAMxC,IAAI,CAAC6C,SAAS,GAAGlD,aACrBI,qBAAqBC,IAAI,EACzB2C,OAAO3C,IAAI,EACX0C,SAAS,YAAYC,OAAOpB,MAAM,EAClCkB,kBAAkB,UAAUG,WAAW5C,IAAI,EAC3C,CAACwC,MAAMM,QAAQ,IAAIH,OAAO7B,OAAO,EACjC2B,kBAAkB,UAAU,CAACD,MAAMM,QAAQ,IAAIF,WAAW9B,OAAO,EACjE0B,MAAMxC,IAAI,CAAC6C,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib/components/SuggestionList/SuggestionList.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useSuggestionList_unstable } from './useSuggestionList';
+import { renderSuggestionList_unstable } from './renderSuggestionList';
+import { useSuggestionListStyles_unstable } from './useSuggestionListStyles.styles';
+import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
+// SuggestionList component - TODO: add more docs
+export const SuggestionList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSuggestionList_unstable(props, ref);
+    useSuggestionListStyles_unstable(state);
+    useCustomStyleHook('useSuggestionListStyles')(state);
+    return renderSuggestionList_unstable(state);
+});
+SuggestionList.displayName = 'SuggestionList';

package/lib/components/SuggestionList/SuggestionList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SuggestionList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSuggestionList_unstable } from './useSuggestionList';\nimport { renderSuggestionList_unstable } from './renderSuggestionList';\nimport { useSuggestionListStyles_unstable } from './useSuggestionListStyles.styles';\nimport type { SuggestionListProps } from './SuggestionList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// SuggestionList component - TODO: add more docs\nexport const SuggestionList: ForwardRefComponent<SuggestionListProps> = React.forwardRef((props, ref) => {\n  const state = useSuggestionList_unstable(props, ref);\n\n  useSuggestionListStyles_unstable(state);\n  useCustomStyleHook('useSuggestionListStyles')(state);\n\n  return renderSuggestionList_unstable(state);\n});\n\nSuggestionList.displayName = 'SuggestionList';\n"],"names":["React","useSuggestionList_unstable","renderSuggestionList_unstable","useSuggestionListStyles_unstable","useCustomStyleHook","SuggestionList","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;AAGpF,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE,iDAAiD;AACjD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,mBAAmB,2BAA2BK;IAE9C,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib/components/SuggestionList/SuggestionList.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["SuggestionList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot, TooltipProps } from '@fluentui/react-components';\n\nexport type TooltipComponent = React.FunctionComponent<Partial<TooltipProps>>;\n\nexport type SuggestionListSlots = {\n  root: Slot<'div'>;\n  action?: Slot<'span'>;\n};\n\n/**\n * SuggestionList Props\n */\nexport type SuggestionListProps = ComponentProps<SuggestionListSlots> & {\n  /**\n   * The horizontal alignment of the SuggestionsList.\n   * @default 'end'\n   */\n  horizontalAlignment?: 'start' | 'end';\n};\n\n/**\n * State used in rendering SuggestionList\n */\nexport type SuggestionListState = ComponentState<SuggestionListSlots> &\n  Required<Pick<SuggestionListProps, 'horizontalAlignment'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoBA;;CAEC,GACD,WAC6D"}

package/lib/components/SuggestionList/index.js

@@ -0,0 +1,4 @@
+export { SuggestionList } from './SuggestionList';
+export { renderSuggestionList_unstable } from './renderSuggestionList';
+export { useSuggestionList_unstable } from './useSuggestionList';
+export { suggestionListClassNames, useSuggestionListStyles_unstable } from './useSuggestionListStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { SuggestionList } from './SuggestionList';\nexport type { SuggestionListProps, SuggestionListSlots, SuggestionListState, TooltipComponent } from './SuggestionList.types';\nexport { renderSuggestionList_unstable } from './renderSuggestionList';\nexport { useSuggestionList_unstable } from './useSuggestionList';\nexport { suggestionListClassNames, useSuggestionListStyles_unstable } from './useSuggestionListStyles.styles';\n"],"names":["SuggestionList","renderSuggestionList_unstable","useSuggestionList_unstable","suggestionListClassNames","useSuggestionListStyles_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/SuggestionList/renderSuggestionList.js

@@ -0,0 +1,13 @@
+  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 SuggestionList
+ */ export const renderSuggestionList_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.root.children,
+            state.action && /*#__PURE__*/ _jsx(state.action, {})
+        ]
+    });
+};

package/lib/components/SuggestionList/renderSuggestionList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderSuggestionList.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 { SuggestionListState, SuggestionListSlots } from './SuggestionList.types';\n\n/**\n * Render the final JSX of SuggestionList\n */\nexport const renderSuggestionList_unstable = (state: SuggestionListState): JSXElement => {\n  assertSlots<SuggestionListSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSuggestionList_unstable","state","root","children","action"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAIzD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IAEjC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,MAAM,kBAAI,KAACH,MAAMG,MAAM;;;AAGpC,EAAE"}

package/lib/components/SuggestionList/useSuggestionList.js

@@ -0,0 +1,35 @@
+import { getIntrinsicElementProps, slot, useArrowNavigationGroup } from '@fluentui/react-components';
+// If you add JSX to this file, be sure to change the file type to .tsx
+/**
+ * Create the state required to render SuggestionList.
+ *
+ * The returned state can be modified with hooks such as useSuggestionListStyles_unstable,
+ * before being passed to renderSuggestionList_unstable.
+ *
+ * @param props - props from this instance of SuggestionList
+ * @param ref - reference to root HTMLElement of SuggestionList
+ */ export const useSuggestionList_unstable = (props, ref)=>{
+    const { action, horizontalAlignment = 'end' } = props;
+    return {
+        horizontalAlignment,
+        components: {
+            root: 'div',
+            action: 'span'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            role: 'toolbar',
+            'aria-label': 'suggestions',
+            ...props,
+            ...useArrowNavigationGroup({
+                axis: 'both',
+                circular: true
+            })
+        }), {
+            elementType: 'div'
+        }),
+        action: slot.optional(action, {
+            elementType: 'span'
+        })
+    };
+};

package/lib/components/SuggestionList/useSuggestionList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useSuggestionList.tsx"],"sourcesContent":["import { getIntrinsicElementProps, slot, useArrowNavigationGroup } from '@fluentui/react-components';\nimport type { SuggestionListProps, SuggestionListState } from './SuggestionList.types';\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 SuggestionList.\n *\n * The returned state can be modified with hooks such as useSuggestionListStyles_unstable,\n * before being passed to renderSuggestionList_unstable.\n *\n * @param props - props from this instance of SuggestionList\n * @param ref - reference to root HTMLElement of SuggestionList\n */\nexport const useSuggestionList_unstable = (\n  props: SuggestionListProps,\n  ref: React.Ref<HTMLDivElement>,\n): SuggestionListState => {\n  const { action, horizontalAlignment = 'end' } = props;\n  return {\n    horizontalAlignment,\n    components: {\n      root: 'div',\n      action: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'toolbar',\n        'aria-label': 'suggestions',\n        ...props,\n        ...useArrowNavigationGroup({ axis: 'both', circular: true }),\n      }),\n      { elementType: 'div' },\n    ),\n    action: slot.optional(action, { elementType: 'span' }),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useArrowNavigationGroup","useSuggestionList_unstable","props","ref","action","horizontalAlignment","components","root","always","role","axis","circular","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,uBAAuB,QAAQ,6BAA6B;AAGrG,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAEC,sBAAsB,KAAK,EAAE,GAAGH;IAChD,OAAO;QACLG;QACAC,YAAY;YACVC,MAAM;YACNH,QAAQ;QACV;QACAG,MAAMR,KAAKS,MAAM,CACfV,yBAAyB,OAAO;YAC9BK;YACAM,MAAM;YACN,cAAc;YACd,GAAGP,KAAK;YACR,GAAGF,wBAAwB;gBAAEU,MAAM;gBAAQC,UAAU;YAAK,EAAE;QAC9D,IACA;YAAEC,aAAa;QAAM;QAEvBR,QAAQL,KAAKc,QAAQ,CAACT,QAAQ;YAAEQ,aAAa;QAAO;IACtD;AACF,EAAE"}

package/lib/components/SuggestionList/useSuggestionListStyles.styles.js

@@ -0,0 +1,54 @@
+import { __styles, mergeClasses } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const suggestionListClassNames = {
+  root: 'fai-SuggestionList',
+  action: 'fai-SuggestionList__action'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = __styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Eh141a: "fni485r",
+    Brf1p80: "f9c4gz4",
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "f1yhwmi5",
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: ["f4bgq6r", "f83tq75"],
+    Beptln2: "fr3gje9"
+  },
+  horizontalAlignmentStart: {
+    Brf1p80: "fbhxue7"
+  },
+  action: {
+    Bf4jedk: "f79feoa",
+    B2u0y6b: "f1cs043"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".fni485r{flex-wrap:wrap;}", ".f9c4gz4{justify-content:flex-end;}", [".f1yhwmi5{gap:var(--spacingVerticalS);}", {
+    p: -1
+  }], [".f4bgq6r{margin:var(--spacingVerticalNone) var(--spacingHorizontalNone) var(--spacingVerticalS) var(--spacingHorizontalNone);}", {
+    p: -1
+  }], [".f83tq75{margin:var(--spacingVerticalNone) var(--spacingHorizontalNone) var(--spacingVerticalS) var(--spacingHorizontalNone);}", {
+    p: -1
+  }], ".fr3gje9>:nth-last-of-type(2){max-width:calc(100% - var(--spacingHorizontalXXL) - var(--spacingVerticalS));}", ".fbhxue7{justify-content:flex-start;}", ".f79feoa{min-width:var(--spacingHorizontalXXL);}", ".f1cs043{max-width:var(--spacingHorizontalXXL);}"]
+});
+/**
+ * Apply styling to the SuggestionList slots based on the state
+ */
+export const useSuggestionListStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(suggestionListClassNames.root, styles.root, state.horizontalAlignment === 'start' && styles.horizontalAlignmentStart, state.root.className);
+  if (state.action) {
+    state.action.className = mergeClasses(suggestionListClassNames.action, styles.action, state.action.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useSuggestionListStyles.styles.js.map

package/lib/components/SuggestionList/useSuggestionListStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { SuggestionListSlots, SuggestionListState } from './SuggestionList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const suggestionListClassNames: SlotClassNames<SuggestionListSlots> = {\n  root: 'fai-SuggestionList',\n  action: 'fai-SuggestionList__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'flex-end',\n    gap: tokens.spacingVerticalS,\n    margin: `\n      ${tokens.spacingVerticalNone}\n      ${tokens.spacingHorizontalNone}\n      ${tokens.spacingVerticalS}\n      ${tokens.spacingHorizontalNone}\n    `,\n    '> :nth-last-of-type(2)': {\n      maxWidth: `calc(100% - ${tokens.spacingHorizontalXXL} - ${tokens.spacingVerticalS})`,\n    },\n  },\n  horizontalAlignmentStart: {\n    justifyContent: 'flex-start',\n  },\n\n  action: {\n    minWidth: tokens.spacingHorizontalXXL,\n    maxWidth: tokens.spacingHorizontalXXL,\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the SuggestionList slots based on the state\n */\nexport const useSuggestionListStyles_unstable = (state: SuggestionListState): SuggestionListState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    suggestionListClassNames.root,\n    styles.root,\n    state.horizontalAlignment === 'start' && styles.horizontalAlignmentStart,\n    state.root.className,\n  );\n\n  if (state.action) {\n    state.action.className = mergeClasses(suggestionListClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","suggestionListClassNames","root","action","useStyles","display","flexWrap","justifyContent","gap","spacingVerticalS","margin","spacingVerticalNone","spacingHorizontalNone","maxWidth","spacingHorizontalXXL","horizontalAlignmentStart","minWidth","useSuggestionListStyles_unstable","state","styles","className","horizontalAlignment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AACtE,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,SAAS;QACTC,UAAU;QACVC,gBAAgB;QAChBC,KAAKR,OAAOS,gBAAgB;QAC5BC,QAAQ,CAAC;MACP,EAAEV,OAAOW,mBAAmB,CAAC;MAC7B,EAAEX,OAAOY,qBAAqB,CAAC;MAC/B,EAAEZ,OAAOS,gBAAgB,CAAC;MAC1B,EAAET,OAAOY,qBAAqB,CAAC;IACjC,CAAC;QACD,0BAA0B;YACxBC,UAAU,CAAC,YAAY,EAAEb,OAAOc,oBAAoB,CAAC,GAAG,EAAEd,OAAOS,gBAAgB,CAAC,CAAC,CAAC;QACtF;IACF;IACAM,0BAA0B;QACxBR,gBAAgB;IAClB;IAEAJ,QAAQ;QACNa,UAAUhB,OAAOc,oBAAoB;QACrCD,UAAUb,OAAOc,oBAAoB;IACvC;AAGF;AAEA;;CAEC,GACD,OAAO,MAAMG,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASf;IACfc,MAAMhB,IAAI,CAACkB,SAAS,GAAGrB,aACrBE,yBAAyBC,IAAI,EAC7BiB,OAAOjB,IAAI,EACXgB,MAAMG,mBAAmB,KAAK,WAAWF,OAAOJ,wBAAwB,EACxEG,MAAMhB,IAAI,CAACkB,SAAS;IAGtB,IAAIF,MAAMf,MAAM,EAAE;QAChBe,MAAMf,MAAM,CAACiB,SAAS,GAAGrB,aAAaE,yBAAyBE,MAAM,EAAEgB,OAAOhB,MAAM,EAAEe,MAAMf,MAAM,CAACiB,SAAS;IAC9G;IAEA,OAAOF;AACT,EAAE"}