@fluentui-copilot/react-prompt-starter 0.10.6 → 0.10.8

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

@@ -14,16 +14,32 @@ const _reactcomponents = require("@fluentui/react-components");
 const _reactprovider = require("@fluentui-copilot/react-provider");
 const _reacticons = require("@fluentui/react-icons");
 const _promptStarterMotion = require("../PromptStarter/promptStarterMotion");
+const _reactutilities = require("@fluentui/react-utilities");
 const usePromptStarterList_unstable = (props, ref)=>{
-    const { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less' } = props;
+    const { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less', onExpandedChange, animateOnMount = true, visibleRows = 1 } = props;
     const designVersion = (0, _reactprovider.useDesignVersion)(props.designVersion);
     var _arrowNavigationOptions_axis, _arrowNavigationOptions_memorizeCurrent;
     const focusAttrs = (0, _reactcomponents.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);
+    const [isExpanded, setIsExpanded] = (0, _reactutilities.useControllableState)({
+        state: props.isExpanded,
+        defaultState: props.defaultExpanded,
+        initialState: false
+    });
+    const toggleExpanded = _react.useCallback((event)=>{
+        setIsExpanded((prevExpanded)=>{
+            onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(event, {
+                isExpanded: !prevExpanded
+            });
+            return !prevExpanded;
+        });
+    }, [
+        setIsExpanded,
+        onExpandedChange
+    ]);
     const [numberOfColumns, setNumberOfColumns] = _react.useState(3);
     const gridWrapperRef = _react.useRef(null);
     const { targetDocument } = (0, _reactcomponents.useFluent)();
@@ -45,11 +61,12 @@ const usePromptStarterList_unstable = (props, ref)=>{
     ]);
     const state = {
         numberOfColumns: numberOfColumns,
-        isExpanded,
+        isExpanded: isExpanded,
         designVersion,
         components: {
             root: 'div',
             gridWrapper: 'div',
+            actions: 'span',
             expandButton: _reactcomponents.Button
         },
         root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
@@ -65,6 +82,9 @@ const usePromptStarterList_unstable = (props, ref)=>{
             },
             elementType: 'div'
         }),
+        actions: _reactcomponents.slot.optional(props.actions, {
+            elementType: 'span'
+        }),
         expandButton: _reactcomponents.slot.optional(props.expandButton, {
             defaultProps: {
                 appearance: 'subtle',
@@ -92,12 +112,11 @@ const usePromptStarterList_unstable = (props, ref)=>{
             if (!/*#__PURE__*/ _react.isValidElement(child) || child.type === _react.Fragment) {
                 throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');
             }
-            // In the collapsed state, if there is one column, we show three children.
-            // If there are two or three columns, we show two or three. All children
-            // are shown in the expanded state.
-            const visibility = numberOfColumns === 1 && index < 3 || index < numberOfColumns || isExpanded;
+            // In the collapsed state, if there is one column, we show three children. If there are two or three columns,
+            // we show two or three (or four or six, if there are two visible rows). All children are shown in the isExpanded state.
+            const visibility = numberOfColumns === 1 && index < 3 || index < numberOfColumns * visibleRows || isExpanded;
             return /*#__PURE__*/ _react.createElement(_promptStarterMotion.PromptStarterMotion, {
-                appear: true,
+                appear: animateOnMount,
                 key: index,
                 index: index,
                 visible: visibility,
@@ -109,8 +128,12 @@ const usePromptStarterList_unstable = (props, ref)=>{
         isExpanded
     ]);
     state.root.children = childrenWithMotion;
+    const numChildren = childrenArray.length;
+    if (numberOfColumns === 1 && numChildren <= 3 || numChildren <= numberOfColumns * visibleRows) {
+        state.expandButton = undefined;
+    }
     if (state.expandButton) {
-        state.expandButton.onClick = (0, _reactcomponents.mergeCallbacks)(state.expandButton.onClick, ()=>setIsExpanded(!isExpanded));
+        state.expandButton.onClick = (0, _reactcomponents.mergeCallbacks)(state.expandButton.onClick, toggleExpanded);
     }
     return state;
 };

package/lib-commonjs/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 { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less' } = 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<(React.ReactChild | React.ReactFragment | React.ReactPortal)[]>(() => {\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 appear key={index} index={index} visible={visibility} numberOfColumns={numberOfColumns}>\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":["usePromptStarterList_unstable","props","ref","arrowNavigationOptions","expandButtonLabel","collapseButtonLabel","designVersion","useDesignVersion","focusAttrs","useArrowNavigationGroup","axis","memorizeCurrent","isExpanded","setIsExpanded","React","useState","numberOfColumns","setNumberOfColumns","gridWrapperRef","useRef","targetDocument","useFluent","win","defaultView","useEffect","current","promptStarterGrid","updateNumberOfColumns","numColumns","getComputedStyle","gridTemplateColumns","split","length","ro","ResizeObserver","observe","unobserve","state","components","root","gridWrapper","expandButton","Button","slot","always","getIntrinsicElementProps","elementType","defaultProps","role","optional","appearance","size","shape","icon","createElement","ChevronDown12Regular","iconPosition","children","renderByDefault","useMergedRefs","childrenArray","useMemo","Children","toArray","childrenWithMotion","map","child","index","isValidElement","type","Fragment","Error","visibility","PromptStarterMotion","appear","key","visible","onClick","mergeCallbacks"],"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';\nimport { useControllableState } from '@fluentui/react-utilities';\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    onExpandedChange,\n    animateOnMount = true,\n    visibleRows = 1,\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] = useControllableState({\n    state: props.isExpanded,\n    defaultState: props.defaultExpanded,\n    initialState: false,\n  });\n  const toggleExpanded = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      setIsExpanded(prevExpanded => {\n        onExpandedChange?.(event, { isExpanded: !prevExpanded });\n        return !prevExpanded;\n      });\n    },\n    [setIsExpanded, onExpandedChange],\n  );\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: 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. If there are two or three columns,\n        // we show two or three (or four or six, if there are two visible rows). All children are shown in the isExpanded state.\n        const visibility = (numberOfColumns === 1 && index < 3) || index < numberOfColumns * visibleRows || 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  const numChildren = childrenArray.length;\n  if ((numberOfColumns === 1 && numChildren <= 3) || numChildren <= numberOfColumns * visibleRows) {\n    state.expandButton = undefined;\n  }\n\n  if (state.expandButton) {\n    state.expandButton.onClick = mergeCallbacks(\n      state.expandButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n      toggleExpanded,\n    );\n  }\n\n  return state;\n};\n"],"names":["usePromptStarterList_unstable","props","ref","arrowNavigationOptions","expandButtonLabel","collapseButtonLabel","onExpandedChange","animateOnMount","visibleRows","designVersion","useDesignVersion","focusAttrs","useArrowNavigationGroup","axis","memorizeCurrent","isExpanded","setIsExpanded","useControllableState","state","defaultState","defaultExpanded","initialState","toggleExpanded","React","useCallback","event","prevExpanded","numberOfColumns","setNumberOfColumns","useState","gridWrapperRef","useRef","targetDocument","useFluent","win","defaultView","useEffect","current","promptStarterGrid","updateNumberOfColumns","numColumns","getComputedStyle","gridTemplateColumns","split","length","ro","ResizeObserver","observe","unobserve","components","root","gridWrapper","actions","expandButton","Button","slot","always","getIntrinsicElementProps","elementType","defaultProps","role","optional","appearance","size","shape","icon","createElement","ChevronDown12Regular","iconPosition","children","renderByDefault","useMergedRefs","childrenArray","useMemo","Children","toArray","childrenWithMotion","map","child","index","isValidElement","type","Fragment","Error","visibility","PromptStarterMotion","appear","key","visible","numChildren","undefined","onClick","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -20,15 +20,21 @@ const _reactcomponents = require("@fluentui/react-components");
 const promptStarterListClassNames = {
     root: 'fai-PromptStarterList',
     gridWrapper: 'fai-PromptStarterList__gridWrapper',
+    actions: 'fai-PromptStarterList__actions',
     expandButton: 'fai-PromptStarterList__expandButton'
 };
 /**
  * Styles for the root slot
- */ const useRootClassName = (0, _reactcomponents.__resetStyles)("r1n85ojv", null, [
-    ".r1n85ojv{display:flex;flex-direction:column;max-width:772px;gap:var(--spacingHorizontalXL);}"
+ */ const useRootClassName = (0, _reactcomponents.__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 = (0, _reactcomponents.__styles)({
     gridWrapper: {
+        Bw0ie65: 0,
+        Br312pm: 0,
+        nk6f5a: 0,
+        Ijaq50: 0,
+        Bq1tomu: "fl4njfv",
         mc9l5x: "f13qh94s",
         i8kkvl: 0,
         Belr9w4: 0,
@@ -37,8 +43,19 @@ const useStyles = (0, _reactcomponents.__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",
@@ -53,6 +70,12 @@ const useStyles = (0, _reactcomponents.__styles)({
     }
 }, {
     d: [
+        [
+            ".fl4njfv{grid-area:grid;}",
+            {
+                p: -1
+            }
+        ],
         ".f13qh94s{display:grid;}",
         [
             ".f1p93rwu{gap:var(--spacingHorizontalL);}",
@@ -63,7 +86,18 @@ const useStyles = (0, _reactcomponents.__styles)({
         ".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;}",
+        [
+            ".fceb517{grid-area:actions;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".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;}",
@@ -82,6 +116,9 @@ const usePromptStarterListStyles_unstable = (state)=>{
     const styles = useStyles();
     state.root.className = (0, _reactcomponents.mergeClasses)(promptStarterListClassNames.root, rootClassName, state.root.className);
     state.gridWrapper.className = (0, _reactcomponents.mergeClasses)(promptStarterListClassNames.gridWrapper, styles.gridWrapper, state.gridWrapper.className);
+    if (state.actions) {
+        state.actions.className = (0, _reactcomponents.mergeClasses)(promptStarterListClassNames.actions, styles.actions, state.actions.className);
+    }
     if (state.expandButton) {
         state.expandButton.className = (0, _reactcomponents.mergeClasses)(promptStarterListClassNames.expandButton, styles.expandButton, isExpanded && styles.expandButtonExpanded, state.expandButton.className);
     }

package/lib-commonjs/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":["promptStarterListClassNames","expandButtonExpanded","root","gridWrapper","expandButton","display","__resetStyles","flexDirection","gap","tokens","i8kkvl","Belr9w4","useStyles","gridAutoColumns","gridAutoFlow","qb2dma","alignSelf","fontSize","height","state","isExpanded","rootClassName","useRootClassName","className","usePromptStarterListStyles_unstable","mergeClasses","styles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,2BAAAA;eAAAA;;IA6CXC,mCAAsB;eAAtBA;;;iCAlDkE;AAK7D,MAAMD,8BAAsE;UACjFE;iBACAC;kBACAC;AACF;AAEA;;CAEC,SAECC,mBAASC,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MACTC,YAAAA,IAAAA,yBAAe,EAAA;iBACL;QACVC,QAAKC;QACPC,QAAA;QAEAC,SAAMC;QACJT,QAAAA;gBACEE;iBACKI;iBACLI;;kBAGAC;QACFC,QAAA;QAEAX,QAAAA;gBACEY;iBACK;iBACHC;gBACAC;;0BAEF;iBACA;YAAA;YAAU;SAAA;;;;;QAGR;YAAA;YAAA;oBACF;;;;QACiB;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;;;QACkB;KAAA;;AAMrCjB,MAAAA,sCAAsBkB,CAAAA;;UAGpB,EACFC,UAAA,EACF,GAAAD;IAEA,MAAAE,gBAAAC;;IAECH,MACDjB,IAAO,CAAAqB,SAAMC,GAAAA,IAAAA,6BAAAA,EAAAA,4BAAuCL,IAAAA,EAAAA,eAAAA,MAAAA,IAAAA,CAAAA,SAAAA;UAClDhB,WAAA,CAAAoB,SAAA,GAAAE,IAAAA,6BAAA,EAAAzB,4BAAAG,WAAA,EAAAuB,OAAAvB,WAAA,EAAAgB,MAAAhB,WAAA,CAAAoB,SAAA;QAEAJ,MAAQC,YAAY,EAAA;QAEpBD,MAAME,YAAAA,CAAAA,SAAgBC,GAAAA,IAAAA,6BAAAA,EAAAA,4BAAAA,YAAAA,EAAAA,OAAAA,YAAAA,EAAAA,cAAAA,OAAAA,oBAAAA,EAAAA,MAAAA,YAAAA,CAAAA,SAAAA;;WAEtBH;gEAMwB"}
+{"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":["promptStarterListClassNames","gridWrapper","root","actions","expandButton","display","__resetStyles","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","maxWidth","rowGap","tokens","columnGap","mc9l5x","i8kkvl","useStyles","gridArea","gridAutoColumns","gridAutoFlow","Bw0ie65","Ijaq50","buttonClassNames","fontSize","height","width","expandButtonExpanded","p","usePromptStarterListStyles_unstable","state","isExpanded","rootClassName","useRootClassName","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,2BAAAA;eAAAA;;IAyELC,mCACJD;eADIC;;;iCA9E4D;AAK7D,MAAMD,8BAAsE;UACjFE;iBACAD;aACAE;kBACAC;AACF;AAEA;;CAEC,SAECC,mBAASC,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MACTC,YAAAA,IAAAA,yBAAqB,EAAA;iBACrBC;QACAC,SAAAA;;QAEAC,QAAAA;QACAC,QAAQC;QACRC,SAAAA;QACFC,QAAA;QAEAC,QAAMC;QACJf,SAAAA;gBACEgB;gBACAZ;iBACKO;iBACLM;;aAGAC;QACFC,SAAA;QAEAjB,SAAS;gBACPc;QACFI,QAAA;QAEAjB,SAAAA;;kBAESkB;iBACLC;iBACAC;gBACAC;gBACF;iBACA;gBACE;;iBAEA;iBACF;gBACA;;0BAEWb;iBACT;YAAA;YAAA;SAAA;;;OAIJc;QAAAA;YAAAA;YAAsB;oBACpB;;;;QACa;YAAA;YAAA;oBACb;;SACF;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBACFC,GAAA,CAAA;YAEA;SAAA;QAAA;YAAA;YAAA;;YAEC;SACD;QAAA;QAAaC;QAAuCC;QAAAA;QAAAA;KAAAA;OAClD;QAAA;QAAA;KAAA;;AAOAA,MAAM5B,sCACJD,CAAAA;;UAUF,EACA8B,UAAU1B;UAOV2B,gBAAAC;UAEAC,SAAOJ;IACPA,MAAA3B,IAAA,CAAAgC,SAAA,GAAAC,IAAAA,6BAAA,EAAAnC,4BAAAE,IAAA,EAAA6B,eAAAF,MAAA3B,IAAA,CAAAgC,SAAA"}

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

@@ -21,26 +21,35 @@ const _tokens = require("@fluentui-copilot/tokens");
 const promptStarterListClassNames = {
     root: 'fai-PromptStarterList',
     gridWrapper: 'fai-PromptStarterList__gridWrapper',
+    actions: 'fai-PromptStarterList__actions',
     expandButton: 'fai-PromptStarterList__expandButton'
 };
 /**
  * Styles for the root slot
  */ const useRootClassName = (0, _reactcomponents.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.tokens.spacingHorizontalXL
+    rowGap: _tokens.tokens.spacingVerticalXL,
+    columnGap: _tokens.tokens.spacingHorizontalSNudge
 });
 const useStyles = (0, _reactcomponents.makeStyles)({
     gridWrapper: {
+        gridArea: 'grid',
         display: 'grid',
         gap: _tokens.tokens.spacingHorizontalL,
         gridAutoColumns: 'max-content',
         gridTemplateColumns: `repeat(auto-fit, minmax(214px, 1fr))`,
         gridAutoFlow: 'unset'
     },
+    actions: {
+        gridArea: 'actions'
+    },
     expandButton: {
-        alignSelf: 'end',
+        gridArea: 'expandButton',
         [`& .${_reactcomponents.buttonClassNames.icon}`]: {
             fontSize: '12px',
             height: '12px',
@@ -70,6 +79,9 @@ const usePromptStarterListStyles_unstable = (state)=>{
     const styles = useStyles();
     state.root.className = (0, _reactcomponents.mergeClasses)(promptStarterListClassNames.root, rootClassName, state.root.className);
     state.gridWrapper.className = (0, _reactcomponents.mergeClasses)(promptStarterListClassNames.gridWrapper, styles.gridWrapper, state.gridWrapper.className);
+    if (state.actions) {
+        state.actions.className = (0, _reactcomponents.mergeClasses)(promptStarterListClassNames.actions, styles.actions, state.actions.className);
+    }
     if (state.expandButton) {
         state.expandButton.className = (0, _reactcomponents.mergeClasses)(promptStarterListClassNames.expandButton, styles.expandButton, isExpanded && styles.expandButtonExpanded, state.expandButton.className);
     }

package/lib-commonjs/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":["promptStarterListClassNames","usePromptStarterListStyles_unstable","root","gridWrapper","expandButton","useRootClassName","makeResetStyles","display","flexDirection","maxWidth","gap","tokens","spacingHorizontalXL","useStyles","makeStyles","spacingHorizontalL","gridAutoColumns","gridTemplateColumns","gridAutoFlow","alignSelf","buttonClassNames","icon","fontSize","height","width","color","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","expandButtonExpanded","transform","state","isExpanded","rootClassName","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,2BAAAA;eAAAA;;IAuDAC,mCAAAA;eAAAA;;;iCA5D+D;wBAGrD;AAEhB,MAAMD,8BAAsE;IACjFE,MAAM;IACNC,aAAa;IACbC,cAAc;AAChB;AAEA;;CAEC,GACD,MAAMC,mBAAmBC,IAAAA,gCAAAA,EAAgB;IACvCC,SAAS;IACTC,eAAe;IACfC,UAAU;IACVC,KAAKC,cAAAA,CAAOC,mBAAmB;AACjC;AAEA,MAAMC,YAAYC,IAAAA,2BAAAA,EAAW;IAC3BX,aAAa;QACXI,SAAS;QACTG,KAAKC,cAAAA,CAAOI,kBAAkB;QAC9BC,iBAAiB;QAEjBC,qBAAqB,CAAC,oCAAoC,CAAC;QAC3DC,cAAc;IAChB;IAEAd,cAAc;QACZe,WAAW;QACX,CAAC,CAAC,GAAG,EAAEC,iCAAAA,CAAiBC,IAAI,CAAC,CAAC,CAAC,EAAE;YAC/BC,UAAU;YACVC,QAAQ;YACRC,OAAO;QACT;QACA,UAAU;YACR,CAAC,CAAC,GAAG,EAAEJ,iCAAAA,CAAiBC,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAOd,cAAAA,CAAOe,4BAA4B;YAC5C;QACF;QACA,iBAAiB;YACf,CAAC,CAAC,GAAG,EAAEN,iCAAAA,CAAiBC,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAOd,cAAAA,CAAOgB,8BAA8B;YAC9C;QACF;IACF;IAEAC,sBAAsB;QACpB,CAAC,CAAC,KAAK,EAAER,iCAAAA,CAAiBC,IAAI,CAAC,CAAC,CAAC,EAAE;YACjCQ,WAAW;QACb;IACF;AACF;AAKO,MAAM5B,sCAAsC,CAAC6B;IAClD;IAEA,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,gBAAgB3B;IACtB,MAAM4B,SAASpB;IACfiB,MAAM5B,IAAI,CAACgC,SAAS,GAAGC,IAAAA,6BAAAA,EAAanC,4BAA4BE,IAAI,EAAE8B,eAAeF,MAAM5B,IAAI,CAACgC,SAAS;IACzGJ,MAAM3B,WAAW,CAAC+B,SAAS,GAAGC,IAAAA,6BAAAA,EAC5BnC,4BAA4BG,WAAW,EACvC8B,OAAO9B,WAAW,EAClB2B,MAAM3B,WAAW,CAAC+B,SAAS;IAE7B,IAAIJ,MAAM1B,YAAY,EAAE;QACtB0B,MAAM1B,YAAY,CAAC8B,SAAS,GAAGC,IAAAA,6BAAAA,EAC7BnC,4BAA4BI,YAAY,EACxC6B,OAAO7B,YAAY,EACnB2B,cAAcE,OAAOL,oBAAoB,EACzCE,MAAM1B,YAAY,CAAC8B,SAAS;IAEhC;IAEA,OAAOJ;AACT"}
+{"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":["promptStarterListClassNames","usePromptStarterListStyles_unstable","root","gridWrapper","actions","expandButton","useRootClassName","makeResetStyles","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","maxWidth","rowGap","tokens","spacingVerticalXL","columnGap","spacingHorizontalSNudge","useStyles","makeStyles","gridArea","gap","spacingHorizontalL","gridAutoColumns","gridAutoFlow","buttonClassNames","icon","fontSize","height","width","color","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","expandButtonExpanded","transform","state","isExpanded","rootClassName","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,2BAAAA;eAAAA;;IAiEAC,mCAAAA;eAAAA;;;iCAtE+D;wBAGrD;AAEhB,MAAMD,8BAAsE;IACjFE,MAAM;IACNC,aAAa;IACbC,SAAS;IACTC,cAAc;AAChB;AAEA;;CAEC,GACD,MAAMC,mBAAmBC,IAAAA,gCAAAA,EAAgB;IACvCC,SAAS;IACTC,qBAAqB;IACrBC,kBAAkB;IAClBC,mBAAmB,CAAC;8CACwB,CAAC;IAC7CC,UAAU;IACVC,QAAQC,cAAAA,CAAOC,iBAAiB;IAChCC,WAAWF,cAAAA,CAAOG,uBAAuB;AAC3C;AAEA,MAAMC,YAAYC,IAAAA,2BAAAA,EAAW;IAC3BhB,aAAa;QACXiB,UAAU;QACVZ,SAAS;QACTa,KAAKP,cAAAA,CAAOQ,kBAAkB;QAC9BC,iBAAiB;QAEjBd,qBAAqB,CAAC,oCAAoC,CAAC;QAC3De,cAAc;IAChB;IAEApB,SAAS;QACPgB,UAAU;IACZ;IAEAf,cAAc;QACZe,UAAU;QACV,CAAC,CAAC,GAAG,EAAEK,iCAAAA,CAAiBC,IAAI,CAAC,CAAC,CAAC,EAAE;YAC/BC,UAAU;YACVC,QAAQ;YACRC,OAAO;QACT;QACA,UAAU;YACR,CAAC,CAAC,GAAG,EAAEJ,iCAAAA,CAAiBC,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAOhB,cAAAA,CAAOiB,4BAA4B;YAC5C;QACF;QACA,iBAAiB;YACf,CAAC,CAAC,GAAG,EAAEN,iCAAAA,CAAiBC,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAOhB,cAAAA,CAAOkB,8BAA8B;YAC9C;QACF;IACF;IAEAC,sBAAsB;QACpB,CAAC,CAAC,KAAK,EAAER,iCAAAA,CAAiBC,IAAI,CAAC,CAAC,CAAC,EAAE;YACjCQ,WAAW;QACb;IACF;AACF;AAKO,MAAMjC,sCAAsC,CAACkC;IAClD;IAEA,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,gBAAgB/B;IACtB,MAAMgC,SAASpB;IACfiB,MAAMjC,IAAI,CAACqC,SAAS,GAAGC,IAAAA,6BAAAA,EAAaxC,4BAA4BE,IAAI,EAAEmC,eAAeF,MAAMjC,IAAI,CAACqC,SAAS;IACzGJ,MAAMhC,WAAW,CAACoC,SAAS,GAAGC,IAAAA,6BAAAA,EAC5BxC,4BAA4BG,WAAW,EACvCmC,OAAOnC,WAAW,EAClBgC,MAAMhC,WAAW,CAACoC,SAAS;IAE7B,IAAIJ,MAAM/B,OAAO,EAAE;QACjB+B,MAAM/B,OAAO,CAACmC,SAAS,GAAGC,IAAAA,6BAAAA,EACxBxC,4BAA4BI,OAAO,EACnCkC,OAAOlC,OAAO,EACd+B,MAAM/B,OAAO,CAACmC,SAAS;IAE3B;IACA,IAAIJ,MAAM9B,YAAY,EAAE;QACtB8B,MAAM9B,YAAY,CAACkC,SAAS,GAAGC,IAAAA,6BAAAA,EAC7BxC,4BAA4BK,YAAY,EACxCiC,OAAOjC,YAAY,EACnB+B,cAAcE,OAAOL,oBAAoB,EACzCE,MAAM9B,YAAY,CAACkC,SAAS;IAEhC;IAEA,OAAOJ;AACT"}

package/lib-commonjs/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":["PromptStarterListContext","PromptStarterListProvider","usePromptStarterListContext","createContext","undefined","promptStarterListContextDefaultValue","numberOfColumns","selector","useContextSelector","ctx","Provider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAQAC,yBAAAA;eAAAA;;IAFAC,2BAAAA;eAAAA;;;sCAVqC;AAI3C,MAAMF,2BAA2BG,IAAAA,mCAAAA,EAAyDC;AAEjG,MAAMC,uCAAsE;IAC1EC,iBAAiB;AACnB;AAEO,MAAMJ,8BAA8B,CAAIK,WAC7CC,IAAAA,wCAAAA,EAAmBR,0BAA0B,CAACS,MAAMJ,oCAAoC,GAAKE,SAASE;AACjG,MAAMR,4BAA4BD,yBAAyBU,QAAQ"}
+{"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":["PromptStarterListContext","PromptStarterListProvider","usePromptStarterListContext","createContext","undefined","promptStarterListContextDefaultValue","numberOfColumns","selector","useContextSelector","ctx","Provider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAQAC,yBAAAA;eAAAA;;IAFAC,2BAAAA;eAAAA;;;sCAVqC;AAI3C,MAAMF,2BAA2BG,IAAAA,mCAAAA,EAAyDC;AAEjG,MAAMC,uCAAsE;IAC1EC,iBAAiB;AACnB;AAEO,MAAMJ,8BAA8B,CAAIK,WAC7CC,IAAAA,wCAAAA,EAAmBR,0BAA0B,CAACS,MAAMJ,oCAAoC,GAAKE,SAASE;AACjG,MAAMR,4BAA4BD,yBAAyBU,QAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-prompt-starter",
-  "version": "0.10.6",
+  "version": "0.10.8",
   "description": "A Fluent AI package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,21 +12,21 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-provider": "^0.12.5",
-    "@fluentui-copilot/tokens": "^0.3.14",
+    "@fluentui-copilot/react-provider": "^0.12.6",
+    "@fluentui-copilot/tokens": "^0.3.15",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.66.0 <10.0.0",
-    "@fluentui/react-context-selector": ">=9.2.1 <10.0.0",
+    "@fluentui/react-components": ">=9.70.0 <10.0.0",
+    "@fluentui/react-context-selector": ">=9.2.7 <10.0.0",
     "@fluentui/react-icons": ">=2.0.303 <3.0.0",
-    "@fluentui/react-jsx-runtime": ">=9.1.1 <10.0.0",
-    "@fluentui/react-shared-contexts": ">=9.24.0 <10.0.0",
-    "@fluentui/react-utilities": ">=9.21.1 <10.0.0",
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.8 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0"
+    "@fluentui/react-jsx-runtime": ">=9.2.0 <10.0.0",
+    "@fluentui/react-shared-contexts": ">=9.25.1 <10.0.0",
+    "@fluentui/react-utilities": ">=9.24.1 <10.0.0",
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.8 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [