@fluentui-copilot/react-prompt-starter 0.0.0-nightly-20251010-0406-7df7c6d1.1 → 0.0.0-nightly-20251014-0405-d8d3e89c.1

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

@@ -0,0 +1,338 @@
+import { __styles, __resetStyles, mergeClasses, shorthands, typographyStyles, createFocusOutlineStyle } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+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'
+};
+const useRootResetStyles = __resetStyles("r1x2hm06", null, [".r1x2hm06{display:grid;grid-template-columns:1fr auto;grid-template-rows:max-content auto;min-width:214px;}", ".r1x2hm06:hover .fai-PromptStarter__primaryAction{box-shadow:var(--shadow16);transform:scale(1.03);transition:transform var(--durationNormal) var(--curveDecelerateMin);}", ".r1x2hm06:active .fai-PromptStarter__primaryAction{box-shadow:var(--shadow8);transform:scale(1.03);transition:transform var(--durationNormal) var(--curveDecelerateMin);}", ".r1x2hm06:not(:focus-within):not(:hover) .fai-PromptStarter__actions{clip:rect(0px, 0px, 0px, 0px);height:1px;margin:-1px;overflow:hidden;padding:0px;width:1px;position:absolute;opacity:0;}"]);
+const useStyles = __styles({
+  primaryAction: {
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "fcdwmbt",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f1eb8yyf",
+    qhf8xq: "f10pi13n",
+    mc9l5x: "f13qh94s",
+    Budl1dq: "fwggfk1",
+    v29qe6: "f1wv14k0",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f14w4nd",
+    De3pzq: "fxugw4r",
+    sj55zd: "fkfq4zb",
+    Bahqtrf: "fk6fouc",
+    Bceei9c: "f1k6fduh",
+    oeaueh: "f1s6fcnf",
+    fsow6f: ["f1o700av", "fes3tcz"],
+    i8kkvl: "f6ave1s",
+    Belr9w4: "f1wn3y0l",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fq88wcj",
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "f68mrw8",
+    h3c5rm: ["f7pw515", "fw35ms5"],
+    B9xav0g: "frpde29",
+    zhjwy3: ["fw35ms5", "f7pw515"],
+    Brovlpu: "ftqa4ok",
+    B486eqv: "f2hkw1w",
+    B8q5s1w: "f8hki3x",
+    Bci5o5g: ["f1d2448m", "ffh67wi"],
+    n8qw10: "f1bjia2o",
+    Bdrgwmp: ["ffh67wi", "f1d2448m"],
+    Bqhya38: "f1j6vpng",
+    Bwxa6fj: ["f1pniga2", "f1ffjurs"],
+    Bdhvstf: "f987i1v",
+    B7zbvrb: ["f1ffjurs", "f1pniga2"],
+    Bm4h7ae: "f15bsgw9",
+    B7ys5i9: "f14e48fq",
+    Busjfv9: "f18yb2kv",
+    Bhk32uz: "fd6o370",
+    f6g5ot: 0,
+    Boxcth7: 0,
+    Bhdgwq3: 0,
+    hgwjuy: 0,
+    Bshpdp8: 0,
+    Bsom6fd: 0,
+    Blkhhs4: 0,
+    Bonggc9: 0,
+    Ddfuxk: 0,
+    i03rao: 0,
+    kclons: 0,
+    clg4pj: 0,
+    Bpqj9nj: 0,
+    B6dhp37: 0,
+    Bf4ptjt: 0,
+    Bqtpl0w: 0,
+    i4rwgc: "ffwy5si",
+    Dah5zi: 0,
+    B1tsrr9: 0,
+    qqdqy8: 0,
+    Bkh64rk: 0,
+    e3fwne: "faugzkp",
+    J0r882: "f57olzd",
+    Bule8hv: ["f4stah7", "fs1por5"],
+    Bjwuhne: "f480a47",
+    Ghsupd: ["fs1por5", "f4stah7"]
+  },
+  primaryActionHovered: {
+    E5pizo: "f1hg901r",
+    Bz10aip: "f15ncuxf",
+    Bn62ygk: 0,
+    Cwk7ip: 0,
+    B3o57yi: 0,
+    Bmy1vo4: 0,
+    Bkqvd7p: 0,
+    Bi2q7bf: "ffrhwuo"
+  },
+  icon: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    sshi5w: "fntfeoj",
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "fm1owph",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f12k0sjh"
+  },
+  category: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi",
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "fm1owph",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f14q5zaz"
+  },
+  actions: {
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: ["foizga4", "f5m8a6r"],
+    qhf8xq: "f10pi13n",
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "f3hl5xl",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f14q5zaz",
+    abs64n: "f5p0z4x",
+    Bn62ygk: 0,
+    Cwk7ip: 0,
+    B3o57yi: 0,
+    Bmy1vo4: 0,
+    Bkqvd7p: 0,
+    Bi2q7bf: "f1964ud6"
+  },
+  actionsWithCategory: {
+    De3pzq: "fxugw4r",
+    E5pizo: ["f1u7pq1e", "f1pdyzui"]
+  },
+  prompt: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi",
+    mc9l5x: "f1rvi9lw",
+    Fd1uvx: "fpfc2by",
+    Bh9c35c: "f1lvsx7g",
+    Bmxbyg5: "f1sil6mw",
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "f1daok31",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f1eb8yyf"
+  },
+  promptNoReasonMarker: {
+    Bh9c35c: "f197wrh9"
+  },
+  reasonMarker: {
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "f17e42vn",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f1eb8yyf",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f13mqy1h",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fcpl73t"
+  }
+}, {
+  d: [[".fcdwmbt{grid-row:1/3;}", {
+    p: -1
+  }], [".f1eb8yyf{grid-column:1/3;}", {
+    p: -1
+  }], ".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;}", ".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
+  }], [".faugzkp[data-fui-focus-visible]::after{border-radius:28px;}", {
+    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
+  }], ".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".fntfeoj{min-height:var(--spacingVerticalXXL);}", [".fm1owph{grid-row:1;}", {
+    p: -1
+  }], [".f12k0sjh{grid-column:1/2;}", {
+    p: -1
+  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".fm1owph{grid-row:1;}", {
+    p: -1
+  }], [".f14q5zaz{grid-column:2/3;}", {
+    p: -1
+  }], [".foizga4{margin:var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalNone) var(--spacingHorizontalNone);}", {
+    p: -1
+  }], [".f5m8a6r{margin:var(--spacingVerticalL) var(--spacingHorizontalNone) var(--spacingVerticalNone) var(--spacingHorizontalL);}", {
+    p: -1
+  }], [".f3hl5xl{grid-row:1/2;}", {
+    p: -1
+  }], [".f14q5zaz{grid-column:2/3;}", {
+    p: -1
+  }], ".f5p0z4x{opacity:1;}", [".f1964ud6{transition:opacity var(--durationFast) var(--curveLinear);}", {
+    p: -1
+  }], ".f1u7pq1e{box-shadow:-12px 0 12px 0 var(--colorNeutralBackground1);}", ".f1pdyzui{box-shadow:12px 0 12px 0 var(--colorNeutralBackground1);}", ".f1rvi9lw{display:-webkit-box;}", ".fpfc2by{-webkit-box-orient:vertical;}", ".f1lvsx7g{-webkit-line-clamp:2;}", ".f1sil6mw{overflow-y:hidden;}", [".f1daok31{grid-row:2;}", {
+    p: -1
+  }], [".f1eb8yyf{grid-column:1/3;}", {
+    p: -1
+  }], ".f197wrh9{-webkit-line-clamp:3;}", [".f17e42vn{grid-row:3;}", {
+    p: -1
+  }], [".f1eb8yyf{grid-column:1/3;}", {
+    p: -1
+  }], ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}"],
+  f: [".ftqa4ok:focus{outline-style:none;}"],
+  i: [".f2hkw1w:focus-visible{outline-style:none;}"],
+  m: [["@media (forced-colors: active){.f1j6vpng[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ffjurs[data-fui-focus-visible]::after{border-left-color:Highlight;}.f1pniga2[data-fui-focus-visible]::after{border-right-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f987i1v[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useSingleColumnStyles = __styles({
+  primaryAction: {
+    mc9l5x: "f22iagw",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1jxijnj",
+    Brovlpu: "ftqa4ok",
+    B486eqv: "f2hkw1w",
+    B8q5s1w: "f8hki3x",
+    Bci5o5g: ["f1d2448m", "ffh67wi"],
+    n8qw10: "f1bjia2o",
+    Bdrgwmp: ["ffh67wi", "f1d2448m"],
+    Bqhya38: "f1j6vpng",
+    Bwxa6fj: ["f1pniga2", "f1ffjurs"],
+    Bdhvstf: "f987i1v",
+    B7zbvrb: ["f1ffjurs", "f1pniga2"],
+    Bm4h7ae: "f15bsgw9",
+    B7ys5i9: "f14e48fq",
+    Busjfv9: "f18yb2kv",
+    Bhk32uz: "fd6o370",
+    f6g5ot: 0,
+    Boxcth7: 0,
+    Bhdgwq3: 0,
+    hgwjuy: 0,
+    Bshpdp8: 0,
+    Bsom6fd: 0,
+    Blkhhs4: 0,
+    Bonggc9: 0,
+    Ddfuxk: 0,
+    i03rao: 0,
+    kclons: 0,
+    clg4pj: 0,
+    Bpqj9nj: 0,
+    B6dhp37: 0,
+    Bf4ptjt: 0,
+    Bqtpl0w: 0,
+    i4rwgc: "ffwy5si",
+    Dah5zi: 0,
+    B1tsrr9: 0,
+    qqdqy8: 0,
+    Bkh64rk: 0,
+    e3fwne: "f178id4l",
+    J0r882: "f57olzd",
+    Bule8hv: ["f4stah7", "fs1por5"],
+    Bjwuhne: "f480a47",
+    Ghsupd: ["fs1por5", "f4stah7"]
+  },
+  prompt: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fwrc4pm"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", [".f1jxijnj{border-radius:var(--borderRadius2XL);}", {
+    p: -1
+  }], ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}", {
+    p: -2
+  }], [".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);}"],
+  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;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ffjurs[data-fui-focus-visible]::after{border-left-color:Highlight;}.f1pniga2[data-fui-focus-visible]::after{border-right-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f987i1v[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+export const usePromptStarterStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    isSingleColumn
+  } = state;
+  const styles = useStyles();
+  const rootResetStyles = useRootResetStyles();
+  const singleColumnStyles = useSingleColumnStyles();
+  state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);
+  state.primaryAction.className = mergeClasses(promptStarterClassNames.primaryAction, styles.primaryAction, isSingleColumn && singleColumnStyles.primaryAction, state.primaryAction.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);
+  }
+  if (state.category) {
+    state.category.className = mergeClasses(promptStarterClassNames.category, styles.category, state.category.className);
+  }
+  state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, !state.reasonMarker && styles.promptNoReasonMarker, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
+  if (state.reasonMarker) {
+    state.reasonMarker.className = mergeClasses(promptStarterClassNames.reasonMarker, styles.reasonMarker, state.reasonMarker.className);
+  }
+  if (state.actions) {
+    state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, state.category && styles.actionsWithCategory, state.actions.className);
+  }
+  return state;
+};
+//# sourceMappingURL=usePromptStarterStyles.styles.js.map

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

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

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

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

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

@@ -0,0 +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  category: 'fai-PromptStarter__category',\n  prompt: 'fai-PromptStarter__prompt',\n  reasonMarker: 'fai-PromptStarter__reasonMarker',\n  actions: 'fai-PromptStarter__actions',\n};\n\nconst useRootResetStyles = makeResetStyles({\n  display: 'grid',\n  gridTemplateColumns: '1fr auto',\n  gridTemplateRows: 'max-content auto',\n  minWidth: '214px',\n\n  // Apply styles to the primary action on hover / active states\n  '&:hover': {\n    [`& .${promptStarterClassNames.primaryAction}`]: {\n      boxShadow: tokens.shadow16,\n      transform: 'scale(1.03)',\n      transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n    },\n  },\n  '&:active': {\n    [`& .${promptStarterClassNames.primaryAction}`]: {\n      boxShadow: tokens.shadow8,\n      transform: 'scale(1.03)',\n      transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n    },\n  },\n\n  // Hide actions when not focused or hovered\n  ':not(:focus-within):not(:hover)': {\n    [`& .${promptStarterClassNames.actions}`]: {\n      clip: 'rect(0px, 0px, 0px, 0px)',\n      height: '1px',\n      margin: '-1px',\n      overflow: 'hidden',\n      padding: '0px',\n      width: '1px',\n      position: 'absolute',\n      opacity: 0,\n    },\n  },\n});\n\nconst useStyles = makeStyles({\n  primaryAction: {\n    gridRow: '1 / 3',\n    gridColumn: '1 / 3',\n    position: 'relative',\n    display: 'grid',\n    gridTemplateColumns: 'max-content 1fr',\n    gridAutoRows: 'max-content 1fr max-content',\n    borderRadius: '28px',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground2,\n    fontFamily: tokens.fontFamilyBase,\n    cursor: 'pointer',\n    outlineStyle: 'none',\n    textAlign: 'left',\n    columnGap: tokens.spacingHorizontalMNudge,\n    rowGap: tokens.spacingVerticalS,\n    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    ...createFocusOutlineStyle({ style: { outlineRadius: '28px' } }),\n  },\n\n  primaryActionHovered: {\n    boxShadow: tokens.shadow16,\n    transform: 'scale(1.03)',\n    transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n  },\n\n  icon: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: tokens.spacingVerticalXXL,\n    gridRow: 1,\n    gridColumn: '1 / 2',\n  },\n  category: {\n    display: 'flex',\n    alignItems: 'center',\n    ...typographyStyles.body1Strong,\n\n    gridRow: 1,\n    gridColumn: '2 / 3',\n  },\n  actions: {\n    margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}\n             ${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,\n    position: 'relative',\n    gridRow: '1 / 2',\n    gridColumn: '2 / 3',\n\n    opacity: 1,\n    transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`,\n  },\n  actionsWithCategory: {\n    // Add a background and gradient fade to truncate the title if applicable\n    backgroundColor: tokens.colorNeutralBackground1,\n\n    boxShadow: `-12px 0 12px 0 ${tokens.colorNeutralBackground1}`,\n  },\n  prompt: {\n    ...typographyStyles.body1Strong,\n\n    // Truncate text after two lines.\n    display: '-webkit-box',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    overflowY: 'hidden',\n    gridRow: '2',\n    gridColumn: '1 / 3',\n  },\n  promptNoReasonMarker: {\n    // Truncate text after three lines when no reason marker is present.\n    '-webkit-line-clamp': '3',\n  },\n  reasonMarker: {\n    gridRow: '3',\n    gridColumn: '1 / 3',\n    ...typographyStyles.caption2,\n  },\n});\n\nconst useSingleColumnStyles = makeStyles({\n  primaryAction: {\n    display: 'flex',\n    borderRadius: tokens.borderRadius2XL,\n    ...createFocusOutlineStyle({ style: { outlineRadius: tokens.borderRadius2XL } }),\n  },\n  prompt: {\n    ...typographyStyles.caption1Strong,\n  },\n});\n\nexport const usePromptStarterStyles_unstable = (state: PromptStarterState): PromptStarterState => {\n  'use no memo';\n\n  const { isSingleColumn } = state;\n\n  const styles = useStyles();\n  const rootResetStyles = useRootResetStyles();\n  const singleColumnStyles = useSingleColumnStyles();\n  state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    promptStarterClassNames.primaryAction,\n    styles.primaryAction,\n    isSingleColumn && singleColumnStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  if (state.icon) {\n    state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);\n  }\n  if (state.category) {\n    state.category.className = mergeClasses(\n      promptStarterClassNames.category,\n      styles.category,\n      state.category.className,\n    );\n  }\n  state.prompt.className = mergeClasses(\n    promptStarterClassNames.prompt,\n    styles.prompt,\n    !state.reasonMarker && styles.promptNoReasonMarker,\n    isSingleColumn && singleColumnStyles.prompt,\n    state.prompt.className,\n  );\n  if (state.reasonMarker) {\n    state.reasonMarker.className = mergeClasses(\n      promptStarterClassNames.reasonMarker,\n      styles.reasonMarker,\n      state.reasonMarker.className,\n    );\n  }\n  if (state.actions) {\n    state.actions.className = mergeClasses(\n      promptStarterClassNames.actions,\n      styles.actions,\n      state.category && styles.actionsWithCategory,\n      state.actions.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","tokens","promptStarterClassNames","root","primaryAction","icon","category","prompt","reasonMarker","actions","useRootResetStyles","display","gridTemplateColumns","gridTemplateRows","minWidth","boxShadow","shadow16","transform","transition","durationNormal","curveDecelerateMin","shadow8","clip","height","margin","overflow","padding","width","position","opacity","useStyles","gridRow","gridColumn","gridAutoRows","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","columnGap","spacingHorizontalMNudge","rowGap","spacingVerticalS","spacingVerticalL","spacingHorizontalL","border","strokeWidthThin","colorNeutralStroke2","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","body1Strong","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","actionsWithCategory","overflowY","promptNoReasonMarker","caption2","useSingleColumnStyles","borderRadius2XL","caption1Strong","usePromptStarterStyles_unstable","state","isSingleColumn","styles","rootResetStyles","singleColumnStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,UAAU,EACVC,eAAe,EACfC,YAAY,EACZC,UAAU,EACVC,gBAAgB,EAChBC,uBAAuB,QAClB,6BAA6B;AACpC,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,eAAe;IACfC,MAAM;IACNC,UAAU;IACVC,QAAQ;IACRC,cAAc;IACdC,SAAS;AACX,EAAE;AAEF,MAAMC,qBAAqBd,gBAAgB;IACzCe,SAAS;IACTC,qBAAqB;IACrBC,kBAAkB;IAClBC,UAAU;IAEV,8DAA8D;IAC9D,WAAW;QACT,CAAC,CAAC,GAAG,EAAEZ,wBAAwBE,aAAa,CAAC,CAAC,CAAC,EAAE;YAC/CW,WAAWd,OAAOe,QAAQ;YAC1BC,WAAW;YACXC,YAAY,CAAC,UAAU,EAAEjB,OAAOkB,cAAc,CAAC,CAAC,EAAElB,OAAOmB,kBAAkB,CAAC,CAAC;QAC/E;IACF;IACA,YAAY;QACV,CAAC,CAAC,GAAG,EAAElB,wBAAwBE,aAAa,CAAC,CAAC,CAAC,EAAE;YAC/CW,WAAWd,OAAOoB,OAAO;YACzBJ,WAAW;YACXC,YAAY,CAAC,UAAU,EAAEjB,OAAOkB,cAAc,CAAC,CAAC,EAAElB,OAAOmB,kBAAkB,CAAC,CAAC;QAC/E;IACF;IAEA,2CAA2C;IAC3C,mCAAmC;QACjC,CAAC,CAAC,GAAG,EAAElB,wBAAwBO,OAAO,CAAC,CAAC,CAAC,EAAE;YACzCa,MAAM;YACNC,QAAQ;YACRC,QAAQ;YACRC,UAAU;YACVC,SAAS;YACTC,OAAO;YACPC,UAAU;YACVC,SAAS;QACX;IACF;AACF;AAEA,MAAMC,YAAYnC,WAAW;IAC3BS,eAAe;QACb2B,SAAS;QACTC,YAAY;QACZJ,UAAU;QACVjB,SAAS;QACTC,qBAAqB;QACrBqB,cAAc;QACdC,cAAc;QACdC,iBAAiBlC,OAAOmC,uBAAuB;QAC/CC,OAAOpC,OAAOqC,uBAAuB;QACrCC,YAAYtC,OAAOuC,cAAc;QACjCC,QAAQ;QACRC,cAAc;QACdC,WAAW;QACXC,WAAW3C,OAAO4C,uBAAuB;QACzCC,QAAQ7C,OAAO8C,gBAAgB;QAC/BrB,SAAS,CAAC,EAAEzB,OAAO+C,gBAAgB,CAAC,CAAC,EAAE/C,OAAOgD,kBAAkB,CAAC,CAAC;QAClE,GAAGnD,WAAWoD,MAAM,CAACjD,OAAOkD,eAAe,EAAE,SAASlD,OAAOmD,mBAAmB,CAAC;QACjF,GAAGpD,wBAAwB;YAAEqD,OAAO;gBAAEC,eAAe;YAAO;QAAE,EAAE;IAClE;IAEAC,sBAAsB;QACpBxC,WAAWd,OAAOe,QAAQ;QAC1BC,WAAW;QACXC,YAAY,CAAC,UAAU,EAAEjB,OAAOkB,cAAc,CAAC,CAAC,EAAElB,OAAOmB,kBAAkB,CAAC,CAAC;IAC/E;IAEAf,MAAM;QACJM,SAAS;QACT6C,YAAY;QACZC,WAAWxD,OAAOyD,kBAAkB;QACpC3B,SAAS;QACTC,YAAY;IACd;IACA1B,UAAU;QACRK,SAAS;QACT6C,YAAY;QACZ,GAAGzD,iBAAiB4D,WAAW;QAE/B5B,SAAS;QACTC,YAAY;IACd;IACAvB,SAAS;QACPe,QAAQ,CAAC,EAAEvB,OAAO+C,gBAAgB,CAAC,CAAC,EAAE/C,OAAOgD,kBAAkB,CAAC;aACvD,EAAEhD,OAAO2D,mBAAmB,CAAC,CAAC,EAAE3D,OAAO4D,qBAAqB,CAAC,CAAC;QACvEjC,UAAU;QACVG,SAAS;QACTC,YAAY;QAEZH,SAAS;QACTX,YAAY,CAAC,QAAQ,EAAEjB,OAAO6D,YAAY,CAAC,CAAC,EAAE7D,OAAO8D,WAAW,CAAC,CAAC;IACpE;IACAC,qBAAqB;QACnB,yEAAyE;QACzE7B,iBAAiBlC,OAAOmC,uBAAuB;QAE/CrB,WAAW,CAAC,eAAe,EAAEd,OAAOmC,uBAAuB,CAAC,CAAC;IAC/D;IACA7B,QAAQ;QACN,GAAGR,iBAAiB4D,WAAW;QAE/B,iCAAiC;QACjChD,SAAS;QACT,sBAAsB;QACtB,sBAAsB;QACtBsD,WAAW;QACXlC,SAAS;QACTC,YAAY;IACd;IACAkC,sBAAsB;QACpB,oEAAoE;QACpE,sBAAsB;IACxB;IACA1D,cAAc;QACZuB,SAAS;QACTC,YAAY;QACZ,GAAGjC,iBAAiBoE,QAAQ;IAC9B;AACF;AAEA,MAAMC,wBAAwBzE,WAAW;IACvCS,eAAe;QACbO,SAAS;QACTuB,cAAcjC,OAAOoE,eAAe;QACpC,GAAGrE,wBAAwB;YAAEqD,OAAO;gBAAEC,eAAerD,OAAOoE,eAAe;YAAC;QAAE,EAAE;IAClF;IACA9D,QAAQ;QACN,GAAGR,iBAAiBuE,cAAc;IACpC;AACF;AAEA,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGD;IAE3B,MAAME,SAAS5C;IACf,MAAM6C,kBAAkBjE;IACxB,MAAMkE,qBAAqBR;IAC3BI,MAAMrE,IAAI,CAAC0E,SAAS,GAAGhF,aAAaK,wBAAwBC,IAAI,EAAEwE,iBAAiBH,MAAMrE,IAAI,CAAC0E,SAAS;IACvGL,MAAMpE,aAAa,CAACyE,SAAS,GAAGhF,aAC9BK,wBAAwBE,aAAa,EACrCsE,OAAOtE,aAAa,EACpBqE,kBAAkBG,mBAAmBxE,aAAa,EAClDoE,MAAMpE,aAAa,CAACyE,SAAS;IAE/B,IAAIL,MAAMnE,IAAI,EAAE;QACdmE,MAAMnE,IAAI,CAACwE,SAAS,GAAGhF,aAAaK,wBAAwBG,IAAI,EAAEqE,OAAOrE,IAAI,EAAEmE,MAAMnE,IAAI,CAACwE,SAAS;IACrG;IACA,IAAIL,MAAMlE,QAAQ,EAAE;QAClBkE,MAAMlE,QAAQ,CAACuE,SAAS,GAAGhF,aACzBK,wBAAwBI,QAAQ,EAChCoE,OAAOpE,QAAQ,EACfkE,MAAMlE,QAAQ,CAACuE,SAAS;IAE5B;IACAL,MAAMjE,MAAM,CAACsE,SAAS,GAAGhF,aACvBK,wBAAwBK,MAAM,EAC9BmE,OAAOnE,MAAM,EACb,CAACiE,MAAMhE,YAAY,IAAIkE,OAAOR,oBAAoB,EAClDO,kBAAkBG,mBAAmBrE,MAAM,EAC3CiE,MAAMjE,MAAM,CAACsE,SAAS;IAExB,IAAIL,MAAMhE,YAAY,EAAE;QACtBgE,MAAMhE,YAAY,CAACqE,SAAS,GAAGhF,aAC7BK,wBAAwBM,YAAY,EACpCkE,OAAOlE,YAAY,EACnBgE,MAAMhE,YAAY,CAACqE,SAAS;IAEhC;IACA,IAAIL,MAAM/D,OAAO,EAAE;QACjB+D,MAAM/D,OAAO,CAACoE,SAAS,GAAGhF,aACxBK,wBAAwBO,OAAO,EAC/BiE,OAAOjE,OAAO,EACd+D,MAAMlE,QAAQ,IAAIoE,OAAOV,mBAAmB,EAC5CQ,MAAM/D,OAAO,CAACoE,SAAS;IAE3B;IAEA,OAAOL;AACT,EAAE"}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { usePromptStarterList_unstable } from './usePromptStarterList';
+import { renderPromptStarterList_unstable } from './renderPromptStarterList';
+import { usePromptStarterListStyles_unstable } from './usePromptStarterListStyles.styles';
+import { usePromptStarterListContextValues } from './usePromptStarterListContextValues';
+export const PromptStarterList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = usePromptStarterList_unstable(props, ref);
+    const contextValues = usePromptStarterListContextValues(state);
+    usePromptStarterListStyles_unstable(state);
+    return renderPromptStarterList_unstable(state, contextValues);
+});
+PromptStarterList.displayName = 'PromptStarterList';

package/lib/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":["React","usePromptStarterList_unstable","renderPromptStarterList_unstable","usePromptStarterListStyles_unstable","usePromptStarterListContextValues","PromptStarterList","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAG1F,SAASC,iCAAiC,QAAQ,sCAAsC;AAExF,OAAO,MAAMC,kCAAiEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQR,8BAA8BM,OAAOC;IACnD,MAAME,gBAAgBN,kCAAkCK;IAExDN,oCAAoCM;IACpC,OAAOP,iCAAiCO,OAAOC;AACjD,GAAG;AAEHL,kBAAkBM,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+export { };

package/lib/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  actions?: Slot<'span'>;\n  expandButton?: Slot<typeof Button>;\n};\n\n/**\n * PromptStarterList Props\n */\nexport type PromptStarterListProps = ComponentProps<Partial<PromptStarterListSlots>, 'gridWrapper'> &\n  DesignVersion & {\n    /**\n     * Text for the expand button when the list is collapsed.\n     *\n     * default: \"Show more\"\n     */\n    expandButtonLabel?: string;\n    /**\n     * Text for the expand button when the list is expanded.\n     *\n     * default: \"Show less\"\n     */\n    collapseButtonLabel?: string;\n    /**\n     * Arrow navigation options. This can be used to customize Tabster's direction,\n     * tab behavior, and memoization options.\n     *\n     * default: {  axis: 'horizontal', memorizeCurrent: true }\n     */\n    arrowNavigationOptions?: UseArrowNavigationGroupOptions;\n\n    /**\n     * Whether to animate the entrance of its items when it first mounts.\n     *\n     * @default true\n     */\n    animateOnMount?: boolean;\n  };\n\n/**\n * State used in rendering PromptStarterList\n */\nexport type PromptStarterListState = ComponentState<PromptStarterListSlots> &\n  Required<Pick<PromptStarterListProps, 'designVersion'>> & {\n    numberOfColumns: number;\n    isExpanded?: boolean;\n  };\n\nexport type PromptStarterListContextValue = Pick<PromptStarterListState, 'numberOfColumns' | 'isExpanded'>;\n"],"names":[],"rangeMappings":"","mappings":"AA0DA,WAA2G"}

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

@@ -0,0 +1,4 @@
+export { PromptStarterList } from './PromptStarterList';
+export { renderPromptStarterList_unstable } from './renderPromptStarterList';
+export { usePromptStarterList_unstable } from './usePromptStarterList';
+export { promptStarterListClassNames, usePromptStarterListStyles_unstable } from './usePromptStarterListStyles.styles';

package/lib/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","renderPromptStarterList_unstable","usePromptStarterList_unstable","promptStarterListClassNames","usePromptStarterListStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;AAOxD,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,2BAA2B,EAAEC,mCAAmC,QAAQ,sCAAsC"}

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

@@ -0,0 +1,22 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots, PresenceGroup } from '@fluentui/react-components';
+import { PromptStarterListProvider } from '../../../contexts/PromptStarterListContext';
+/**
+ * Render the final JSX of PromptStarterList
+ */ export const renderPromptStarterList_unstable = (state, contextValue)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(PromptStarterListProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsxs(state.root, {
+            children: [
+                /*#__PURE__*/ _jsx(PresenceGroup, {
+                    children: /*#__PURE__*/ _jsx(state.gridWrapper, {
+                        children: state.root.children
+                    })
+                }),
+                state.actions && /*#__PURE__*/ _jsx(state.actions, {}),
+                state.expandButton && /*#__PURE__*/ _jsx(state.expandButton, {})
+            ]
+        })
+    });
+};

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