@fluentui-copilot/react-suggestions 0.8.4 → 0.9.0

package/CHANGELOG.json

@@ -2,7 +2,42 @@
   "name": "@fluentui-copilot/react-suggestions",
   "entries": [
     {
-      "date": "Tue, 23 Jul 2024 00:55:17 GMT",
+      "date": "Wed, 21 Aug 2024 00:24:50 GMT",
+      "tag": "@fluentui-copilot/react-suggestions_v0.9.0",
+      "version": "0.9.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui-copilot/react-suggestions",
+            "commit": "bb3b08691d41053c5b7808c770dd82565048bd75",
+            "comment": "fix: Add canvas styling to Suggestion"
+          }
+        ],
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui-copilot/react-suggestions",
+            "commit": "0a6327b6b174fc99abed7fa70ed0542e698bcf40",
+            "comment": "chore: bump react-components version to 9.54.10."
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui-copilot/react-suggestions",
+            "commit": "907c63c4da894b41cad4601b30e0df6d9f269056",
+            "comment": "chore: Bumping versions of @fluentui/* and @griffel/* packages to latest (corresponding to version 9.54.8 of @fluentui/react-components)."
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui-copilot/react-suggestions",
+            "commit": "6ce23774f5f2055977299510e8df454d86a1a313",
+            "comment": "chore: Removing shorthands' usage now that griffel supports them."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 23 Jul 2024 00:56:25 GMT",
       "tag": "@fluentui-copilot/react-suggestions_v0.8.4",
       "version": "0.8.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui-copilot/react-suggestions
 
-This log was last generated on Tue, 23 Jul 2024 00:55:17 GMT and should not be manually modified.
+This log was last generated on Wed, 21 Aug 2024 00:24:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.9.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.9.0)
+
+Wed, 21 Aug 2024 00:24:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.8.4..@fluentui-copilot/react-suggestions_v0.9.0)
+
+### Minor changes
+
+- fix: Add canvas styling to Suggestion ([PR #2010](https://github.com/microsoft/fluentai/pull/2010) by ololubek@microsoft.com)
+
+### Patches
+
+- chore: bump react-components version to 9.54.10. ([PR #2018](https://github.com/microsoft/fluentai/pull/2018) by ololubek@microsoft.com)
+- chore: Bumping versions of @fluentui/* and @griffel/* packages to latest (corresponding to version 9.54.8 of @fluentui/react-components). ([PR #1993](https://github.com/microsoft/fluentai/pull/1993) by Humberto.Morimoto@microsoft.com)
+- chore: Removing shorthands' usage now that griffel supports them. ([PR #1994](https://github.com/microsoft/fluentai/pull/1994) by Humberto.Morimoto@microsoft.com)
+
 ## [0.8.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.8.4)
 
-Tue, 23 Jul 2024 00:55:17 GMT 
+Tue, 23 Jul 2024 00:56:25 GMT 
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.8.3..@fluentui-copilot/react-suggestions_v0.8.4)
 
 ### Patches

package/dist/index.d.ts

@@ -6,6 +6,7 @@ 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 { ForwardRefComponent } from '@fluentui/react-components';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-components';
@@ -17,7 +18,7 @@ import type { TooltipProps } from '@fluentui/react-components';
  */
 export declare const renderSuggestionList_unstable: (state: SuggestionListState) => JSX.Element;
 
-export declare const Suggestion: ForwardRefComponent<ButtonProps>;
+export declare const Suggestion: ForwardRefComponent<SuggestionProps>;
 
 export declare const suggestionClassNames: SlotClassNames<ButtonSlots>;
 
@@ -50,6 +51,12 @@ export declare type SuggestionListSlots = {
  */
 export declare type SuggestionListState = ComponentState<SuggestionListSlots>;
 
+declare type SuggestionProps = CopilotMode & ComponentProps<SuggestionSlots> & Omit<ButtonProps, keyof ButtonSlots>;
+
+declare type SuggestionSlots = ButtonSlots;
+
+declare type SuggestionState = ComponentState<SuggestionSlots> & Required<Pick<SuggestionProps, 'mode'>> & Omit<ButtonState, keyof ButtonSlots>;
+
 export declare type TooltipComponent = React.FunctionComponent<Partial<TooltipProps>>;
 
 /**
@@ -68,6 +75,6 @@ export declare const useSuggestionList_unstable: (props: SuggestionListProps, re
  */
 export declare const useSuggestionListStyles_unstable: (state: SuggestionListState) => SuggestionListState;
 
-export declare const useSuggestionStyles_unstable: (state: ButtonState) => ButtonState;
+export declare const useSuggestionStyles_unstable: (state: SuggestionState) => SuggestionState;
 
 export { }

package/lib/components/Suggestion/Suggestion.js

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { useSuggestionStyles_unstable } from './useSuggestionStyles.styles';
-import { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-components';
+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 = useButton_unstable(props, ref);
+  const state = useSuggestion_unstable(props, ref);
   state.appearance = props.appearance || 'outline';
   useButtonStyles_unstable(state);
   useSuggestionStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["Suggestion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSuggestionStyles_unstable } from './useSuggestionStyles.styles';\nimport type { ButtonProps, ForwardRefComponent } from '@fluentui/react-components';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// Suggestion component - TODO: add more docs\nexport const Suggestion: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  'use no memo';\n\n  const state = useButton_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","useButton_unstable","useCustomStyleHook","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,EAAEC,kBAAkB,QAAQ,6BAA6B;AACjH,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE,6CAA6C;AAC7C,OAAO,MAAMC,2BAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF;IAEA,MAAMC,QAAQN,mBAAmBI,OAAOC;IACxCC,MAAMC,UAAU,GAAGH,MAAMG,UAAU,IAAI;IACvCR,yBAAyBO;IACzBT,6BAA6BS;IAC7BL,mBAAmB,uBAAuBK;IAE1C,OAAOR,sBAAsBQ;AAC/B,GAAG;AAEHJ,WAAWM,WAAW,GAAG"}
+{"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,2 @@
+export {};
+//# sourceMappingURL=Suggestion.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Suggestion.types.ts"],"sourcesContent":["import type { CopilotMode } 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 & ComponentProps<SuggestionSlots> & Omit<ButtonProps, keyof ButtonSlots>;\n\nexport type SuggestionState = ComponentState<SuggestionSlots> &\n  Required<Pick<SuggestionProps, 'mode'>> &\n  Omit<ButtonState, keyof ButtonSlots>;\n"],"names":[],"rangeMappings":"","mappings":"AAOA,WAEuC"}

package/lib/components/Suggestion/useSuggestion.js

@@ -0,0 +1,11 @@
+import { useButton_unstable } from '@fluentui/react-components';
+import { useCopilotMode } from '@fluentui-copilot/react-provider';
+export const useSuggestion_unstable = (props, ref) => {
+  const buttonState = useButton_unstable(props, ref);
+  const mode = useCopilotMode(props.mode);
+  return {
+    ...buttonState,
+    mode
+  };
+};
+//# sourceMappingURL=useSuggestion.js.map

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 } from '@fluentui-copilot/react-provider';\nimport type { SuggestionProps } from './Suggestion.types';\n\nexport const useSuggestion_unstable = (\n  props: SuggestionProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n) => {\n  const buttonState = useButton_unstable(props, ref);\n  const mode = useCopilotMode(props.mode);\n  return { ...buttonState, mode };\n};\n"],"names":["useButton_unstable","useCopilotMode","useSuggestion_unstable","props","ref","buttonState","mode"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,SAASA,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,OAAO,MAAMC,yBAAyB,CACpCC,OACAC;IAEA,MAAMC,cAAcL,mBAAmBG,OAAOC;IAC9C,MAAME,OAAOL,eAAeE,MAAMG,IAAI;IACtC,OAAO;QAAE,GAAGD,WAAW;QAAEC;IAAK;AAChC,EAAE"}

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

@@ -21,14 +21,16 @@ const useSuggestionStylesStyles = __styles({
     h3c5rm: ["f1c8dzaj", "f1sl6hi9"],
     B9xav0g: "f1619yhw",
     zhjwy3: ["f1sl6hi9", "f1c8dzaj"],
-    Bbmb7ep: ["fnivh3a", "fc7yr5o"],
-    Beyfa6y: ["fc7yr5o", "fnivh3a"],
-    B7oj6ja: ["f1el4m67", "f8yange"],
-    Btl43ni: ["f8yange", "f1el4m67"],
-    z8tnut: "f1ywm7hm",
-    z189sj: ["f1yjm1ar", "f1egtk6x"],
-    Byoj8tv: "f14wxoun",
-    uwmqm3: ["f1egtk6x", "f1yjm1ar"],
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fcca7b8",
     sj55zd: "fkfq4zb",
     fsow6f: "fpgzoln"
   },
@@ -45,9 +47,21 @@ const useSuggestionStylesStyles = __styles({
     H566xl: ["f1u9p12n", "fs1n9un"],
     a9g2gr: "fezean8",
     rgbxn1: "f1yr11xb"
+  },
+  canvas: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    z8tnut: "fp2oml8",
+    Byoj8tv: "f1tdddsa"
   }
 }, {
-  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);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f1yjm1ar{padding-right:var(--spacingVerticalS);}", ".f1egtk6x{padding-left:var(--spacingVerticalS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fpgzoln{text-align:start;}"],
+  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);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}"],
   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);}}", {
@@ -74,7 +88,7 @@ export const useSuggestionStyles_unstable = state => {
   'use no memo';
 
   const styles = useSuggestionStylesStyles();
-  state.root.className = mergeClasses(suggestionClassNames.root, styles.root, !state.disabled && styles.enabled, state.root.className);
+  state.root.className = mergeClasses(suggestionClassNames.root, styles.root, state.mode === 'canvas' && styles.canvas, !state.disabled && styles.enabled, state.root.className);
   return state;
 };
 //# sourceMappingURL=useSuggestionStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { SlotClassNames, ButtonSlots, ButtonState } from '@fluentui/react-components';\n\nexport const suggestionClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fai-Suggestion',\n  icon: 'fai-Suggestion__icon',\n};\n\nconst useSuggestionStylesStyles = makeStyles({\n  root: {\n    ...typographyStyles.caption1,\n    //  Brand/M365/140\n    ...shorthands.border('1px', 'solid', tokens.colorBrandStroke2),\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n    ...shorthands.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});\n\nexport const useSuggestionStyles_unstable = (state: ButtonState): ButtonState => {\n  'use no memo';\n\n  const styles = useSuggestionStylesStyles();\n  state.root.className = mergeClasses(\n    suggestionClassNames.root,\n    styles.root,\n    !state.disabled && styles.enabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","suggestionClassNames","root","icon","useSuggestionStylesStyles","caption1","border","colorBrandStroke2","borderRadius","borderRadiusXLarge","padding","spacingVerticalXS","spacingVerticalS","color","colorNeutralForeground2","textAlign","enabled","borderColor","colorBrandStroke2Hover","colorBrandForeground2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandStroke2Pressed","colorBrandForeground2Pressed","colorBrandBackground2Pressed","useSuggestionStyles_unstable","state","styles","className","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAG5G,OAAO,MAAMC,uBAAoD;IAC/DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,4BAA4BR,WAAW;IAC3CM,MAAM;QACJ,GAAGF,iBAAiBK,QAAQ;QAC5B,kBAAkB;QAClB,GAAGP,WAAWQ,MAAM,CAAC,OAAO,SAASP,OAAOQ,iBAAiB,CAAC;QAC9D,GAAGT,WAAWU,YAAY,CAACT,OAAOU,kBAAkB,CAAC;QACrD,GAAGX,WAAWY,OAAO,CAACX,OAAOY,iBAAiB,EAAEZ,OAAOa,gBAAgB,CAAC;QACxEC,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;AACF;AAEA,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASvB;IACfsB,MAAMxB,IAAI,CAAC0B,SAAS,GAAG/B,aACrBI,qBAAqBC,IAAI,EACzByB,OAAOzB,IAAI,EACX,CAACwB,MAAMG,QAAQ,IAAIF,OAAOX,OAAO,EACjCU,MAAMxB,IAAI,CAAC0B,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\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 useSuggestionStylesStyles = 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    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n  },\n});\n\nexport const useSuggestionStyles_unstable = (state: SuggestionState): SuggestionState => {\n  'use no memo';\n\n  const styles = useSuggestionStylesStyles();\n  state.root.className = mergeClasses(\n    suggestionClassNames.root,\n    styles.root,\n    state.mode === 'canvas' && styles.canvas,\n    !state.disabled && styles.enabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","suggestionClassNames","root","icon","useSuggestionStylesStyles","caption1","border","colorBrandStroke2","borderRadius","borderRadiusXLarge","padding","spacingVerticalXS","spacingVerticalS","color","colorNeutralForeground2","textAlign","enabled","borderColor","colorBrandStroke2Hover","colorBrandForeground2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandStroke2Pressed","colorBrandForeground2Pressed","colorBrandBackground2Pressed","canvas","body1","paddingTop","spacingVerticalSNudge","paddingBottom","useSuggestionStyles_unstable","state","styles","className","mode","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAI5G,OAAO,MAAMC,uBAAoD;IAC/DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,4BAA4BR,WAAW;IAC3CM,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;QACzBC,YAAY5B,OAAO6B,qBAAqB;QACxCC,eAAe9B,OAAO6B,qBAAqB;IAC7C;AACF;AAEA,OAAO,MAAME,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAAS5B;IACf2B,MAAM7B,IAAI,CAAC+B,SAAS,GAAGpC,aACrBI,qBAAqBC,IAAI,EACzB8B,OAAO9B,IAAI,EACX6B,MAAMG,IAAI,KAAK,YAAYF,OAAOP,MAAM,EACxC,CAACM,MAAMI,QAAQ,IAAIH,OAAOhB,OAAO,EACjCe,MAAM7B,IAAI,CAAC+B,SAAS;IAGtB,OAAOF;AACT,EAAE"}

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

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
+import { __styles, mergeClasses, tokens } from '@fluentui/react-components';
 export const suggestionListClassNames = {
   root: 'fai-SuggestionList',
   reload: 'fai-SuggestionList__reload',
@@ -13,12 +13,14 @@ const useStyles = __styles({
     mc9l5x: "f22iagw",
     Eh141a: "fni485r",
     Brf1p80: "f9c4gz4",
-    i8kkvl: "f7wn8md",
-    Belr9w4: "f1wn3y0l",
-    B6of3ja: "f10saiw2",
-    t21cq0: ["f1osuteh", "f62i5r0"],
-    jrapky: "fqcjy3b",
-    Frg6f3: ["f62i5r0", "f1osuteh"],
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "f1yhwmi5",
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: ["f4bgq6r", "f83tq75"],
     Beptln2: "fr3gje9"
   },
   reload: {
@@ -30,7 +32,13 @@ const useStyles = __styles({
     B2u0y6b: "f1cs043"
   }
 }, {
-  d: [".f22iagw{display:flex;}", ".fni485r{flex-wrap:wrap;}", ".f9c4gz4{justify-content:flex-end;}", ".f7wn8md{column-gap:var(--spacingVerticalS);}", ".f1wn3y0l{row-gap:var(--spacingVerticalS);}", ".f10saiw2{margin-top:var(--spacingVerticalNone);}", ".f1osuteh{margin-right:var(--spacingHorizontalNone);}", ".f62i5r0{margin-left:var(--spacingHorizontalNone);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".fr3gje9>:nth-last-of-type(2){max-width:calc(100% - var(--spacingHorizontalXXL) - var(--spacingVerticalS));}", ".f79feoa{min-width:var(--spacingHorizontalXXL);}", ".f1cs043{max-width:var(--spacingHorizontalXXL);}"]
+  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));}", ".f79feoa{min-width:var(--spacingHorizontalXXL);}", ".f1cs043{max-width:var(--spacingHorizontalXXL);}"]
 });
 /**
  * Apply styling to the SuggestionList slots based on the state

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

@@ -1 +1 @@
-{"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';\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  reload: 'fai-SuggestionList__reload',\n  reloadTooltip: 'fai-SuggestionList__reloadTooltip',\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    ...shorthands.gap(tokens.spacingVerticalS),\n    ...shorthands.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  reload: {\n    minWidth: tokens.spacingHorizontalXXL,\n    maxWidth: tokens.spacingHorizontalXXL,\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(suggestionListClassNames.root, styles.root, state.root.className);\n\n  if (state.reload) {\n    state.reload.className = mergeClasses(suggestionListClassNames.reload, styles.reload, state.reload.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","shorthands","tokens","suggestionListClassNames","root","reload","reloadTooltip","action","useStyles","display","flexWrap","justifyContent","gap","spacingVerticalS","margin","spacingVerticalNone","spacingHorizontalNone","maxWidth","spacingHorizontalXXL","minWidth","useSuggestionListStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAI1F,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,QAAQ;IACRC,eAAe;IACfC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BK,MAAM;QACJK,SAAS;QACTC,UAAU;QACVC,gBAAgB;QAChB,GAAGV,WAAWW,GAAG,CAACV,OAAOW,gBAAgB,CAAC;QAC1C,GAAGZ,WAAWa,MAAM,CAClBZ,OAAOa,mBAAmB,EAC1Bb,OAAOc,qBAAqB,EAC5Bd,OAAOW,gBAAgB,EACvBX,OAAOc,qBAAqB,CAC7B;QACD,0BAA0B;YACxBC,UAAU,CAAC,YAAY,EAAEf,OAAOgB,oBAAoB,CAAC,GAAG,EAAEhB,OAAOW,gBAAgB,CAAC,CAAC,CAAC;QACtF;IACF;IACAR,QAAQ;QACNc,UAAUjB,OAAOgB,oBAAoB;QACrCD,UAAUf,OAAOgB,oBAAoB;IACvC;IAEAX,QAAQ;QACNY,UAAUjB,OAAOgB,oBAAoB;QACrCD,UAAUf,OAAOgB,oBAAoB;IACvC;AAGF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASd;IACfa,MAAMjB,IAAI,CAACmB,SAAS,GAAGvB,aAAaG,yBAAyBC,IAAI,EAAEkB,OAAOlB,IAAI,EAAEiB,MAAMjB,IAAI,CAACmB,SAAS;IAEpG,IAAIF,MAAMhB,MAAM,EAAE;QAChBgB,MAAMhB,MAAM,CAACkB,SAAS,GAAGvB,aAAaG,yBAAyBE,MAAM,EAAEiB,OAAOjB,MAAM,EAAEgB,MAAMhB,MAAM,CAACkB,SAAS;IAC9G;IAEA,IAAIF,MAAMd,MAAM,EAAE;QAChBc,MAAMd,MAAM,CAACgB,SAAS,GAAGvB,aAAaG,yBAAyBI,MAAM,EAAEe,OAAOf,MAAM,EAAEc,MAAMd,MAAM,CAACgB,SAAS;IAC9G;IAEA,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\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  reload: 'fai-SuggestionList__reload',\n  reloadTooltip: 'fai-SuggestionList__reloadTooltip',\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  reload: {\n    minWidth: tokens.spacingHorizontalXXL,\n    maxWidth: tokens.spacingHorizontalXXL,\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(suggestionListClassNames.root, styles.root, state.root.className);\n\n  if (state.reload) {\n    state.reload.className = mergeClasses(suggestionListClassNames.reload, styles.reload, state.reload.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","reload","reloadTooltip","action","useStyles","display","flexWrap","justifyContent","gap","spacingVerticalS","margin","spacingVerticalNone","spacingHorizontalNone","maxWidth","spacingHorizontalXXL","minWidth","useSuggestionListStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAI9E,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,QAAQ;IACRC,eAAe;IACfC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BI,MAAM;QACJK,SAAS;QACTC,UAAU;QACVC,gBAAgB;QAChBC,KAAKV,OAAOW,gBAAgB;QAC5BC,QAAQ,CAAC;MACP,EAAEZ,OAAOa,mBAAmB,CAAC;MAC7B,EAAEb,OAAOc,qBAAqB,CAAC;MAC/B,EAAEd,OAAOW,gBAAgB,CAAC;MAC1B,EAAEX,OAAOc,qBAAqB,CAAC;IACjC,CAAC;QACD,0BAA0B;YACxBC,UAAU,CAAC,YAAY,EAAEf,OAAOgB,oBAAoB,CAAC,GAAG,EAAEhB,OAAOW,gBAAgB,CAAC,CAAC,CAAC;QACtF;IACF;IACAR,QAAQ;QACNc,UAAUjB,OAAOgB,oBAAoB;QACrCD,UAAUf,OAAOgB,oBAAoB;IACvC;IAEAX,QAAQ;QACNY,UAAUjB,OAAOgB,oBAAoB;QACrCD,UAAUf,OAAOgB,oBAAoB;IACvC;AAGF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASd;IACfa,MAAMjB,IAAI,CAACmB,SAAS,GAAGtB,aAAaE,yBAAyBC,IAAI,EAAEkB,OAAOlB,IAAI,EAAEiB,MAAMjB,IAAI,CAACmB,SAAS;IAEpG,IAAIF,MAAMhB,MAAM,EAAE;QAChBgB,MAAMhB,MAAM,CAACkB,SAAS,GAAGtB,aAAaE,yBAAyBE,MAAM,EAAEiB,OAAOjB,MAAM,EAAEgB,MAAMhB,MAAM,CAACkB,SAAS;IAC9G;IAEA,IAAIF,MAAMd,MAAM,EAAE;QAChBc,MAAMd,MAAM,CAACgB,SAAS,GAAGtB,aAAaE,yBAAyBI,MAAM,EAAEe,OAAOf,MAAM,EAAEc,MAAMd,MAAM,CAACgB,SAAS;IAC9G;IAEA,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/Suggestion/Suggestion.js

@@ -13,9 +13,10 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useSuggestionStylesstyles = require("./useSuggestionStyles.styles");
 const _reactcomponents = require("@fluentui/react-components");
 const _reactprovider = require("@fluentui-copilot/react-provider");
+const _useSuggestion = require("./useSuggestion");
 const Suggestion = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     'use no memo';
-    const state = (0, _reactcomponents.useButton_unstable)(props, ref);
+    const state = (0, _useSuggestion.useSuggestion_unstable)(props, ref);
     state.appearance = props.appearance || 'outline';
     (0, _reactcomponents.useButtonStyles_unstable)(state);
     (0, _useSuggestionStylesstyles.useSuggestionStyles_unstable)(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["Suggestion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSuggestionStyles_unstable } from './useSuggestionStyles.styles';\nimport type { ButtonProps, ForwardRefComponent } from '@fluentui/react-components';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// Suggestion component - TODO: add more docs\nexport const Suggestion: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  'use no memo';\n\n  const state = useButton_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":["Suggestion","React","forwardRef","props","state","appearance","ref","useButtonStyles_unstable","useSuggestionStyles_unstable","renderButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;2CACsB;iCAEuC;+BACjD;AAG5B,MAAMA,aAAAA,WAAAA,GAAAA,OAA+CC,UAAMC,CAAU,CAACC,OAACA;;UAI5EC,QAAMC,IAAAA,mCAAmBA,EAAAA,OAAUC;UACnCC,UAAAA,GAAAA,MAAAA,UAAyBH,IAAAA;iDACzBI,EAAAA;+DACmB,EAAAJ;yCAEZK,EAAAA,uBAAsBL;IAC/B,OAAGK,IAAAA,sCAAA,EAAAL;AAEHJ"}
+{"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":["Suggestion","React","forwardRef","props","state","appearance","ref","useButtonStyles_unstable","useSuggestionStyles_unstable","renderButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;2CACsB;iCAEmB;+BAC7B;+BACI;AAIhC,MAAMA,aAAAA,WAAAA,GAAAA,OAAmDC,UAAMC,CAAU,CAACC,OAACA;;UAIhFC,QAAMC,IAAAA,qCAAmBA,EAAUF,OAAIG;UACvCC,UAAAA,GAAAA,MAAAA,UAAyBH,IAAAA;iDACzBI,EAAAA;+DACmB,EAAAJ;yCAEZK,EAAAA,uBAAsBL;IAC/B,OAAGK,IAAAA,sCAAA,EAAAL;AAEHJ"}

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+ //# sourceMappingURL=Suggestion.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Suggestion.types.ts"],"sourcesContent":["import type { CopilotMode } 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 & ComponentProps<SuggestionSlots> & Omit<ButtonProps, keyof ButtonSlots>;\n\nexport type SuggestionState = ComponentState<SuggestionSlots> &\n  Required<Pick<SuggestionProps, 'mode'>> &\n  Omit<ButtonState, keyof ButtonSlots>;\n"],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/Suggestion/useSuggestion.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSuggestion_unstable", {
+    enumerable: true,
+    get: function() {
+        return useSuggestion_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _reactprovider = require("@fluentui-copilot/react-provider");
+const useSuggestion_unstable = (props, ref)=>{
+    const buttonState = (0, _reactcomponents.useButton_unstable)(props, ref);
+    const mode = (0, _reactprovider.useCopilotMode)(props.mode);
+    return {
+        ...buttonState,
+        mode
+    };
+}; //# sourceMappingURL=useSuggestion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useSuggestion.ts"],"sourcesContent":["import { useButton_unstable } from '@fluentui/react-components';\nimport { useCopilotMode } from '@fluentui-copilot/react-provider';\nimport type { SuggestionProps } from './Suggestion.types';\n\nexport const useSuggestion_unstable = (\n  props: SuggestionProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n) => {\n  const buttonState = useButton_unstable(props, ref);\n  const mode = useCopilotMode(props.mode);\n  return { ...buttonState, mode };\n};\n"],"names":["useSuggestion_unstable","props","ref","buttonState","useButton_unstable","mode","useCopilotMode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIaA;;;eAAAA;;;iCAJsB;+BACJ;AAGxB,MAAMA,yBAAyB,CACpCC,OACAC;UAEAC,cAAMA,IAAAA,mCAAcC,EAAAA,OAAmBH;UACvCI,OAAMA,IAAAA,6BAAOC,EAAAA,MAAeL,IAAMI;WAClC;sBAAYF;;;AACd"}

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

@@ -57,32 +57,16 @@ const useSuggestionStylesStyles = (0, _reactcomponents.__styles)({
             "f1sl6hi9",
             "f1c8dzaj"
         ],
-        Bbmb7ep: [
-            "fnivh3a",
-            "fc7yr5o"
-        ],
-        Beyfa6y: [
-            "fc7yr5o",
-            "fnivh3a"
-        ],
-        B7oj6ja: [
-            "f1el4m67",
-            "f8yange"
-        ],
-        Btl43ni: [
-            "f8yange",
-            "f1el4m67"
-        ],
-        z8tnut: "f1ywm7hm",
-        z189sj: [
-            "f1yjm1ar",
-            "f1egtk6x"
-        ],
-        Byoj8tv: "f14wxoun",
-        uwmqm3: [
-            "f1egtk6x",
-            "f1yjm1ar"
-        ],
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f1kijzfu",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fcca7b8",
         sj55zd: "fkfq4zb",
         fsow6f: "fpgzoln"
     },
@@ -111,6 +95,14 @@ const useSuggestionStylesStyles = (0, _reactcomponents.__styles)({
         ],
         a9g2gr: "fezean8",
         rgbxn1: "f1yr11xb"
+    },
+    canvas: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        z8tnut: "fp2oml8",
+        Byoj8tv: "f1tdddsa"
     }
 }, {
     d: [
@@ -130,16 +122,24 @@ const useSuggestionStylesStyles = (0, _reactcomponents.__styles)({
         ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}",
         ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}",
         ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}",
-        ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}",
-        ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}",
-        ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}",
-        ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}",
-        ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
-        ".f1yjm1ar{padding-right:var(--spacingVerticalS);}",
-        ".f1egtk6x{padding-left:var(--spacingVerticalS);}",
-        ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
+        [
+            ".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fcca7b8{padding:var(--spacingVerticalXS) var(--spacingVerticalS);}",
+            {
+                p: -1
+            }
+        ],
         ".fkfq4zb{color:var(--colorNeutralForeground2);}",
-        ".fpgzoln{text-align:start;}"
+        ".fpgzoln{text-align:start;}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}",
+        ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}"
     ],
     m: [
         [
@@ -207,6 +207,6 @@ const useSuggestionStylesStyles = (0, _reactcomponents.__styles)({
 const useSuggestionStyles_unstable = (state)=>{
     'use no memo';
     const styles = useSuggestionStylesStyles();
-    state.root.className = (0, _reactcomponents.mergeClasses)(suggestionClassNames.root, styles.root, !state.disabled && styles.enabled, state.root.className);
+    state.root.className = (0, _reactcomponents.mergeClasses)(suggestionClassNames.root, styles.root, state.mode === 'canvas' && styles.canvas, !state.disabled && styles.enabled, state.root.className);
     return state;
 }; //# sourceMappingURL=useSuggestionStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { SlotClassNames, ButtonSlots, ButtonState } from '@fluentui/react-components';\n\nexport const suggestionClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fai-Suggestion',\n  icon: 'fai-Suggestion__icon',\n};\n\nconst useSuggestionStylesStyles = makeStyles({\n  root: {\n    ...typographyStyles.caption1,\n    //  Brand/M365/140\n    ...shorthands.border('1px', 'solid', tokens.colorBrandStroke2),\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n    ...shorthands.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});\n\nexport const useSuggestionStyles_unstable = (state: ButtonState): ButtonState => {\n  'use no memo';\n\n  const styles = useSuggestionStylesStyles();\n  state.root.className = mergeClasses(\n    suggestionClassNames.root,\n    styles.root,\n    !state.disabled && styles.enabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["suggestionClassNames","root","icon","useSuggestionStylesStyles","makeStyles","typographyStyles","shorthands","color","colorNeutralForeground2","textAlign","ibv6hh","enabled","tokens","colorBrandForeground2Hover","borderColor","backgroundColor","sj55zd","fsow6f","B9di4we","styles","state","mergeClasses","bb0oo","B88lpqa"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,oBAAAA;eAAAA;;;;;;iCAH0D;AAGhE,MAAMA,uBAAoD;UAC/DC;UACAC;AACF;AAEA,MAAMC,4BAA4BC,IAAAA,yBAAAA,EAAAA;UAChCH;iBACKI;iBACH;iBACGC;iBACAA;iBACAA;iBACHC;YAAAA;YAAcC;SAAAA;iBACdC;QAGFC,QAAA;YAAA;YAAA;SAAA;QACAC,QAAAA;gBACE;YAAA;YAAA;SAAA;gBACE;;;YACE;SAAkB;;;;YAEXC;SAAOC;;gBAEhB;YAAA;YAAA;SAAA;iBACA;YAAA;YAAA;SAAA;iBACA;YAAA;YAAA;SAAiB;;;YACf;SAAkB;;;YACfP;SAAWQ;;;;YAEdC;SAAiBH;iBACnB;gBACF;YAAA;YAAA;SAAA;QACFI,QAAA;QACFC,QAAA;IAEA;aACE;QAEAC,SAAMC;QACNC,SAAMnB;YAAI;YAAU;SAAGoB;QAOvBC,OAAOF;QACPG,SAAA;YAAA;YAAA;SAAA"}
+{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\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 useSuggestionStylesStyles = 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    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n  },\n});\n\nexport const useSuggestionStyles_unstable = (state: SuggestionState): SuggestionState => {\n  'use no memo';\n\n  const styles = useSuggestionStylesStyles();\n  state.root.className = mergeClasses(\n    suggestionClassNames.root,\n    styles.root,\n    state.mode === 'canvas' && styles.canvas,\n    !state.disabled && styles.enabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["suggestionClassNames","root","icon","useSuggestionStylesStyles","makeStyles","typographyStyles","shorthands","borderRadius","padding","color","colorNeutralForeground2","textAlign","ibv6hh","enabled","tokens","colorBrandForeground2Hover","z8tnut","canvas","paddingTop","B9di4we","B1f0e9u","useSuggestionStyles_unstable","bb0oo","B88lpqa","styles","state","Bejlia0","v5djml"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,oBAAAA;eAAAA;;;;;;iCAJ0D;AAIhE,MAAMA,uBAAoD;UAC/DC;UACAC;AACF;AAEA,MAAMC,4BAA4BC,IAAAA,yBAAAA,EAAAA;UAChCH;iBACKI;iBACH;iBACGC;iBACHC;iBACAC;iBACAC;YAAAA;YAAcC;SAAAA;iBACdC;QAGFC,QAAA;YAAA;YAAA;SAAA;QACAC,QAAAA;gBACE;YAAA;YAAA;SAAA;gBACE;;;YACE;SAAkB;;;;YAEXC;SAAOC;;gBAEhB;YAAA;YAAA;SAAA;iBACA;iBACA;;;;;gBAKA;gBACF;QACFC,QAAA;QACAC,SAAQ;gBACHZ;gBACHa;;aAEF;QACFC,SAAA;QAEAC,SAAaC;YAAAA;YAAAA;SAAAA;QACXC,OAAA;QAEAC,SAAMC;YAAAA;YAASrB;SAAAA;QACfsB,QAAMxB;QAQNyB,SAAOD;QACPE,QAAA"}

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

@@ -30,17 +30,16 @@ const suggestionListClassNames = {
         mc9l5x: "f22iagw",
         Eh141a: "fni485r",
         Brf1p80: "f9c4gz4",
-        i8kkvl: "f7wn8md",
-        Belr9w4: "f1wn3y0l",
-        B6of3ja: "f10saiw2",
-        t21cq0: [
-            "f1osuteh",
-            "f62i5r0"
-        ],
-        jrapky: "fqcjy3b",
-        Frg6f3: [
-            "f62i5r0",
-            "f1osuteh"
+        i8kkvl: 0,
+        Belr9w4: 0,
+        rmohyg: "f1yhwmi5",
+        jrapky: 0,
+        Frg6f3: 0,
+        t21cq0: 0,
+        B6of3ja: 0,
+        B74szlk: [
+            "f4bgq6r",
+            "f83tq75"
         ],
         Beptln2: "fr3gje9"
     },
@@ -57,12 +56,24 @@ const suggestionListClassNames = {
         ".f22iagw{display:flex;}",
         ".fni485r{flex-wrap:wrap;}",
         ".f9c4gz4{justify-content:flex-end;}",
-        ".f7wn8md{column-gap:var(--spacingVerticalS);}",
-        ".f1wn3y0l{row-gap:var(--spacingVerticalS);}",
-        ".f10saiw2{margin-top:var(--spacingVerticalNone);}",
-        ".f1osuteh{margin-right:var(--spacingHorizontalNone);}",
-        ".f62i5r0{margin-left:var(--spacingHorizontalNone);}",
-        ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}",
+        [
+            ".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));}",
         ".f79feoa{min-width:var(--spacingHorizontalXXL);}",
         ".f1cs043{max-width:var(--spacingHorizontalXXL);}"

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

@@ -1 +1 @@
-{"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';\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  reload: 'fai-SuggestionList__reload',\n  reloadTooltip: 'fai-SuggestionList__reloadTooltip',\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    ...shorthands.gap(tokens.spacingVerticalS),\n    ...shorthands.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  reload: {\n    minWidth: tokens.spacingHorizontalXXL,\n    maxWidth: tokens.spacingHorizontalXXL,\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(suggestionListClassNames.root, styles.root, state.root.className);\n\n  if (state.reload) {\n    state.reload.className = mergeClasses(suggestionListClassNames.reload, styles.reload, state.reload.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":["suggestionListClassNames","useSuggestionListStyles_unstable","root","reload","reloadTooltip","action","__styles","display","flexWrap","justifyContent","shorthands","maxWidth","jrapky","minWidth","Bf4jedk","B2u0y6b","state","styles","useStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAkDXC,gCAAA;eAAAA;;;iCAtDmD;AAI9C,MAAMD,2BAAgE;UAC3EE;YACAC;mBACAC;YACAC;AACF;AAEA;;CAEC,SAECH,YAAMI,IAAAA,yBAAA,EAAA;UACJC;gBACAC;gBACAC;iBACGC;gBACAA;iBAMH;iBACEC;gBACF;YAAA;YAAA;SAAA;QACFC,QAAA;QACAT,QAAQ;YAAA;YAAA;SAAA;iBACNU;;YAEF;QAEAR,SAAQ;iBACNQ;;YAEF;QAGFC,SAAA;QAEAC,SAAA;;GAEC;OAEC;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;;AAOA,MAAAd,mCAAAe,CAAAA;;UAIAC,SAAAC;UAEAhB,IAAOc,CAAAA,SAAAA,GAAAA,IAAAA,6BAAAA,EAAAA,yBAAAA,IAAAA,EAAAA,OAAAA,IAAAA,EAAAA,MAAAA,IAAAA,CAAAA,SAAAA;IACP,IAAAA,MAAAb,MAAA,EAAA"}
+{"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\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  reload: 'fai-SuggestionList__reload',\n  reloadTooltip: 'fai-SuggestionList__reloadTooltip',\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  reload: {\n    minWidth: tokens.spacingHorizontalXXL,\n    maxWidth: tokens.spacingHorizontalXXL,\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(suggestionListClassNames.root, styles.root, state.root.className);\n\n  if (state.reload) {\n    state.reload.className = mergeClasses(suggestionListClassNames.reload, styles.reload, state.reload.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":["suggestionListClassNames","useSuggestionListStyles_unstable","root","reload","reloadTooltip","action","__styles","display","flexWrap","justifyContent","tokens","margin","t21cq0","maxWidth","minWidth","d","state","p","useStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAsDXC,gCAAA;eAAAA;;;iCA1DuC;AAIlC,MAAMD,2BAAgE;UAC3EE;YACAC;mBACAC;YACAC;AACF;AAEA;;CAEC,SAECH,YAAMI,IAAAA,yBAAA,EAAA;UACJC;gBACAC;gBACAC;iBACKC;gBACLC;iBACID;gBACAA;gBACAA;gBACAA;QACJE,QAAC;iBACD;iBACEC;YAAAA;YAAW;SAAY;iBACzB;;YAEFV;iBACEW;iBACAD;;YAGFR;iBACES;iBACAD;;AAIJ,GAAA;IAEAE,GAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;;YAEC;SACD;QAAA;YAAA;YAAiDC;gBAC/CC,GAAA,CAAA;;SAEA;QAAA;YAAA;YAAeC;gBACfF,GAAAA,CAAAA;;SAEA;QAAA;QAAkB;QAAA;KAAA;;AAMlB,MAAAf,mCAAAe,CAAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-suggestions",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "description": "A Fluent AI package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,16 +12,16 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-provider": "^0.8.4",
+    "@fluentui-copilot/react-provider": "^0.9.0",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.54.4 <10.0.0",
-    "@fluentui/react-context-selector": ">=9.1.63 <10.0.0",
+    "@fluentui/react-components": ">=9.54.10 <10.0.0",
+    "@fluentui/react-context-selector": ">=9.1.65 <10.0.0",
     "@fluentui/react-icons": ">=2.0.247 <3.0.0",
-    "@fluentui/react-jsx-runtime": ">=9.0.40 <10.0.0",
-    "@fluentui/react-shared-contexts": ">=9.19.0 <10.0.0",
-    "@fluentui/react-utilities": ">=9.18.11 <10.0.0",
+    "@fluentui/react-jsx-runtime": ">=9.0.42 <10.0.0",
+    "@fluentui/react-shared-contexts": ">=9.20.0 <10.0.0",
+    "@fluentui/react-utilities": ">=9.18.13 <10.0.0",
     "@types/react": ">=16.14.0 <19.0.0",
     "@types/react-dom": ">=16.9.8 <19.0.0",
     "react": ">=16.14.0 <19.0.0",