@fluentui-copilot/react-prompt-starter 0.0.0-nightly-20251006-0406-b5da4f6a.1 → 0.0.0-nightly-20251013-0406-7c7739c8.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui-copilot/react-prompt-starter",
   "entries": [
     {
-      "date": "Mon, 06 Oct 2025 04:13:30 GMT",
-      "tag": "@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20251006-0406-b5da4f6a.1",
-      "version": "0.0.0-nightly-20251006-0406-b5da4f6a.1",
+      "date": "Mon, 13 Oct 2025 04:14:18 GMT",
+      "tag": "@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20251013-0406-7c7739c8.1",
+      "version": "0.0.0-nightly-20251013-0406-7c7739c8.1",
       "comments": {
         "prerelease": [
           {

package/CHANGELOG.md

@@ -1,13 +1,13 @@
 # Change Log - @fluentui-copilot/react-prompt-starter
 
-This log was last generated on Mon, 06 Oct 2025 04:13:30 GMT and should not be manually modified.
+This log was last generated on Mon, 13 Oct 2025 04:14:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20251006-0406-b5da4f6a.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20251006-0406-b5da4f6a.1)
+## [0.0.0-nightly-20251013-0406-7c7739c8.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20251013-0406-7c7739c8.1)
 
-Mon, 06 Oct 2025 04:13:30 GMT 
-[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.10.6..@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20251006-0406-b5da4f6a.1)
+Mon, 13 Oct 2025 04:14:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.10.6..@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20251013-0406-7c7739c8.1)
 
 ### Changes
 

package/dist/index.d.ts

@@ -4,7 +4,7 @@ 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 { JSX as JSX_2 } from 'react/jsx-runtime';
+import type { JSXElement } from '@fluentui/react-components';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-components';
 import type { SlotClassNames } from '@fluentui/react-components';
@@ -54,6 +54,7 @@ export declare type PromptStarterListProps = ComponentProps<Partial<PromptStarte
 export declare type PromptStarterListSlots = {
     root: NonNullable<Slot<'div'>>;
     gridWrapper: NonNullable<Slot<'div'>>;
+    actions?: Slot<'span'>;
     expandButton?: Slot<typeof Button>;
 };
 
@@ -96,6 +97,7 @@ export declare type PromptStarterV2Slots = {
     root: NonNullable<Slot<'div'>>;
     primaryAction: NonNullable<Slot<'button'>>;
     icon?: Slot<'span'>;
+    category?: Slot<'span'>;
     prompt: NonNullable<Slot<'span'>>;
     reasonMarker?: Slot<'span'>;
     actions?: Slot<'span'>;
@@ -108,14 +110,14 @@ export declare type PromptStarterV2State = ComponentState<PromptStarterV2Slots>
     isSingleColumn?: boolean;
 };
 
-export declare const renderPromptStarter_unstable: (state: PromptStarterState) => JSX_2.Element;
+export declare const renderPromptStarter_unstable: (state: PromptStarterState) => JSXElement;
 
 /**
  * Render the final JSX of PromptStarterList
  */
-export declare const renderPromptStarterList_unstable: (state: PromptStarterListState, contextValue: PromptStarterListContextValue) => JSX_2.Element;
+export declare const renderPromptStarterList_unstable: (state: PromptStarterListState, contextValue: PromptStarterListContextValue) => JSXElement;
 
-export declare const renderPromptStarterV2_unstable: (state: PromptStarterV2State) => JSX_2.Element;
+export declare const renderPromptStarterV2_unstable: (state: PromptStarterV2State) => JSXElement;
 
 /**
  * Create the state required to render PromptStarter.

package/lib/components/PromptStarter/renderPromptStarter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState) => {\n  assertSlots<PromptStarterSlots>(state);\n\n  return (\n    <state.root>\n      <state.icon />\n      <state.category>\n        {state.category.children} {state.badge && <state.badge />}\n      </state.category>\n      {state.prompt && <state.prompt />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderPromptStarter_unstable","state","root","icon","category","children","badge","prompt"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,IAAI;0BACX,MAACF,MAAMG,QAAQ;;oBACZH,MAAMG,QAAQ,CAACC,QAAQ;oBAAC;oBAAEJ,MAAMK,KAAK,kBAAI,KAACL,MAAMK,KAAK;;;YAEvDL,MAAMM,MAAM,kBAAI,KAACN,MAAMM,MAAM;;;AAGpC,EAAE"}
+{"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { JSXElement } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState): JSXElement => {\n  assertSlots<PromptStarterSlots>(state);\n\n  return (\n    <state.root>\n      <state.icon />\n      <state.category>\n        {state.category.children} {state.badge && <state.badge />}\n      </state.category>\n      {state.prompt && <state.prompt />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderPromptStarter_unstable","state","root","icon","category","children","badge","prompt"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAIzD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,IAAI;0BACX,MAACF,MAAMG,QAAQ;;oBACZH,MAAMG,QAAQ,CAACC,QAAQ;oBAAC;oBAAEJ,MAAMK,KAAK,kBAAI,KAACL,MAAMK,KAAK;;;YAEvDL,MAAMM,MAAM,kBAAI,KAACN,MAAMM,MAAM;;;AAGpC,EAAE"}

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?: 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"}
+{"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?: Slot<'span'>;\n  category?: 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":"AAiBA;;CAEC,GACD,WAEE"}

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

@@ -7,6 +7,7 @@ export const renderPromptStarter_unstable = (state)=>{
             /*#__PURE__*/ _jsxs(state.primaryAction, {
                 children: [
                     state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+                    state.category && /*#__PURE__*/ _jsx(state.category, {}),
                     /*#__PURE__*/ _jsx(state.prompt, {}),
                     state.reasonMarker && /*#__PURE__*/ _jsx(state.reasonMarker, {})
                 ]

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

@@ -1 +1 @@
-{"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState) => {\n  assertSlots<PromptStarterSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.icon && <state.icon />}\n        <state.prompt />\n        {state.reasonMarker && <state.reasonMarker />}\n      </state.primaryAction>\n      {state.actions && <state.actions />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderPromptStarter_unstable","state","root","primaryAction","icon","prompt","reasonMarker","actions"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBACE,MAACA,MAAMC,IAAI;;0BACT,MAACD,MAAME,aAAa;;oBACjBF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;kCAC1B,KAACH,MAAMI,MAAM;oBACZJ,MAAMK,YAAY,kBAAI,KAACL,MAAMK,YAAY;;;YAE3CL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;AAGtC,EAAE"}
+{"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { JSXElement } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState): JSXElement => {\n  assertSlots<PromptStarterSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.icon && <state.icon />}\n        {state.category && <state.category />}\n        <state.prompt />\n        {state.reasonMarker && <state.reasonMarker />}\n      </state.primaryAction>\n      {state.actions && <state.actions />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderPromptStarter_unstable","state","root","primaryAction","icon","category","prompt","reasonMarker","actions"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAIzD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBACE,MAACA,MAAMC,IAAI;;0BACT,MAACD,MAAME,aAAa;;oBACjBF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;oBACzBH,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ;kCAClC,KAACJ,MAAMK,MAAM;oBACZL,MAAMM,YAAY,kBAAI,KAACN,MAAMM,YAAY;;;YAE3CN,MAAMO,OAAO,kBAAI,KAACP,MAAMO,OAAO;;;AAGtC,EAAE"}

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

@@ -21,6 +21,7 @@ import { usePromptStarterListContext } from '../../../contexts/PromptStarterList
             root: 'div',
             primaryAction: 'button',
             icon: 'span',
+            category: 'span',
             prompt: 'span',
             reasonMarker: 'span',
             actions: 'span'
@@ -35,7 +36,7 @@ import { usePromptStarterListContext } from '../../../contexts/PromptStarterList
         }),
         primaryAction: slot.always(props.primaryAction, {
             defaultProps: {
-                'aria-labelledby': `${id}-prompt`,
+                'aria-labelledby': `${id}-category ${id}-prompt`,
                 'aria-describedby': `${id}-icon ${id}-reasonMarker`
             },
             elementType: 'button'
@@ -46,6 +47,12 @@ import { usePromptStarterListContext } from '../../../contexts/PromptStarterList
             },
             elementType: 'span'
         }) : undefined,
+        category: !isSingleColumn ? slot.optional(props.category, {
+            defaultProps: {
+                id: `${id}-category`
+            },
+            elementType: 'span'
+        }) : undefined,
         prompt: slot.always(props.prompt, {
             defaultProps: {
                 id: `${id}-prompt`

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

@@ -1 +1 @@
-{"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  // if this is defined, the context exists and the Prompt is within PromptStarterList\n  const isWithinList = typeof numberOfColumns === 'number';\n\n  const isSingleColumn = numberOfColumns === 1;\n\n  const state: PromptStarterState = {\n    isSingleColumn,\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        role: isWithinList ? 'listitem' : undefined,\n        ...focusAttrs,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    primaryAction: slot.always(props.primaryAction, {\n      defaultProps: {\n        'aria-labelledby': `${id}-prompt`,\n        'aria-describedby': `${id}-icon ${id}-reasonMarker`,\n      },\n      elementType: 'button',\n    }),\n    icon: !isSingleColumn\n      ? slot.optional(props.icon, {\n          defaultProps: { id: `${id}-icon` },\n          elementType: 'span',\n        })\n      : undefined,\n    prompt: slot.always(props.prompt, {\n      defaultProps: { id: `${id}-prompt` },\n      elementType: 'span',\n    }),\n    reasonMarker: !isSingleColumn\n      ? slot.optional(props.reasonMarker, {\n          defaultProps: { id: `${id}-reasonMarker` },\n          elementType: 'span',\n        })\n      : undefined,\n    actions: !isSingleColumn ? slot.optional(props.actions, { elementType: 'span' }) : undefined,\n  };\n\n  return state;\n};\n"],"names":["getIntrinsicElementProps","slot","useFocusableGroup","useId","usePromptStarterListContext","usePromptStarter_unstable","props","ref","id","focusAttrs","numberOfColumns","ctx","isWithinList","isSingleColumn","state","components","root","primaryAction","icon","prompt","reasonMarker","actions","always","role","undefined","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;IAC9E,oFAAoF;IACpF,MAAME,eAAe,OAAOF,oBAAoB;IAEhD,MAAMG,iBAAiBH,oBAAoB;IAE3C,MAAMI,QAA4B;QAChCD;QACAE,YAAY;YACVC,MAAM;YACNC,eAAe;YACfC,MAAM;YACNC,QAAQ;YACRC,cAAc;YACdC,SAAS;QACX;QACAL,MAAMf,KAAKqB,MAAM,CACftB,yBAAyB,OAAO;YAC9BO;YACAgB,MAAMX,eAAe,aAAaY;YAClC,GAAGf,UAAU;YACb,GAAGH,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvBR,eAAehB,KAAKqB,MAAM,CAAChB,MAAMW,aAAa,EAAE;YAC9CS,cAAc;gBACZ,mBAAmB,CAAC,EAAElB,GAAG,OAAO,CAAC;gBACjC,oBAAoB,CAAC,EAAEA,GAAG,MAAM,EAAEA,GAAG,aAAa,CAAC;YACrD;YACAiB,aAAa;QACf;QACAP,MAAM,CAACL,iBACHZ,KAAK0B,QAAQ,CAACrB,MAAMY,IAAI,EAAE;YACxBQ,cAAc;gBAAElB,IAAI,CAAC,EAAEA,GAAG,KAAK,CAAC;YAAC;YACjCiB,aAAa;QACf,KACAD;QACJL,QAAQlB,KAAKqB,MAAM,CAAChB,MAAMa,MAAM,EAAE;YAChCO,cAAc;gBAAElB,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAAC;YACnCiB,aAAa;QACf;QACAL,cAAc,CAACP,iBACXZ,KAAK0B,QAAQ,CAACrB,MAAMc,YAAY,EAAE;YAChCM,cAAc;gBAAElB,IAAI,CAAC,EAAEA,GAAG,aAAa,CAAC;YAAC;YACzCiB,aAAa;QACf,KACAD;QACJH,SAAS,CAACR,iBAAiBZ,KAAK0B,QAAQ,CAACrB,MAAMe,OAAO,EAAE;YAAEI,aAAa;QAAO,KAAKD;IACrF;IAEA,OAAOV;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  // if this is defined, the context exists and the Prompt is within PromptStarterList\n  const isWithinList = typeof numberOfColumns === 'number';\n\n  const isSingleColumn = numberOfColumns === 1;\n\n  const state: PromptStarterState = {\n    isSingleColumn,\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      icon: 'span',\n      category: 'span',\n      prompt: 'span',\n      reasonMarker: 'span',\n      actions: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: isWithinList ? 'listitem' : undefined,\n        ...focusAttrs,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    primaryAction: slot.always(props.primaryAction, {\n      defaultProps: {\n        'aria-labelledby': `${id}-category ${id}-prompt`,\n        'aria-describedby': `${id}-icon ${id}-reasonMarker`,\n      },\n      elementType: 'button',\n    }),\n    icon: !isSingleColumn\n      ? slot.optional(props.icon, {\n          defaultProps: { id: `${id}-icon` },\n          elementType: 'span',\n        })\n      : undefined,\n    category: !isSingleColumn\n      ? slot.optional(props.category, {\n          defaultProps: { id: `${id}-category` },\n          elementType: 'span',\n        })\n      : undefined,\n    prompt: slot.always(props.prompt, {\n      defaultProps: { id: `${id}-prompt` },\n      elementType: 'span',\n    }),\n    reasonMarker: !isSingleColumn\n      ? slot.optional(props.reasonMarker, {\n          defaultProps: { id: `${id}-reasonMarker` },\n          elementType: 'span',\n        })\n      : undefined,\n    actions: !isSingleColumn ? slot.optional(props.actions, { elementType: 'span' }) : undefined,\n  };\n\n  return state;\n};\n"],"names":["getIntrinsicElementProps","slot","useFocusableGroup","useId","usePromptStarterListContext","usePromptStarter_unstable","props","ref","id","focusAttrs","numberOfColumns","ctx","isWithinList","isSingleColumn","state","components","root","primaryAction","icon","category","prompt","reasonMarker","actions","always","role","undefined","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;IAC9E,oFAAoF;IACpF,MAAME,eAAe,OAAOF,oBAAoB;IAEhD,MAAMG,iBAAiBH,oBAAoB;IAE3C,MAAMI,QAA4B;QAChCD;QACAE,YAAY;YACVC,MAAM;YACNC,eAAe;YACfC,MAAM;YACNC,UAAU;YACVC,QAAQ;YACRC,cAAc;YACdC,SAAS;QACX;QACAN,MAAMf,KAAKsB,MAAM,CACfvB,yBAAyB,OAAO;YAC9BO;YACAiB,MAAMZ,eAAe,aAAaa;YAClC,GAAGhB,UAAU;YACb,GAAGH,KAAK;QACV,IACA;YAAEoB,aAAa;QAAM;QAEvBT,eAAehB,KAAKsB,MAAM,CAACjB,MAAMW,aAAa,EAAE;YAC9CU,cAAc;gBACZ,mBAAmB,CAAC,EAAEnB,GAAG,UAAU,EAAEA,GAAG,OAAO,CAAC;gBAChD,oBAAoB,CAAC,EAAEA,GAAG,MAAM,EAAEA,GAAG,aAAa,CAAC;YACrD;YACAkB,aAAa;QACf;QACAR,MAAM,CAACL,iBACHZ,KAAK2B,QAAQ,CAACtB,MAAMY,IAAI,EAAE;YACxBS,cAAc;gBAAEnB,IAAI,CAAC,EAAEA,GAAG,KAAK,CAAC;YAAC;YACjCkB,aAAa;QACf,KACAD;QACJN,UAAU,CAACN,iBACPZ,KAAK2B,QAAQ,CAACtB,MAAMa,QAAQ,EAAE;YAC5BQ,cAAc;gBAAEnB,IAAI,CAAC,EAAEA,GAAG,SAAS,CAAC;YAAC;YACrCkB,aAAa;QACf,KACAD;QACJL,QAAQnB,KAAKsB,MAAM,CAACjB,MAAMc,MAAM,EAAE;YAChCO,cAAc;gBAAEnB,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAAC;YACnCkB,aAAa;QACf;QACAL,cAAc,CAACR,iBACXZ,KAAK2B,QAAQ,CAACtB,MAAMe,YAAY,EAAE;YAChCM,cAAc;gBAAEnB,IAAI,CAAC,EAAEA,GAAG,aAAa,CAAC;YAAC;YACzCkB,aAAa;QACf,KACAD;QACJH,SAAS,CAACT,iBAAiBZ,KAAK2B,QAAQ,CAACtB,MAAMgB,OAAO,EAAE;YAAEI,aAAa;QAAO,KAAKD;IACrF;IAEA,OAAOX;AACT,EAAE"}

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

@@ -4,6 +4,7 @@ export const promptStarterClassNames = {
   root: 'fai-PromptStarter',
   primaryAction: 'fai-PromptStarter__primaryAction',
   icon: 'fai-PromptStarter__icon',
+  category: 'fai-PromptStarter__category',
   prompt: 'fai-PromptStarter__prompt',
   reasonMarker: 'fai-PromptStarter__reasonMarker',
   actions: 'fai-PromptStarter__actions'
@@ -17,9 +18,10 @@ const useStyles = __styles({
     Bw0ie65: 0,
     Br312pm: 0,
     Beweih1: "f1eb8yyf",
-    mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62",
     qhf8xq: "f10pi13n",
+    mc9l5x: "f13qh94s",
+    Budl1dq: "fwggfk1",
+    v29qe6: "f1wv14k0",
     Beyfa6y: 0,
     Bbmb7ep: 0,
     Btl43ni: 0,
@@ -31,7 +33,8 @@ const useStyles = __styles({
     Bceei9c: "f1k6fduh",
     oeaueh: "f1s6fcnf",
     fsow6f: ["f1o700av", "fes3tcz"],
-    Belr9w4: "fylz90v",
+    i8kkvl: "f6ave1s",
+    Belr9w4: "f1wn3y0l",
     Byoj8tv: 0,
     uwmqm3: 0,
     z189sj: 0,
@@ -103,7 +106,27 @@ const useStyles = __styles({
   icon: {
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
-    sshi5w: "fntfeoj"
+    sshi5w: "fntfeoj",
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "fm1owph",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f12k0sjh"
+  },
+  category: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi",
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "fm1owph",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f14q5zaz"
   },
   actions: {
     jrapky: 0,
@@ -126,6 +149,10 @@ const useStyles = __styles({
     Bkqvd7p: 0,
     Bi2q7bf: "f1964ud6"
   },
+  actionsWithCategory: {
+    De3pzq: "fxugw4r",
+    E5pizo: ["f1u7pq1e", "f1pdyzui"]
+  },
   prompt: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
@@ -134,9 +161,24 @@ const useStyles = __styles({
     mc9l5x: "f1rvi9lw",
     Fd1uvx: "fpfc2by",
     Bh9c35c: "f1lvsx7g",
-    Bmxbyg5: "f1sil6mw"
+    Bmxbyg5: "f1sil6mw",
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "f1daok31",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f1eb8yyf"
+  },
+  promptNoReasonMarker: {
+    Bh9c35c: "f197wrh9"
   },
   reasonMarker: {
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "f17e42vn",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f1eb8yyf",
     Bahqtrf: "fk6fouc",
     Be2twd7: "f13mqy1h",
     Bhrd7zp: "figsok6",
@@ -147,9 +189,9 @@ const useStyles = __styles({
     p: -1
   }], [".f1eb8yyf{grid-column:1/3;}", {
     p: -1
-  }], ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f10pi13n{position:relative;}", [".f14w4nd{border-radius:28px;}", {
+  }], ".f10pi13n{position:relative;}", ".f13qh94s{display:grid;}", ".fwggfk1{grid-template-columns:max-content 1fr;}", ".f1wv14k0{grid-auto-rows:max-content 1fr max-content;}", [".f14w4nd{border-radius:28px;}", {
     p: -1
-  }], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1k6fduh{cursor:pointer;}", ".f1s6fcnf{outline-style:none;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", [".fq88wcj{padding:var(--spacingVerticalL) var(--spacingHorizontalL);}", {
+  }], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1k6fduh{cursor:pointer;}", ".f1s6fcnf{outline-style:none;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f6ave1s{column-gap:var(--spacingHorizontalMNudge);}", ".f1wn3y0l{row-gap:var(--spacingVerticalS);}", [".fq88wcj{padding:var(--spacingVerticalL) var(--spacingHorizontalL);}", {
     p: -1
   }], ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}", {
     p: -2
@@ -157,7 +199,15 @@ const useStyles = __styles({
     p: -1
   }], ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".f15ncuxf{transform:scale(1.03);}", [".ffrhwuo{transition:transform var(--durationNormal) var(--curveDecelerateMin);}", {
     p: -1
-  }], ".f122n59{align-items:center;}", ".fntfeoj{min-height:var(--spacingVerticalXXL);}", [".foizga4{margin:var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalNone) var(--spacingHorizontalNone);}", {
+  }], ".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".fntfeoj{min-height:var(--spacingVerticalXXL);}", [".fm1owph{grid-row:1;}", {
+    p: -1
+  }], [".f12k0sjh{grid-column:1/2;}", {
+    p: -1
+  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".fm1owph{grid-row:1;}", {
+    p: -1
+  }], [".f14q5zaz{grid-column:2/3;}", {
+    p: -1
+  }], [".foizga4{margin:var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalNone) var(--spacingHorizontalNone);}", {
     p: -1
   }], [".f5m8a6r{margin:var(--spacingVerticalL) var(--spacingHorizontalNone) var(--spacingVerticalNone) var(--spacingHorizontalL);}", {
     p: -1
@@ -167,7 +217,15 @@ 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);}"],
+  }], ".f1u7pq1e{box-shadow:-12px 0 12px 0 var(--colorNeutralBackground1);}", ".f1pdyzui{box-shadow:12px 0 12px 0 var(--colorNeutralBackground1);}", ".f1rvi9lw{display:-webkit-box;}", ".fpfc2by{-webkit-box-orient:vertical;}", ".f1lvsx7g{-webkit-line-clamp:2;}", ".f1sil6mw{overflow-y:hidden;}", [".f1daok31{grid-row:2;}", {
+    p: -1
+  }], [".f1eb8yyf{grid-column:1/3;}", {
+    p: -1
+  }], ".f197wrh9{-webkit-line-clamp:3;}", [".f17e42vn{grid-row:3;}", {
+    p: -1
+  }], [".f1eb8yyf{grid-column:1/3;}", {
+    p: -1
+  }], ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}"],
   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;}}", {
@@ -180,6 +238,7 @@ const useStyles = __styles({
 });
 const useSingleColumnStyles = __styles({
   primaryAction: {
+    mc9l5x: "f22iagw",
     Beyfa6y: 0,
     Bbmb7ep: 0,
     Btl43ni: 0,
@@ -233,7 +292,7 @@ const useSingleColumnStyles = __styles({
     Bg96gwp: "fwrc4pm"
   }
 }, {
-  d: [[".f1jxijnj{border-radius:var(--borderRadius2XL);}", {
+  d: [".f22iagw{display:flex;}", [".f1jxijnj{border-radius:var(--borderRadius2XL);}", {
     p: -1
   }], ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}", {
     p: -2
@@ -264,12 +323,15 @@ export const usePromptStarterStyles_unstable = state => {
   if (state.icon) {
     state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);
   }
-  state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
+  if (state.category) {
+    state.category.className = mergeClasses(promptStarterClassNames.category, styles.category, state.category.className);
+  }
+  state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, !state.reasonMarker && styles.promptNoReasonMarker, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
   if (state.reasonMarker) {
     state.reasonMarker.className = mergeClasses(promptStarterClassNames.reasonMarker, styles.reasonMarker, 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, state.category && styles.actionsWithCategory, 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  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\nconst useSingleColumnStyles = makeStyles({\n  primaryAction: {\n    borderRadius: tokens.borderRadius2XL,\n    ...createFocusOutlineStyle({ style: { outlineRadius: tokens.borderRadius2XL } }),\n  },\n  prompt: {\n    ...typographyStyles.caption1Strong,\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  const singleColumnStyles = useSingleColumnStyles();\n  state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    promptStarterClassNames.primaryAction,\n    styles.primaryAction,\n    isSingleColumn && singleColumnStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  if (state.icon) {\n    state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);\n  }\n  state.prompt.className = mergeClasses(\n    promptStarterClassNames.prompt,\n    styles.prompt,\n    isSingleColumn && singleColumnStyles.prompt,\n    state.prompt.className,\n  );\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","useSingleColumnStyles","borderRadius2XL","caption1Strong","usePromptStarterStyles_unstable","state","isSingleColumn","styles","rootResetStyles","singleColumnStyles","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  category: 'fai-PromptStarter__category',\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    position: 'relative',\n    display: 'grid',\n    gridTemplateColumns: 'max-content 1fr',\n    gridAutoRows: 'max-content 1fr max-content',\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    columnGap: tokens.spacingHorizontalMNudge,\n    rowGap: tokens.spacingVerticalS,\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    gridRow: 1,\n    gridColumn: '1 / 2',\n  },\n  category: {\n    display: 'flex',\n    alignItems: 'center',\n    ...typographyStyles.body1Strong,\n\n    gridRow: 1,\n    gridColumn: '2 / 3',\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  actionsWithCategory: {\n    // Add a background and gradient fade to truncate the title if applicable\n    backgroundColor: tokens.colorNeutralBackground1,\n\n    boxShadow: `-12px 0 12px 0 ${tokens.colorNeutralBackground1}`,\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    gridRow: '2',\n    gridColumn: '1 / 3',\n  },\n  promptNoReasonMarker: {\n    // Truncate text after three lines when no reason marker is present.\n    '-webkit-line-clamp': '3',\n  },\n  reasonMarker: {\n    gridRow: '3',\n    gridColumn: '1 / 3',\n    ...typographyStyles.caption2,\n  },\n});\n\nconst useSingleColumnStyles = makeStyles({\n  primaryAction: {\n    display: 'flex',\n    borderRadius: tokens.borderRadius2XL,\n    ...createFocusOutlineStyle({ style: { outlineRadius: tokens.borderRadius2XL } }),\n  },\n  prompt: {\n    ...typographyStyles.caption1Strong,\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  const singleColumnStyles = useSingleColumnStyles();\n  state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    promptStarterClassNames.primaryAction,\n    styles.primaryAction,\n    isSingleColumn && singleColumnStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  if (state.icon) {\n    state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);\n  }\n  if (state.category) {\n    state.category.className = mergeClasses(\n      promptStarterClassNames.category,\n      styles.category,\n      state.category.className,\n    );\n  }\n  state.prompt.className = mergeClasses(\n    promptStarterClassNames.prompt,\n    styles.prompt,\n    !state.reasonMarker && styles.promptNoReasonMarker,\n    isSingleColumn && singleColumnStyles.prompt,\n    state.prompt.className,\n  );\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(\n      promptStarterClassNames.actions,\n      styles.actions,\n      state.category && styles.actionsWithCategory,\n      state.actions.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","tokens","promptStarterClassNames","root","primaryAction","icon","category","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","gridAutoRows","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","columnGap","spacingHorizontalMNudge","rowGap","spacingVerticalS","spacingVerticalL","spacingHorizontalL","border","strokeWidthThin","colorNeutralStroke2","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","body1Strong","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","actionsWithCategory","overflowY","promptNoReasonMarker","caption2","useSingleColumnStyles","borderRadius2XL","caption1Strong","usePromptStarterStyles_unstable","state","isSingleColumn","styles","rootResetStyles","singleColumnStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,UAAU,EACVC,eAAe,EACfC,YAAY,EACZC,UAAU,EACVC,gBAAgB,EAChBC,uBAAuB,QAClB,6BAA6B;AACpC,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,eAAe;IACfC,MAAM;IACNC,UAAU;IACVC,QAAQ;IACRC,cAAc;IACdC,SAAS;AACX,EAAE;AAEF,MAAMC,qBAAqBd,gBAAgB;IACzCe,SAAS;IACTC,qBAAqB;IACrBC,kBAAkB;IAClBC,UAAU;IAEV,8DAA8D;IAC9D,WAAW;QACT,CAAC,CAAC,GAAG,EAAEZ,wBAAwBE,aAAa,CAAC,CAAC,CAAC,EAAE;YAC/CW,WAAWd,OAAOe,QAAQ;YAC1BC,WAAW;YACXC,YAAY,CAAC,UAAU,EAAEjB,OAAOkB,cAAc,CAAC,CAAC,EAAElB,OAAOmB,kBAAkB,CAAC,CAAC;QAC/E;IACF;IACA,YAAY;QACV,CAAC,CAAC,GAAG,EAAElB,wBAAwBE,aAAa,CAAC,CAAC,CAAC,EAAE;YAC/CW,WAAWd,OAAOoB,OAAO;YACzBJ,WAAW;YACXC,YAAY,CAAC,UAAU,EAAEjB,OAAOkB,cAAc,CAAC,CAAC,EAAElB,OAAOmB,kBAAkB,CAAC,CAAC;QAC/E;IACF;IAEA,2CAA2C;IAC3C,mCAAmC;QACjC,CAAC,CAAC,GAAG,EAAElB,wBAAwBO,OAAO,CAAC,CAAC,CAAC,EAAE;YACzCa,MAAM;YACNC,QAAQ;YACRC,QAAQ;YACRC,UAAU;YACVC,SAAS;YACTC,OAAO;YACPC,UAAU;YACVC,SAAS;QACX;IACF;AACF;AAEA,MAAMC,YAAYnC,WAAW;IAC3BS,eAAe;QACb2B,SAAS;QACTC,YAAY;QACZJ,UAAU;QACVjB,SAAS;QACTC,qBAAqB;QACrBqB,cAAc;QACdC,cAAc;QACdC,iBAAiBlC,OAAOmC,uBAAuB;QAC/CC,OAAOpC,OAAOqC,uBAAuB;QACrCC,YAAYtC,OAAOuC,cAAc;QACjCC,QAAQ;QACRC,cAAc;QACdC,WAAW;QACXC,WAAW3C,OAAO4C,uBAAuB;QACzCC,QAAQ7C,OAAO8C,gBAAgB;QAC/BrB,SAAS,CAAC,EAAEzB,OAAO+C,gBAAgB,CAAC,CAAC,EAAE/C,OAAOgD,kBAAkB,CAAC,CAAC;QAClE,GAAGnD,WAAWoD,MAAM,CAACjD,OAAOkD,eAAe,EAAE,SAASlD,OAAOmD,mBAAmB,CAAC;QACjF,GAAGpD,wBAAwB;YAAEqD,OAAO;gBAAEC,eAAe;YAAO;QAAE,EAAE;IAClE;IAEAC,sBAAsB;QACpBxC,WAAWd,OAAOe,QAAQ;QAC1BC,WAAW;QACXC,YAAY,CAAC,UAAU,EAAEjB,OAAOkB,cAAc,CAAC,CAAC,EAAElB,OAAOmB,kBAAkB,CAAC,CAAC;IAC/E;IAEAf,MAAM;QACJM,SAAS;QACT6C,YAAY;QACZC,WAAWxD,OAAOyD,kBAAkB;QACpC3B,SAAS;QACTC,YAAY;IACd;IACA1B,UAAU;QACRK,SAAS;QACT6C,YAAY;QACZ,GAAGzD,iBAAiB4D,WAAW;QAE/B5B,SAAS;QACTC,YAAY;IACd;IACAvB,SAAS;QACPe,QAAQ,CAAC,EAAEvB,OAAO+C,gBAAgB,CAAC,CAAC,EAAE/C,OAAOgD,kBAAkB,CAAC;aACvD,EAAEhD,OAAO2D,mBAAmB,CAAC,CAAC,EAAE3D,OAAO4D,qBAAqB,CAAC,CAAC;QACvEjC,UAAU;QACVG,SAAS;QACTC,YAAY;QAEZH,SAAS;QACTX,YAAY,CAAC,QAAQ,EAAEjB,OAAO6D,YAAY,CAAC,CAAC,EAAE7D,OAAO8D,WAAW,CAAC,CAAC;IACpE;IACAC,qBAAqB;QACnB,yEAAyE;QACzE7B,iBAAiBlC,OAAOmC,uBAAuB;QAE/CrB,WAAW,CAAC,eAAe,EAAEd,OAAOmC,uBAAuB,CAAC,CAAC;IAC/D;IACA7B,QAAQ;QACN,GAAGR,iBAAiB4D,WAAW;QAE/B,iCAAiC;QACjChD,SAAS;QACT,sBAAsB;QACtB,sBAAsB;QACtBsD,WAAW;QACXlC,SAAS;QACTC,YAAY;IACd;IACAkC,sBAAsB;QACpB,oEAAoE;QACpE,sBAAsB;IACxB;IACA1D,cAAc;QACZuB,SAAS;QACTC,YAAY;QACZ,GAAGjC,iBAAiBoE,QAAQ;IAC9B;AACF;AAEA,MAAMC,wBAAwBzE,WAAW;IACvCS,eAAe;QACbO,SAAS;QACTuB,cAAcjC,OAAOoE,eAAe;QACpC,GAAGrE,wBAAwB;YAAEqD,OAAO;gBAAEC,eAAerD,OAAOoE,eAAe;YAAC;QAAE,EAAE;IAClF;IACA9D,QAAQ;QACN,GAAGR,iBAAiBuE,cAAc;IACpC;AACF;AAEA,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGD;IAE3B,MAAME,SAAS5C;IACf,MAAM6C,kBAAkBjE;IACxB,MAAMkE,qBAAqBR;IAC3BI,MAAMrE,IAAI,CAAC0E,SAAS,GAAGhF,aAAaK,wBAAwBC,IAAI,EAAEwE,iBAAiBH,MAAMrE,IAAI,CAAC0E,SAAS;IACvGL,MAAMpE,aAAa,CAACyE,SAAS,GAAGhF,aAC9BK,wBAAwBE,aAAa,EACrCsE,OAAOtE,aAAa,EACpBqE,kBAAkBG,mBAAmBxE,aAAa,EAClDoE,MAAMpE,aAAa,CAACyE,SAAS;IAE/B,IAAIL,MAAMnE,IAAI,EAAE;QACdmE,MAAMnE,IAAI,CAACwE,SAAS,GAAGhF,aAAaK,wBAAwBG,IAAI,EAAEqE,OAAOrE,IAAI,EAAEmE,MAAMnE,IAAI,CAACwE,SAAS;IACrG;IACA,IAAIL,MAAMlE,QAAQ,EAAE;QAClBkE,MAAMlE,QAAQ,CAACuE,SAAS,GAAGhF,aACzBK,wBAAwBI,QAAQ,EAChCoE,OAAOpE,QAAQ,EACfkE,MAAMlE,QAAQ,CAACuE,SAAS;IAE5B;IACAL,MAAMjE,MAAM,CAACsE,SAAS,GAAGhF,aACvBK,wBAAwBK,MAAM,EAC9BmE,OAAOnE,MAAM,EACb,CAACiE,MAAMhE,YAAY,IAAIkE,OAAOR,oBAAoB,EAClDO,kBAAkBG,mBAAmBrE,MAAM,EAC3CiE,MAAMjE,MAAM,CAACsE,SAAS;IAExB,IAAIL,MAAMhE,YAAY,EAAE;QACtBgE,MAAMhE,YAAY,CAACqE,SAAS,GAAGhF,aAC7BK,wBAAwBM,YAAY,EACpCkE,OAAOlE,YAAY,EACnBgE,MAAMhE,YAAY,CAACqE,SAAS;IAEhC;IACA,IAAIL,MAAM/D,OAAO,EAAE;QACjB+D,MAAM/D,OAAO,CAACoE,SAAS,GAAGhF,aACxBK,wBAAwBO,OAAO,EAC/BiE,OAAOjE,OAAO,EACd+D,MAAMlE,QAAQ,IAAIoE,OAAOV,mBAAmB,EAC5CQ,MAAM/D,OAAO,CAACoE,SAAS;IAE3B;IAEA,OAAOL;AACT,EAAE"}

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

@@ -4,6 +4,7 @@ export const promptStarterClassNames = {
     root: 'fai-PromptStarter',
     primaryAction: 'fai-PromptStarter__primaryAction',
     icon: 'fai-PromptStarter__icon',
+    category: 'fai-PromptStarter__category',
     prompt: 'fai-PromptStarter__prompt',
     reasonMarker: 'fai-PromptStarter__reasonMarker',
     actions: 'fai-PromptStarter__actions'
@@ -46,9 +47,10 @@ const useStyles = makeStyles({
     primaryAction: {
         gridRow: '1 / 3',
         gridColumn: '1 / 3',
-        display: 'flex',
-        flexDirection: 'column',
         position: 'relative',
+        display: 'grid',
+        gridTemplateColumns: 'max-content 1fr',
+        gridAutoRows: 'max-content 1fr max-content',
         borderRadius: '28px',
         backgroundColor: tokens.colorNeutralBackground1,
         color: tokens.colorNeutralForeground2,
@@ -56,7 +58,8 @@ const useStyles = makeStyles({
         cursor: 'pointer',
         outlineStyle: 'none',
         textAlign: 'left',
-        rowGap: tokens.spacingHorizontalS,
+        columnGap: tokens.spacingHorizontalMNudge,
+        rowGap: tokens.spacingVerticalS,
         padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,
         ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
         ...createFocusOutlineStyle({
@@ -73,7 +76,16 @@ const useStyles = makeStyles({
     icon: {
         display: 'flex',
         alignItems: 'center',
-        minHeight: tokens.spacingVerticalXXL
+        minHeight: tokens.spacingVerticalXXL,
+        gridRow: 1,
+        gridColumn: '1 / 2'
+    },
+    category: {
+        display: 'flex',
+        alignItems: 'center',
+        ...typographyStyles.body1Strong,
+        gridRow: 1,
+        gridColumn: '2 / 3'
     },
     actions: {
         margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}
@@ -84,20 +96,34 @@ const useStyles = makeStyles({
         opacity: 1,
         transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`
     },
+    actionsWithCategory: {
+        // Add a background and gradient fade to truncate the title if applicable
+        backgroundColor: tokens.colorNeutralBackground1,
+        boxShadow: `-12px 0 12px 0 ${tokens.colorNeutralBackground1}`
+    },
     prompt: {
         ...typographyStyles.body1Strong,
         // Truncate text after two lines.
         display: '-webkit-box',
         '-webkit-box-orient': 'vertical',
         '-webkit-line-clamp': '2',
-        overflowY: 'hidden'
+        overflowY: 'hidden',
+        gridRow: '2',
+        gridColumn: '1 / 3'
+    },
+    promptNoReasonMarker: {
+        // Truncate text after three lines when no reason marker is present.
+        '-webkit-line-clamp': '3'
     },
     reasonMarker: {
+        gridRow: '3',
+        gridColumn: '1 / 3',
         ...typographyStyles.caption2
     }
 });
 const useSingleColumnStyles = makeStyles({
     primaryAction: {
+        display: 'flex',
         borderRadius: tokens.borderRadius2XL,
         ...createFocusOutlineStyle({
             style: {
@@ -120,12 +146,15 @@ export const usePromptStarterStyles_unstable = (state)=>{
     if (state.icon) {
         state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);
     }
-    state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
+    if (state.category) {
+        state.category.className = mergeClasses(promptStarterClassNames.category, styles.category, state.category.className);
+    }
+    state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, !state.reasonMarker && styles.promptNoReasonMarker, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
     if (state.reasonMarker) {
         state.reasonMarker.className = mergeClasses(promptStarterClassNames.reasonMarker, styles.reasonMarker, 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, state.category && styles.actionsWithCategory, state.actions.className);
     }
     return state;
 };

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.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  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\nconst useSingleColumnStyles = makeStyles({\n  primaryAction: {\n    borderRadius: tokens.borderRadius2XL,\n    ...createFocusOutlineStyle({ style: { outlineRadius: tokens.borderRadius2XL } }),\n  },\n  prompt: {\n    ...typographyStyles.caption1Strong,\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  const singleColumnStyles = useSingleColumnStyles();\n  state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    promptStarterClassNames.primaryAction,\n    styles.primaryAction,\n    isSingleColumn && singleColumnStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  if (state.icon) {\n    state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);\n  }\n  state.prompt.className = mergeClasses(\n    promptStarterClassNames.prompt,\n    styles.prompt,\n    isSingleColumn && singleColumnStyles.prompt,\n    state.prompt.className,\n  );\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","useSingleColumnStyles","borderRadius2XL","caption1Strong","usePromptStarterStyles_unstable","state","isSingleColumn","styles","rootResetStyles","singleColumnStyles","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  category: 'fai-PromptStarter__category',\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    position: 'relative',\n    display: 'grid',\n    gridTemplateColumns: 'max-content 1fr',\n    gridAutoRows: 'max-content 1fr max-content',\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    columnGap: tokens.spacingHorizontalMNudge,\n    rowGap: tokens.spacingVerticalS,\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    gridRow: 1,\n    gridColumn: '1 / 2',\n  },\n  category: {\n    display: 'flex',\n    alignItems: 'center',\n    ...typographyStyles.body1Strong,\n\n    gridRow: 1,\n    gridColumn: '2 / 3',\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  actionsWithCategory: {\n    // Add a background and gradient fade to truncate the title if applicable\n    backgroundColor: tokens.colorNeutralBackground1,\n\n    boxShadow: `-12px 0 12px 0 ${tokens.colorNeutralBackground1}`,\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    gridRow: '2',\n    gridColumn: '1 / 3',\n  },\n  promptNoReasonMarker: {\n    // Truncate text after three lines when no reason marker is present.\n    '-webkit-line-clamp': '3',\n  },\n  reasonMarker: {\n    gridRow: '3',\n    gridColumn: '1 / 3',\n    ...typographyStyles.caption2,\n  },\n});\n\nconst useSingleColumnStyles = makeStyles({\n  primaryAction: {\n    display: 'flex',\n    borderRadius: tokens.borderRadius2XL,\n    ...createFocusOutlineStyle({ style: { outlineRadius: tokens.borderRadius2XL } }),\n  },\n  prompt: {\n    ...typographyStyles.caption1Strong,\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  const singleColumnStyles = useSingleColumnStyles();\n  state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    promptStarterClassNames.primaryAction,\n    styles.primaryAction,\n    isSingleColumn && singleColumnStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  if (state.icon) {\n    state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);\n  }\n  if (state.category) {\n    state.category.className = mergeClasses(\n      promptStarterClassNames.category,\n      styles.category,\n      state.category.className,\n    );\n  }\n  state.prompt.className = mergeClasses(\n    promptStarterClassNames.prompt,\n    styles.prompt,\n    !state.reasonMarker && styles.promptNoReasonMarker,\n    isSingleColumn && singleColumnStyles.prompt,\n    state.prompt.className,\n  );\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(\n      promptStarterClassNames.actions,\n      styles.actions,\n      state.category && styles.actionsWithCategory,\n      state.actions.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","tokens","promptStarterClassNames","root","primaryAction","icon","category","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","gridAutoRows","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","columnGap","spacingHorizontalMNudge","rowGap","spacingVerticalS","spacingVerticalL","spacingHorizontalL","border","strokeWidthThin","colorNeutralStroke2","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","body1Strong","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","actionsWithCategory","overflowY","promptNoReasonMarker","caption2","useSingleColumnStyles","borderRadius2XL","caption1Strong","usePromptStarterStyles_unstable","state","isSingleColumn","styles","rootResetStyles","singleColumnStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +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<Partial<PromptStarterListSlots>, 'gridWrapper'> &\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     * Whether to animate the entrance of its items when it first mounts.\n     *\n     * @default true\n     */\n    animateOnMount?: boolean;\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":"AAyDA,WAA2G"}
+{"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  actions?: Slot<'span'>;\n  expandButton?: Slot<typeof Button>;\n};\n\n/**\n * PromptStarterList Props\n */\nexport type PromptStarterListProps = ComponentProps<Partial<PromptStarterListSlots>, 'gridWrapper'> &\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     * Whether to animate the entrance of its items when it first mounts.\n     *\n     * @default true\n     */\n    animateOnMount?: boolean;\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":"AA0DA,WAA2G"}

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

@@ -14,6 +14,7 @@ import { PromptStarterListProvider } from '../../../contexts/PromptStarterListCo
                         children: state.root.children
                     })
                 }),
+                state.actions && /*#__PURE__*/ _jsx(state.actions, {}),
                 state.expandButton && /*#__PURE__*/ _jsx(state.expandButton, {})
             ]
         })

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

@@ -1 +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"}
+{"version":3,"sources":["renderPromptStarterList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, PresenceGroup } from '@fluentui/react-components';\nimport type { JSXElement } 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): JSXElement => {\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.actions && <state.actions />}\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","actions","expandButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,EAAEC,aAAa,QAAQ,6BAA6B;AAExE,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,OAAO,kBAAI,KAACN,MAAMM,OAAO;gBAC/BN,MAAMO,YAAY,kBAAI,KAACP,MAAMO,YAAY;;;;AAIlD,EAAE"}