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

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

@@ -4,6 +4,7 @@ export const promptStarterClassNames = {
   root: 'fai-PromptStarter',
   primaryAction: 'fai-PromptStarter__primaryAction',
   icon: 'fai-PromptStarter__icon',
+  category: 'fai-PromptStarter__category',
   prompt: 'fai-PromptStarter__prompt',
   reasonMarker: 'fai-PromptStarter__reasonMarker',
   actions: 'fai-PromptStarter__actions'
@@ -17,9 +18,10 @@ const useStyles = __styles({
     Bw0ie65: 0,
     Br312pm: 0,
     Beweih1: "f1eb8yyf",
-    mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62",
     qhf8xq: "f10pi13n",
+    mc9l5x: "f13qh94s",
+    Budl1dq: "fwggfk1",
+    v29qe6: "f1wv14k0",
     Beyfa6y: 0,
     Bbmb7ep: 0,
     Btl43ni: 0,
@@ -31,7 +33,8 @@ const useStyles = __styles({
     Bceei9c: "f1k6fduh",
     oeaueh: "f1s6fcnf",
     fsow6f: ["f1o700av", "fes3tcz"],
-    Belr9w4: "fylz90v",
+    i8kkvl: "f6ave1s",
+    Belr9w4: "f1wn3y0l",
     Byoj8tv: 0,
     uwmqm3: 0,
     z189sj: 0,
@@ -103,21 +106,46 @@ const useStyles = __styles({
   icon: {
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
-    sshi5w: "fntfeoj"
+    sshi5w: "fntfeoj",
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "fm1owph",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f12k0sjh"
+  },
+  category: {
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "fm1owph",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f14q5zaz",
+    qb2dma: "f7nlbp4",
+    sj55zd: "f19n0e5",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi",
+    mc9l5x: "f1rvi9lw",
+    Fd1uvx: "fpfc2by",
+    Bh9c35c: "fvvof4m",
+    Bmxbyg5: "f1sil6mw",
+    Biipf1f: "f9ijwd5"
   },
   actions: {
-    jrapky: 0,
-    Frg6f3: 0,
-    t21cq0: 0,
-    B6of3ja: 0,
-    B74szlk: ["foizga4", "f5m8a6r"],
-    qhf8xq: "f10pi13n",
     nk6f5a: 0,
     Ijaq50: 0,
     h3tjnc: "f3hl5xl",
     Bw0ie65: 0,
     Br312pm: 0,
     Beweih1: "f14q5zaz",
+    qhf8xq: "f10pi13n",
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: ["foizga4", "f5m8a6r"],
     abs64n: "f5p0z4x",
     Bn62ygk: 0,
     Cwk7ip: 0,
@@ -126,7 +154,17 @@ const useStyles = __styles({
     Bkqvd7p: 0,
     Bi2q7bf: "f1964ud6"
   },
+  actionsWithCategory: {
+    De3pzq: "fxugw4r",
+    E5pizo: ["f1u7pq1e", "f1pdyzui"]
+  },
   prompt: {
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "f1daok31",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f1eb8yyf",
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
     Bhrd7zp: "fl43uef",
@@ -134,22 +172,37 @@ const useStyles = __styles({
     mc9l5x: "f1rvi9lw",
     Fd1uvx: "fpfc2by",
     Bh9c35c: "f1lvsx7g",
-    Bmxbyg5: "f1sil6mw"
+    Bmxbyg5: "f1sil6mw",
+    Biipf1f: "f9ijwd5"
+  },
+  promptNoReasonMarker: {
+    Bh9c35c: "f197wrh9"
   },
   reasonMarker: {
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "f17e42vn",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f1eb8yyf",
     Bahqtrf: "fk6fouc",
     Be2twd7: "f13mqy1h",
     Bhrd7zp: "figsok6",
-    Bg96gwp: "fcpl73t"
+    Bg96gwp: "fcpl73t",
+    mc9l5x: "f1rvi9lw",
+    Fd1uvx: "fpfc2by",
+    Bh9c35c: "fvvof4m",
+    Bmxbyg5: "f1sil6mw",
+    Biipf1f: "f9ijwd5"
   }
 }, {
   d: [[".fcdwmbt{grid-row:1/3;}", {
     p: -1
   }], [".f1eb8yyf{grid-column:1/3;}", {
     p: -1
-  }], ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f10pi13n{position:relative;}", [".f14w4nd{border-radius:28px;}", {
+  }], ".f10pi13n{position:relative;}", ".f13qh94s{display:grid;}", ".fwggfk1{grid-template-columns:max-content 1fr;}", ".f1wv14k0{grid-auto-rows:max-content 1fr max-content;}", [".f14w4nd{border-radius:28px;}", {
     p: -1
-  }], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1k6fduh{cursor:pointer;}", ".f1s6fcnf{outline-style:none;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", [".fq88wcj{padding:var(--spacingVerticalL) var(--spacingHorizontalL);}", {
+  }], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1k6fduh{cursor:pointer;}", ".f1s6fcnf{outline-style:none;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f6ave1s{column-gap:var(--spacingHorizontalMNudge);}", ".f1wn3y0l{row-gap:var(--spacingVerticalS);}", [".fq88wcj{padding:var(--spacingVerticalL) var(--spacingHorizontalL);}", {
     p: -1
   }], ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}", {
     p: -2
@@ -157,17 +210,33 @@ const useStyles = __styles({
     p: -1
   }], ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".f15ncuxf{transform:scale(1.03);}", [".ffrhwuo{transition:transform var(--durationNormal) var(--curveDecelerateMin);}", {
     p: -1
-  }], ".f122n59{align-items:center;}", ".fntfeoj{min-height:var(--spacingVerticalXXL);}", [".foizga4{margin:var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalNone) var(--spacingHorizontalNone);}", {
+  }], ".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".fntfeoj{min-height:var(--spacingVerticalXXL);}", [".fm1owph{grid-row:1;}", {
     p: -1
-  }], [".f5m8a6r{margin:var(--spacingVerticalL) var(--spacingHorizontalNone) var(--spacingVerticalNone) var(--spacingHorizontalL);}", {
+  }], [".f12k0sjh{grid-column:1/2;}", {
+    p: -1
+  }], [".fm1owph{grid-row:1;}", {
+    p: -1
+  }], [".f14q5zaz{grid-column:2/3;}", {
     p: -1
-  }], [".f3hl5xl{grid-row:1/2;}", {
+  }], ".f7nlbp4{align-self:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1rvi9lw{display:-webkit-box;}", ".fpfc2by{-webkit-box-orient:vertical;}", ".fvvof4m{-webkit-line-clamp:1;}", ".f1sil6mw{overflow-y:hidden;}", ".f9ijwd5{word-break:break-word;}", [".f3hl5xl{grid-row:1/2;}", {
     p: -1
   }], [".f14q5zaz{grid-column:2/3;}", {
     p: -1
+  }], [".foizga4{margin:var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalNone) var(--spacingHorizontalNone);}", {
+    p: -1
+  }], [".f5m8a6r{margin:var(--spacingVerticalL) var(--spacingHorizontalNone) var(--spacingVerticalNone) var(--spacingHorizontalL);}", {
+    p: -1
   }], ".f5p0z4x{opacity:1;}", [".f1964ud6{transition:opacity var(--durationFast) var(--curveLinear);}", {
     p: -1
-  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1rvi9lw{display:-webkit-box;}", ".fpfc2by{-webkit-box-orient:vertical;}", ".f1lvsx7g{-webkit-line-clamp:2;}", ".f1sil6mw{overflow-y:hidden;}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}"],
+  }], ".f1u7pq1e{box-shadow:-12px 0 12px 0 var(--colorNeutralBackground1);}", ".f1pdyzui{box-shadow:12px 0 12px 0 var(--colorNeutralBackground1);}", [".f1daok31{grid-row:2;}", {
+    p: -1
+  }], [".f1eb8yyf{grid-column:1/3;}", {
+    p: -1
+  }], ".f1lvsx7g{-webkit-line-clamp:2;}", ".f197wrh9{-webkit-line-clamp:3;}", [".f17e42vn{grid-row:3;}", {
+    p: -1
+  }], [".f1eb8yyf{grid-column:1/3;}", {
+    p: -1
+  }], ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}"],
   f: [".ftqa4ok:focus{outline-style:none;}"],
   i: [".f2hkw1w:focus-visible{outline-style:none;}"],
   m: [["@media (forced-colors: active){.f1j6vpng[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
@@ -180,6 +249,13 @@ const useStyles = __styles({
 });
 const useSingleColumnStyles = __styles({
   primaryAction: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fcvcxyf",
     Beyfa6y: 0,
     Bbmb7ep: 0,
     Btl43ni: 0,
@@ -226,20 +302,30 @@ const useSingleColumnStyles = __styles({
     Bjwuhne: "f480a47",
     Ghsupd: ["fs1por5", "f4stah7"]
   },
+  category: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fwrc4pm",
+    qb2dma: "fio29c6"
+  },
   prompt: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fy9rknc",
     Bhrd7zp: "fl43uef",
-    Bg96gwp: "fwrc4pm"
+    Bg96gwp: "fwrc4pm",
+    Bh9c35c: "f1lvsx7g"
   }
 }, {
-  d: [[".f1jxijnj{border-radius:var(--borderRadius2XL);}", {
+  d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", [".fcvcxyf{padding:var(--spacingVerticalM) var(--spacingHorizontalM);}", {
+    p: -1
+  }], [".f1jxijnj{border-radius:var(--borderRadius2XL);}", {
     p: -1
   }], ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}", {
     p: -2
   }], [".f178id4l[data-fui-focus-visible]::after{border-radius:var(--borderRadius2XL);}", {
     p: -1
-  }], ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"],
+  }], ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fio29c6{align-self:auto;}", ".f1lvsx7g{-webkit-line-clamp:2;}"],
   f: [".ftqa4ok:focus{outline-style:none;}"],
   i: [".f2hkw1w:focus-visible{outline-style:none;}"],
   m: [["@media (forced-colors: active){.f1j6vpng[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
@@ -264,12 +350,15 @@ export const usePromptStarterStyles_unstable = state => {
   if (state.icon) {
     state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);
   }
-  state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
+  if (state.category) {
+    state.category.className = mergeClasses(promptStarterClassNames.category, styles.category, isSingleColumn && singleColumnStyles.category, state.category.className);
+  }
+  state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, !state.reasonMarker && styles.promptNoReasonMarker, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
   if (state.reasonMarker) {
     state.reasonMarker.className = mergeClasses(promptStarterClassNames.reasonMarker, styles.reasonMarker, state.reasonMarker.className);
   }
   if (state.actions) {
-    state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, state.actions.className);
+    state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, state.category && styles.actionsWithCategory, state.actions.className);
   }
   return state;
 };

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["PromptStarterList.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type {\n  ComponentProps,\n  ComponentState,\n  Slot,\n  Button,\n  UseArrowNavigationGroupOptions,\n} from '@fluentui/react-components';\n\nexport type PromptStarterListSlots = {\n  root: NonNullable<Slot<'div'>>;\n  gridWrapper: NonNullable<Slot<'div'>>;\n  expandButton?: Slot<typeof Button>;\n};\n\n/**\n * PromptStarterList Props\n */\nexport type PromptStarterListProps = ComponentProps<Partial<PromptStarterListSlots>, 'gridWrapper'> &\n  DesignVersion & {\n    /**\n     * Text for the expand button when the list is collapsed.\n     *\n     * default: \"Show more\"\n     */\n    expandButtonLabel?: string;\n    /**\n     * Text for the expand button when the list is expanded.\n     *\n     * default: \"Show less\"\n     */\n    collapseButtonLabel?: string;\n    /**\n     * Arrow navigation options. This can be used to customize Tabster's direction,\n     * tab behavior, and memoization options.\n     *\n     * default: {  axis: 'horizontal', memorizeCurrent: true }\n     */\n    arrowNavigationOptions?: UseArrowNavigationGroupOptions;\n  };\n\n/**\n * State used in rendering PromptStarterList\n */\nexport type PromptStarterListState = ComponentState<PromptStarterListSlots> &\n  Required<Pick<PromptStarterListProps, 'designVersion'>> & {\n    numberOfColumns: number;\n    isExpanded?: boolean;\n  };\n\nexport type PromptStarterListContextValue = Pick<PromptStarterListState, 'numberOfColumns' | 'isExpanded'>;\n"],"names":[],"rangeMappings":"","mappings":"AAkDA,WAA2G"}
+{"version":3,"sources":["PromptStarterList.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type {\n  ComponentProps,\n  ComponentState,\n  Slot,\n  Button,\n  UseArrowNavigationGroupOptions,\n} from '@fluentui/react-components';\n\nexport type PromptStarterListSlots = {\n  root: NonNullable<Slot<'div'>>;\n  gridWrapper: NonNullable<Slot<'div'>>;\n  actions?: Slot<'span'>;\n  expandButton?: Slot<typeof Button>;\n};\n\n/**\n * PromptStarterList Props\n */\nexport type PromptStarterListProps = ComponentProps<Partial<PromptStarterListSlots>, 'gridWrapper'> &\n  DesignVersion & {\n    /**\n     * Uncontrolled initial value for the expanded prop.\n     *\n     *  @default false\n     */\n    defaultExpanded?: boolean;\n\n    /**\n     * Controls whether the PromptStarterList is expanded.\n     */\n    isExpanded?: boolean;\n\n    /**\n     * Callback to execute when the expanded state changes.\n     */\n    onExpandedChange?: (event: React.MouseEvent<HTMLElement>, data: { isExpanded: boolean }) => void;\n\n    /**\n     * Text for the expand button when the list is collapsed.\n     *\n     * default: \"Show more\"\n     */\n    expandButtonLabel?: string;\n\n    /**\n     * Text for the expand button when the list is expanded.\n     *\n     * default: \"Show less\"\n     */\n    collapseButtonLabel?: string;\n\n    /**\n     * Arrow navigation options. This can be used to customize Tabster's direction,\n     * tab behavior, and memoization options.\n     *\n     * default: {  axis: 'horizontal', memorizeCurrent: true }\n     */\n    arrowNavigationOptions?: UseArrowNavigationGroupOptions;\n\n    /**\n     * Whether to animate the entrance of its items when it first mounts.\n     *\n     * @default true\n     */\n    animateOnMount?: boolean;\n\n    /**\n     * The number of rows that are visible in the two and three column layouts.\n     * In the one column layout, there will always be three visible PromptStarters.\n     *\n     * @default 1\n     */\n    visibleRows?: number;\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":"AAqFA,WAA2G"}

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

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

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

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