@fluentui-copilot/react-prompt-starter 0.0.0-nightly-20250610-0405-e23ffd06.1 → 0.0.0-nightly-20250613-0405-485ea952.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui-copilot/react-prompt-starter",
   "entries": [
     {
-      "date": "Tue, 10 Jun 2025 04:13:04 GMT",
-      "tag": "@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20250610-0405-e23ffd06.1",
-      "version": "0.0.0-nightly-20250610-0405-e23ffd06.1",
+      "date": "Fri, 13 Jun 2025 04:12:33 GMT",
+      "tag": "@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20250613-0405-485ea952.1",
+      "version": "0.0.0-nightly-20250613-0405-485ea952.1",
       "comments": {
         "prerelease": [
           {
@@ -16,6 +16,39 @@
         ]
       }
     },
+    {
+      "date": "Thu, 12 Jun 2025 17:50:58 GMT",
+      "tag": "@fluentui-copilot/react-prompt-starter_v0.10.0",
+      "version": "0.10.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "d9945da4ae81c3a928550551238dc5b98d99078d",
+            "comment": "feat: Add reflow to PromptStarterV2 single column appearance."
+          },
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "3b0d585a760015b5fda7fb09b0fe17d965986c44",
+            "comment": "feat: Add motion to PromptStarterV2 within PromptStarterList."
+          },
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "f88e520cd18013d1c10bbb826d7f121c39117f1b",
+            "comment": "feat: Create `PromptStarterV2` component."
+          },
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "1ebd4b30e170c9b6d335bb4f461ac6e99918453f",
+            "comment": "feat: Implement PromptStarterList component."
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 19 May 2025 18:04:28 GMT",
       "tag": "@fluentui-copilot/react-prompt-starter_v0.9.4",

package/CHANGELOG.md

@@ -1,18 +1,30 @@
 # Change Log - @fluentui-copilot/react-prompt-starter
 
-This log was last generated on Tue, 10 Jun 2025 04:13:04 GMT and should not be manually modified.
+This log was last generated on Fri, 13 Jun 2025 04:12:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250610-0405-e23ffd06.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20250610-0405-e23ffd06.1)
+## [0.0.0-nightly-20250613-0405-485ea952.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20250613-0405-485ea952.1)
 
-Tue, 10 Jun 2025 04:13:04 GMT 
-[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.9.4..@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20250610-0405-e23ffd06.1)
+Fri, 13 Jun 2025 04:12:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.10.0..@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20250613-0405-485ea952.1)
 
 ### Changes
 
 - Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
 
+## [0.10.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.10.0)
+
+Thu, 12 Jun 2025 17:50:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.9.4..@fluentui-copilot/react-prompt-starter_v0.10.0)
+
+### Patches
+
+- feat: Add reflow to PromptStarterV2 single column appearance. ([PR #3131](https://github.com/microsoft/fluentai/pull/3131) by jiangemma@microsoft.com)
+- feat: Add motion to PromptStarterV2 within PromptStarterList. ([PR #3129](https://github.com/microsoft/fluentai/pull/3129) by jiangemma@microsoft.com)
+- feat: Create `PromptStarterV2` component. ([PR #3103](https://github.com/microsoft/fluentai/pull/3103) by jiangemma@microsoft.com)
+- feat: Implement PromptStarterList component. ([PR #3112](https://github.com/microsoft/fluentai/pull/3112) by jiangemma@microsoft.com)
+
 ## [0.9.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.9.4)
 
 Mon, 19 May 2025 18:04:28 GMT 

package/dist/index.d.ts

@@ -1,15 +1,63 @@
 import type { BadgeProps } from '@fluentui/react-components';
+import type { Button } from '@fluentui/react-components';
 import type { ComponentProps } from '@fluentui/react-components';
 import type { ComponentState } from '@fluentui/react-components';
 import type { DesignVersion } 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';
 import type { SlotClassNames } from '@fluentui/react-components';
+import type { UseArrowNavigationGroupOptions } from '@fluentui/react-components';
 
 export declare const PromptStarter: ForwardRefComponent<PromptStarterProps>;
 
 export declare const promptStarterClassNames: SlotClassNames<PromptStarterSlots>;
 
+export declare const PromptStarterList: ForwardRefComponent<PromptStarterListProps>;
+
+export declare const promptStarterListClassNames: SlotClassNames<PromptStarterListSlots>;
+
+declare type PromptStarterListContextValue = Pick<PromptStarterListState, 'numberOfColumns' | 'isExpanded'>;
+
+/**
+ * PromptStarterList Props
+ */
+export declare type PromptStarterListProps = ComponentProps<PromptStarterListSlots> & DesignVersion & {
+    /**
+     * Text for the expand button when the list is collapsed.
+     *
+     * default: "Show more"
+     */
+    expandButtonLabel?: string;
+    /**
+     * Text for the expand button when the list is expanded.
+     *
+     * default: "Show less"
+     */
+    collapseButtonLabel?: string;
+    /**
+     * Arrow navigation options. This can be used to customize Tabster's direction,
+     * tab behavior, and memoization options.
+     *
+     * default: {  axis: 'horizontal', memorizeCurrent: true }
+     */
+    arrowNavigationOptions?: UseArrowNavigationGroupOptions;
+};
+
+export declare type PromptStarterListSlots = {
+    root: NonNullable<Slot<'div'>>;
+    gridWrapper: NonNullable<Slot<'div'>>;
+    expandButton?: Slot<typeof Button>;
+};
+
+/**
+ * State used in rendering PromptStarterList
+ */
+export declare type PromptStarterListState = ComponentState<PromptStarterListSlots> & Required<Pick<PromptStarterListProps, 'designVersion'>> & {
+    numberOfColumns: number;
+    isExpanded?: boolean;
+};
+
 /**
  * PromptStarter Props
  */
@@ -35,7 +83,7 @@ export declare const promptStarterV2ClassNames: SlotClassNames<PromptStarterV2Sl
 /**
  * PromptStarter Props
  */
-export declare type PromptStarterV2Props = Omit<ComponentProps<PromptStarterV2Slots>, 'disabled'> & {};
+export declare type PromptStarterV2Props = Omit<ComponentProps<PromptStarterV2Slots>, 'disabled'>;
 
 export declare type PromptStarterV2Slots = {
     root: NonNullable<Slot<'div'>>;
@@ -49,10 +97,17 @@ export declare type PromptStarterV2Slots = {
 /**
  * State used in rendering PromptStarter
  */
-export declare type PromptStarterV2State = ComponentState<PromptStarterV2Slots>;
+export declare type PromptStarterV2State = ComponentState<PromptStarterV2Slots> & {
+    isSingleColumn?: boolean;
+};
 
 export declare const renderPromptStarter_unstable: (state: PromptStarterState) => JSX.Element;
 
+/**
+ * Render the final JSX of PromptStarterList
+ */
+export declare const renderPromptStarterList_unstable: (state: PromptStarterListState, contextValue: PromptStarterListContextValue) => JSX.Element;
+
 export declare const renderPromptStarterV2_unstable: (state: PromptStarterV2State) => JSX.Element;
 
 /**
@@ -66,6 +121,22 @@ export declare const renderPromptStarterV2_unstable: (state: PromptStarterV2Stat
  */
 export declare const usePromptStarter_unstable: (props: PromptStarterProps, ref: React.Ref<HTMLButtonElement>) => PromptStarterState;
 
+/**
+ * Create the state required to render PromptStarterList.
+ *
+ * The returned state can be modified with hooks such as usePromptStarterListStyles_unstable,
+ * before being passed to renderPromptStarterList_unstable.
+ *
+ * @param props - props from this instance of PromptStarterList
+ * @param ref - reference to root HTMLElement of PromptStarterList
+ */
+export declare const usePromptStarterList_unstable: (props: PromptStarterListProps, ref: React_2.Ref<HTMLDivElement>) => PromptStarterListState;
+
+/**
+ * Apply styling to the PromptStarterList slots based on the state
+ */
+export declare const usePromptStarterListStyles_unstable: (state: PromptStarterListState) => PromptStarterListState;
+
 export declare const usePromptStarterStyles_unstable: (state: PromptStarterState) => PromptStarterState;
 
 /**

package/lib/PromptStarterList.js

@@ -0,0 +1,2 @@
+export { PromptStarterList, renderPromptStarterList_unstable, usePromptStarterList_unstable, promptStarterListClassNames, usePromptStarterListStyles_unstable } from './components/PromptStarterV2/PromptStarterList/index';
+//# sourceMappingURL=PromptStarterList.js.map

package/lib/PromptStarterList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptStarterList.ts"],"sourcesContent":["export {\n  PromptStarterList,\n  renderPromptStarterList_unstable,\n  usePromptStarterList_unstable,\n  promptStarterListClassNames,\n  usePromptStarterListStyles_unstable,\n} from './components/PromptStarterV2/PromptStarterList/index';\nexport type {\n  PromptStarterListProps,\n  PromptStarterListSlots,\n  PromptStarterListState,\n  PromptStarterListContextValue,\n} from './components/PromptStarterV2/PromptStarterList/index';\n"],"names":["PromptStarterList","renderPromptStarterList_unstable","usePromptStarterList_unstable","promptStarterListClassNames","usePromptStarterListStyles_unstable"],"rangeMappings":"","mappings":"AAAA,SACEA,iBAAiB,EACjBC,gCAAgC,EAChCC,6BAA6B,EAC7BC,2BAA2B,EAC3BC,mCAAmC,QAC9B,uDAAuD"}

package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PromptStarter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type PromptStarterSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button'>>;\n  icon: NonNullable<Slot<'span'>>;\n  prompt: NonNullable<Slot<'span'>>;\n  reasonMarker?: Slot<'span'>;\n  actions?: Slot<'span'>;\n};\n\n/**\n * PromptStarter Props\n */\nexport type PromptStarterProps = Omit<ComponentProps<PromptStarterSlots>, 'disabled'> & {};\n\n/**\n * State used in rendering PromptStarter\n */\nexport type PromptStarterState = ComponentState<PromptStarterSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC,GACD,WAAoE"}
+{"version":3,"sources":["PromptStarter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type PromptStarterSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button'>>;\n  icon: NonNullable<Slot<'span'>>;\n  prompt: NonNullable<Slot<'span'>>;\n  reasonMarker?: Slot<'span'>;\n  actions?: Slot<'span'>;\n};\n\n/**\n * PromptStarter Props\n */\nexport type PromptStarterProps = Omit<ComponentProps<PromptStarterSlots>, 'disabled'>;\n\n/**\n * State used in rendering PromptStarter\n */\nexport type PromptStarterState = ComponentState<PromptStarterSlots> & {\n  isSingleColumn?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC,GACD,WAEE"}

package/lib/components/PromptStarterV2/PromptStarter/promptStarterMotion.js

@@ -0,0 +1,52 @@
+import { createPresenceComponent } from '@fluentui/react-components';
+export const PromptStarterMotion = createPresenceComponent(({
+  index,
+  numberOfColumns
+}) => {
+  const isFirstRow = index < numberOfColumns;
+  const delay = isFirstRow ? index * 50 : (index - numberOfColumns) * 50;
+  const opacityDuration = 100;
+  const opacityOffset = delay / (delay + opacityDuration);
+  const opacityEasing = 'linear';
+  const scaleDuration = 500;
+  const scaleOffset = delay / (delay + scaleDuration);
+  const scaleEasing = `cubic-bezier(0.22, 1.59, 0.46, 1)`;
+  const opacityExitDuration = 200;
+  return {
+    enter: [{
+      keyframes: [{
+        opacity: 0
+      }, {
+        opacity: 0,
+        offset: opacityOffset
+      }, {
+        opacity: 1
+      }],
+      easing: opacityEasing,
+      duration: opacityDuration + delay
+    }, {
+      keyframes: [{
+        transform: 'scale(0.9)'
+      }, {
+        transform: 'scale(0.9)',
+        offset: scaleOffset
+      }, {
+        transform: 'scale(1)'
+      }],
+      easing: scaleEasing,
+      duration: scaleDuration + delay
+    }],
+    exit: {
+      keyframes: [{
+        opacity: 1
+      }, {
+        opacity: 1
+      }, {
+        opacity: 0
+      }],
+      easing: opacityEasing,
+      duration: opacityExitDuration
+    }
+  };
+});
+//# sourceMappingURL=promptStarterMotion.js.map

package/lib/components/PromptStarterV2/PromptStarter/promptStarterMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["promptStarterMotion.ts"],"sourcesContent":["import { createPresenceComponent } from '@fluentui/react-components';\n\nexport type PromptStarterMotionParams = { index: number; numberOfColumns: number };\n\nexport const PromptStarterMotion = createPresenceComponent<PromptStarterMotionParams>(({ index, numberOfColumns }) => {\n  const isFirstRow = index < numberOfColumns;\n  const delay = isFirstRow ? index * 50 : (index - numberOfColumns) * 50;\n\n  const opacityDuration = 100;\n  const opacityOffset = delay / (delay + opacityDuration);\n  const opacityEasing = 'linear';\n\n  const scaleDuration = 500;\n  const scaleOffset = delay / (delay + scaleDuration);\n  const scaleEasing = `cubic-bezier(0.22, 1.59, 0.46, 1)`;\n\n  const opacityExitDuration = 200;\n\n  return {\n    enter: [\n      {\n        keyframes: [{ opacity: 0 }, { opacity: 0, offset: opacityOffset }, { opacity: 1 }],\n        easing: opacityEasing,\n        duration: opacityDuration + delay,\n      },\n      {\n        keyframes: [\n          { transform: 'scale(0.9)' },\n          { transform: 'scale(0.9)', offset: scaleOffset },\n          { transform: 'scale(1)' },\n        ],\n        easing: scaleEasing,\n        duration: scaleDuration + delay,\n      },\n    ],\n    exit: {\n      keyframes: [{ opacity: 1 }, { opacity: 1 }, { opacity: 0 }],\n      easing: opacityEasing,\n      duration: opacityExitDuration,\n    },\n  };\n});\n"],"names":["createPresenceComponent","PromptStarterMotion","index","numberOfColumns","isFirstRow","delay","opacityDuration","opacityOffset","opacityEasing","scaleDuration","scaleOffset","scaleEasing","opacityExitDuration","enter","keyframes","opacity","offset","easing","duration","transform","exit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,uBAAuB,QAAQ,6BAA6B;AAIrE,OAAO,MAAMC,sBAAsBD,wBAAmD,CAAC,EAAEE,KAAK,EAAEC,eAAe,EAAE;IAC/G,MAAMC,aAAaF,QAAQC;IAC3B,MAAME,QAAQD,aAAaF,QAAQ,KAAK,AAACA,CAAAA,QAAQC,eAAc,IAAK;IAEpE,MAAMG,kBAAkB;IACxB,MAAMC,gBAAgBF,QAASA,CAAAA,QAAQC,eAAc;IACrD,MAAME,gBAAgB;IAEtB,MAAMC,gBAAgB;IACtB,MAAMC,cAAcL,QAASA,CAAAA,QAAQI,aAAY;IACjD,MAAME,cAAc,CAAC,iCAAiC,CAAC;IAEvD,MAAMC,sBAAsB;IAE5B,OAAO;QACLC,OAAO;YACL;gBACEC,WAAW;oBAAC;wBAAEC,SAAS;oBAAE;oBAAG;wBAAEA,SAAS;wBAAGC,QAAQT;oBAAc;oBAAG;wBAAEQ,SAAS;oBAAE;iBAAE;gBAClFE,QAAQT;gBACRU,UAAUZ,kBAAkBD;YAC9B;YACA;gBACES,WAAW;oBACT;wBAAEK,WAAW;oBAAa;oBAC1B;wBAAEA,WAAW;wBAAcH,QAAQN;oBAAY;oBAC/C;wBAAES,WAAW;oBAAW;iBACzB;gBACDF,QAAQN;gBACRO,UAAUT,gBAAgBJ;YAC5B;SACD;QACDe,MAAM;YACJN,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;YAC3DE,QAAQT;YACRU,UAAUN;QACZ;IACF;AACF,GAAG"}

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarter.js

@@ -1,4 +1,5 @@
-import { getIntrinsicElementProps, slot, useId } from '@fluentui/react-components';
+import { getIntrinsicElementProps, slot, useFocusableGroup, useId } from '@fluentui/react-components';
+import { usePromptStarterListContext } from '../../../contexts/PromptStarterListContext';
 /**
  * Create the state required to render PromptStarter.
  *
@@ -10,7 +11,10 @@ import { getIntrinsicElementProps, slot, useId } from '@fluentui/react-component
  */
 export const usePromptStarter_unstable = (props, ref) => {
   const id = useId('prompt-starter');
+  const focusAttrs = useFocusableGroup();
+  const numberOfColumns = usePromptStarterListContext(ctx => ctx.numberOfColumns);
   const state = {
+    isSingleColumn: numberOfColumns === 1,
     components: {
       root: 'div',
       primaryAction: 'button',
@@ -23,6 +27,7 @@ export const usePromptStarter_unstable = (props, ref) => {
       ref,
       'aria-labelledby': `${id}-prompt`,
       'aria-describedby': `${id}-icon, ${id}-reasonMarker`,
+      ...focusAttrs,
       ...props
     }), {
       elementType: 'div'

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useId } from '@fluentui/react-components';\nimport type { PromptStarterProps, PromptStarterState } from './PromptStarter.types';\n\n/**\n * Create the state required to render PromptStarter.\n *\n * The returned state can be modified with hooks such as usePromptStarterStyles_unstable,\n * before being passed to renderPromptStarter_unstable.\n *\n * @param props - props from this instance of PromptStarter\n * @param ref - reference to root HTMLElement of PromptStarter\n */\nexport const usePromptStarter_unstable = (\n  props: PromptStarterProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptStarterState => {\n  const id = useId('prompt-starter');\n\n  const state: PromptStarterState = {\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      icon: 'span',\n      prompt: 'span',\n      reasonMarker: 'span',\n      actions: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        'aria-labelledby': `${id}-prompt`,\n        'aria-describedby': `${id}-icon, ${id}-reasonMarker`,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    primaryAction: slot.always(props.primaryAction, {\n      elementType: 'button',\n    }),\n    icon: slot.always(props.icon, {\n      defaultProps: { id: `${id}-icon` },\n      elementType: 'span',\n    }),\n    prompt: slot.always(props.prompt, {\n      defaultProps: { id: `${id}-prompt` },\n      elementType: 'span',\n    }),\n    reasonMarker: slot.optional(props.reasonMarker, {\n      defaultProps: { id: `${id}-reasonMarker` },\n      elementType: 'span',\n    }),\n    actions: slot.optional(props.actions, { elementType: 'span' }),\n  };\n\n  return state;\n};\n"],"names":["getIntrinsicElementProps","slot","useId","usePromptStarter_unstable","props","ref","id","state","components","root","primaryAction","icon","prompt","reasonMarker","actions","always","elementType","defaultProps","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AAGnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,KAAKJ,MAAM;IAEjB,MAAMK,QAA4B;QAChCC,YAAY;YACVC,MAAM;YACNC,eAAe;YACfC,MAAM;YACNC,QAAQ;YACRC,cAAc;YACdC,SAAS;QACX;QACAL,MAAMR,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9BK;YACA,mBAAmB,CAAC,EAAEC,GAAG,OAAO,CAAC;YACjC,oBAAoB,CAAC,EAAEA,GAAG,OAAO,EAAEA,GAAG,aAAa,CAAC;YACpD,GAAGF,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;QAEvBN,eAAeT,KAAKc,MAAM,CAACX,MAAMM,aAAa,EAAE;YAC9CM,aAAa;QACf;QACAL,MAAMV,KAAKc,MAAM,CAACX,MAAMO,IAAI,EAAE;YAC5BM,cAAc;gBAAEX,IAAI,CAAC,EAAEA,GAAG,KAAK,CAAC;YAAC;YACjCU,aAAa;QACf;QACAJ,QAAQX,KAAKc,MAAM,CAACX,MAAMQ,MAAM,EAAE;YAChCK,cAAc;gBAAEX,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAAC;YACnCU,aAAa;QACf;QACAH,cAAcZ,KAAKiB,QAAQ,CAACd,MAAMS,YAAY,EAAE;YAC9CI,cAAc;gBAAEX,IAAI,CAAC,EAAEA,GAAG,aAAa,CAAC;YAAC;YACzCU,aAAa;QACf;QACAF,SAASb,KAAKiB,QAAQ,CAACd,MAAMU,OAAO,EAAE;YAAEE,aAAa;QAAO;IAC9D;IAEA,OAAOT;AACT,EAAE"}
+{"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useFocusableGroup, useId } from '@fluentui/react-components';\nimport { usePromptStarterListContext } from '../../../contexts/PromptStarterListContext';\nimport type { PromptStarterProps, PromptStarterState } from './PromptStarter.types';\n\n/**\n * Create the state required to render PromptStarter.\n *\n * The returned state can be modified with hooks such as usePromptStarterStyles_unstable,\n * before being passed to renderPromptStarter_unstable.\n *\n * @param props - props from this instance of PromptStarter\n * @param ref - reference to root HTMLElement of PromptStarter\n */\nexport const usePromptStarter_unstable = (\n  props: PromptStarterProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptStarterState => {\n  const id = useId('prompt-starter');\n  const focusAttrs = useFocusableGroup();\n\n  const numberOfColumns = usePromptStarterListContext(ctx => ctx.numberOfColumns);\n\n  const state: PromptStarterState = {\n    isSingleColumn: numberOfColumns === 1,\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      icon: 'span',\n      prompt: 'span',\n      reasonMarker: 'span',\n      actions: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        'aria-labelledby': `${id}-prompt`,\n        'aria-describedby': `${id}-icon, ${id}-reasonMarker`,\n        ...focusAttrs,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    primaryAction: slot.always(props.primaryAction, {\n      elementType: 'button',\n    }),\n    icon: slot.always(props.icon, {\n      defaultProps: { id: `${id}-icon` },\n      elementType: 'span',\n    }),\n    prompt: slot.always(props.prompt, {\n      defaultProps: { id: `${id}-prompt` },\n      elementType: 'span',\n    }),\n    reasonMarker: slot.optional(props.reasonMarker, {\n      defaultProps: { id: `${id}-reasonMarker` },\n      elementType: 'span',\n    }),\n    actions: slot.optional(props.actions, { elementType: 'span' }),\n  };\n\n  return state;\n};\n"],"names":["getIntrinsicElementProps","slot","useFocusableGroup","useId","usePromptStarterListContext","usePromptStarter_unstable","props","ref","id","focusAttrs","numberOfColumns","ctx","state","isSingleColumn","components","root","primaryAction","icon","prompt","reasonMarker","actions","always","elementType","defaultProps","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,iBAAiB,EAAEC,KAAK,QAAQ,6BAA6B;AACtG,SAASC,2BAA2B,QAAQ,6CAA6C;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,KAAKL,MAAM;IACjB,MAAMM,aAAaP;IAEnB,MAAMQ,kBAAkBN,4BAA4BO,CAAAA,MAAOA,IAAID,eAAe;IAE9E,MAAME,QAA4B;QAChCC,gBAAgBH,oBAAoB;QACpCI,YAAY;YACVC,MAAM;YACNC,eAAe;YACfC,MAAM;YACNC,QAAQ;YACRC,cAAc;YACdC,SAAS;QACX;QACAL,MAAMd,KAAKoB,MAAM,CACfrB,yBAAyB,OAAO;YAC9BO;YACA,mBAAmB,CAAC,EAAEC,GAAG,OAAO,CAAC;YACjC,oBAAoB,CAAC,EAAEA,GAAG,OAAO,EAAEA,GAAG,aAAa,CAAC;YACpD,GAAGC,UAAU;YACb,GAAGH,KAAK;QACV,IACA;YAAEgB,aAAa;QAAM;QAEvBN,eAAef,KAAKoB,MAAM,CAACf,MAAMU,aAAa,EAAE;YAC9CM,aAAa;QACf;QACAL,MAAMhB,KAAKoB,MAAM,CAACf,MAAMW,IAAI,EAAE;YAC5BM,cAAc;gBAAEf,IAAI,CAAC,EAAEA,GAAG,KAAK,CAAC;YAAC;YACjCc,aAAa;QACf;QACAJ,QAAQjB,KAAKoB,MAAM,CAACf,MAAMY,MAAM,EAAE;YAChCK,cAAc;gBAAEf,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAAC;YACnCc,aAAa;QACf;QACAH,cAAclB,KAAKuB,QAAQ,CAAClB,MAAMa,YAAY,EAAE;YAC9CI,cAAc;gBAAEf,IAAI,CAAC,EAAEA,GAAG,aAAa,CAAC;YAAC;YACzCc,aAAa;QACf;QACAF,SAASnB,KAAKuB,QAAQ,CAAClB,MAAMc,OAAO,EAAE;YAAEE,aAAa;QAAO;IAC9D;IAEA,OAAOV;AACT,EAAE"}

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js

@@ -103,8 +103,7 @@ const useStyles = __styles({
   icon: {
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
-    sshi5w: "fntfeoj",
-    B3oa8pd: "fyhwzhv"
+    sshi5w: "fntfeoj"
   },
   actions: {
     jrapky: 0,
@@ -125,8 +124,7 @@ const useStyles = __styles({
     B3o57yi: 0,
     Bmy1vo4: 0,
     Bkqvd7p: 0,
-    Bi2q7bf: "f1964ud6",
-    B3oa8pd: "fyhwzhv"
+    Bi2q7bf: "f1964ud6"
   },
   prompt: {
     Bahqtrf: "fk6fouc",
@@ -142,8 +140,10 @@ const useStyles = __styles({
     Bahqtrf: "fk6fouc",
     Be2twd7: "f13mqy1h",
     Bhrd7zp: "figsok6",
-    Bg96gwp: "fcpl73t",
-    B3oa8pd: "fyhwzhv"
+    Bg96gwp: "fcpl73t"
+  },
+  singleColumnStyles: {
+    mc9l5x: "fjseox"
   }
 }, {
   d: [[".fcdwmbt{grid-row:1/3;}", {
@@ -170,7 +170,7 @@ const useStyles = __styles({
     p: -1
   }], ".f5p0z4x{opacity:1;}", [".f1964ud6{transition:opacity var(--durationFast) var(--curveLinear);}", {
     p: -1
-  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1rvi9lw{display:-webkit-box;}", ".fpfc2by{-webkit-box-orient:vertical;}", ".f1lvsx7g{-webkit-line-clamp:2;}", ".f1sil6mw{overflow-y:hidden;}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}"],
+  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1rvi9lw{display:-webkit-box;}", ".fpfc2by{-webkit-box-orient:vertical;}", ".f1lvsx7g{-webkit-line-clamp:2;}", ".f1sil6mw{overflow-y:hidden;}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fjseox{display:none;}"],
   f: [".ftqa4ok:focus{outline-style:none;}"],
   i: [".f2hkw1w:focus-visible{outline-style:none;}"],
   m: [["@media (forced-colors: active){.f1j6vpng[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
@@ -179,24 +179,25 @@ const useStyles = __styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f987i1v[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (max-width: 450px){.fyhwzhv{display:none;}}", {
-    m: "(max-width: 450px)"
   }]]
 });
 export const usePromptStarterStyles_unstable = state => {
   'use no memo';
 
+  const {
+    isSingleColumn
+  } = state;
   const styles = useStyles();
   const rootResetStyles = useRootResetStyles();
   state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);
   state.primaryAction.className = mergeClasses(promptStarterClassNames.primaryAction, styles.primaryAction, state.primaryAction.className);
-  state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);
+  state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, isSingleColumn && styles.singleColumnStyles, state.icon.className);
   state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);
   if (state.reasonMarker) {
-    state.reasonMarker.className = mergeClasses(promptStarterClassNames.reasonMarker, styles.reasonMarker, state.reasonMarker.className);
+    state.reasonMarker.className = mergeClasses(promptStarterClassNames.reasonMarker, styles.reasonMarker, isSingleColumn && styles.singleColumnStyles, state.reasonMarker.className);
   }
   if (state.actions) {
-    state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, state.actions.className);
+    state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, isSingleColumn && styles.singleColumnStyles, state.actions.className);
   }
   return state;
 };

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePromptStarterStyles.styles.ts"],"sourcesContent":["import {\n  makeStyles,\n  makeResetStyles,\n  mergeClasses,\n  shorthands,\n  typographyStyles,\n  createFocusOutlineStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PromptStarterSlots, PromptStarterState } from './PromptStarter.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptStarterClassNames: SlotClassNames<PromptStarterSlots> = {\n  root: 'fai-PromptStarter',\n  primaryAction: 'fai-PromptStarter__primaryAction',\n  icon: 'fai-PromptStarter__icon',\n  prompt: 'fai-PromptStarter__prompt',\n  reasonMarker: 'fai-PromptStarter__reasonMarker',\n  actions: 'fai-PromptStarter__actions',\n};\n\nconst useRootResetStyles = makeResetStyles({\n  display: 'grid',\n  gridTemplateColumns: '1fr auto',\n  gridTemplateRows: 'max-content auto',\n  minWidth: '214px',\n\n  // Apply styles to the primary action on hover / active states\n  '&:hover': {\n    [`& .${promptStarterClassNames.primaryAction}`]: {\n      boxShadow: tokens.shadow16,\n      transform: 'scale(1.03)',\n      transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n    },\n  },\n  '&:active': {\n    [`& .${promptStarterClassNames.primaryAction}`]: {\n      boxShadow: tokens.shadow8,\n      transform: 'scale(1.03)',\n      transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n    },\n  },\n\n  // Hide actions when not focused or hovered\n  ':not(:focus-within):not(:hover)': {\n    [`& .${promptStarterClassNames.actions}`]: {\n      clip: 'rect(0px, 0px, 0px, 0px)',\n      height: '1px',\n      margin: '-1px',\n      overflow: 'hidden',\n      padding: '0px',\n      width: '1px',\n      position: 'absolute',\n      opacity: 0,\n    },\n  },\n});\n\nconst useStyles = makeStyles({\n  primaryAction: {\n    gridRow: '1 / 3',\n    gridColumn: '1 / 3',\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n    borderRadius: '28px',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground2,\n    fontFamily: tokens.fontFamilyBase,\n    cursor: 'pointer',\n    outlineStyle: 'none',\n    textAlign: 'left',\n    rowGap: tokens.spacingHorizontalS,\n    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    ...createFocusOutlineStyle({ style: { outlineRadius: '28px' } }),\n  },\n\n  primaryActionHovered: {\n    boxShadow: tokens.shadow16,\n    transform: 'scale(1.03)',\n    transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n  },\n\n  icon: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: tokens.spacingVerticalXXL,\n\n    // Reflow: hide icon when under 450px\n    '@media (max-width: 450px)': {\n      display: 'none',\n    },\n  },\n  actions: {\n    margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}\n             ${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,\n    position: 'relative',\n    gridRow: '1 / 2',\n    gridColumn: '2 / 3',\n\n    opacity: 1,\n    transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`,\n\n    // Reflow: hide actions when under 450px\n    '@media (max-width: 450px)': {\n      display: 'none',\n    },\n  },\n  prompt: {\n    ...typographyStyles.body1Strong,\n\n    // Truncate text after two lines.\n    display: '-webkit-box',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    overflowY: 'hidden',\n  },\n  reasonMarker: {\n    ...typographyStyles.caption2,\n\n    // Reflow: hide reason marker when under 450px\n    '@media (max-width: 450px)': {\n      display: 'none',\n    },\n  },\n});\n\nexport const usePromptStarterStyles_unstable = (state: PromptStarterState): PromptStarterState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const rootResetStyles = useRootResetStyles();\n  state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    promptStarterClassNames.primaryAction,\n    styles.primaryAction,\n    state.primaryAction.className,\n  );\n  state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);\n  state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);\n  if (state.reasonMarker) {\n    state.reasonMarker.className = mergeClasses(\n      promptStarterClassNames.reasonMarker,\n      styles.reasonMarker,\n      state.reasonMarker.className,\n    );\n  }\n  if (state.actions) {\n    state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, state.actions.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","tokens","promptStarterClassNames","root","primaryAction","icon","prompt","reasonMarker","actions","useRootResetStyles","display","gridTemplateColumns","gridTemplateRows","minWidth","boxShadow","shadow16","transform","transition","durationNormal","curveDecelerateMin","shadow8","clip","height","margin","overflow","padding","width","position","opacity","useStyles","gridRow","gridColumn","flexDirection","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","rowGap","spacingHorizontalS","spacingVerticalL","spacingHorizontalL","border","strokeWidthThin","colorNeutralStroke2","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","body1Strong","overflowY","caption2","usePromptStarterStyles_unstable","state","styles","rootResetStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["usePromptStarterStyles.styles.ts"],"sourcesContent":["import {\n  makeStyles,\n  makeResetStyles,\n  mergeClasses,\n  shorthands,\n  typographyStyles,\n  createFocusOutlineStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PromptStarterSlots, PromptStarterState } from './PromptStarter.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptStarterClassNames: SlotClassNames<PromptStarterSlots> = {\n  root: 'fai-PromptStarter',\n  primaryAction: 'fai-PromptStarter__primaryAction',\n  icon: 'fai-PromptStarter__icon',\n  prompt: 'fai-PromptStarter__prompt',\n  reasonMarker: 'fai-PromptStarter__reasonMarker',\n  actions: 'fai-PromptStarter__actions',\n};\n\nconst useRootResetStyles = makeResetStyles({\n  display: 'grid',\n  gridTemplateColumns: '1fr auto',\n  gridTemplateRows: 'max-content auto',\n  minWidth: '214px',\n\n  // Apply styles to the primary action on hover / active states\n  '&:hover': {\n    [`& .${promptStarterClassNames.primaryAction}`]: {\n      boxShadow: tokens.shadow16,\n      transform: 'scale(1.03)',\n      transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n    },\n  },\n  '&:active': {\n    [`& .${promptStarterClassNames.primaryAction}`]: {\n      boxShadow: tokens.shadow8,\n      transform: 'scale(1.03)',\n      transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n    },\n  },\n\n  // Hide actions when not focused or hovered\n  ':not(:focus-within):not(:hover)': {\n    [`& .${promptStarterClassNames.actions}`]: {\n      clip: 'rect(0px, 0px, 0px, 0px)',\n      height: '1px',\n      margin: '-1px',\n      overflow: 'hidden',\n      padding: '0px',\n      width: '1px',\n      position: 'absolute',\n      opacity: 0,\n    },\n  },\n});\n\nconst useStyles = makeStyles({\n  primaryAction: {\n    gridRow: '1 / 3',\n    gridColumn: '1 / 3',\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n    borderRadius: '28px',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground2,\n    fontFamily: tokens.fontFamilyBase,\n    cursor: 'pointer',\n    outlineStyle: 'none',\n    textAlign: 'left',\n    rowGap: tokens.spacingHorizontalS,\n    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    ...createFocusOutlineStyle({ style: { outlineRadius: '28px' } }),\n  },\n\n  primaryActionHovered: {\n    boxShadow: tokens.shadow16,\n    transform: 'scale(1.03)',\n    transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n  },\n\n  icon: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: tokens.spacingVerticalXXL,\n  },\n  actions: {\n    margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}\n             ${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,\n    position: 'relative',\n    gridRow: '1 / 2',\n    gridColumn: '2 / 3',\n\n    opacity: 1,\n    transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`,\n  },\n  prompt: {\n    ...typographyStyles.body1Strong,\n\n    // Truncate text after two lines.\n    display: '-webkit-box',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    overflowY: 'hidden',\n  },\n  reasonMarker: {\n    ...typographyStyles.caption2,\n  },\n\n  // Hide icon, actions, and reason marker in single column appearance\n  singleColumnStyles: {\n    display: 'none',\n  },\n});\n\nexport const usePromptStarterStyles_unstable = (state: PromptStarterState): PromptStarterState => {\n  'use no memo';\n\n  const { isSingleColumn } = state;\n\n  const styles = useStyles();\n  const rootResetStyles = useRootResetStyles();\n  state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    promptStarterClassNames.primaryAction,\n    styles.primaryAction,\n    state.primaryAction.className,\n  );\n  state.icon.className = mergeClasses(\n    promptStarterClassNames.icon,\n    styles.icon,\n    isSingleColumn && styles.singleColumnStyles,\n    state.icon.className,\n  );\n  state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);\n  if (state.reasonMarker) {\n    state.reasonMarker.className = mergeClasses(\n      promptStarterClassNames.reasonMarker,\n      styles.reasonMarker,\n      isSingleColumn && styles.singleColumnStyles,\n      state.reasonMarker.className,\n    );\n  }\n  if (state.actions) {\n    state.actions.className = mergeClasses(\n      promptStarterClassNames.actions,\n      styles.actions,\n      isSingleColumn && styles.singleColumnStyles,\n      state.actions.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","tokens","promptStarterClassNames","root","primaryAction","icon","prompt","reasonMarker","actions","useRootResetStyles","display","gridTemplateColumns","gridTemplateRows","minWidth","boxShadow","shadow16","transform","transition","durationNormal","curveDecelerateMin","shadow8","clip","height","margin","overflow","padding","width","position","opacity","useStyles","gridRow","gridColumn","flexDirection","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","rowGap","spacingHorizontalS","spacingVerticalL","spacingHorizontalL","border","strokeWidthThin","colorNeutralStroke2","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","body1Strong","overflowY","caption2","singleColumnStyles","usePromptStarterStyles_unstable","state","isSingleColumn","styles","rootResetStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/PromptStarterV2/PromptStarterList/PromptStarterList.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { usePromptStarterList_unstable } from './usePromptStarterList';
+import { renderPromptStarterList_unstable } from './renderPromptStarterList';
+import { usePromptStarterListStyles_unstable } from './usePromptStarterListStyles.styles';
+import { usePromptStarterListContextValues } from './usePromptStarterListContextValues';
+export const PromptStarterList = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = usePromptStarterList_unstable(props, ref);
+  const contextValues = usePromptStarterListContextValues(state);
+  usePromptStarterListStyles_unstable(state);
+  return renderPromptStarterList_unstable(state, contextValues);
+});
+PromptStarterList.displayName = 'PromptStarterList';
+//# sourceMappingURL=PromptStarterList.js.map

package/lib/components/PromptStarterV2/PromptStarterList/PromptStarterList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptStarterList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptStarterList_unstable } from './usePromptStarterList';\nimport { renderPromptStarterList_unstable } from './renderPromptStarterList';\nimport { usePromptStarterListStyles_unstable } from './usePromptStarterListStyles.styles';\nimport type { PromptStarterListProps } from './PromptStarterList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { usePromptStarterListContextValues } from './usePromptStarterListContextValues';\n\nexport const PromptStarterList: ForwardRefComponent<PromptStarterListProps> = React.forwardRef((props, ref) => {\n  const state = usePromptStarterList_unstable(props, ref);\n  const contextValues = usePromptStarterListContextValues(state);\n\n  usePromptStarterListStyles_unstable(state);\n  return renderPromptStarterList_unstable(state, contextValues);\n});\n\nPromptStarterList.displayName = 'PromptStarterList';\n"],"names":["React","usePromptStarterList_unstable","renderPromptStarterList_unstable","usePromptStarterListStyles_unstable","usePromptStarterListContextValues","PromptStarterList","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAG1F,SAASC,iCAAiC,QAAQ,sCAAsC;AAExF,OAAO,MAAMC,kCAAiEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQR,8BAA8BM,OAAOC;IACnD,MAAME,gBAAgBN,kCAAkCK;IAExDN,oCAAoCM;IACpC,OAAOP,iCAAiCO,OAAOC;AACjD,GAAG;AAEHL,kBAAkBM,WAAW,GAAG"}

package/lib/components/PromptStarterV2/PromptStarterList/PromptStarterList.types.js

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

package/lib/components/PromptStarterV2/PromptStarterList/PromptStarterList.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptStarterList.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type {\n  ComponentProps,\n  ComponentState,\n  Slot,\n  Button,\n  UseArrowNavigationGroupOptions,\n} from '@fluentui/react-components';\n\nexport type PromptStarterListSlots = {\n  root: NonNullable<Slot<'div'>>;\n  gridWrapper: NonNullable<Slot<'div'>>;\n  expandButton?: Slot<typeof Button>;\n};\n\n/**\n * PromptStarterList Props\n */\nexport type PromptStarterListProps = ComponentProps<PromptStarterListSlots> &\n  DesignVersion & {\n    /**\n     * Text for the expand button when the list is collapsed.\n     *\n     * default: \"Show more\"\n     */\n    expandButtonLabel?: string;\n    /**\n     * Text for the expand button when the list is expanded.\n     *\n     * default: \"Show less\"\n     */\n    collapseButtonLabel?: string;\n    /**\n     * Arrow navigation options. This can be used to customize Tabster's direction,\n     * tab behavior, and memoization options.\n     *\n     * default: {  axis: 'horizontal', memorizeCurrent: true }\n     */\n    arrowNavigationOptions?: UseArrowNavigationGroupOptions;\n  };\n\n/**\n * State used in rendering PromptStarterList\n */\nexport type PromptStarterListState = ComponentState<PromptStarterListSlots> &\n  Required<Pick<PromptStarterListProps, 'designVersion'>> & {\n    numberOfColumns: number;\n    isExpanded?: boolean;\n  };\n\nexport type PromptStarterListContextValue = Pick<PromptStarterListState, 'numberOfColumns' | 'isExpanded'>;\n"],"names":[],"rangeMappings":"","mappings":"AAkDA,WAA2G"}

package/lib/components/PromptStarterV2/PromptStarterList/index.js

@@ -0,0 +1,5 @@
+export { PromptStarterList } from './PromptStarterList';
+export { renderPromptStarterList_unstable } from './renderPromptStarterList';
+export { usePromptStarterList_unstable } from './usePromptStarterList';
+export { promptStarterListClassNames, usePromptStarterListStyles_unstable } from './usePromptStarterListStyles.styles';
+//# sourceMappingURL=index.js.map

package/lib/components/PromptStarterV2/PromptStarterList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { PromptStarterList } from './PromptStarterList';\nexport type {\n  PromptStarterListProps,\n  PromptStarterListSlots,\n  PromptStarterListState,\n  PromptStarterListContextValue,\n} from './PromptStarterList.types';\nexport { renderPromptStarterList_unstable } from './renderPromptStarterList';\nexport { usePromptStarterList_unstable } from './usePromptStarterList';\nexport { promptStarterListClassNames, usePromptStarterListStyles_unstable } from './usePromptStarterListStyles.styles';\n"],"names":["PromptStarterList","renderPromptStarterList_unstable","usePromptStarterList_unstable","promptStarterListClassNames","usePromptStarterListStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;AAOxD,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,2BAA2B,EAAEC,mCAAmC,QAAQ,sCAAsC"}

package/lib/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots, PresenceGroup } from '@fluentui/react-components';
+import { PromptStarterListProvider } from '../../../contexts/PromptStarterListContext';
+/**
+ * Render the final JSX of PromptStarterList
+ */
+export const renderPromptStarterList_unstable = (state, contextValue) => {
+  assertSlots(state);
+  return /*#__PURE__*/_jsx(PromptStarterListProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsxs(state.root, {
+      children: [/*#__PURE__*/_jsx(PresenceGroup, {
+        children: /*#__PURE__*/_jsx(state.gridWrapper, {
+          children: state.root.children
+        })
+      }), state.expandButton && /*#__PURE__*/_jsx(state.expandButton, {})]
+    })
+  });
+};
+//# sourceMappingURL=renderPromptStarterList.js.map

package/lib/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderPromptStarterList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, PresenceGroup } from '@fluentui/react-components';\nimport { PromptStarterListProvider } from '../../../contexts/PromptStarterListContext';\nimport type {\n  PromptStarterListState,\n  PromptStarterListSlots,\n  PromptStarterListContextValue,\n} from './PromptStarterList.types';\n\n/**\n * Render the final JSX of PromptStarterList\n */\nexport const renderPromptStarterList_unstable = (\n  state: PromptStarterListState,\n  contextValue: PromptStarterListContextValue,\n) => {\n  assertSlots<PromptStarterListSlots>(state);\n\n  return (\n    <PromptStarterListProvider value={contextValue}>\n      <state.root>\n        <PresenceGroup>\n          <state.gridWrapper>{state.root.children}</state.gridWrapper>\n        </PresenceGroup>\n        {state.expandButton && <state.expandButton />}\n      </state.root>\n    </PromptStarterListProvider>\n  );\n};\n"],"names":["assertSlots","PresenceGroup","PromptStarterListProvider","renderPromptStarterList_unstable","state","contextValue","value","root","gridWrapper","children","expandButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,EAAEC,aAAa,QAAQ,6BAA6B;AACxE,SAASC,yBAAyB,QAAQ,6CAA6C;AAOvF;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEAL,YAAoCI;IAEpC,qBACE,KAACF;QAA0BI,OAAOD;kBAChC,cAAA,MAACD,MAAMG,IAAI;;8BACT,KAACN;8BACC,cAAA,KAACG,MAAMI,WAAW;kCAAEJ,MAAMG,IAAI,CAACE,QAAQ;;;gBAExCL,MAAMM,YAAY,kBAAI,KAACN,MAAMM,YAAY;;;;AAIlD,EAAE"}