@fluentui-copilot/react-prompt-starter 0.0.0-nightly-20250606-0404-f88e520c.1 → 0.0.0-nightly-20250611-0405-d9945da4.1

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

@@ -0,0 +1,57 @@
+import { buttonClassNames, __resetStyles, __styles, mergeClasses } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const promptStarterListClassNames = {
+  root: 'fai-PromptStarterList',
+  gridWrapper: 'fai-PromptStarterList__gridWrapper',
+  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 useStyles = __styles({
+  gridWrapper: {
+    mc9l5x: "f13qh94s",
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "f1p93rwu",
+    t4k1zu: "f4wu0r3",
+    Budl1dq: "fvo7o13",
+    Bxotwcr: "f1nkeedh"
+  },
+  expandButton: {
+    qb2dma: "f1locze1",
+    wrk2wx: "f11k2d1d",
+    dutsh0: "f1iwh30k",
+    B4u5nao: "fn63aq9",
+    Bbdnnc7: "fm7zj7h",
+    x3br3k: "fuzcl37"
+  },
+  expandButtonExpanded: {
+    Bs9jjb3: ["f5l68jj", "f1i29bk4"]
+  }
+}, {
+  d: [".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;}", ".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);}"],
+  h: [".fm7zj7h:hover .fui-Button__icon{color:var(--colorNeutralForeground2Hover);}", ".fuzcl37:hover:active .fui-Button__icon{color:var(--colorNeutralForeground2Pressed);}"]
+});
+/**
+ * Apply styling to the PromptStarterList slots based on the state
+ */
+export const usePromptStarterListStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    isExpanded
+  } = state;
+  const rootClassName = useRootClassName();
+  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.expandButton) {
+    state.expandButton.className = mergeClasses(promptStarterListClassNames.expandButton, styles.expandButton, isExpanded && styles.expandButtonExpanded, state.expandButton.className);
+  }
+  return state;
+};
+//# sourceMappingURL=usePromptStarterListStyles.styles.js.map

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

@@ -0,0 +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"}

package/lib/contexts/PromptStarterListContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+export const PromptStarterListContext = createContext(undefined);
+const promptStarterListContextDefaultValue = {
+  numberOfColumns: 3
+};
+export const usePromptStarterListContext = selector => useContextSelector(PromptStarterListContext, (ctx = promptStarterListContextDefaultValue) => selector(ctx));
+export const PromptStarterListProvider = PromptStarterListContext.Provider;
+//# sourceMappingURL=PromptStarterListContext.js.map

package/lib/contexts/PromptStarterListContext.js.map

@@ -0,0 +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"}

package/lib/index.js

@@ -1,3 +1,4 @@
 export { PromptStarter, promptStarterClassNames, renderPromptStarter_unstable, usePromptStarterStyles_unstable, usePromptStarter_unstable } from './PromptStarter';
 export { PromptStarter as PromptStarterV2, promptStarterClassNames as promptStarterV2ClassNames, renderPromptStarter_unstable as renderPromptStarterV2_unstable, usePromptStarterStyles_unstable as usePromptStarterV2Styles_unstable, usePromptStarter_unstable as usePromptStarterV2_unstable } from './PromptStarterV2';
+export { PromptStarterList, renderPromptStarterList_unstable, usePromptStarterList_unstable, promptStarterListClassNames, usePromptStarterListStyles_unstable } from './PromptStarterList';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptStarterProps, PromptStarterSlots, PromptStarterState } from './PromptStarter';\nexport {\n  PromptStarter,\n  promptStarterClassNames,\n  renderPromptStarter_unstable,\n  usePromptStarterStyles_unstable,\n  usePromptStarter_unstable,\n} from './PromptStarter';\n\nexport type {\n  PromptStarterProps as PromptStarterV2Props,\n  PromptStarterSlots as PromptStarterV2Slots,\n  PromptStarterState as PromptStarterV2State,\n} from './PromptStarterV2';\nexport {\n  PromptStarter as PromptStarterV2,\n  promptStarterClassNames as promptStarterV2ClassNames,\n  renderPromptStarter_unstable as renderPromptStarterV2_unstable,\n  usePromptStarterStyles_unstable as usePromptStarterV2Styles_unstable,\n  usePromptStarter_unstable as usePromptStarterV2_unstable,\n} from './PromptStarterV2';\n"],"names":["PromptStarter","promptStarterClassNames","renderPromptStarter_unstable","usePromptStarterStyles_unstable","usePromptStarter_unstable","PromptStarterV2","promptStarterV2ClassNames","renderPromptStarterV2_unstable","usePromptStarterV2Styles_unstable","usePromptStarterV2_unstable"],"rangeMappings":";","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAOzB,SACEJ,iBAAiBK,eAAe,EAChCJ,2BAA2BK,yBAAyB,EACpDJ,gCAAgCK,8BAA8B,EAC9DJ,mCAAmCK,iCAAiC,EACpEJ,6BAA6BK,2BAA2B,QACnD,oBAAoB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptStarterProps, PromptStarterSlots, PromptStarterState } from './PromptStarter';\nexport {\n  PromptStarter,\n  promptStarterClassNames,\n  renderPromptStarter_unstable,\n  usePromptStarterStyles_unstable,\n  usePromptStarter_unstable,\n} from './PromptStarter';\n\nexport type {\n  PromptStarterProps as PromptStarterV2Props,\n  PromptStarterSlots as PromptStarterV2Slots,\n  PromptStarterState as PromptStarterV2State,\n} from './PromptStarterV2';\nexport {\n  PromptStarter as PromptStarterV2,\n  promptStarterClassNames as promptStarterV2ClassNames,\n  renderPromptStarter_unstable as renderPromptStarterV2_unstable,\n  usePromptStarterStyles_unstable as usePromptStarterV2Styles_unstable,\n  usePromptStarter_unstable as usePromptStarterV2_unstable,\n} from './PromptStarterV2';\n\nexport {\n  PromptStarterList,\n  renderPromptStarterList_unstable,\n  usePromptStarterList_unstable,\n  promptStarterListClassNames,\n  usePromptStarterListStyles_unstable,\n} from './PromptStarterList';\nexport type { PromptStarterListProps, PromptStarterListSlots, PromptStarterListState } from './PromptStarterList';"],"names":["PromptStarter","promptStarterClassNames","renderPromptStarter_unstable","usePromptStarterStyles_unstable","usePromptStarter_unstable","PromptStarterV2","promptStarterV2ClassNames","renderPromptStarterV2_unstable","usePromptStarterV2Styles_unstable","usePromptStarterV2_unstable","PromptStarterList","renderPromptStarterList_unstable","usePromptStarterList_unstable","promptStarterListClassNames","usePromptStarterListStyles_unstable"],"rangeMappings":";;","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAOzB,SACEJ,iBAAiBK,eAAe,EAChCJ,2BAA2BK,yBAAyB,EACpDJ,gCAAgCK,8BAA8B,EAC9DJ,mCAAmCK,iCAAiC,EACpEJ,6BAA6BK,2BAA2B,QACnD,oBAAoB;AAE3B,SACEC,iBAAiB,EACjBC,gCAAgC,EAChCC,6BAA6B,EAC7BC,2BAA2B,EAC3BC,mCAAmC,QAC9B,sBAAsB"}

package/lib-commonjs/PromptStarterList.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PromptStarterList: function() {
+        return _index.PromptStarterList;
+    },
+    promptStarterListClassNames: function() {
+        return _index.promptStarterListClassNames;
+    },
+    renderPromptStarterList_unstable: function() {
+        return _index.renderPromptStarterList_unstable;
+    },
+    usePromptStarterListStyles_unstable: function() {
+        return _index.usePromptStarterListStyles_unstable;
+    },
+    usePromptStarterList_unstable: function() {
+        return _index.usePromptStarterList_unstable;
+    }
+});
+const _index = require("./components/PromptStarterV2/PromptStarterList/index");
+ //# sourceMappingURL=PromptStarterList.js.map

package/lib-commonjs/PromptStarterList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptStarterList.ts"],"sourcesContent":["export {\n  PromptStarterList,\n  renderPromptStarterList_unstable,\n  usePromptStarterList_unstable,\n  promptStarterListClassNames,\n  usePromptStarterListStyles_unstable,\n} from './components/PromptStarterV2/PromptStarterList/index';\nexport type {\n  PromptStarterListProps,\n  PromptStarterListSlots,\n  PromptStarterListState,\n  PromptStarterListContextValue,\n} from './components/PromptStarterV2/PromptStarterList/index';\n"],"names":["PromptStarterList","promptStarterListClassNames","renderPromptStarterList_unstable","usePromptStarterListStyles_unstable","usePromptStarterList_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,iBAAiB;eAAjBA,wBAAiB;;IAGjBC,2BAA2B;eAA3BA,kCAA2B;;IAF3BC,gCAAgC;eAAhCA,uCAAgC;;IAGhCC,mCAAmC;eAAnCA,0CAAmC;;IAFnCC,6BAA6B;eAA7BA,oCAA6B;;;uBAGxB"}

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

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PromptStarterMotion", {
+    enumerable: true,
+    get: function() {
+        return PromptStarterMotion;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const PromptStarterMotion = (0, _reactcomponents.createPresenceComponent)(({ index, numberOfColumns })=>{
+    const isFirstRow = index < numberOfColumns;
+    const delay = isFirstRow ? index * 50 : (index - numberOfColumns) * 50;
+    const opacityDuration = 100;
+    const opacityOffset = delay / (delay + 100);
+    const opacityEasing = 'linear';
+    const scaleDuration = 500;
+    const scaleOffset = delay / (delay + scaleDuration);
+    const scaleEasing = `cubic-bezier(0.22, 1.59, 0.46, 1)`;
+    return {
+        enter: [
+            {
+                keyframes: [
+                    {
+                        opacity: 0
+                    },
+                    {
+                        opacity: 0,
+                        offset: opacityOffset
+                    },
+                    {
+                        opacity: 1
+                    }
+                ],
+                easing: opacityEasing,
+                duration: opacityDuration + delay
+            },
+            {
+                keyframes: [
+                    {
+                        transform: 'scale(0.9)'
+                    },
+                    {
+                        transform: 'scale(0.9)',
+                        offset: scaleOffset
+                    },
+                    {
+                        transform: 'scale(1)'
+                    }
+                ],
+                easing: scaleEasing,
+                duration: scaleDuration + delay
+            }
+        ],
+        exit: {
+            keyframes: []
+        }
+    };
+}); //# sourceMappingURL=promptStarterMotion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["promptStarterMotion.ts"],"sourcesContent":["import { createPresenceComponent } from '@fluentui/react-components';\n\nexport type PromptStarterMotionParams = { index: number; numberOfColumns: number };\n\nexport const PromptStarterMotion = createPresenceComponent<PromptStarterMotionParams>(({ index, numberOfColumns }) => {\n  const isFirstRow = index < numberOfColumns;\n  const delay = isFirstRow ? index * 50 : (index - numberOfColumns) * 50;\n\n  const opacityDuration = 100;\n  const opacityOffset = delay / (delay + 100);\n  const opacityEasing = 'linear';\n\n  const scaleDuration = 500;\n  const scaleOffset = delay / (delay + scaleDuration);\n  const scaleEasing = `cubic-bezier(0.22, 1.59, 0.46, 1)`;\n\n  return {\n    enter: [\n      {\n        keyframes: [{ opacity: 0 }, { opacity: 0, offset: opacityOffset }, { opacity: 1 }],\n        easing: opacityEasing,\n        duration: opacityDuration + delay,\n      },\n      {\n        keyframes: [\n          { transform: 'scale(0.9)' },\n          { transform: 'scale(0.9)', offset: scaleOffset },\n          { transform: 'scale(1)' },\n        ],\n        easing: scaleEasing,\n        duration: scaleDuration + delay,\n      },\n    ],\n    exit: {\n      keyframes: [],\n    },\n  };\n});\n"],"names":["PromptStarterMotion","createPresenceComponent","delay","isFirstRow","opacityOffset","opacityEasing","index","numberOfColumns","opacityDuration","scaleDuration","enter","duration","keyframes","scaleOffset"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIaA;;;eAAAA;;;iCAJ2B;AAIjC,MAAMA,sBAAsBC,IAAAA,wCAAAA,EAAmD,CAAC,OACrF,iBACMC;UAGNC,aAAMC,QAAgBF;UACtBA,QAAMG,aAAgBC,QAAA,KAAA,AAAAA,CAAAA,QAAAC,eAAA,IAAA;UAEtBC,kBAAsB;UACtBJ,gBAAoBF,QAASA,CAAAA,QAAQO,GAAAA;UACrCJ,gBAAoB;UAEpBI,gBAAO;UACLC,cAAOR,QAAAA,CAAAA,QAAAO,aAAA;wBACL,CAAA,iCAAA,CAAA;;;;;;;;;;;;;;;;;4CACoFP;;;2BAElFS;oBAAAA;mCACF;;;mCAEEC;;;;;;;;0CAEqCC;;;;;;;mDAIXX"}

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

@@ -9,9 +9,13 @@ Object.defineProperty(exports, "usePromptStarter_unstable", {
     }
 });
 const _reactcomponents = require("@fluentui/react-components");
+const _PromptStarterListContext = require("../../../contexts/PromptStarterListContext");
 const usePromptStarter_unstable = (props, ref)=>{
     const id = (0, _reactcomponents.useId)('prompt-starter');
+    const focusAttrs = (0, _reactcomponents.useFocusableGroup)();
+    const numberOfColumns = (0, _PromptStarterListContext.usePromptStarterListContext)((ctx)=>ctx.numberOfColumns);
     const state = {
+        isSingleColumn: numberOfColumns === 1,
         components: {
             root: 'div',
             primaryAction: 'button',
@@ -24,6 +28,7 @@ const usePromptStarter_unstable = (props, ref)=>{
             ref,
             'aria-labelledby': `${id}-prompt`,
             'aria-describedby': `${id}-icon, ${id}-reasonMarker`,
+            ...focusAttrs,
             ...props
         }), {
             elementType: 'div'

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

@@ -1 +1 @@
-{"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useId } from '@fluentui/react-components';\nimport type { PromptStarterProps, PromptStarterState } from './PromptStarter.types';\n\n/**\n * Create the state required to render PromptStarter.\n *\n * The returned state can be modified with hooks such as usePromptStarterStyles_unstable,\n * before being passed to renderPromptStarter_unstable.\n *\n * @param props - props from this instance of PromptStarter\n * @param ref - reference to root HTMLElement of PromptStarter\n */\nexport const usePromptStarter_unstable = (\n  props: PromptStarterProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptStarterState => {\n  const id = useId('prompt-starter');\n\n  const state: PromptStarterState = {\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      icon: 'span',\n      prompt: 'span',\n      reasonMarker: 'span',\n      actions: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        'aria-labelledby': `${id}-prompt`,\n        'aria-describedby': `${id}-icon, ${id}-reasonMarker`,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    primaryAction: slot.always(props.primaryAction, {\n      elementType: 'button',\n    }),\n    icon: slot.always(props.icon, {\n      defaultProps: { id: `${id}-icon` },\n      elementType: 'span',\n    }),\n    prompt: slot.always(props.prompt, {\n      defaultProps: { id: `${id}-prompt` },\n      elementType: 'span',\n    }),\n    reasonMarker: slot.optional(props.reasonMarker, {\n      defaultProps: { id: `${id}-reasonMarker` },\n      elementType: 'span',\n    }),\n    actions: slot.optional(props.actions, { elementType: 'span' }),\n  };\n\n  return state;\n};\n"],"names":["id","props","ref","state","components","root","primaryAction","prompt","reasonMarker","actions","elementType","defaultProps","icon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBQA;;;eAAAA;;;iCAhB8C;AAgBpD,MAAMA,4BAAW,CAAAC,OAAAC;UAEjBF,KAAMG,IAAAA,sBAA4B,EAAA;UAChCC,QAAAA;oBACEC;kBACAC;2BACM;kBACNC;oBACAC;0BACAC;qBACF;;mCAGIP,CAAAA,MAAAA,CAAAA,IAAAA,yCAAAA,EAAAA,OAAAA;;+BAEA,CAAA,EAAAF,GAAA,OAA0B,CAAA;gCAClB,CAAA,EAAAA,GAAA,OAAA,EAAAA,GAAA,aAAA,CAAA;eACVC,KACA;;yBAAqB;;uBAGrBS,qBAAAA,CAAAA,MAAa,CAAAT,MAAAK,aAAA,EAAA;yBACf;;mCAEEK,CAAAA,MAAAA,CAAAA,MAAcC,IAAA,EAAA;0BAAM;oBAAa,CAAA,EAAAZ,GAAA,KAAA,CAAA;;yBAEnC;;gBAEEW,qBAAAA,CAAAA,MAAAA,CAAAA,MAAcJ,MAAA,EAAA;0BAAM;oBAAe,CAAA,EAAAP,GAAA,OAAA,CAAA;;yBAErC;;sBAEEW,qBAAAA,CAAAA,QAAc,CAAAV,MAAAO,YAAA,EAAA;0BAAM;oBAAqB,CAAA,EAAAR,GAAA,aAAA,CAAA;;yBAE3C;;iBACwCU,qBAAAA,CAAAA,QAAa,CAAAT,MAAAQ,OAAA,EAAA;yBAAO;QAC9D;;IAGA,OAAAN"}
+{"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useFocusableGroup, useId } from '@fluentui/react-components';\nimport { usePromptStarterListContext } from '../../../contexts/PromptStarterListContext';\nimport type { PromptStarterProps, PromptStarterState } from './PromptStarter.types';\n\n/**\n * Create the state required to render PromptStarter.\n *\n * The returned state can be modified with hooks such as usePromptStarterStyles_unstable,\n * before being passed to renderPromptStarter_unstable.\n *\n * @param props - props from this instance of PromptStarter\n * @param ref - reference to root HTMLElement of PromptStarter\n */\nexport const usePromptStarter_unstable = (\n  props: PromptStarterProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptStarterState => {\n  const id = useId('prompt-starter');\n  const focusAttrs = useFocusableGroup();\n\n  const numberOfColumns = usePromptStarterListContext(ctx => ctx.numberOfColumns);\n\n  const state: PromptStarterState = {\n    isSingleColumn: numberOfColumns === 1,\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      icon: 'span',\n      prompt: 'span',\n      reasonMarker: 'span',\n      actions: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        'aria-labelledby': `${id}-prompt`,\n        'aria-describedby': `${id}-icon, ${id}-reasonMarker`,\n        ...focusAttrs,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    primaryAction: slot.always(props.primaryAction, {\n      elementType: 'button',\n    }),\n    icon: slot.always(props.icon, {\n      defaultProps: { id: `${id}-icon` },\n      elementType: 'span',\n    }),\n    prompt: slot.always(props.prompt, {\n      defaultProps: { id: `${id}-prompt` },\n      elementType: 'span',\n    }),\n    reasonMarker: slot.optional(props.reasonMarker, {\n      defaultProps: { id: `${id}-reasonMarker` },\n      elementType: 'span',\n    }),\n    actions: slot.optional(props.actions, { elementType: 'span' }),\n  };\n\n  return state;\n};\n"],"names":["id","props","ref","focusAttrs","numberOfColumns","usePromptStarterListContext","ctx","isSingleColumn","root","primaryAction","prompt","reasonMarker","actions","elementType","defaultProps","icon","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBQA;;;eAAAA;;;iCAjBiE;0CAC7B;AAgB1C,MAAMA,4BAAW,CAAAC,OAAAC;UACjBF,KAAMG,IAAAA,sBAAAA,EAAAA;UAENA,aAAMC,IAAAA,kCAAkBC;UAExBD,kBAAkCC,IAAAA,qDAAA,EAAAC,CAAAA,MAAAA,IAAAF,eAAA;UAChCG,QAAAA;wBACYH,oBAAA;oBACVI;kBACAC;2BACM;kBACNC;oBACAC;0BACAC;qBACF;;mCAGIV,CAAAA,MAAAA,CAAAA,IAAAA,yCAAAA,EAAAA,OAAAA;;+BAEA,CAAA,EAAAF,GAAA,OAA0B,CAAA;gCACb,CAAA,EAAAA,GAAA,OAAA,EAAAA,GAAA,aAAA,CAAA;yBACVC;eACLA,KACA;;yBAAqB;;uBAGrBY,qBAAAA,CAAAA,MAAa,CAAAZ,MAAAQ,aAAA,EAAA;yBACf;;mCAEEK,CAAAA,MAAAA,CAAAA,MAAcC,IAAA,EAAA;0BAAM;oBAAa,CAAA,EAAAf,GAAA,KAAA,CAAA;;yBAEnC;;gBAEEc,qBAAAA,CAAAA,MAAAA,CAAAA,MAAcJ,MAAA,EAAA;0BAAM;oBAAe,CAAA,EAAAV,GAAA,OAAA,CAAA;;yBAErC;;sBAEEc,qBAAAA,CAAAA,QAAc,CAAAb,MAAAU,YAAA,EAAA;0BAAM;oBAAqB,CAAA,EAAAX,GAAA,aAAA,CAAA;;yBAE3C;;iBACwCa,qBAAAA,CAAAA,QAAa,CAAAZ,MAAAW,OAAA,EAAA;yBAAO;QAC9D;;IAGA,OAAAI"}

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

@@ -164,8 +164,7 @@ const useStyles = (0, _reactcomponents.__styles)({
     icon: {
         mc9l5x: "f22iagw",
         Bt984gj: "f122n59",
-        sshi5w: "fntfeoj",
-        B3oa8pd: "fyhwzhv"
+        sshi5w: "fntfeoj"
     },
     actions: {
         jrapky: 0,
@@ -189,8 +188,7 @@ const useStyles = (0, _reactcomponents.__styles)({
         B3o57yi: 0,
         Bmy1vo4: 0,
         Bkqvd7p: 0,
-        Bi2q7bf: "f1964ud6",
-        B3oa8pd: "fyhwzhv"
+        Bi2q7bf: "f1964ud6"
     },
     prompt: {
         Bahqtrf: "fk6fouc",
@@ -206,8 +204,10 @@ const useStyles = (0, _reactcomponents.__styles)({
         Bahqtrf: "fk6fouc",
         Be2twd7: "f13mqy1h",
         Bhrd7zp: "figsok6",
-        Bg96gwp: "fcpl73t",
-        B3oa8pd: "fyhwzhv"
+        Bg96gwp: "fcpl73t"
+    },
+    singleColumnStyles: {
+        mc9l5x: "fjseox"
     }
 }, {
     d: [
@@ -332,7 +332,8 @@ const useStyles = (0, _reactcomponents.__styles)({
         ".f1sil6mw{overflow-y:hidden;}",
         ".f13mqy1h{font-size:var(--fontSizeBase100);}",
         ".figsok6{font-weight:var(--fontWeightRegular);}",
-        ".fcpl73t{line-height:var(--lineHeightBase100);}"
+        ".fcpl73t{line-height:var(--lineHeightBase100);}",
+        ".fjseox{display:none;}"
     ],
     f: [
         ".ftqa4ok:focus{outline-style:none;}"
@@ -358,28 +359,23 @@ const useStyles = (0, _reactcomponents.__styles)({
             {
                 m: "(forced-colors: active)"
             }
-        ],
-        [
-            "@media (max-width: 450px){.fyhwzhv{display:none;}}",
-            {
-                m: "(max-width: 450px)"
-            }
         ]
     ]
 });
 const usePromptStarterStyles_unstable = (state)=>{
     'use no memo';
+    const { isSingleColumn } = state;
     const styles = useStyles();
     const rootResetStyles = useRootResetStyles();
     state.root.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.root, rootResetStyles, state.root.className);
     state.primaryAction.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.primaryAction, styles.primaryAction, state.primaryAction.className);
-    state.icon.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.icon, styles.icon, state.icon.className);
+    state.icon.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.icon, styles.icon, isSingleColumn && styles.singleColumnStyles, state.icon.className);
     state.prompt.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);
     if (state.reasonMarker) {
-        state.reasonMarker.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.reasonMarker, styles.reasonMarker, state.reasonMarker.className);
+        state.reasonMarker.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.reasonMarker, styles.reasonMarker, isSingleColumn && styles.singleColumnStyles, 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, isSingleColumn && styles.singleColumnStyles, state.actions.className);
     }
     return state;
 }; //# sourceMappingURL=usePromptStarterStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["usePromptStarterStyles.styles.ts"],"sourcesContent":["import {\n  makeStyles,\n  makeResetStyles,\n  mergeClasses,\n  shorthands,\n  typographyStyles,\n  createFocusOutlineStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PromptStarterSlots, PromptStarterState } from './PromptStarter.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptStarterClassNames: SlotClassNames<PromptStarterSlots> = {\n  root: 'fai-PromptStarter',\n  primaryAction: 'fai-PromptStarter__primaryAction',\n  icon: 'fai-PromptStarter__icon',\n  prompt: 'fai-PromptStarter__prompt',\n  reasonMarker: 'fai-PromptStarter__reasonMarker',\n  actions: 'fai-PromptStarter__actions',\n};\n\nconst useRootResetStyles = makeResetStyles({\n  display: 'grid',\n  gridTemplateColumns: '1fr auto',\n  gridTemplateRows: 'max-content auto',\n  minWidth: '214px',\n\n  // Apply styles to the primary action on hover / active states\n  '&:hover': {\n    [`& .${promptStarterClassNames.primaryAction}`]: {\n      boxShadow: tokens.shadow16,\n      transform: 'scale(1.03)',\n      transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n    },\n  },\n  '&:active': {\n    [`& .${promptStarterClassNames.primaryAction}`]: {\n      boxShadow: tokens.shadow8,\n      transform: 'scale(1.03)',\n      transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n    },\n  },\n\n  // Hide actions when not focused or hovered\n  ':not(:focus-within):not(:hover)': {\n    [`& .${promptStarterClassNames.actions}`]: {\n      clip: 'rect(0px, 0px, 0px, 0px)',\n      height: '1px',\n      margin: '-1px',\n      overflow: 'hidden',\n      padding: '0px',\n      width: '1px',\n      position: 'absolute',\n      opacity: 0,\n    },\n  },\n});\n\nconst useStyles = makeStyles({\n  primaryAction: {\n    gridRow: '1 / 3',\n    gridColumn: '1 / 3',\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n    borderRadius: '28px',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground2,\n    fontFamily: tokens.fontFamilyBase,\n    cursor: 'pointer',\n    outlineStyle: 'none',\n    textAlign: 'left',\n    rowGap: tokens.spacingHorizontalS,\n    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    ...createFocusOutlineStyle({ style: { outlineRadius: '28px' } }),\n  },\n\n  primaryActionHovered: {\n    boxShadow: tokens.shadow16,\n    transform: 'scale(1.03)',\n    transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n  },\n\n  icon: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: tokens.spacingVerticalXXL,\n\n    // Reflow: hide icon when under 450px\n    '@media (max-width: 450px)': {\n      display: 'none',\n    },\n  },\n  actions: {\n    margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}\n             ${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,\n    position: 'relative',\n    gridRow: '1 / 2',\n    gridColumn: '2 / 3',\n\n    opacity: 1,\n    transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`,\n\n    // Reflow: hide actions when under 450px\n    '@media (max-width: 450px)': {\n      display: 'none',\n    },\n  },\n  prompt: {\n    ...typographyStyles.body1Strong,\n\n    // Truncate text after two lines.\n    display: '-webkit-box',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    overflowY: 'hidden',\n  },\n  reasonMarker: {\n    ...typographyStyles.caption2,\n\n    // Reflow: hide reason marker when under 450px\n    '@media (max-width: 450px)': {\n      display: 'none',\n    },\n  },\n});\n\nexport const usePromptStarterStyles_unstable = (state: PromptStarterState): PromptStarterState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const rootResetStyles = useRootResetStyles();\n  state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    promptStarterClassNames.primaryAction,\n    styles.primaryAction,\n    state.primaryAction.className,\n  );\n  state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);\n  state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);\n  if (state.reasonMarker) {\n    state.reasonMarker.className = mergeClasses(\n      promptStarterClassNames.reasonMarker,\n      styles.reasonMarker,\n      state.reasonMarker.className,\n    );\n  }\n  if (state.actions) {\n    state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, state.actions.className);\n  }\n\n  return state;\n};\n"],"names":["promptStarterClassNames","root","primaryAction","icon","prompt","reasonMarker","actions","useRootResetStyles","makeResetStyles","display","__styles","gridTemplateColumns","gridTemplateRows","minWidth","h3tjnc","Bw0ie65","boxShadow","transform","transition","Beyfa6y","Bbmb7ep","Bahqtrf","Bceei9c","oeaueh","clip","height","margin","overflow","padding","width","position","opacity","ibv6hh","icvyot","vrafjx","useStyles","makeStyles","gridRow","gridColumn","flexDirection","borderRadius","backgroundColor","color","fontFamily","tokens","fontFamilyBase","cursor","outlineStyle","textAlign","rowGap","spacingHorizontalS","shorthands","border","strokeWidthThin","createFocusOutlineStyle","style","Boxcth7","primaryActionHovered","Blkhhs4","alignItems","minHeight","Bqtpl0w","E5pizo","typographyStyles","overflowY","jrapky","Frg6f3","t21cq0","B6of3ja","styles","B74szlk","rootResetStyles","state","Beweih1","abs64n","Cwk7ip","B3o57yi","Bmy1vo4"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,uBAAAA;eAAAA;;;;;;iCANY;AAMlB,MAAMA,0BAA8D;UACzEC;mBACAC;UACAC;YACAC;kBACAC;aACAC;AACF;AAEA,MAAMC,qBAAqBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;CAAA;MACzCC,YAASC,IAAAA,yBAAA,EAAA;mBACTC;QACAC,QAAAA;QACAC,QAAAA;QAEAC,QAAA;QACAC,SAAA;iBACO;iBACHC;gBACAC;iBACAC;gBACF;QACFC,SAAA;QACAC,SAAA;iBACO;iBACHJ;gBACAC;gBACAC;gBACF;QACFG,SAAA;QAEAC,SAAA;QACAC,QAAA;gBACI;YAAG;YAAEvB;SAAAA;iBACLwB;iBACAC;gBACAC;gBACAC;gBACAC;iBACAC;iBACAC;iBACAC;YAAAA;YAAS;SAAA;iBACX;QACFC,QAAA;YAAA;YAAA;SAAA;QACFC,QAAA;QAEAC,QAAMC;YAAAA;YAAYC;SAAW;QAC3BlC,QAAAA;gBACEmC;YAAAA;YAAS;SAAA;gBACTC;gBACA7B;YAAAA;YAAS;SAAA;iBACT8B;gBACAT;YAAAA;YAAU;SAAA;iBACVU;iBACAC;iBACAC;iBACAC;YAAAA;YAAYC;SAAOC;gBACnBC;iBACAC;YAAAA;YAAc;SAAA;iBACdC;iBACAC;YAAAA;YAAeC;SAAAA;iBACftB;iBACGuB;YAAAA;YAAWC;SAAcC;iBACzBC;iBAA0BC;;iBAA+B;gBAAI;QAClEC,SAAA;QAEAC,SAAAA;gBACEzC;iBACAC;iBACAC;QACFwC,SAAA;QAEAvD,SAAM;gBACJM;gBACAkD;gBACAC;gBAEA;iBACA;iBACEnD;iBACF;QACFoD,SAAA;QACAvD,QAAAA;gBACEoB;iBACS;gBACTI;iBACAO;gBACAC;gBAEAP;iBACAb;YAAAA;YAAa;SAAU0B;iBAEvB;gBACA;YAAA;YAAA;SAAA;;0BAEA;QACFkB,QAAA;QACA1D,SAAQ;iBACH2D;gBAEH;iBACAtD;iBACA;iBACA;iBACAuD;;UAEF3D;gBACK0D;iBAEH;gBACA;iBACEtD;;aAEJ;QACFwD,QAAA;QAEAC,QAAO;QACLC,QAAA;QAEAC,SAAMC;QACNC,SAAMC;YAAAA;YAAAA;SAAkBhE;QACxBiE,QAAMvE;QACNuE,QAAMtE;QAKNsE,QAAMrE;QACNqE,QAAMpE;QACNW,SAAIyD;iBACFA;QAKFC,SAAA;QACAC,QAAIF;iBACFA;QACFG,QAAA;QAEAC,SAAOJ;QACPK,SAAA"}
+{"version":3,"sources":["usePromptStarterStyles.styles.ts"],"sourcesContent":["import {\n  makeStyles,\n  makeResetStyles,\n  mergeClasses,\n  shorthands,\n  typographyStyles,\n  createFocusOutlineStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PromptStarterSlots, PromptStarterState } from './PromptStarter.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptStarterClassNames: SlotClassNames<PromptStarterSlots> = {\n  root: 'fai-PromptStarter',\n  primaryAction: 'fai-PromptStarter__primaryAction',\n  icon: 'fai-PromptStarter__icon',\n  prompt: 'fai-PromptStarter__prompt',\n  reasonMarker: 'fai-PromptStarter__reasonMarker',\n  actions: 'fai-PromptStarter__actions',\n};\n\nconst useRootResetStyles = makeResetStyles({\n  display: 'grid',\n  gridTemplateColumns: '1fr auto',\n  gridTemplateRows: 'max-content auto',\n  minWidth: '214px',\n\n  // Apply styles to the primary action on hover / active states\n  '&:hover': {\n    [`& .${promptStarterClassNames.primaryAction}`]: {\n      boxShadow: tokens.shadow16,\n      transform: 'scale(1.03)',\n      transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n    },\n  },\n  '&:active': {\n    [`& .${promptStarterClassNames.primaryAction}`]: {\n      boxShadow: tokens.shadow8,\n      transform: 'scale(1.03)',\n      transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n    },\n  },\n\n  // Hide actions when not focused or hovered\n  ':not(:focus-within):not(:hover)': {\n    [`& .${promptStarterClassNames.actions}`]: {\n      clip: 'rect(0px, 0px, 0px, 0px)',\n      height: '1px',\n      margin: '-1px',\n      overflow: 'hidden',\n      padding: '0px',\n      width: '1px',\n      position: 'absolute',\n      opacity: 0,\n    },\n  },\n});\n\nconst useStyles = makeStyles({\n  primaryAction: {\n    gridRow: '1 / 3',\n    gridColumn: '1 / 3',\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n    borderRadius: '28px',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground2,\n    fontFamily: tokens.fontFamilyBase,\n    cursor: 'pointer',\n    outlineStyle: 'none',\n    textAlign: 'left',\n    rowGap: tokens.spacingHorizontalS,\n    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    ...createFocusOutlineStyle({ style: { outlineRadius: '28px' } }),\n  },\n\n  primaryActionHovered: {\n    boxShadow: tokens.shadow16,\n    transform: 'scale(1.03)',\n    transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n  },\n\n  icon: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: tokens.spacingVerticalXXL,\n  },\n  actions: {\n    margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}\n             ${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,\n    position: 'relative',\n    gridRow: '1 / 2',\n    gridColumn: '2 / 3',\n\n    opacity: 1,\n    transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`,\n  },\n  prompt: {\n    ...typographyStyles.body1Strong,\n\n    // Truncate text after two lines.\n    display: '-webkit-box',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    overflowY: 'hidden',\n  },\n  reasonMarker: {\n    ...typographyStyles.caption2,\n  },\n\n  // Hide icon, actions, and reason marker in single column appearance\n  singleColumnStyles: {\n    display: 'none',\n  },\n});\n\nexport const usePromptStarterStyles_unstable = (state: PromptStarterState): PromptStarterState => {\n  'use no memo';\n\n  const { isSingleColumn } = state;\n\n  const styles = useStyles();\n  const rootResetStyles = useRootResetStyles();\n  state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    promptStarterClassNames.primaryAction,\n    styles.primaryAction,\n    state.primaryAction.className,\n  );\n  state.icon.className = mergeClasses(\n    promptStarterClassNames.icon,\n    styles.icon,\n    isSingleColumn && styles.singleColumnStyles,\n    state.icon.className,\n  );\n  state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);\n  if (state.reasonMarker) {\n    state.reasonMarker.className = mergeClasses(\n      promptStarterClassNames.reasonMarker,\n      styles.reasonMarker,\n      isSingleColumn && styles.singleColumnStyles,\n      state.reasonMarker.className,\n    );\n  }\n  if (state.actions) {\n    state.actions.className = mergeClasses(\n      promptStarterClassNames.actions,\n      styles.actions,\n      isSingleColumn && styles.singleColumnStyles,\n      state.actions.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["promptStarterClassNames","root","primaryAction","icon","prompt","reasonMarker","actions","useRootResetStyles","makeResetStyles","display","__styles","gridTemplateColumns","gridTemplateRows","minWidth","h3tjnc","Bw0ie65","boxShadow","transform","transition","Beyfa6y","Bbmb7ep","Bahqtrf","Bceei9c","oeaueh","clip","height","margin","overflow","padding","width","position","opacity","ibv6hh","icvyot","vrafjx","useStyles","makeStyles","gridRow","gridColumn","flexDirection","borderRadius","backgroundColor","color","fontFamily","tokens","fontFamilyBase","cursor","outlineStyle","textAlign","rowGap","spacingHorizontalS","shorthands","border","strokeWidthThin","createFocusOutlineStyle","style","Boxcth7","primaryActionHovered","Blkhhs4","alignItems","minHeight","clg4pj","Bkh64rk","typographyStyles","E5pizo","Cwk7ip","B3o57yi","singleColumnStyles","Bi2q7bf","mc9l5x","Bt984gj","isSingleColumn","sshi5w","styles","state","B6of3ja","className","qhf8xq","nk6f5a","Br312pm"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,uBAAAA;eAAAA;;;;;;iCANY;AAMlB,MAAMA,0BAA8D;UACzEC;mBACAC;UACAC;YACAC;kBACAC;aACAC;AACF;AAEA,MAAMC,qBAAqBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;CAAA;MACzCC,YAASC,IAAAA,yBAAA,EAAA;mBACTC;QACAC,QAAAA;QACAC,QAAAA;QAEAC,QAAA;QACAC,SAAA;iBACO;iBACHC;gBACAC;iBACAC;gBACF;QACFC,SAAA;QACAC,SAAA;iBACO;iBACHJ;gBACAC;gBACAC;gBACF;QACFG,SAAA;QAEAC,SAAA;QACAC,QAAA;gBACI;YAAG;YAAEvB;SAAAA;iBACLwB;iBACAC;gBACAC;gBACAC;gBACAC;iBACAC;iBACAC;iBACAC;YAAAA;YAAS;SAAA;iBACX;QACFC,QAAA;YAAA;YAAA;SAAA;QACFC,QAAA;QAEAC,QAAMC;YAAAA;YAAYC;SAAW;QAC3BlC,QAAAA;gBACEmC;YAAAA;YAAS;SAAA;gBACTC;gBACA7B;YAAAA;YAAS;SAAA;iBACT8B;gBACAT;YAAAA;YAAU;SAAA;iBACVU;iBACAC;iBACAC;iBACAC;YAAAA;YAAYC;SAAOC;gBACnBC;iBACAC;YAAAA;YAAc;SAAA;iBACdC;iBACAC;YAAAA;YAAeC;SAAAA;iBACftB;iBACGuB;YAAAA;YAAWC;SAAcC;iBACzBC;iBAA0BC;;iBAA+B;gBAAI;QAClEC,SAAA;QAEAC,SAAAA;gBACEzC;iBACAC;iBACAC;QACFwC,SAAA;QAEAvD,SAAM;gBACJM;gBACAkD;gBACAC;QACFC,QAAA;QACAvD,SAAS;iBACPoB;iBACS;iBACTI;gBACAO;gBACAC;iBAEAP;gBACAb;QACF4C,SAAA;QACA1D,QAAQ;gBACH2D;iBAEH;YAAA;YAAA;SAAA;iBACAtD;gBACA;YAAA;YAAA;SAAsB;;0BAEX;QACbuD,QAAA;QACA3D,SAAAA;iBACK0D;QACLE,QAAA;QAEAC,SAAA;QACAC,SAAAA;iBACE1D;QACF2D,SAAA;IACF;IAEAjE,MAAO;QACLkE,QAAA;QAEAC,SAAQC;QAERC,QAAMC;;aAEAxE;QACNyE,QAAMxE;QAKNwE,QAAMvE;QAMNuE,QAAMtE;QACNuE,SAAID;iBACFA;YAAMrE;YAAAA;SAAauE;QAMrBC,QAAA;QACAC,QAAIJ;gBACFA;QAMF5D,QAAA;QAEAC,SAAO2D;QACPK,SAAA"}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PromptStarterList", {
+    enumerable: true,
+    get: function() {
+        return PromptStarterList;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _usePromptStarterList = require("./usePromptStarterList");
+const _renderPromptStarterList = require("./renderPromptStarterList");
+const _usePromptStarterListStylesstyles = require("./usePromptStarterListStyles.styles");
+const _usePromptStarterListContextValues = require("./usePromptStarterListContextValues");
+const PromptStarterList = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _usePromptStarterList.usePromptStarterList_unstable)(props, ref);
+    const contextValues = (0, _usePromptStarterListContextValues.usePromptStarterListContextValues)(state);
+    (0, _usePromptStarterListStylesstyles.usePromptStarterListStyles_unstable)(state);
+    return (0, _renderPromptStarterList.renderPromptStarterList_unstable)(state, contextValues);
+});
+PromptStarterList.displayName = 'PromptStarterList'; //# sourceMappingURL=PromptStarterList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptStarterList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptStarterList_unstable } from './usePromptStarterList';\nimport { renderPromptStarterList_unstable } from './renderPromptStarterList';\nimport { usePromptStarterListStyles_unstable } from './usePromptStarterListStyles.styles';\nimport type { PromptStarterListProps } from './PromptStarterList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { usePromptStarterListContextValues } from './usePromptStarterListContextValues';\n\nexport const PromptStarterList: ForwardRefComponent<PromptStarterListProps> = React.forwardRef((props, ref) => {\n  const state = usePromptStarterList_unstable(props, ref);\n  const contextValues = usePromptStarterListContextValues(state);\n\n  usePromptStarterListStyles_unstable(state);\n  return renderPromptStarterList_unstable(state, contextValues);\n});\n\nPromptStarterList.displayName = 'PromptStarterList';\n"],"names":["PromptStarterList","React","forwardRef","props","state","usePromptStarterList_unstable","contextValues","usePromptStarterListContextValues","usePromptStarterListStyles_unstable","renderPromptStarterList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;sCACuB;yCACG;kDACG;mDAGF;AAE3C,MAAMA,oBAAAA,WAAAA,GAAAA,OAAiEC,UAAMC,CAAU,CAACC,OAACA;UAC9FC,QAAMA,IAAAA,mDAAQC,EAAAA,OAA8BF;UAC5CG,gBAAMA,IAAAA,oEAAgBC,EAAAA;6EAEtBC,EAAAA;WACAC,IAAAA,yDAAOA,EAAAA,OAAiCL;AAC1C;AAEAJ,kBAAkBU,WAAW,GAAG"}

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+ //# sourceMappingURL=PromptStarterList.types.js.map

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

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

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PromptStarterList: function() {
+        return _PromptStarterList.PromptStarterList;
+    },
+    promptStarterListClassNames: function() {
+        return _usePromptStarterListStylesstyles.promptStarterListClassNames;
+    },
+    renderPromptStarterList_unstable: function() {
+        return _renderPromptStarterList.renderPromptStarterList_unstable;
+    },
+    usePromptStarterListStyles_unstable: function() {
+        return _usePromptStarterListStylesstyles.usePromptStarterListStyles_unstable;
+    },
+    usePromptStarterList_unstable: function() {
+        return _usePromptStarterList.usePromptStarterList_unstable;
+    }
+});
+const _PromptStarterList = require("./PromptStarterList");
+const _renderPromptStarterList = require("./renderPromptStarterList");
+const _usePromptStarterList = require("./usePromptStarterList");
+const _usePromptStarterListStylesstyles = require("./usePromptStarterListStyles.styles");
+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { PromptStarterList } from './PromptStarterList';\nexport type {\n  PromptStarterListProps,\n  PromptStarterListSlots,\n  PromptStarterListState,\n  PromptStarterListContextValue,\n} from './PromptStarterList.types';\nexport { renderPromptStarterList_unstable } from './renderPromptStarterList';\nexport { usePromptStarterList_unstable } from './usePromptStarterList';\nexport { promptStarterListClassNames, usePromptStarterListStyles_unstable } from './usePromptStarterListStyles.styles';\n"],"names":["PromptStarterList","promptStarterListClassNames","renderPromptStarterList_unstable","usePromptStarterListStyles_unstable","usePromptStarterList_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,iBAAiB;eAAjBA,oCAAiB;;IASjBC,2BAA2B;eAA3BA,6DAA2B;;IAF3BC,gCAAgC;eAAhCA,yDAAgC;;IAEHC,mCAAmC;eAAnCA,qEAAmC;;IADhEC,6BAA6B;eAA7BA,mDAA6B;;;mCARJ;yCAOe;sCACH;kDACmC"}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderPromptStarterList_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderPromptStarterList_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactcomponents = require("@fluentui/react-components");
+const _PromptStarterListContext = require("../../../contexts/PromptStarterListContext");
+const renderPromptStarterList_unstable = (state, contextValue)=>{
+    (0, _reactcomponents.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PromptStarterListContext.PromptStarterListProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.PresenceGroup, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.gridWrapper, {
+                        children: state.root.children
+                    })
+                }),
+                state.expandButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandButton, {})
+            ]
+        })
+    });
+}; //# sourceMappingURL=renderPromptStarterList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderPromptStarterList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, PresenceGroup } from '@fluentui/react-components';\nimport { PromptStarterListProvider } from '../../../contexts/PromptStarterListContext';\nimport type {\n  PromptStarterListState,\n  PromptStarterListSlots,\n  PromptStarterListContextValue,\n} from './PromptStarterList.types';\n\n/**\n * Render the final JSX of PromptStarterList\n */\nexport const renderPromptStarterList_unstable = (\n  state: PromptStarterListState,\n  contextValue: PromptStarterListContextValue,\n) => {\n  assertSlots<PromptStarterListSlots>(state);\n\n  return (\n    <PromptStarterListProvider value={contextValue}>\n      <state.root>\n        <PresenceGroup>\n          <state.gridWrapper>{state.root.children}</state.gridWrapper>\n        </PresenceGroup>\n        {state.expandButton && <state.expandButton />}\n      </state.root>\n    </PromptStarterListProvider>\n  );\n};\n"],"names":["assertSlots","state","value","contextValue","_jsx","PresenceGroup","gridWrapper"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBEA;;;eAAAA;;;4BAjBF;iCAE2C;0CACD;AAcxCA,MAAAA,mCAAoCC,CAAAA,OAAAA;oCAEpC,EAAAA;WAC6BC,WAAOC,GAAAA,IAAAA,eAAAA,EAAAA,mDAAAA,EAAAA;;;;8BAE9BC,IAAAA,eAAA,EAACC,8BAAAA,EAAAA;4CACCD,IAAAA,eAAA,EAAAH,MAAAK,WAACL,EAAMK;qDAAaL"}

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

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "usePromptStarterList_unstable", {
+    enumerable: true,
+    get: function() {
+        return usePromptStarterList_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+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 usePromptStarterList_unstable = (props, ref)=>{
+    const { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less' } = 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',
+        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 [numberOfColumns, setNumberOfColumns] = _react.useState(3);
+    const gridWrapperRef = _react.useRef(null);
+    const { targetDocument } = (0, _reactcomponents.useFluent)();
+    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    _react.useEffect(()=>{
+        if (!win || !gridWrapperRef.current) return;
+        const promptStarterGrid = gridWrapperRef.current;
+        const updateNumberOfColumns = ()=>{
+            const numColumns = win.getComputedStyle(promptStarterGrid).gridTemplateColumns.split(' ').length;
+            setNumberOfColumns(numColumns);
+        };
+        const ro = new win.ResizeObserver(updateNumberOfColumns);
+        ro.observe(promptStarterGrid);
+        return ()=>{
+            ro.unobserve(promptStarterGrid);
+        };
+    }, [
+        win
+    ]);
+    const state = {
+        numberOfColumns: numberOfColumns,
+        isExpanded,
+        designVersion,
+        components: {
+            root: 'div',
+            gridWrapper: 'div',
+            expandButton: _reactcomponents.Button
+        },
+        root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        gridWrapper: _reactcomponents.slot.always(props.gridWrapper, {
+            defaultProps: {
+                role: 'group',
+                ...focusAttrs
+            },
+            elementType: 'div'
+        }),
+        expandButton: _reactcomponents.slot.optional(props.expandButton, {
+            defaultProps: {
+                appearance: 'subtle',
+                size: 'small',
+                shape: 'rounded',
+                icon: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDown12Regular, null),
+                iconPosition: 'after',
+                'aria-expanded': isExpanded,
+                children: isExpanded ? collapseButtonLabel : expandButtonLabel
+            },
+            renderByDefault: true,
+            elementType: _reactcomponents.Button
+        })
+    };
+    state.gridWrapper.ref = (0, _reactcomponents.useMergedRefs)(gridWrapperRef, state.gridWrapper.ref);
+    // Get the array of children.
+    const childrenArray = _react.useMemo(()=>{
+        return _react.Children.toArray(state.root.children);
+    }, [
+        state.root.children
+    ]);
+    // Add motion to the children.
+    const childrenWithMotion = _react.useMemo(()=>childrenArray.map((child, index)=>{
+            // Throw error if the child is not a valid React element or is a Fragment.
+            if (!/*#__PURE__*/ _react.isValidElement(child) || child.type === _react.Fragment) {
+                throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');
+            }
+            return /*#__PURE__*/ _react.createElement(_promptStarterMotion.PromptStarterMotion, {
+                appear: true,
+                key: index,
+                index: index,
+                numberOfColumns: numberOfColumns
+            }, child);
+        }), [
+        childrenArray,
+        numberOfColumns
+    ]);
+    // In the collapsed state, we only show 2-3 children depending on the number of numberOfColumns.
+    if (!isExpanded) {
+        const collapsedVisibleItems = numberOfColumns === 2 ? 2 : 3;
+        state.root.children = childrenWithMotion.slice(0, collapsedVisibleItems);
+    } else {
+        state.root.children = childrenWithMotion;
+    }
+    if (state.expandButton) {
+        state.expandButton.onClick = (0, _reactcomponents.mergeCallbacks)(state.expandButton.onClick, ()=>setIsExpanded(!isExpanded));
+    }
+    return state;
+}; //# sourceMappingURL=usePromptStarterList.js.map