@fluentui-copilot/react-suggestions 0.12.2 → 0.12.3-hotfix.1

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui-copilot/react-suggestions",
   "entries": [
     {
-      "date": "Wed, 30 Apr 2025 01:46:04 GMT",
+      "date": "Tue, 12 Aug 2025 16:09:22 GMT",
+      "tag": "@fluentui-copilot/react-suggestions_v0.12.3-hotfix.1",
+      "version": "0.12.3-hotfix.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "hochelmartin@gmail.com",
+            "package": "@fluentui-copilot/react-suggestions",
+            "commit": "3e4ebe676646c4c4346dbbab83511f963ffefd85",
+            "comment": "release: prepare hotfix 0.26.2-hotfix.1"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 19 May 2025 18:04:28 GMT",
+      "tag": "@fluentui-copilot/react-suggestions_v0.12.3",
+      "version": "0.12.3",
+      "comments": {
+        "none": [
+          {
+            "author": "hochelmartin@gmail.com",
+            "package": "@fluentui-copilot/react-suggestions",
+            "commit": "442954951d0eca92de20ecb0ff0fa9492431b62d",
+            "comment": "fix: exclude story files from production build"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sat, 03 May 2025 01:27:45 GMT",
+      "tag": "@fluentui-copilot/react-suggestions_v0.12.3",
+      "version": "0.12.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "estebanmu@microsoft.com",
+            "package": "@fluentui-copilot/react-suggestions",
+            "commit": "3dc05bb66ec473691f198f65b5124cc24390f47c",
+            "comment": "chore: Bump @fluentui/react-components to 9.63.0."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 30 Apr 2025 01:47:50 GMT",
       "tag": "@fluentui-copilot/react-suggestions_v0.12.2",
       "version": "0.12.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui-copilot/react-suggestions
 
-This log was last generated on Wed, 30 Apr 2025 01:46:04 GMT and should not be manually modified.
+This log was last generated on Tue, 12 Aug 2025 16:09:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.12.3-hotfix.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.12.3-hotfix.1)
+
+Tue, 12 Aug 2025 16:09:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.12.3..@fluentui-copilot/react-suggestions_v0.12.3-hotfix.1)
+
+### Changes
+
+- release: prepare hotfix 0.26.2-hotfix.1 ([PR #3284](https://github.com/microsoft/fluentai/pull/3284) by hochelmartin@gmail.com)
+
+## [0.12.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.12.3)
+
+Sat, 03 May 2025 01:27:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.12.2..@fluentui-copilot/react-suggestions_v0.12.3)
+
+### Patches
+
+- chore: Bump @fluentui/react-components to 9.63.0. ([PR #2917](https://github.com/microsoft/fluentai/pull/2917) by estebanmu@microsoft.com)
+
 ## [0.12.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.12.2)
 
-Wed, 30 Apr 2025 01:46:04 GMT 
+Wed, 30 Apr 2025 01:47:50 GMT 
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.11.0..@fluentui-copilot/react-suggestions_v0.12.2)
 
 ### Patches

package/lib/Suggestion.js

@@ -1,2 +1 @@
 export { Suggestion, suggestionClassNames, useSuggestionStyles_unstable, useSuggestion_unstable } from './components/Suggestion/index';
-//# sourceMappingURL=Suggestion.js.map

package/lib/SuggestionList.js

@@ -1,2 +1 @@
 export { SuggestionList, renderSuggestionList_unstable, suggestionListClassNames, useSuggestionListStyles_unstable, useSuggestionList_unstable } from './components/SuggestionList/index';
-//# sourceMappingURL=SuggestionList.js.map

package/lib/components/Suggestion/Suggestion.js

@@ -4,15 +4,13 @@ import { renderButton_unstable, useButtonStyles_unstable } from '@fluentui/react
 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);
+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';
-//# sourceMappingURL=Suggestion.js.map

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

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

package/lib/components/Suggestion/index.js

@@ -1,4 +1,3 @@
 export { Suggestion } from './Suggestion';
 export { useSuggestion_unstable } from './useSuggestion';
 export { suggestionClassNames, useSuggestionStyles_unstable } from './useSuggestionStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/Suggestion/useSuggestion.js

@@ -1,13 +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
-  };
+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
+    };
 };
-//# sourceMappingURL=useSuggestion.js.map

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

@@ -0,0 +1,53 @@
+import { makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';
+import { tokens } 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
+    }
+});
+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, 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, typographyStyles } from '@fluentui/react-components';\nimport { tokens } 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  },\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    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","typographyStyles","tokens","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","useSuggestionStyles_unstable","state","designVersion","mode","styles","nextStyles","className","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAEC,gBAAgB,QAAQ,6BAA6B;AACpG,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,uBAAoD;IAC/DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,sBAAsBR,WAAW;IACrCM,MAAM;QACJ,GAAGH,iBAAiBM,QAAQ;QAC5B,kBAAkB;QAClB,GAAGP,WAAWQ,MAAM,CAAC,OAAO,SAASN,OAAOO,iBAAiB,CAAC;QAC9DC,cAAcR,OAAOS,kBAAkB;QACvCC,SAAS,CAAC,EAAEV,OAAOW,iBAAiB,CAAC,CAAC,EAAEX,OAAOY,gBAAgB,CAAC,CAAC;QACjEC,OAAOb,OAAOc,uBAAuB;QACrCC,WAAW;IAGb;IACAC,SAAS;QACP,gCAAgC;YAC9B,UAAU;gBACR,kBAAkB;gBAClB,GAAGlB,WAAWmB,WAAW,CAACjB,OAAOkB,sBAAsB,CAAC;gBACxDL,OAAOb,OAAOmB,0BAA0B;gBACxCC,iBAAiBpB,OAAOqB,0BAA0B;YACpD;YACA,4CAA4C;YAC5C,iBAAiB;gBACf,kBAAkB;gBAClB,GAAGvB,WAAWmB,WAAW,CAACjB,OAAOsB,wBAAwB,CAAC;gBAC1DT,OAAOb,OAAOuB,4BAA4B;gBAC1CH,iBAAiBpB,OAAOwB,4BAA4B;YACtD;QACF;IACF;IACAC,QAAQ;QACN,GAAG1B,iBAAiB2B,KAAK;QACzBhB,SAAS,CAAC,EAAEV,OAAO2B,qBAAqB,CAAC,CAAC,EAAE3B,OAAO4B,kBAAkB,CAAC,CAAC;IACzE;AACF;AAEA,MAAMC,gBAAgBjC,WAAW;IAC/BM,MAAM;QACJ4B,mBAAmB9B,OAAO4B,kBAAkB;QAC5CG,iBAAiB/B,OAAO2B,qBAAqB;QAC7CK,UAAUhC,OAAOiC,eAAe;IAClC;AACF;AAEA,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGF;IAEhC,MAAMG,SAASlC;IACf,MAAMmC,aAAaV;IACnBM,MAAMjC,IAAI,CAACsC,SAAS,GAAG3C,aACrBI,qBAAqBC,IAAI,EACzBoC,OAAOpC,IAAI,EACXmC,SAAS,YAAYC,OAAOb,MAAM,EAClCW,kBAAkB,UAAUG,WAAWrC,IAAI,EAC3C,CAACiC,MAAMM,QAAQ,IAAIH,OAAOtB,OAAO,EACjCmB,MAAMjC,IAAI,CAACsC,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib/components/SuggestionList/SuggestionList.js

@@ -4,11 +4,10 @@ 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);
+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';
-//# sourceMappingURL=SuggestionList.js.map

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

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

package/lib/components/SuggestionList/index.js

@@ -2,4 +2,3 @@ export { SuggestionList } from './SuggestionList';
 export { renderSuggestionList_unstable } from './renderSuggestionList';
 export { useSuggestionList_unstable } from './useSuggestionList';
 export { suggestionListClassNames, useSuggestionListStyles_unstable } from './useSuggestionListStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/SuggestionList/renderSuggestionList.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of SuggestionList
- */
-export const renderSuggestionList_unstable = state => {
-  assertSlots(state);
-  return /*#__PURE__*/_jsxs(state.root, {
-    children: [state.root.children, state.action && /*#__PURE__*/_jsx(state.action, {})]
-  });
+ */ export const renderSuggestionList_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.root.children,
+            state.action && /*#__PURE__*/ _jsx(state.action, {})
+        ]
+    });
 };
-//# sourceMappingURL=renderSuggestionList.js.map

package/lib/components/SuggestionList/useSuggestionList.js

@@ -8,33 +8,28 @@ import { getIntrinsicElementProps, slot, useArrowNavigationGroup } from '@fluent
  *
  * @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'
-    })
-  };
+ */ 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'
+        })
+    };
 };
-//# sourceMappingURL=useSuggestionList.js.map

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

@@ -0,0 +1,43 @@
+import { makeStyles, 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 = makeStyles({
+    root: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'flex-end',
+        gap: tokens.spacingVerticalS,
+        margin: `
+      ${tokens.spacingVerticalNone}
+      ${tokens.spacingHorizontalNone}
+      ${tokens.spacingVerticalS}
+      ${tokens.spacingHorizontalNone}
+    `,
+        '> :nth-last-of-type(2)': {
+            maxWidth: `calc(100% - ${tokens.spacingHorizontalXXL} - ${tokens.spacingVerticalS})`
+        }
+    },
+    horizontalAlignmentStart: {
+        justifyContent: 'flex-start'
+    },
+    action: {
+        minWidth: tokens.spacingHorizontalXXL,
+        maxWidth: tokens.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;
+};

package/lib/components/SuggestionList/useSuggestionListStyles.styles.raw.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"}

package/lib/index.js

@@ -1,3 +1,2 @@
 export { Suggestion, suggestionClassNames, useSuggestionStyles_unstable, useSuggestion_unstable } from './Suggestion';
 export { SuggestionList, renderSuggestionList_unstable, suggestionListClassNames, useSuggestionListStyles_unstable, useSuggestionList_unstable } from './SuggestionList';
-//# sourceMappingURL=index.js.map

package/lib-commonjs/Suggestion.js

@@ -23,4 +23,3 @@ _export(exports, {
     }
 });
 const _index = require("./components/Suggestion/index");
- //# sourceMappingURL=Suggestion.js.map

package/lib-commonjs/SuggestionList.js

@@ -26,4 +26,3 @@ _export(exports, {
     }
 });
 const _index = require("./components/SuggestionList/index");
- //# sourceMappingURL=SuggestionList.js.map

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

@@ -23,4 +23,4 @@ const Suggestion = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     (0, _reactprovider.useCustomStyleHook)('useSuggestionStyles')(state);
     return (0, _reactcomponents.renderButton_unstable)(state);
 });
-Suggestion.displayName = 'Suggestion'; //# sourceMappingURL=Suggestion.js.map
+Suggestion.displayName = 'Suggestion';

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 { 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"}
+{"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","ref","state","useSuggestion_unstable","appearance","useButtonStyles_unstable","useSuggestionStyles_unstable","useCustomStyleHook","renderButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;2CACsB;iCAEmB;+BAC7B;+BACI;AAIhC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF;IAEA,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAC5CC,MAAME,UAAU,GAAGJ,MAAMI,UAAU,IAAI;IACvCC,IAAAA,yCAAAA,EAAyBH;IACzBI,IAAAA,uDAAAA,EAA6BJ;IAC7BK,IAAAA,iCAAAA,EAAmB,uBAAuBL;IAE1C,OAAOM,IAAAA,sCAAAA,EAAsBN;AAC/B;AAEAL,WAAWY,WAAW,GAAG"}

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

@@ -2,4 +2,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
- //# sourceMappingURL=Suggestion.types.js.map

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

@@ -25,4 +25,3 @@ _export(exports, {
 const _Suggestion = require("./Suggestion");
 const _useSuggestion = require("./useSuggestion");
 const _useSuggestionStylesstyles = require("./useSuggestionStyles.styles");
- //# sourceMappingURL=index.js.map

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

@@ -19,4 +19,4 @@ const useSuggestion_unstable = (props, ref)=>{
         mode,
         designVersion
     };
-}; //# sourceMappingURL=useSuggestion.js.map
+};

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

@@ -1 +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":["useSuggestion_unstable","props","ref","buttonState","useButton_unstable","mode","useCopilotMode","designVersion","useDesignVersion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIaA;;;eAAAA;;;iCAJsB;+BACc;AAG1C,MAAMA,yBAAyB,CACpCC,OACAC;UAEAC,cAAMA,IAAAA,mCAAcC,EAAAA,OAAmBH;UACvCI,OAAMA,IAAAA,6BAAOC,EAAAA,MAAeL,IAAMI;UAClCE,gBAAMA,IAAAA,+BAAgBC,EAAAA,MAAiBP,aAAMM;WAC7C;sBAAYJ;;;;AACd"}
+{"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":["useSuggestion_unstable","props","ref","buttonState","useButton_unstable","mode","useCopilotMode","designVersion","useDesignVersion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIaA;;;eAAAA;;;iCAJsB;+BACc;AAG1C,MAAMA,yBAAyB,CACpCC,OACAC;IAEA,MAAMC,cAAcC,IAAAA,mCAAAA,EAAmBH,OAAOC;IAC9C,MAAMG,OAAOC,IAAAA,6BAAAA,EAAeL,MAAMI,IAAI;IACtC,MAAME,gBAAgBC,IAAAA,+BAAAA,EAAiBP,MAAMM,aAAa;IAC1D,OAAO;QAAE,GAAGJ,WAAW;QAAEE;QAAME;IAAc;AAC/C"}

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    suggestionClassNames: function() {
+        return suggestionClassNames;
+    },
+    useSuggestionStyles_unstable: function() {
+        return useSuggestionStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _tokens = require("@fluentui-copilot/tokens");
+const suggestionClassNames = {
+    root: 'fai-Suggestion',
+    icon: 'fai-Suggestion__icon'
+};
+const useSuggestionStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        ..._reactcomponents.typographyStyles.caption1,
+        //  Brand/M365/140
+        ..._reactcomponents.shorthands.border('1px', 'solid', _tokens.tokens.colorBrandStroke2),
+        borderRadius: _tokens.tokens.borderRadiusXLarge,
+        padding: `${_tokens.tokens.spacingVerticalXS} ${_tokens.tokens.spacingVerticalS}`,
+        color: _tokens.tokens.colorNeutralForeground2,
+        textAlign: 'start'
+    },
+    enabled: {
+        '@media (forced-colors: none)': {
+            ':hover': {
+                //  Brand/M365/120
+                ..._reactcomponents.shorthands.borderColor(_tokens.tokens.colorBrandStroke2Hover),
+                color: _tokens.tokens.colorBrandForeground2Hover,
+                backgroundColor: _tokens.tokens.colorBrandBackground2Hover
+            },
+            // Figma states 'on hover and pressed state'
+            ':active:hover': {
+                //  Brand/M365/120
+                ..._reactcomponents.shorthands.borderColor(_tokens.tokens.colorBrandStroke2Pressed),
+                color: _tokens.tokens.colorBrandForeground2Pressed,
+                backgroundColor: _tokens.tokens.colorBrandBackground2Pressed
+            }
+        }
+    },
+    canvas: {
+        ..._reactcomponents.typographyStyles.body1,
+        padding: `${_tokens.tokens.spacingVerticalSNudge} ${_tokens.tokens.spacingHorizontalM}`
+    }
+});
+const useNextStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        paddingHorizontal: _tokens.tokens.spacingHorizontalM,
+        paddingVertical: _tokens.tokens.spacingVerticalSNudge,
+        fontSize: _tokens.tokens.fontSizeBase200
+    }
+});
+const useSuggestionStyles_unstable = (state)=>{
+    'use no memo';
+    const { designVersion, mode } = state;
+    const styles = useSuggestionStyles();
+    const nextStyles = useNextStyles();
+    state.root.className = (0, _reactcomponents.mergeClasses)(suggestionClassNames.root, styles.root, mode === 'canvas' && styles.canvas, designVersion === 'next' && nextStyles.root, !state.disabled && styles.enabled, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';\nimport { tokens } 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  },\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    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["suggestionClassNames","useSuggestionStyles_unstable","root","icon","useSuggestionStyles","makeStyles","typographyStyles","caption1","shorthands","border","tokens","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","state","designVersion","mode","styles","nextStyles","className","mergeClasses","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,oBAAAA;eAAAA;;IAgDAC,4BAAAA;eAAAA;;;iCArD0D;wBAChD;AAIhB,MAAMD,uBAAoD;IAC/DE,MAAM;IACNC,MAAM;AACR;AAEA,MAAMC,sBAAsBC,IAAAA,2BAAAA,EAAW;IACrCH,MAAM;QACJ,GAAGI,iCAAAA,CAAiBC,QAAQ;QAC5B,kBAAkB;QAClB,GAAGC,2BAAAA,CAAWC,MAAM,CAAC,OAAO,SAASC,cAAAA,CAAOC,iBAAiB,CAAC;QAC9DC,cAAcF,cAAAA,CAAOG,kBAAkB;QACvCC,SAAS,CAAC,EAAEJ,cAAAA,CAAOK,iBAAiB,CAAC,CAAC,EAAEL,cAAAA,CAAOM,gBAAgB,CAAC,CAAC;QACjEC,OAAOP,cAAAA,CAAOQ,uBAAuB;QACrCC,WAAW;IAGb;IACAC,SAAS;QACP,gCAAgC;YAC9B,UAAU;gBACR,kBAAkB;gBAClB,GAAGZ,2BAAAA,CAAWa,WAAW,CAACX,cAAAA,CAAOY,sBAAsB,CAAC;gBACxDL,OAAOP,cAAAA,CAAOa,0BAA0B;gBACxCC,iBAAiBd,cAAAA,CAAOe,0BAA0B;YACpD;YACA,4CAA4C;YAC5C,iBAAiB;gBACf,kBAAkB;gBAClB,GAAGjB,2BAAAA,CAAWa,WAAW,CAACX,cAAAA,CAAOgB,wBAAwB,CAAC;gBAC1DT,OAAOP,cAAAA,CAAOiB,4BAA4B;gBAC1CH,iBAAiBd,cAAAA,CAAOkB,4BAA4B;YACtD;QACF;IACF;IACAC,QAAQ;QACN,GAAGvB,iCAAAA,CAAiBwB,KAAK;QACzBhB,SAAS,CAAC,EAAEJ,cAAAA,CAAOqB,qBAAqB,CAAC,CAAC,EAAErB,cAAAA,CAAOsB,kBAAkB,CAAC,CAAC;IACzE;AACF;AAEA,MAAMC,gBAAgB5B,IAAAA,2BAAAA,EAAW;IAC/BH,MAAM;QACJgC,mBAAmBxB,cAAAA,CAAOsB,kBAAkB;QAC5CG,iBAAiBzB,cAAAA,CAAOqB,qBAAqB;QAC7CK,UAAU1B,cAAAA,CAAO2B,eAAe;IAClC;AACF;AAEO,MAAMpC,+BAA+B,CAACqC;IAC3C;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGF;IAEhC,MAAMG,SAASrC;IACf,MAAMsC,aAAaT;IACnBK,MAAMpC,IAAI,CAACyC,SAAS,GAAGC,IAAAA,6BAAAA,EACrB5C,qBAAqBE,IAAI,EACzBuC,OAAOvC,IAAI,EACXsC,SAAS,YAAYC,OAAOZ,MAAM,EAClCU,kBAAkB,UAAUG,WAAWxC,IAAI,EAC3C,CAACoC,MAAMO,QAAQ,IAAIJ,OAAOrB,OAAO,EACjCkB,MAAMpC,IAAI,CAACyC,SAAS;IAGtB,OAAOL;AACT"}

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

@@ -20,4 +20,4 @@ const SuggestionList = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     (0, _reactprovider.useCustomStyleHook)('useSuggestionListStyles')(state);
     return (0, _renderSuggestionList.renderSuggestionList_unstable)(state);
 });
-SuggestionList.displayName = 'SuggestionList'; //# sourceMappingURL=SuggestionList.js.map
+SuggestionList.displayName = 'SuggestionList';

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

@@ -1 +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":["SuggestionList","React","forwardRef","props","state","useSuggestionList_unstable","useSuggestionListStyles_unstable","useCustomStyleHook","renderSuggestionList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;mCACoB;sCACG;+CACG;+BAGd;AAG5B,MAAMA,iBAAAA,WAAAA,GAAAA,OAA2DC,UAAMC,CAAU,CAACC,OAACA;UACxFC,QAAMA,IAAAA,6CAAQC,EAAAA,OAA2BF;uEAEzCG,EAAAA;yCACAC,EAAAA,2BAAmBH;WAEnBI,IAAAA,mDAAOA,EAAAA;AACT;AAEAR,eAAeS,WAAW,GAAG"}
+{"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":["SuggestionList","React","forwardRef","props","ref","state","useSuggestionList_unstable","useSuggestionListStyles_unstable","useCustomStyleHook","renderSuggestionList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;mCACoB;sCACG;+CACG;+BAGd;AAG5B,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IACjCG,IAAAA,iCAAAA,EAAmB,2BAA2BH;IAE9C,OAAOI,IAAAA,mDAAAA,EAA8BJ;AACvC;AAEAL,eAAeU,WAAW,GAAG"}

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

@@ -4,4 +4,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
- //# sourceMappingURL=SuggestionList.types.js.map

package/lib-commonjs/components/SuggestionList/index.js

@@ -29,4 +29,3 @@ const _SuggestionList = require("./SuggestionList");
 const _renderSuggestionList = require("./renderSuggestionList");
 const _useSuggestionList = require("./useSuggestionList");
 const _useSuggestionListStylesstyles = require("./useSuggestionListStyles.styles");
- //# sourceMappingURL=index.js.map

package/lib-commonjs/components/SuggestionList/renderSuggestionList.js

@@ -18,4 +18,4 @@ const renderSuggestionList_unstable = (state)=>{
             state.action && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.action, {})
         ]
     });
-}; //# sourceMappingURL=renderSuggestionList.js.map
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["renderSuggestionList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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) => {\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","state","root","children","action","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUEA;;;eAAAA;;;4BATF;iCAE4B;AAO1BA,MAAAA,gCAAiCC,CAAAA;oCAEjC,EAAAA;;kBAEKA;YAAAA,MAAMC,IAAKC,CAAAA,QAAQ;YAAAF,MAAAG,MAAA,IAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAJ,MAAAG,MAAA,EAAA,CAAA;SAAA"}
+{"version":3,"sources":["renderSuggestionList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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) => {\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":["renderSuggestionList_unstable","state","assertSlots","_jsxs","root","children","action","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;iCAE4B;AAMrB,MAAMA,gCAAgC,CAACC;IAC5CC,IAAAA,4BAAAA,EAAiCD;IAEjC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMG,IAAI,CAACC,QAAQ;YACnBJ,MAAMK,MAAM,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,MAAM,EAAA,CAAA;;;AAGpC"}

package/lib-commonjs/components/SuggestionList/useSuggestionList.js

@@ -33,4 +33,4 @@ const useSuggestionList_unstable = (props, ref)=>{
             elementType: 'span'
         })
     };
-}; //# sourceMappingURL=useSuggestionList.js.map
+};

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

@@ -1 +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":["action","props","ref","horizontalAlignment","slot","role","getIntrinsicElementProps","circular","useArrowNavigationGroup","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBUA;;;eAAAA;;;iCAlB8D;AAkBtE,MAAQA,6BAA8B,CAAAC,OAAOC;UAC7C,QACEC,wBACY,KAAA;;;oBAINC;kBAEFF;oBACAG;;mCAEA,CAAGJ,MAAK,CAAAK,IAAAA,yCAAA,EAAA,OAAA;;;0BACmCC;oBAAiB;eAC9DC,IAAAA,wCACA,EAAA;sBAAEC;gBAAmBF,UAAA;cAEvBP;;yBAAoD;QACtD;QACAA,QAAAI,qBAAA,CAAAM,QAAA,CAAAV,QAAA"}
+{"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":["useSuggestionList_unstable","props","ref","action","horizontalAlignment","components","root","slot","always","getIntrinsicElementProps","role","useArrowNavigationGroup","axis","circular","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;iCAd2D;AAcjE,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAEC,sBAAsB,KAAK,EAAE,GAAGH;IAChD,OAAO;QACLG;QACAC,YAAY;YACVC,MAAM;YACNH,QAAQ;QACV;QACAG,MAAMC,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,OAAO;YAC9BP;YACAQ,MAAM;YACN,cAAc;YACd,GAAGT,KAAK;YACR,GAAGU,IAAAA,wCAAAA,EAAwB;gBAAEC,MAAM;gBAAQC,UAAU;YAAK,EAAE;QAC9D,IACA;YAAEC,aAAa;QAAM;QAEvBX,QAAQI,qBAAAA,CAAKQ,QAAQ,CAACZ,QAAQ;YAAEW,aAAa;QAAO;IACtD;AACF"}

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    suggestionListClassNames: function() {
+        return suggestionListClassNames;
+    },
+    useSuggestionListStyles_unstable: function() {
+        return useSuggestionListStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _tokens = require("@fluentui-copilot/tokens");
+const suggestionListClassNames = {
+    root: 'fai-SuggestionList',
+    action: 'fai-SuggestionList__action'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'flex-end',
+        gap: _tokens.tokens.spacingVerticalS,
+        margin: `
+      ${_tokens.tokens.spacingVerticalNone}
+      ${_tokens.tokens.spacingHorizontalNone}
+      ${_tokens.tokens.spacingVerticalS}
+      ${_tokens.tokens.spacingHorizontalNone}
+    `,
+        '> :nth-last-of-type(2)': {
+            maxWidth: `calc(100% - ${_tokens.tokens.spacingHorizontalXXL} - ${_tokens.tokens.spacingVerticalS})`
+        }
+    },
+    horizontalAlignmentStart: {
+        justifyContent: 'flex-start'
+    },
+    action: {
+        minWidth: _tokens.tokens.spacingHorizontalXXL,
+        maxWidth: _tokens.tokens.spacingHorizontalXXL
+    }
+});
+const useSuggestionListStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _reactcomponents.mergeClasses)(suggestionListClassNames.root, styles.root, state.horizontalAlignment === 'start' && styles.horizontalAlignmentStart, state.root.className);
+    if (state.action) {
+        state.action.className = (0, _reactcomponents.mergeClasses)(suggestionListClassNames.action, styles.action, state.action.className);
+    }
+    return state;
+};

package/lib-commonjs/components/SuggestionList/useSuggestionListStyles.styles.raw.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":["suggestionListClassNames","useSuggestionListStyles_unstable","root","action","useStyles","makeStyles","display","flexWrap","justifyContent","gap","tokens","spacingVerticalS","margin","spacingVerticalNone","spacingHorizontalNone","maxWidth","spacingHorizontalXXL","horizontalAlignmentStart","minWidth","state","styles","className","mergeClasses","horizontalAlignment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IAuCAC,gCAAAA;eAAAA;;;iCA5C4B;wBAClB;AAIhB,MAAMD,2BAAgE;IAC3EE,MAAM;IACNC,QAAQ;AACV;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,2BAAAA,EAAW;IAC3BH,MAAM;QACJI,SAAS;QACTC,UAAU;QACVC,gBAAgB;QAChBC,KAAKC,cAAAA,CAAOC,gBAAgB;QAC5BC,QAAQ,CAAC;MACP,EAAEF,cAAAA,CAAOG,mBAAmB,CAAC;MAC7B,EAAEH,cAAAA,CAAOI,qBAAqB,CAAC;MAC/B,EAAEJ,cAAAA,CAAOC,gBAAgB,CAAC;MAC1B,EAAED,cAAAA,CAAOI,qBAAqB,CAAC;IACjC,CAAC;QACD,0BAA0B;YACxBC,UAAU,CAAC,YAAY,EAAEL,cAAAA,CAAOM,oBAAoB,CAAC,GAAG,EAAEN,cAAAA,CAAOC,gBAAgB,CAAC,CAAC,CAAC;QACtF;IACF;IACAM,0BAA0B;QACxBT,gBAAgB;IAClB;IAEAL,QAAQ;QACNe,UAAUR,cAAAA,CAAOM,oBAAoB;QACrCD,UAAUL,cAAAA,CAAOM,oBAAoB;IACvC;AAGF;AAKO,MAAMf,mCAAmC,CAACkB;IAC/C;IAEA,MAAMC,SAAShB;IACfe,MAAMjB,IAAI,CAACmB,SAAS,GAAGC,IAAAA,6BAAAA,EACrBtB,yBAAyBE,IAAI,EAC7BkB,OAAOlB,IAAI,EACXiB,MAAMI,mBAAmB,KAAK,WAAWH,OAAOH,wBAAwB,EACxEE,MAAMjB,IAAI,CAACmB,SAAS;IAGtB,IAAIF,MAAMhB,MAAM,EAAE;QAChBgB,MAAMhB,MAAM,CAACkB,SAAS,GAAGC,IAAAA,6BAAAA,EAAatB,yBAAyBG,MAAM,EAAEiB,OAAOjB,MAAM,EAAEgB,MAAMhB,MAAM,CAACkB,SAAS;IAC9G;IAEA,OAAOF;AACT"}

package/lib-commonjs/index.js

@@ -39,4 +39,3 @@ _export(exports, {
 });
 const _Suggestion = require("./Suggestion");
 const _SuggestionList = require("./SuggestionList");
- //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-suggestions",
-  "version": "0.12.2",
+  "version": "0.12.3-hotfix.1",
   "description": "A Fluent AI package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,15 +12,15 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-provider": "^0.11.2",
-    "@fluentui-copilot/tokens": "^0.3.10",
+    "@fluentui-copilot/react-provider": "0.11.3-hotfix.1",
+    "@fluentui-copilot/tokens": "0.3.11-hotfix.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.58.3 <10.0.0",
+    "@fluentui/react-components": ">=9.63.0 <10.0.0",
     "@fluentui/react-context-selector": ">=9.1.76 <10.0.0",
     "@fluentui/react-icons": ">=2.0.260 <3.0.0",
-    "@fluentui/react-jsx-runtime": ">=9.0.50 <10.0.0",
+    "@fluentui/react-jsx-runtime": ">=9.0.54 <10.0.0",
     "@fluentui/react-shared-contexts": ">=9.23.1 <10.0.0",
     "@fluentui/react-utilities": ">=9.19.0 <10.0.0",
     "@types/react": ">=16.14.0 <19.0.0",
@@ -28,11 +28,7 @@
     "react": ">=16.14.0 <19.0.0",
     "react-dom": ">=16.14.0 <19.0.0"
   },
-  "beachball": {
-    "disallowedChangeTypes": [
-      "major"
-    ]
-  },
+  "beachball": {},
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",