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

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

@@ -17,7 +17,7 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
     var _arrowNavigationOptions_axis, _arrowNavigationOptions_memorizeCurrent;
     const focusAttrs = useArrowNavigationGroup({
         ...arrowNavigationOptions,
-        axis: (_arrowNavigationOptions_axis = arrowNavigationOptions === null || arrowNavigationOptions === void 0 ? void 0 : arrowNavigationOptions.axis) !== null && _arrowNavigationOptions_axis !== void 0 ? _arrowNavigationOptions_axis : 'grid-linear',
+        axis: (_arrowNavigationOptions_axis = arrowNavigationOptions === null || arrowNavigationOptions === void 0 ? void 0 : arrowNavigationOptions.axis) !== null && _arrowNavigationOptions_axis !== void 0 ? _arrowNavigationOptions_axis : 'both',
         memorizeCurrent: (_arrowNavigationOptions_memorizeCurrent = arrowNavigationOptions === null || arrowNavigationOptions === void 0 ? void 0 : arrowNavigationOptions.memorizeCurrent) !== null && _arrowNavigationOptions_memorizeCurrent !== void 0 ? _arrowNavigationOptions_memorizeCurrent : true
     });
     const [isExpanded, setIsExpanded] = React.useState(false);
@@ -47,6 +47,7 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
         components: {
             root: 'div',
             gridWrapper: 'div',
+            actions: 'span',
             expandButton: Button
         },
         root: slot.always(getIntrinsicElementProps('div', {
@@ -62,6 +63,9 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
             },
             elementType: 'div'
         }),
+        actions: slot.optional(props.actions, {
+            elementType: 'span'
+        }),
         expandButton: slot.optional(props.expandButton, {
             defaultProps: {
                 appearance: 'subtle',

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

@@ -1 +1 @@
-{"version":3,"sources":["usePromptStarterList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  slot,\n  Button,\n  useArrowNavigationGroup,\n  mergeCallbacks,\n  useFluent,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport type { PromptStarterListProps, PromptStarterListState } from './PromptStarterList.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport { ChevronDown12Regular } from '@fluentui/react-icons';\nimport { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';\n\n/**\n * Create the state required to render PromptStarterList.\n *\n * The returned state can be modified with hooks such as usePromptStarterListStyles_unstable,\n * before being passed to renderPromptStarterList_unstable.\n *\n * @param props - props from this instance of PromptStarterList\n * @param ref - reference to root HTMLElement of PromptStarterList\n */\nexport const usePromptStarterList_unstable = (\n  props: PromptStarterListProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptStarterListState => {\n  const {\n    arrowNavigationOptions,\n    expandButtonLabel = 'Show more',\n    collapseButtonLabel = 'Show less',\n    animateOnMount = true,\n  } = props;\n  const designVersion = useDesignVersion(props.designVersion);\n  const focusAttrs = useArrowNavigationGroup({\n    ...arrowNavigationOptions,\n    axis: arrowNavigationOptions?.axis ?? 'grid-linear',\n    memorizeCurrent: arrowNavigationOptions?.memorizeCurrent ?? true,\n  });\n\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const [numberOfColumns, setNumberOfColumns] = React.useState<number>(3);\n\n  const gridWrapperRef = React.useRef<HTMLDivElement>(null);\n  const { targetDocument } = useFluent();\n  const win = targetDocument?.defaultView;\n\n  React.useEffect(() => {\n    if (!win || !gridWrapperRef.current) return;\n\n    const promptStarterGrid = gridWrapperRef.current;\n\n    const updateNumberOfColumns = () => {\n      const numColumns = win.getComputedStyle(promptStarterGrid).gridTemplateColumns.split(' ').length;\n      setNumberOfColumns(numColumns);\n    };\n\n    const ro = new win.ResizeObserver(updateNumberOfColumns);\n    ro.observe(promptStarterGrid);\n\n    return () => {\n      ro.unobserve(promptStarterGrid);\n    };\n  }, [win]);\n\n  const state: PromptStarterListState = {\n    numberOfColumns: numberOfColumns,\n    isExpanded,\n    designVersion,\n    components: {\n      root: 'div',\n      gridWrapper: 'div',\n      expandButton: Button,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    gridWrapper: slot.always(props.gridWrapper, {\n      defaultProps: {\n        role: 'list',\n        ...focusAttrs,\n      },\n      elementType: 'div',\n    }),\n    expandButton: slot.optional(props.expandButton, {\n      defaultProps: {\n        appearance: 'subtle',\n        size: 'small',\n        shape: 'rounded',\n        icon: <ChevronDown12Regular />,\n        iconPosition: 'after',\n        'aria-expanded': isExpanded,\n        children: isExpanded ? collapseButtonLabel : expandButtonLabel,\n      },\n      renderByDefault: true,\n      elementType: Button,\n    }),\n  };\n\n  state.gridWrapper.ref = useMergedRefs(gridWrapperRef, state.gridWrapper.ref);\n\n  // Get the array of children.\n  const childrenArray = React.useMemo<\n    (React.ReactElement<any> | number | string | Iterable<React.ReactNode> | React.ReactPortal)[]\n  >(() => {\n    return React.Children.toArray(state.root.children);\n  }, [state.root.children]);\n\n  // Add motion to the children.\n  const childrenWithMotion = React.useMemo(\n    () =>\n      childrenArray.map((child, index) => {\n        // Throw error if the child is not a valid React element or is a Fragment.\n        if (!React.isValidElement(child) || child.type === React.Fragment) {\n          throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');\n        }\n\n        // In the collapsed state, if there is one column, we show three children.\n        // If there are two or three columns, we show two or three. All children\n        // are shown in the expanded state.\n        const visibility = (numberOfColumns === 1 && index < 3) || index < numberOfColumns || isExpanded;\n\n        return (\n          <PromptStarterMotion\n            appear={animateOnMount}\n            key={index}\n            index={index}\n            visible={visibility}\n            numberOfColumns={numberOfColumns}\n          >\n            {child}\n          </PromptStarterMotion>\n        );\n      }),\n    [childrenArray, numberOfColumns, isExpanded],\n  );\n\n  state.root.children = childrenWithMotion;\n\n  if (state.expandButton) {\n    state.expandButton.onClick = mergeCallbacks(\n      state.expandButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n      () => setIsExpanded(!isExpanded),\n    );\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","Button","useArrowNavigationGroup","mergeCallbacks","useFluent","useMergedRefs","useDesignVersion","ChevronDown12Regular","PromptStarterMotion","usePromptStarterList_unstable","props","ref","arrowNavigationOptions","expandButtonLabel","collapseButtonLabel","animateOnMount","designVersion","focusAttrs","axis","memorizeCurrent","isExpanded","setIsExpanded","useState","numberOfColumns","setNumberOfColumns","gridWrapperRef","useRef","targetDocument","win","defaultView","useEffect","current","promptStarterGrid","updateNumberOfColumns","numColumns","getComputedStyle","gridTemplateColumns","split","length","ro","ResizeObserver","observe","unobserve","state","components","root","gridWrapper","expandButton","always","elementType","defaultProps","role","optional","appearance","size","shape","icon","iconPosition","children","renderByDefault","childrenArray","useMemo","Children","toArray","childrenWithMotion","map","child","index","isValidElement","type","Fragment","Error","visibility","appear","key","visible","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["usePromptStarterList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  slot,\n  Button,\n  useArrowNavigationGroup,\n  mergeCallbacks,\n  useFluent,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport type { PromptStarterListProps, PromptStarterListState } from './PromptStarterList.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport { ChevronDown12Regular } from '@fluentui/react-icons';\nimport { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';\n\n/**\n * Create the state required to render PromptStarterList.\n *\n * The returned state can be modified with hooks such as usePromptStarterListStyles_unstable,\n * before being passed to renderPromptStarterList_unstable.\n *\n * @param props - props from this instance of PromptStarterList\n * @param ref - reference to root HTMLElement of PromptStarterList\n */\nexport const usePromptStarterList_unstable = (\n  props: PromptStarterListProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptStarterListState => {\n  const {\n    arrowNavigationOptions,\n    expandButtonLabel = 'Show more',\n    collapseButtonLabel = 'Show less',\n    animateOnMount = true,\n  } = props;\n  const designVersion = useDesignVersion(props.designVersion);\n  const focusAttrs = useArrowNavigationGroup({\n    ...arrowNavigationOptions,\n    axis: arrowNavigationOptions?.axis ?? 'both',\n    memorizeCurrent: arrowNavigationOptions?.memorizeCurrent ?? true,\n  });\n\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const [numberOfColumns, setNumberOfColumns] = React.useState<number>(3);\n\n  const gridWrapperRef = React.useRef<HTMLDivElement>(null);\n  const { targetDocument } = useFluent();\n  const win = targetDocument?.defaultView;\n\n  React.useEffect(() => {\n    if (!win || !gridWrapperRef.current) return;\n\n    const promptStarterGrid = gridWrapperRef.current;\n\n    const updateNumberOfColumns = () => {\n      const numColumns = win.getComputedStyle(promptStarterGrid).gridTemplateColumns.split(' ').length;\n      setNumberOfColumns(numColumns);\n    };\n\n    const ro = new win.ResizeObserver(updateNumberOfColumns);\n    ro.observe(promptStarterGrid);\n\n    return () => {\n      ro.unobserve(promptStarterGrid);\n    };\n  }, [win]);\n\n  const state: PromptStarterListState = {\n    numberOfColumns: numberOfColumns,\n    isExpanded,\n    designVersion,\n    components: {\n      root: 'div',\n      gridWrapper: 'div',\n      actions: 'span',\n      expandButton: Button,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    gridWrapper: slot.always(props.gridWrapper, {\n      defaultProps: {\n        role: 'list',\n        ...focusAttrs,\n      },\n      elementType: 'div',\n    }),\n    actions: slot.optional(props.actions, {\n      elementType: 'span',\n    }),\n    expandButton: slot.optional(props.expandButton, {\n      defaultProps: {\n        appearance: 'subtle',\n        size: 'small',\n        shape: 'rounded',\n        icon: <ChevronDown12Regular />,\n        iconPosition: 'after',\n        'aria-expanded': isExpanded,\n        children: isExpanded ? collapseButtonLabel : expandButtonLabel,\n      },\n      renderByDefault: true,\n      elementType: Button,\n    }),\n  };\n\n  state.gridWrapper.ref = useMergedRefs(gridWrapperRef, state.gridWrapper.ref);\n\n  // Get the array of children.\n  const childrenArray = React.useMemo<\n    (React.ReactElement<any> | number | string | Iterable<React.ReactNode> | React.ReactPortal)[]\n  >(() => {\n    return React.Children.toArray(state.root.children);\n  }, [state.root.children]);\n\n  // Add motion to the children.\n  const childrenWithMotion = React.useMemo(\n    () =>\n      childrenArray.map((child, index) => {\n        // Throw error if the child is not a valid React element or is a Fragment.\n        if (!React.isValidElement(child) || child.type === React.Fragment) {\n          throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');\n        }\n\n        // In the collapsed state, if there is one column, we show three children.\n        // If there are two or three columns, we show two or three. All children\n        // are shown in the expanded state.\n        const visibility = (numberOfColumns === 1 && index < 3) || index < numberOfColumns || isExpanded;\n\n        return (\n          <PromptStarterMotion\n            appear={animateOnMount}\n            key={index}\n            index={index}\n            visible={visibility}\n            numberOfColumns={numberOfColumns}\n          >\n            {child}\n          </PromptStarterMotion>\n        );\n      }),\n    [childrenArray, numberOfColumns, isExpanded],\n  );\n\n  state.root.children = childrenWithMotion;\n\n  if (state.expandButton) {\n    state.expandButton.onClick = mergeCallbacks(\n      state.expandButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n      () => setIsExpanded(!isExpanded),\n    );\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","Button","useArrowNavigationGroup","mergeCallbacks","useFluent","useMergedRefs","useDesignVersion","ChevronDown12Regular","PromptStarterMotion","usePromptStarterList_unstable","props","ref","arrowNavigationOptions","expandButtonLabel","collapseButtonLabel","animateOnMount","designVersion","focusAttrs","axis","memorizeCurrent","isExpanded","setIsExpanded","useState","numberOfColumns","setNumberOfColumns","gridWrapperRef","useRef","targetDocument","win","defaultView","useEffect","current","promptStarterGrid","updateNumberOfColumns","numColumns","getComputedStyle","gridTemplateColumns","split","length","ro","ResizeObserver","observe","unobserve","state","components","root","gridWrapper","actions","expandButton","always","elementType","defaultProps","role","optional","appearance","size","shape","icon","iconPosition","children","renderByDefault","childrenArray","useMemo","Children","toArray","childrenWithMotion","map","child","index","isValidElement","type","Fragment","Error","visibility","appear","key","visible","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,IAAI,EACJC,MAAM,EACNC,uBAAuB,EACvBC,cAAc,EACdC,SAAS,EACTC,aAAa,QACR,6BAA6B;AAEpC,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,mBAAmB,QAAQ,uCAAuC;AAE3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EACJC,sBAAsB,EACtBC,oBAAoB,WAAW,EAC/BC,sBAAsB,WAAW,EACjCC,iBAAiB,IAAI,EACtB,GAAGL;IACJ,MAAMM,gBAAgBV,iBAAiBI,MAAMM,aAAa;QAGlDJ,8BACWA;IAHnB,MAAMK,aAAaf,wBAAwB;QACzC,GAAGU,sBAAsB;QACzBM,MAAMN,CAAAA,+BAAAA,mCAAAA,6CAAAA,uBAAwBM,IAAI,cAA5BN,0CAAAA,+BAAgC;QACtCO,iBAAiBP,CAAAA,0CAAAA,mCAAAA,6CAAAA,uBAAwBO,eAAe,cAAvCP,qDAAAA,0CAA2C;IAC9D;IAEA,MAAM,CAACQ,YAAYC,cAAc,GAAGvB,MAAMwB,QAAQ,CAAC;IACnD,MAAM,CAACC,iBAAiBC,mBAAmB,GAAG1B,MAAMwB,QAAQ,CAAS;IAErE,MAAMG,iBAAiB3B,MAAM4B,MAAM,CAAiB;IACpD,MAAM,EAAEC,cAAc,EAAE,GAAGvB;IAC3B,MAAMwB,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC/B,MAAMgC,SAAS,CAAC;QACd,IAAI,CAACF,OAAO,CAACH,eAAeM,OAAO,EAAE;QAErC,MAAMC,oBAAoBP,eAAeM,OAAO;QAEhD,MAAME,wBAAwB;YAC5B,MAAMC,aAAaN,IAAIO,gBAAgB,CAACH,mBAAmBI,mBAAmB,CAACC,KAAK,CAAC,KAAKC,MAAM;YAChGd,mBAAmBU;QACrB;QAEA,MAAMK,KAAK,IAAIX,IAAIY,cAAc,CAACP;QAClCM,GAAGE,OAAO,CAACT;QAEX,OAAO;YACLO,GAAGG,SAAS,CAACV;QACf;IACF,GAAG;QAACJ;KAAI;IAER,MAAMe,QAAgC;QACpCpB,iBAAiBA;QACjBH;QACAJ;QACA4B,YAAY;YACVC,MAAM;YACNC,aAAa;YACbC,SAAS;YACTC,cAAc/C;QAChB;QACA4C,MAAM7C,KAAKiD,MAAM,CACflD,yBAAyB,OAAO;YAC9BY;YACA,GAAGD,KAAK;QACV,IACA;YAAEwC,aAAa;QAAM;QAEvBJ,aAAa9C,KAAKiD,MAAM,CAACvC,MAAMoC,WAAW,EAAE;YAC1CK,cAAc;gBACZC,MAAM;gBACN,GAAGnC,UAAU;YACf;YACAiC,aAAa;QACf;QACAH,SAAS/C,KAAKqD,QAAQ,CAAC3C,MAAMqC,OAAO,EAAE;YACpCG,aAAa;QACf;QACAF,cAAchD,KAAKqD,QAAQ,CAAC3C,MAAMsC,YAAY,EAAE;YAC9CG,cAAc;gBACZG,YAAY;gBACZC,MAAM;gBACNC,OAAO;gBACPC,oBAAM,oBAAClD;gBACPmD,cAAc;gBACd,iBAAiBtC;gBACjBuC,UAAUvC,aAAaN,sBAAsBD;YAC/C;YACA+C,iBAAiB;YACjBV,aAAajD;QACf;IACF;IAEA0C,MAAMG,WAAW,CAACnC,GAAG,GAAGN,cAAcoB,gBAAgBkB,MAAMG,WAAW,CAACnC,GAAG;IAE3E,6BAA6B;IAC7B,MAAMkD,gBAAgB/D,MAAMgE,OAAO,CAEjC;QACA,OAAOhE,MAAMiE,QAAQ,CAACC,OAAO,CAACrB,MAAME,IAAI,CAACc,QAAQ;IACnD,GAAG;QAAChB,MAAME,IAAI,CAACc,QAAQ;KAAC;IAExB,8BAA8B;IAC9B,MAAMM,qBAAqBnE,MAAMgE,OAAO,CACtC,IACED,cAAcK,GAAG,CAAC,CAACC,OAAOC;YACxB,0EAA0E;YAC1E,IAAI,eAACtE,MAAMuE,cAAc,CAACF,UAAUA,MAAMG,IAAI,KAAKxE,MAAMyE,QAAQ,EAAE;gBACjE,MAAM,IAAIC,MAAM;YAClB;YAEA,0EAA0E;YAC1E,wEAAwE;YACxE,mCAAmC;YACnC,MAAMC,aAAa,AAAClD,oBAAoB,KAAK6C,QAAQ,KAAMA,QAAQ7C,mBAAmBH;YAEtF,qBACE,oBAACZ;gBACCkE,QAAQ3D;gBACR4D,KAAKP;gBACLA,OAAOA;gBACPQ,SAASH;gBACTlD,iBAAiBA;eAEhB4C;QAGP,IACF;QAACN;QAAetC;QAAiBH;KAAW;IAG9CuB,MAAME,IAAI,CAACc,QAAQ,GAAGM;IAEtB,IAAItB,MAAMK,YAAY,EAAE;QACtBL,MAAMK,YAAY,CAAC6B,OAAO,GAAG1E,eAC3BwC,MAAMK,YAAY,CAAC6B,OAAO,EAC1B,IAAMxD,cAAc,CAACD;IAEzB;IAEA,OAAOuB;AACT,EAAE"}

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

@@ -3,14 +3,20 @@ import { tokens } from '@fluentui-copilot/tokens';
 export const promptStarterListClassNames = {
   root: 'fai-PromptStarterList',
   gridWrapper: 'fai-PromptStarterList__gridWrapper',
+  actions: 'fai-PromptStarterList__actions',
   expandButton: 'fai-PromptStarterList__expandButton'
 };
 /**
  * Styles for the root slot
  */
-const useRootClassName = __resetStyles("r1n85ojv", null, [".r1n85ojv{display:flex;flex-direction:column;max-width:772px;gap:var(--spacingHorizontalXL);}"]);
+const useRootClassName = __resetStyles("r1svwxtk", null, [".r1svwxtk{display:grid;grid-template-columns:1fr max-content max-content;grid-template-rows:max-content max-content;grid-template-areas:\"grid grid grid\" \". actions expandButton\";max-width:772px;row-gap:var(--spacingVerticalXL);column-gap:var(--spacingHorizontalSNudge);}"]);
 const useStyles = __styles({
   gridWrapper: {
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "fl4njfv",
     mc9l5x: "f13qh94s",
     i8kkvl: 0,
     Belr9w4: 0,
@@ -19,8 +25,19 @@ const useStyles = __styles({
     Budl1dq: "fvo7o13",
     Bxotwcr: "f1nkeedh"
   },
+  actions: {
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "fceb517"
+  },
   expandButton: {
-    qb2dma: "f1locze1",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "f1najgz0",
     wrk2wx: "f11k2d1d",
     dutsh0: "f1iwh30k",
     B4u5nao: "fn63aq9",
@@ -31,9 +48,15 @@ const useStyles = __styles({
     Bs9jjb3: ["f5l68jj", "f1i29bk4"]
   }
 }, {
-  d: [".f13qh94s{display:grid;}", [".f1p93rwu{gap:var(--spacingHorizontalL);}", {
+  d: [[".fl4njfv{grid-area:grid;}", {
+    p: -1
+  }], ".f13qh94s{display:grid;}", [".f1p93rwu{gap:var(--spacingHorizontalL);}", {
+    p: -1
+  }], ".f4wu0r3{grid-auto-columns:max-content;}", ".fvo7o13{grid-template-columns:repeat(auto-fit, minmax(214px, 1fr));}", ".f1nkeedh{grid-auto-flow:unset;}", [".fceb517{grid-area:actions;}", {
     p: -1
-  }], ".f4wu0r3{grid-auto-columns:max-content;}", ".fvo7o13{grid-template-columns:repeat(auto-fit, minmax(214px, 1fr));}", ".f1nkeedh{grid-auto-flow:unset;}", ".f1locze1{align-self:end;}", ".f11k2d1d .fui-Button__icon{font-size:12px;}", ".f1iwh30k .fui-Button__icon{height:12px;}", ".fn63aq9 .fui-Button__icon{width:12px;}", ".f5l68jj>.fui-Button__icon{transform:rotate(180deg);}", ".f1i29bk4>.fui-Button__icon{transform:rotate(-180deg);}"],
+  }], [".f1najgz0{grid-area:expandButton;}", {
+    p: -1
+  }], ".f11k2d1d .fui-Button__icon{font-size:12px;}", ".f1iwh30k .fui-Button__icon{height:12px;}", ".fn63aq9 .fui-Button__icon{width:12px;}", ".f5l68jj>.fui-Button__icon{transform:rotate(180deg);}", ".f1i29bk4>.fui-Button__icon{transform:rotate(-180deg);}"],
   h: [".fm7zj7h:hover .fui-Button__icon{color:var(--colorNeutralForeground2Hover);}", ".fuzcl37:hover:active .fui-Button__icon{color:var(--colorNeutralForeground2Pressed);}"]
 });
 /**
@@ -49,6 +72,9 @@ export const usePromptStarterListStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(promptStarterListClassNames.root, rootClassName, state.root.className);
   state.gridWrapper.className = mergeClasses(promptStarterListClassNames.gridWrapper, styles.gridWrapper, state.gridWrapper.className);
+  if (state.actions) {
+    state.actions.className = mergeClasses(promptStarterListClassNames.actions, styles.actions, state.actions.className);
+  }
   if (state.expandButton) {
     state.expandButton.className = mergeClasses(promptStarterListClassNames.expandButton, styles.expandButton, isExpanded && styles.expandButtonExpanded, state.expandButton.className);
   }

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

@@ -1 +1 @@
-{"version":3,"sources":["usePromptStarterListStyles.styles.ts"],"sourcesContent":["import { buttonClassNames, makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type { PromptStarterListSlots, PromptStarterListState } from './PromptStarterList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nexport const promptStarterListClassNames: SlotClassNames<PromptStarterListSlots> = {\n  root: 'fai-PromptStarterList',\n  gridWrapper: 'fai-PromptStarterList__gridWrapper',\n  expandButton: 'fai-PromptStarterList__expandButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n  display: 'flex',\n  flexDirection: 'column',\n  maxWidth: '772px',\n  gap: tokens.spacingHorizontalXL,\n});\n\nconst useStyles = makeStyles({\n  gridWrapper: {\n    display: 'grid',\n    gap: tokens.spacingHorizontalL,\n    gridAutoColumns: 'max-content',\n\n    gridTemplateColumns: `repeat(auto-fit, minmax(214px, 1fr))`,\n    gridAutoFlow: 'unset',\n  },\n\n  expandButton: {\n    alignSelf: 'end',\n    [`& .${buttonClassNames.icon}`]: {\n      fontSize: '12px',\n      height: '12px',\n      width: '12px',\n    },\n    ':hover': {\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n    ':hover:active': {\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  expandButtonExpanded: {\n    [`& > .${buttonClassNames.icon}`]: {\n      transform: 'rotate(180deg)',\n    },\n  },\n});\n\n/**\n * Apply styling to the PromptStarterList slots based on the state\n */\nexport const usePromptStarterListStyles_unstable = (state: PromptStarterListState): PromptStarterListState => {\n  'use no memo';\n\n  const { isExpanded } = state;\n\n  const rootClassName = useRootClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(promptStarterListClassNames.root, rootClassName, state.root.className);\n  state.gridWrapper.className = mergeClasses(\n    promptStarterListClassNames.gridWrapper,\n    styles.gridWrapper,\n    state.gridWrapper.className,\n  );\n  if (state.expandButton) {\n    state.expandButton.className = mergeClasses(\n      promptStarterListClassNames.expandButton,\n      styles.expandButton,\n      isExpanded && styles.expandButtonExpanded,\n      state.expandButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","tokens","promptStarterListClassNames","root","gridWrapper","expandButton","useRootClassName","display","flexDirection","maxWidth","gap","spacingHorizontalXL","useStyles","spacingHorizontalL","gridAutoColumns","gridTemplateColumns","gridAutoFlow","alignSelf","icon","fontSize","height","width","color","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","expandButtonExpanded","transform","usePromptStarterListStyles_unstable","state","isExpanded","rootClassName","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AAGzG,SAASC,MAAM,QAAQ,2BAA2B;AAElD,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,aAAa;IACbC,cAAc;AAChB,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBR,gBAAgB;IACvCS,SAAS;IACTC,eAAe;IACfC,UAAU;IACVC,KAAKT,OAAOU,mBAAmB;AACjC;AAEA,MAAMC,YAAYb,WAAW;IAC3BK,aAAa;QACXG,SAAS;QACTG,KAAKT,OAAOY,kBAAkB;QAC9BC,iBAAiB;QAEjBC,qBAAqB,CAAC,oCAAoC,CAAC;QAC3DC,cAAc;IAChB;IAEAX,cAAc;QACZY,WAAW;QACX,CAAC,CAAC,GAAG,EAAEpB,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;YAC/BC,UAAU;YACVC,QAAQ;YACRC,OAAO;QACT;QACA,UAAU;YACR,CAAC,CAAC,GAAG,EAAExB,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAOrB,OAAOsB,4BAA4B;YAC5C;QACF;QACA,iBAAiB;YACf,CAAC,CAAC,GAAG,EAAE1B,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAOrB,OAAOuB,8BAA8B;YAC9C;QACF;IACF;IAEAC,sBAAsB;QACpB,CAAC,CAAC,KAAK,EAAE5B,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;YACjCQ,WAAW;QACb;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClD;IAEA,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,gBAAgBxB;IACtB,MAAMyB,SAASnB;IACfgB,MAAMzB,IAAI,CAAC6B,SAAS,GAAGhC,aAAaE,4BAA4BC,IAAI,EAAE2B,eAAeF,MAAMzB,IAAI,CAAC6B,SAAS;IACzGJ,MAAMxB,WAAW,CAAC4B,SAAS,GAAGhC,aAC5BE,4BAA4BE,WAAW,EACvC2B,OAAO3B,WAAW,EAClBwB,MAAMxB,WAAW,CAAC4B,SAAS;IAE7B,IAAIJ,MAAMvB,YAAY,EAAE;QACtBuB,MAAMvB,YAAY,CAAC2B,SAAS,GAAGhC,aAC7BE,4BAA4BG,YAAY,EACxC0B,OAAO1B,YAAY,EACnBwB,cAAcE,OAAON,oBAAoB,EACzCG,MAAMvB,YAAY,CAAC2B,SAAS;IAEhC;IAEA,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["usePromptStarterListStyles.styles.ts"],"sourcesContent":["import { buttonClassNames, makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type { PromptStarterListSlots, PromptStarterListState } from './PromptStarterList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nexport const promptStarterListClassNames: SlotClassNames<PromptStarterListSlots> = {\n  root: 'fai-PromptStarterList',\n  gridWrapper: 'fai-PromptStarterList__gridWrapper',\n  actions: 'fai-PromptStarterList__actions',\n  expandButton: 'fai-PromptStarterList__expandButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n  display: 'grid',\n  gridTemplateColumns: '1fr max-content max-content',\n  gridTemplateRows: 'max-content max-content',\n  gridTemplateAreas: `\"grid grid grid\"\n                      \". actions expandButton\"`,\n  maxWidth: '772px',\n  rowGap: tokens.spacingVerticalXL,\n  columnGap: tokens.spacingHorizontalSNudge,\n});\n\nconst useStyles = makeStyles({\n  gridWrapper: {\n    gridArea: 'grid',\n    display: 'grid',\n    gap: tokens.spacingHorizontalL,\n    gridAutoColumns: 'max-content',\n\n    gridTemplateColumns: `repeat(auto-fit, minmax(214px, 1fr))`,\n    gridAutoFlow: 'unset',\n  },\n\n  actions: {\n    gridArea: 'actions',\n  },\n\n  expandButton: {\n    gridArea: 'expandButton',\n    [`& .${buttonClassNames.icon}`]: {\n      fontSize: '12px',\n      height: '12px',\n      width: '12px',\n    },\n    ':hover': {\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n    ':hover:active': {\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  expandButtonExpanded: {\n    [`& > .${buttonClassNames.icon}`]: {\n      transform: 'rotate(180deg)',\n    },\n  },\n});\n\n/**\n * Apply styling to the PromptStarterList slots based on the state\n */\nexport const usePromptStarterListStyles_unstable = (state: PromptStarterListState): PromptStarterListState => {\n  'use no memo';\n\n  const { isExpanded } = state;\n\n  const rootClassName = useRootClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(promptStarterListClassNames.root, rootClassName, state.root.className);\n  state.gridWrapper.className = mergeClasses(\n    promptStarterListClassNames.gridWrapper,\n    styles.gridWrapper,\n    state.gridWrapper.className,\n  );\n  if (state.actions) {\n    state.actions.className = mergeClasses(\n      promptStarterListClassNames.actions,\n      styles.actions,\n      state.actions.className,\n    );\n  }\n  if (state.expandButton) {\n    state.expandButton.className = mergeClasses(\n      promptStarterListClassNames.expandButton,\n      styles.expandButton,\n      isExpanded && styles.expandButtonExpanded,\n      state.expandButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","tokens","promptStarterListClassNames","root","gridWrapper","actions","expandButton","useRootClassName","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","maxWidth","rowGap","spacingVerticalXL","columnGap","spacingHorizontalSNudge","useStyles","gridArea","gap","spacingHorizontalL","gridAutoColumns","gridAutoFlow","icon","fontSize","height","width","color","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","expandButtonExpanded","transform","usePromptStarterListStyles_unstable","state","isExpanded","rootClassName","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AAGzG,SAASC,MAAM,QAAQ,2BAA2B;AAElD,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,aAAa;IACbC,SAAS;IACTC,cAAc;AAChB,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,qBAAqB;IACrBC,kBAAkB;IAClBC,mBAAmB,CAAC;8CACwB,CAAC;IAC7CC,UAAU;IACVC,QAAQZ,OAAOa,iBAAiB;IAChCC,WAAWd,OAAOe,uBAAuB;AAC3C;AAEA,MAAMC,YAAYlB,WAAW;IAC3BK,aAAa;QACXc,UAAU;QACVV,SAAS;QACTW,KAAKlB,OAAOmB,kBAAkB;QAC9BC,iBAAiB;QAEjBZ,qBAAqB,CAAC,oCAAoC,CAAC;QAC3Da,cAAc;IAChB;IAEAjB,SAAS;QACPa,UAAU;IACZ;IAEAZ,cAAc;QACZY,UAAU;QACV,CAAC,CAAC,GAAG,EAAErB,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;YAC/BC,UAAU;YACVC,QAAQ;YACRC,OAAO;QACT;QACA,UAAU;YACR,CAAC,CAAC,GAAG,EAAE7B,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAO1B,OAAO2B,4BAA4B;YAC5C;QACF;QACA,iBAAiB;YACf,CAAC,CAAC,GAAG,EAAE/B,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAO1B,OAAO4B,8BAA8B;YAC9C;QACF;IACF;IAEAC,sBAAsB;QACpB,CAAC,CAAC,KAAK,EAAEjC,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;YACjCQ,WAAW;QACb;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClD;IAEA,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,gBAAgB5B;IACtB,MAAM6B,SAASnB;IACfgB,MAAM9B,IAAI,CAACkC,SAAS,GAAGrC,aAAaE,4BAA4BC,IAAI,EAAEgC,eAAeF,MAAM9B,IAAI,CAACkC,SAAS;IACzGJ,MAAM7B,WAAW,CAACiC,SAAS,GAAGrC,aAC5BE,4BAA4BE,WAAW,EACvCgC,OAAOhC,WAAW,EAClB6B,MAAM7B,WAAW,CAACiC,SAAS;IAE7B,IAAIJ,MAAM5B,OAAO,EAAE;QACjB4B,MAAM5B,OAAO,CAACgC,SAAS,GAAGrC,aACxBE,4BAA4BG,OAAO,EACnC+B,OAAO/B,OAAO,EACd4B,MAAM5B,OAAO,CAACgC,SAAS;IAE3B;IACA,IAAIJ,MAAM3B,YAAY,EAAE;QACtB2B,MAAM3B,YAAY,CAAC+B,SAAS,GAAGrC,aAC7BE,4BAA4BI,YAAY,EACxC8B,OAAO9B,YAAY,EACnB4B,cAAcE,OAAON,oBAAoB,EACzCG,MAAM3B,YAAY,CAAC+B,SAAS;IAEhC;IAEA,OAAOJ;AACT,EAAE"}

package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js

@@ -3,26 +3,35 @@ import { tokens } from '@fluentui-copilot/tokens';
 export const promptStarterListClassNames = {
     root: 'fai-PromptStarterList',
     gridWrapper: 'fai-PromptStarterList__gridWrapper',
+    actions: 'fai-PromptStarterList__actions',
     expandButton: 'fai-PromptStarterList__expandButton'
 };
 /**
  * Styles for the root slot
  */ const useRootClassName = makeResetStyles({
-    display: 'flex',
-    flexDirection: 'column',
+    display: 'grid',
+    gridTemplateColumns: '1fr max-content max-content',
+    gridTemplateRows: 'max-content max-content',
+    gridTemplateAreas: `"grid grid grid"
+                      ". actions expandButton"`,
     maxWidth: '772px',
-    gap: tokens.spacingHorizontalXL
+    rowGap: tokens.spacingVerticalXL,
+    columnGap: tokens.spacingHorizontalSNudge
 });
 const useStyles = makeStyles({
     gridWrapper: {
+        gridArea: 'grid',
         display: 'grid',
         gap: tokens.spacingHorizontalL,
         gridAutoColumns: 'max-content',
         gridTemplateColumns: `repeat(auto-fit, minmax(214px, 1fr))`,
         gridAutoFlow: 'unset'
     },
+    actions: {
+        gridArea: 'actions'
+    },
     expandButton: {
-        alignSelf: 'end',
+        gridArea: 'expandButton',
         [`& .${buttonClassNames.icon}`]: {
             fontSize: '12px',
             height: '12px',
@@ -54,6 +63,9 @@ const useStyles = makeStyles({
     const styles = useStyles();
     state.root.className = mergeClasses(promptStarterListClassNames.root, rootClassName, state.root.className);
     state.gridWrapper.className = mergeClasses(promptStarterListClassNames.gridWrapper, styles.gridWrapper, state.gridWrapper.className);
+    if (state.actions) {
+        state.actions.className = mergeClasses(promptStarterListClassNames.actions, styles.actions, state.actions.className);
+    }
     if (state.expandButton) {
         state.expandButton.className = mergeClasses(promptStarterListClassNames.expandButton, styles.expandButton, isExpanded && styles.expandButtonExpanded, state.expandButton.className);
     }

package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePromptStarterListStyles.styles.ts"],"sourcesContent":["import { buttonClassNames, makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type { PromptStarterListSlots, PromptStarterListState } from './PromptStarterList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nexport const promptStarterListClassNames: SlotClassNames<PromptStarterListSlots> = {\n  root: 'fai-PromptStarterList',\n  gridWrapper: 'fai-PromptStarterList__gridWrapper',\n  expandButton: 'fai-PromptStarterList__expandButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n  display: 'flex',\n  flexDirection: 'column',\n  maxWidth: '772px',\n  gap: tokens.spacingHorizontalXL,\n});\n\nconst useStyles = makeStyles({\n  gridWrapper: {\n    display: 'grid',\n    gap: tokens.spacingHorizontalL,\n    gridAutoColumns: 'max-content',\n\n    gridTemplateColumns: `repeat(auto-fit, minmax(214px, 1fr))`,\n    gridAutoFlow: 'unset',\n  },\n\n  expandButton: {\n    alignSelf: 'end',\n    [`& .${buttonClassNames.icon}`]: {\n      fontSize: '12px',\n      height: '12px',\n      width: '12px',\n    },\n    ':hover': {\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n    ':hover:active': {\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  expandButtonExpanded: {\n    [`& > .${buttonClassNames.icon}`]: {\n      transform: 'rotate(180deg)',\n    },\n  },\n});\n\n/**\n * Apply styling to the PromptStarterList slots based on the state\n */\nexport const usePromptStarterListStyles_unstable = (state: PromptStarterListState): PromptStarterListState => {\n  'use no memo';\n\n  const { isExpanded } = state;\n\n  const rootClassName = useRootClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(promptStarterListClassNames.root, rootClassName, state.root.className);\n  state.gridWrapper.className = mergeClasses(\n    promptStarterListClassNames.gridWrapper,\n    styles.gridWrapper,\n    state.gridWrapper.className,\n  );\n  if (state.expandButton) {\n    state.expandButton.className = mergeClasses(\n      promptStarterListClassNames.expandButton,\n      styles.expandButton,\n      isExpanded && styles.expandButtonExpanded,\n      state.expandButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","tokens","promptStarterListClassNames","root","gridWrapper","expandButton","useRootClassName","display","flexDirection","maxWidth","gap","spacingHorizontalXL","useStyles","spacingHorizontalL","gridAutoColumns","gridTemplateColumns","gridAutoFlow","alignSelf","icon","fontSize","height","width","color","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","expandButtonExpanded","transform","usePromptStarterListStyles_unstable","state","isExpanded","rootClassName","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AAGzG,SAASC,MAAM,QAAQ,2BAA2B;AAElD,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,aAAa;IACbC,cAAc;AAChB,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBR,gBAAgB;IACvCS,SAAS;IACTC,eAAe;IACfC,UAAU;IACVC,KAAKT,OAAOU,mBAAmB;AACjC;AAEA,MAAMC,YAAYb,WAAW;IAC3BK,aAAa;QACXG,SAAS;QACTG,KAAKT,OAAOY,kBAAkB;QAC9BC,iBAAiB;QAEjBC,qBAAqB,CAAC,oCAAoC,CAAC;QAC3DC,cAAc;IAChB;IAEAX,cAAc;QACZY,WAAW;QACX,CAAC,CAAC,GAAG,EAAEpB,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;YAC/BC,UAAU;YACVC,QAAQ;YACRC,OAAO;QACT;QACA,UAAU;YACR,CAAC,CAAC,GAAG,EAAExB,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAOrB,OAAOsB,4BAA4B;YAC5C;QACF;QACA,iBAAiB;YACf,CAAC,CAAC,GAAG,EAAE1B,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAOrB,OAAOuB,8BAA8B;YAC9C;QACF;IACF;IAEAC,sBAAsB;QACpB,CAAC,CAAC,KAAK,EAAE5B,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;YACjCQ,WAAW;QACb;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClD;IAEA,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,gBAAgBxB;IACtB,MAAMyB,SAASnB;IACfgB,MAAMzB,IAAI,CAAC6B,SAAS,GAAGhC,aAAaE,4BAA4BC,IAAI,EAAE2B,eAAeF,MAAMzB,IAAI,CAAC6B,SAAS;IACzGJ,MAAMxB,WAAW,CAAC4B,SAAS,GAAGhC,aAC5BE,4BAA4BE,WAAW,EACvC2B,OAAO3B,WAAW,EAClBwB,MAAMxB,WAAW,CAAC4B,SAAS;IAE7B,IAAIJ,MAAMvB,YAAY,EAAE;QACtBuB,MAAMvB,YAAY,CAAC2B,SAAS,GAAGhC,aAC7BE,4BAA4BG,YAAY,EACxC0B,OAAO1B,YAAY,EACnBwB,cAAcE,OAAON,oBAAoB,EACzCG,MAAMvB,YAAY,CAAC2B,SAAS;IAEhC;IAEA,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["usePromptStarterListStyles.styles.ts"],"sourcesContent":["import { buttonClassNames, makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type { PromptStarterListSlots, PromptStarterListState } from './PromptStarterList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nexport const promptStarterListClassNames: SlotClassNames<PromptStarterListSlots> = {\n  root: 'fai-PromptStarterList',\n  gridWrapper: 'fai-PromptStarterList__gridWrapper',\n  actions: 'fai-PromptStarterList__actions',\n  expandButton: 'fai-PromptStarterList__expandButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n  display: 'grid',\n  gridTemplateColumns: '1fr max-content max-content',\n  gridTemplateRows: 'max-content max-content',\n  gridTemplateAreas: `\"grid grid grid\"\n                      \". actions expandButton\"`,\n  maxWidth: '772px',\n  rowGap: tokens.spacingVerticalXL,\n  columnGap: tokens.spacingHorizontalSNudge,\n});\n\nconst useStyles = makeStyles({\n  gridWrapper: {\n    gridArea: 'grid',\n    display: 'grid',\n    gap: tokens.spacingHorizontalL,\n    gridAutoColumns: 'max-content',\n\n    gridTemplateColumns: `repeat(auto-fit, minmax(214px, 1fr))`,\n    gridAutoFlow: 'unset',\n  },\n\n  actions: {\n    gridArea: 'actions',\n  },\n\n  expandButton: {\n    gridArea: 'expandButton',\n    [`& .${buttonClassNames.icon}`]: {\n      fontSize: '12px',\n      height: '12px',\n      width: '12px',\n    },\n    ':hover': {\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n    ':hover:active': {\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  expandButtonExpanded: {\n    [`& > .${buttonClassNames.icon}`]: {\n      transform: 'rotate(180deg)',\n    },\n  },\n});\n\n/**\n * Apply styling to the PromptStarterList slots based on the state\n */\nexport const usePromptStarterListStyles_unstable = (state: PromptStarterListState): PromptStarterListState => {\n  'use no memo';\n\n  const { isExpanded } = state;\n\n  const rootClassName = useRootClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(promptStarterListClassNames.root, rootClassName, state.root.className);\n  state.gridWrapper.className = mergeClasses(\n    promptStarterListClassNames.gridWrapper,\n    styles.gridWrapper,\n    state.gridWrapper.className,\n  );\n  if (state.actions) {\n    state.actions.className = mergeClasses(\n      promptStarterListClassNames.actions,\n      styles.actions,\n      state.actions.className,\n    );\n  }\n  if (state.expandButton) {\n    state.expandButton.className = mergeClasses(\n      promptStarterListClassNames.expandButton,\n      styles.expandButton,\n      isExpanded && styles.expandButtonExpanded,\n      state.expandButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","tokens","promptStarterListClassNames","root","gridWrapper","actions","expandButton","useRootClassName","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","maxWidth","rowGap","spacingVerticalXL","columnGap","spacingHorizontalSNudge","useStyles","gridArea","gap","spacingHorizontalL","gridAutoColumns","gridAutoFlow","icon","fontSize","height","width","color","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","expandButtonExpanded","transform","usePromptStarterListStyles_unstable","state","isExpanded","rootClassName","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AAGzG,SAASC,MAAM,QAAQ,2BAA2B;AAElD,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,aAAa;IACbC,SAAS;IACTC,cAAc;AAChB,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,qBAAqB;IACrBC,kBAAkB;IAClBC,mBAAmB,CAAC;8CACwB,CAAC;IAC7CC,UAAU;IACVC,QAAQZ,OAAOa,iBAAiB;IAChCC,WAAWd,OAAOe,uBAAuB;AAC3C;AAEA,MAAMC,YAAYlB,WAAW;IAC3BK,aAAa;QACXc,UAAU;QACVV,SAAS;QACTW,KAAKlB,OAAOmB,kBAAkB;QAC9BC,iBAAiB;QAEjBZ,qBAAqB,CAAC,oCAAoC,CAAC;QAC3Da,cAAc;IAChB;IAEAjB,SAAS;QACPa,UAAU;IACZ;IAEAZ,cAAc;QACZY,UAAU;QACV,CAAC,CAAC,GAAG,EAAErB,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;YAC/BC,UAAU;YACVC,QAAQ;YACRC,OAAO;QACT;QACA,UAAU;YACR,CAAC,CAAC,GAAG,EAAE7B,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAO1B,OAAO2B,4BAA4B;YAC5C;QACF;QACA,iBAAiB;YACf,CAAC,CAAC,GAAG,EAAE/B,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAO1B,OAAO4B,8BAA8B;YAC9C;QACF;IACF;IAEAC,sBAAsB;QACpB,CAAC,CAAC,KAAK,EAAEjC,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;YACjCQ,WAAW;QACb;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClD;IAEA,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,gBAAgB5B;IACtB,MAAM6B,SAASnB;IACfgB,MAAM9B,IAAI,CAACkC,SAAS,GAAGrC,aAAaE,4BAA4BC,IAAI,EAAEgC,eAAeF,MAAM9B,IAAI,CAACkC,SAAS;IACzGJ,MAAM7B,WAAW,CAACiC,SAAS,GAAGrC,aAC5BE,4BAA4BE,WAAW,EACvCgC,OAAOhC,WAAW,EAClB6B,MAAM7B,WAAW,CAACiC,SAAS;IAE7B,IAAIJ,MAAM5B,OAAO,EAAE;QACjB4B,MAAM5B,OAAO,CAACgC,SAAS,GAAGrC,aACxBE,4BAA4BG,OAAO,EACnC+B,OAAO/B,OAAO,EACd4B,MAAM5B,OAAO,CAACgC,SAAS;IAE3B;IACA,IAAIJ,MAAM3B,YAAY,EAAE;QACtB2B,MAAM3B,YAAY,CAAC+B,SAAS,GAAGrC,aAC7BE,4BAA4BI,YAAY,EACxC8B,OAAO9B,YAAY,EACnB4B,cAAcE,OAAON,oBAAoB,EACzCG,MAAM3B,YAAY,CAAC+B,SAAS;IAEhC;IAEA,OAAOJ;AACT,EAAE"}

package/lib/contexts/PromptStarterListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PromptStarterListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport type { PromptStarterListContextValue } from '../PromptStarterList';\n\nexport const PromptStarterListContext = createContext<PromptStarterListContextValue | undefined>(undefined);\n\nconst promptStarterListContextDefaultValue: PromptStarterListContextValue = {\n  numberOfColumns: 3,\n};\n\nexport const usePromptStarterListContext = <T>(selector: ContextSelector<PromptStarterListContextValue, T>) =>\n  useContextSelector(PromptStarterListContext, (ctx = promptStarterListContextDefaultValue) => selector(ctx));\nexport const PromptStarterListProvider = PromptStarterListContext.Provider;\n"],"names":["createContext","useContextSelector","PromptStarterListContext","undefined","promptStarterListContextDefaultValue","numberOfColumns","usePromptStarterListContext","selector","ctx","PromptStarterListProvider","Provider"],"rangeMappings":";;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,2BAA2BF,cAAyDG,WAAW;AAE5G,MAAMC,uCAAsE;IAC1EC,iBAAiB;AACnB;AAEA,OAAO,MAAMC,8BAA8B,CAAIC,WAC7CN,mBAAmBC,0BAA0B,CAACM,MAAMJ,oCAAoC,GAAKG,SAASC,MAAM;AAC9G,OAAO,MAAMC,4BAA4BP,yBAAyBQ,QAAQ,CAAC"}
+{"version":3,"sources":["PromptStarterListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport type { PromptStarterListContextValue } from '../PromptStarterList';\n\nexport const PromptStarterListContext = createContext<PromptStarterListContextValue | undefined>(undefined);\n\nconst promptStarterListContextDefaultValue: PromptStarterListContextValue = {\n  numberOfColumns: 3,\n};\n\nexport const usePromptStarterListContext = <T>(selector: ContextSelector<PromptStarterListContextValue, T>): T =>\n  useContextSelector(PromptStarterListContext, (ctx = promptStarterListContextDefaultValue) => selector(ctx));\nexport const PromptStarterListProvider = PromptStarterListContext.Provider;\n"],"names":["createContext","useContextSelector","PromptStarterListContext","undefined","promptStarterListContextDefaultValue","numberOfColumns","usePromptStarterListContext","selector","ctx","PromptStarterListProvider","Provider"],"rangeMappings":";;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,2BAA2BF,cAAyDG,WAAW;AAE5G,MAAMC,uCAAsE;IAC1EC,iBAAiB;AACnB;AAEA,OAAO,MAAMC,8BAA8B,CAAIC,WAC7CN,mBAAmBC,0BAA0B,CAACM,MAAMJ,oCAAoC,GAAKG,SAASC,MAAM;AAC9G,OAAO,MAAMC,4BAA4BP,yBAAyBQ,QAAQ,CAAC"}

package/lib-commonjs/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":["renderPromptStarter_unstable","state","assertSlots","_jsxs","root","_jsx","icon","category","children","badge","prompt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;iCAE4B;AAGrB,MAAMA,+BAA+B,CAACC;IAC3CC,IAAAA,4BAAAA,EAAgCD;IAEhC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTC,IAAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA,CAAA;0BACXH,IAAAA,gBAAA,EAACF,MAAMM,QAAQ,EAAA;;oBACZN,MAAMM,QAAQ,CAACC,QAAQ;oBAAC;oBAAEP,MAAMQ,KAAK,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACJ,MAAMQ,KAAK,EAAA,CAAA;;;YAEvDR,MAAMS,MAAM,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACJ,MAAMS,MAAM,EAAA,CAAA;;;AAGpC"}
+{"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":["renderPromptStarter_unstable","state","assertSlots","_jsxs","root","_jsx","icon","category","children","badge","prompt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;4BANb;iCAE4B;AAIrB,MAAMA,+BAA+B,CAACC;IAC3CC,IAAAA,4BAAAA,EAAgCD;IAEhC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTC,IAAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA,CAAA;0BACXH,IAAAA,gBAAA,EAACF,MAAMM,QAAQ,EAAA;;oBACZN,MAAMM,QAAQ,CAACC,QAAQ;oBAAC;oBAAEP,MAAMQ,KAAK,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACJ,MAAMQ,KAAK,EAAA,CAAA;;;YAEvDR,MAAMS,MAAM,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACJ,MAAMS,MAAM,EAAA,CAAA;;;AAGpC"}

package/lib-commonjs/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"}
+{"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"}

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

@@ -17,6 +17,7 @@ const renderPromptStarter_unstable = (state)=>{
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.primaryAction, {
                 children: [
                     state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
+                    state.category && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.category, {}),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prompt, {}),
                     state.reasonMarker && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.reasonMarker, {})
                 ]

package/lib-commonjs/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":["renderPromptStarter_unstable","state","assertSlots","_jsxs","root","primaryAction","icon","_jsx","prompt","reasonMarker","actions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;iCAE4B;AAGrB,MAAMA,+BAA+B,CAACC;IAC3CC,IAAAA,4BAAAA,EAAgCD;IAEhC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTD,IAAAA,gBAAA,EAACF,MAAMI,aAAa,EAAA;;oBACjBJ,MAAMK,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,IAAI,EAAA,CAAA;kCAC1BC,IAAAA,eAAA,EAACN,MAAMO,MAAM,EAAA,CAAA;oBACZP,MAAMQ,YAAY,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACN,MAAMQ,YAAY,EAAA,CAAA;;;YAE3CR,MAAMS,OAAO,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACN,MAAMS,OAAO,EAAA,CAAA;;;AAGtC"}
+{"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":["renderPromptStarter_unstable","state","assertSlots","_jsxs","root","primaryAction","icon","_jsx","category","prompt","reasonMarker","actions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;4BANb;iCAE4B;AAIrB,MAAMA,+BAA+B,CAACC;IAC3CC,IAAAA,4BAAAA,EAAgCD;IAEhC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTD,IAAAA,gBAAA,EAACF,MAAMI,aAAa,EAAA;;oBACjBJ,MAAMK,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,IAAI,EAAA,CAAA;oBACzBL,MAAMO,QAAQ,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACN,MAAMO,QAAQ,EAAA,CAAA;kCAClCD,IAAAA,eAAA,EAACN,MAAMQ,MAAM,EAAA,CAAA;oBACZR,MAAMS,YAAY,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACN,MAAMS,YAAY,EAAA,CAAA;;;YAE3CT,MAAMU,OAAO,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACN,MAAMU,OAAO,EAAA,CAAA;;;AAGtC"}

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

@@ -23,6 +23,7 @@ const usePromptStarter_unstable = (props, ref)=>{
             root: 'div',
             primaryAction: 'button',
             icon: 'span',
+            category: 'span',
             prompt: 'span',
             reasonMarker: 'span',
             actions: 'span'
@@ -37,7 +38,7 @@ const usePromptStarter_unstable = (props, ref)=>{
         }),
         primaryAction: _reactcomponents.slot.always(props.primaryAction, {
             defaultProps: {
-                'aria-labelledby': `${id}-prompt`,
+                'aria-labelledby': `${id}-category ${id}-prompt`,
                 'aria-describedby': `${id}-icon ${id}-reasonMarker`
             },
             elementType: 'button'
@@ -48,6 +49,12 @@ const usePromptStarter_unstable = (props, ref)=>{
             },
             elementType: 'span'
         }) : undefined,
+        category: !isSingleColumn ? _reactcomponents.slot.optional(props.category, {
+            defaultProps: {
+                id: `${id}-category`
+            },
+            elementType: 'span'
+        }) : undefined,
         prompt: _reactcomponents.slot.always(props.prompt, {
             defaultProps: {
                 id: `${id}-prompt`

package/lib-commonjs/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":["usePromptStarter_unstable","props","ref","id","useId","focusAttrs","useFocusableGroup","numberOfColumns","usePromptStarterListContext","ctx","isWithinList","isSingleColumn","state","components","root","primaryAction","icon","prompt","reasonMarker","actions","slot","always","getIntrinsicElementProps","role","undefined","elementType","defaultProps","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;iCAb4D;0CAC7B;AAYrC,MAAMA,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,KAAKC,IAAAA,sBAAAA,EAAM;IACjB,MAAMC,aAAaC,IAAAA,kCAAAA;IAEnB,MAAMC,kBAAkBC,IAAAA,qDAAAA,EAA4BC,CAAAA,MAAOA,IAAIF,eAAe;IAC9E,oFAAoF;IACpF,MAAMG,eAAe,OAAOH,oBAAoB;IAEhD,MAAMI,iBAAiBJ,oBAAoB;IAE3C,MAAMK,QAA4B;QAChCD;QACAE,YAAY;YACVC,MAAM;YACNC,eAAe;YACfC,MAAM;YACNC,QAAQ;YACRC,cAAc;YACdC,SAAS;QACX;QACAL,MAAMM,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,OAAO;YAC9BpB;YACAqB,MAAMb,eAAe,aAAac;YAClC,GAAGnB,UAAU;YACb,GAAGJ,KAAK;QACV,IACA;YAAEwB,aAAa;QAAM;QAEvBV,eAAeK,qBAAAA,CAAKC,MAAM,CAACpB,MAAMc,aAAa,EAAE;YAC9CW,cAAc;gBACZ,mBAAmB,CAAC,EAAEvB,GAAG,OAAO,CAAC;gBACjC,oBAAoB,CAAC,EAAEA,GAAG,MAAM,EAAEA,GAAG,aAAa,CAAC;YACrD;YACAsB,aAAa;QACf;QACAT,MAAM,CAACL,iBACHS,qBAAAA,CAAKO,QAAQ,CAAC1B,MAAMe,IAAI,EAAE;YACxBU,cAAc;gBAAEvB,IAAI,CAAC,EAAEA,GAAG,KAAK,CAAC;YAAC;YACjCsB,aAAa;QACf,KACAD;QACJP,QAAQG,qBAAAA,CAAKC,MAAM,CAACpB,MAAMgB,MAAM,EAAE;YAChCS,cAAc;gBAAEvB,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAAC;YACnCsB,aAAa;QACf;QACAP,cAAc,CAACP,iBACXS,qBAAAA,CAAKO,QAAQ,CAAC1B,MAAMiB,YAAY,EAAE;YAChCQ,cAAc;gBAAEvB,IAAI,CAAC,EAAEA,GAAG,aAAa,CAAC;YAAC;YACzCsB,aAAa;QACf,KACAD;QACJL,SAAS,CAACR,iBAAiBS,qBAAAA,CAAKO,QAAQ,CAAC1B,MAAMkB,OAAO,EAAE;YAAEM,aAAa;QAAO,KAAKD;IACrF;IAEA,OAAOZ;AACT"}
+{"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":["usePromptStarter_unstable","props","ref","id","useId","focusAttrs","useFocusableGroup","numberOfColumns","usePromptStarterListContext","ctx","isWithinList","isSingleColumn","state","components","root","primaryAction","icon","category","prompt","reasonMarker","actions","slot","always","getIntrinsicElementProps","role","undefined","elementType","defaultProps","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;iCAb4D;0CAC7B;AAYrC,MAAMA,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,KAAKC,IAAAA,sBAAAA,EAAM;IACjB,MAAMC,aAAaC,IAAAA,kCAAAA;IAEnB,MAAMC,kBAAkBC,IAAAA,qDAAAA,EAA4BC,CAAAA,MAAOA,IAAIF,eAAe;IAC9E,oFAAoF;IACpF,MAAMG,eAAe,OAAOH,oBAAoB;IAEhD,MAAMI,iBAAiBJ,oBAAoB;IAE3C,MAAMK,QAA4B;QAChCD;QACAE,YAAY;YACVC,MAAM;YACNC,eAAe;YACfC,MAAM;YACNC,UAAU;YACVC,QAAQ;YACRC,cAAc;YACdC,SAAS;QACX;QACAN,MAAMO,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,OAAO;YAC9BrB;YACAsB,MAAMd,eAAe,aAAae;YAClC,GAAGpB,UAAU;YACb,GAAGJ,KAAK;QACV,IACA;YAAEyB,aAAa;QAAM;QAEvBX,eAAeM,qBAAAA,CAAKC,MAAM,CAACrB,MAAMc,aAAa,EAAE;YAC9CY,cAAc;gBACZ,mBAAmB,CAAC,EAAExB,GAAG,UAAU,EAAEA,GAAG,OAAO,CAAC;gBAChD,oBAAoB,CAAC,EAAEA,GAAG,MAAM,EAAEA,GAAG,aAAa,CAAC;YACrD;YACAuB,aAAa;QACf;QACAV,MAAM,CAACL,iBACHU,qBAAAA,CAAKO,QAAQ,CAAC3B,MAAMe,IAAI,EAAE;YACxBW,cAAc;gBAAExB,IAAI,CAAC,EAAEA,GAAG,KAAK,CAAC;YAAC;YACjCuB,aAAa;QACf,KACAD;QACJR,UAAU,CAACN,iBACPU,qBAAAA,CAAKO,QAAQ,CAAC3B,MAAMgB,QAAQ,EAAE;YAC5BU,cAAc;gBAAExB,IAAI,CAAC,EAAEA,GAAG,SAAS,CAAC;YAAC;YACrCuB,aAAa;QACf,KACAD;QACJP,QAAQG,qBAAAA,CAAKC,MAAM,CAACrB,MAAMiB,MAAM,EAAE;YAChCS,cAAc;gBAAExB,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAAC;YACnCuB,aAAa;QACf;QACAP,cAAc,CAACR,iBACXU,qBAAAA,CAAKO,QAAQ,CAAC3B,MAAMkB,YAAY,EAAE;YAChCQ,cAAc;gBAAExB,IAAI,CAAC,EAAEA,GAAG,aAAa,CAAC;YAAC;YACzCuB,aAAa;QACf,KACAD;QACJL,SAAS,CAACT,iBAAiBU,qBAAAA,CAAKO,QAAQ,CAAC3B,MAAMmB,OAAO,EAAE;YAAEM,aAAa;QAAO,KAAKD;IACrF;IAEA,OAAOb;AACT"}

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

@@ -21,6 +21,7 @@ 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'
@@ -39,9 +40,10 @@ const useStyles = (0, _reactcomponents.__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,
@@ -56,7 +58,8 @@ const useStyles = (0, _reactcomponents.__styles)({
             "f1o700av",
             "fes3tcz"
         ],
-        Belr9w4: "fylz90v",
+        i8kkvl: "f6ave1s",
+        Belr9w4: "f1wn3y0l",
         Byoj8tv: 0,
         uwmqm3: 0,
         z189sj: 0,
@@ -164,7 +167,27 @@ const useStyles = (0, _reactcomponents.__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,
@@ -190,6 +213,13 @@ const useStyles = (0, _reactcomponents.__styles)({
         Bkqvd7p: 0,
         Bi2q7bf: "f1964ud6"
     },
+    actionsWithCategory: {
+        De3pzq: "fxugw4r",
+        E5pizo: [
+            "f1u7pq1e",
+            "f1pdyzui"
+        ]
+    },
     prompt: {
         Bahqtrf: "fk6fouc",
         Be2twd7: "fkhj508",
@@ -198,9 +228,24 @@ const useStyles = (0, _reactcomponents.__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",
@@ -220,9 +265,10 @@ const useStyles = (0, _reactcomponents.__styles)({
                 p: -1
             }
         ],
-        ".f22iagw{display:flex;}",
-        ".f1vx9l62{flex-direction:column;}",
         ".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;}",
             {
@@ -236,7 +282,8 @@ const useStyles = (0, _reactcomponents.__styles)({
         ".f1s6fcnf{outline-style:none;}",
         ".f1o700av{text-align:left;}",
         ".fes3tcz{text-align:right;}",
-        ".fylz90v{row-gap:var(--spacingHorizontalS);}",
+        ".f6ave1s{column-gap:var(--spacingHorizontalMNudge);}",
+        ".f1wn3y0l{row-gap:var(--spacingVerticalS);}",
         [
             ".fq88wcj{padding:var(--spacingVerticalL) var(--spacingHorizontalL);}",
             {
@@ -287,8 +334,36 @@ const useStyles = (0, _reactcomponents.__styles)({
                 p: -1
             }
         ],
+        ".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);}",
             {
@@ -320,13 +395,37 @@ const useStyles = (0, _reactcomponents.__styles)({
                 p: -1
             }
         ],
-        ".fkhj508{font-size:var(--fontSizeBase300);}",
-        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
-        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".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);}"
@@ -360,6 +459,7 @@ const useStyles = (0, _reactcomponents.__styles)({
 });
 const useSingleColumnStyles = (0, _reactcomponents.__styles)({
     primaryAction: {
+        mc9l5x: "f22iagw",
         Beyfa6y: 0,
         Bbmb7ep: 0,
         Btl43ni: 0,
@@ -432,6 +532,7 @@ const useSingleColumnStyles = (0, _reactcomponents.__styles)({
     }
 }, {
     d: [
+        ".f22iagw{display:flex;}",
         [
             ".f1jxijnj{border-radius:var(--borderRadius2XL);}",
             {
@@ -505,12 +606,15 @@ const usePromptStarterStyles_unstable = (state)=>{
     if (state.icon) {
         state.icon.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.icon, styles.icon, state.icon.className);
     }
-    state.prompt.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.prompt, styles.prompt, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
+    if (state.category) {
+        state.category.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.category, styles.category, state.category.className);
+    }
+    state.prompt.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.prompt, styles.prompt, !state.reasonMarker && styles.promptNoReasonMarker, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
     if (state.reasonMarker) {
         state.reasonMarker.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.reasonMarker, styles.reasonMarker, state.reasonMarker.className);
     }
     if (state.actions) {
-        state.actions.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.actions, styles.actions, state.actions.className);
+        state.actions.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.actions, styles.actions, state.category && styles.actionsWithCategory, state.actions.className);
     }
     return state;
 }; //# sourceMappingURL=usePromptStarterStyles.styles.js.map