@fluentui-copilot/react-prompt-starter 0.10.2 → 0.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/CHANGELOG.json +31 -1
  2. package/CHANGELOG.md +20 -2
  3. package/dist/index.d.ts +1 -1
  4. package/lib/PromptStarter.js +0 -1
  5. package/lib/PromptStarterList.js +0 -1
  6. package/lib/PromptStarterV2.js +0 -1
  7. package/lib/components/PromptStarter/PromptStarter.js +5 -6
  8. package/lib/components/PromptStarter/PromptStarter.types.js +1 -2
  9. package/lib/components/PromptStarter/index.js +0 -1
  10. package/lib/components/PromptStarter/renderPromptStarter.js +16 -9
  11. package/lib/components/PromptStarter/usePromptStarter.js +42 -44
  12. package/lib/components/PromptStarter/usePromptStarterStyles.styles.raw.js +94 -0
  13. package/lib/components/PromptStarter/usePromptStarterStyles.styles.raw.js.map +1 -0
  14. package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.js +5 -6
  15. package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.types.js +1 -2
  16. package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.types.js.map +1 -1
  17. package/lib/components/PromptStarterV2/PromptStarter/index.js +0 -1
  18. package/lib/components/PromptStarterV2/PromptStarter/promptStarterMotion.js +61 -50
  19. package/lib/components/PromptStarterV2/PromptStarter/renderPromptStarter.js +15 -9
  20. package/lib/components/PromptStarterV2/PromptStarter/renderPromptStarter.js.map +1 -1
  21. package/lib/components/PromptStarterV2/PromptStarter/usePromptStarter.js +50 -51
  22. package/lib/components/PromptStarterV2/PromptStarter/usePromptStarter.js.map +1 -1
  23. package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js +81 -9
  24. package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js.map +1 -1
  25. package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js +131 -0
  26. package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js.map +1 -0
  27. package/lib/components/PromptStarterV2/PromptStarterList/PromptStarterList.js +5 -6
  28. package/lib/components/PromptStarterV2/PromptStarterList/PromptStarterList.types.js +1 -2
  29. package/lib/components/PromptStarterV2/PromptStarterList/index.js +0 -1
  30. package/lib/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js +15 -14
  31. package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js +97 -97
  32. package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListContextValues.js +4 -7
  33. package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js +61 -0
  34. package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js.map +1 -0
  35. package/lib/contexts/PromptStarterListContext.js +2 -3
  36. package/lib/index.js +0 -1
  37. package/lib-commonjs/PromptStarter.js +0 -1
  38. package/lib-commonjs/PromptStarterList.js +0 -1
  39. package/lib-commonjs/PromptStarterV2.js +0 -1
  40. package/lib-commonjs/components/PromptStarter/PromptStarter.js +1 -1
  41. package/lib-commonjs/components/PromptStarter/PromptStarter.js.map +1 -1
  42. package/lib-commonjs/components/PromptStarter/PromptStarter.types.js +0 -1
  43. package/lib-commonjs/components/PromptStarter/index.js +0 -1
  44. package/lib-commonjs/components/PromptStarter/renderPromptStarter.js +1 -1
  45. package/lib-commonjs/components/PromptStarter/renderPromptStarter.js.map +1 -1
  46. package/lib-commonjs/components/PromptStarter/usePromptStarter.js +1 -1
  47. package/lib-commonjs/components/PromptStarter/usePromptStarter.js.map +1 -1
  48. package/lib-commonjs/components/PromptStarter/usePromptStarterStyles.styles.raw.js +112 -0
  49. package/lib-commonjs/components/PromptStarter/usePromptStarterStyles.styles.raw.js.map +1 -0
  50. package/lib-commonjs/components/PromptStarterV2/PromptStarter/PromptStarter.js +1 -1
  51. package/lib-commonjs/components/PromptStarterV2/PromptStarter/PromptStarter.js.map +1 -1
  52. package/lib-commonjs/components/PromptStarterV2/PromptStarter/PromptStarter.types.js +0 -1
  53. package/lib-commonjs/components/PromptStarterV2/PromptStarter/PromptStarter.types.js.map +1 -1
  54. package/lib-commonjs/components/PromptStarterV2/PromptStarter/index.js +0 -1
  55. package/lib-commonjs/components/PromptStarterV2/PromptStarter/promptStarterMotion.js +1 -1
  56. package/lib-commonjs/components/PromptStarterV2/PromptStarter/promptStarterMotion.js.map +1 -1
  57. package/lib-commonjs/components/PromptStarterV2/PromptStarter/renderPromptStarter.js +2 -2
  58. package/lib-commonjs/components/PromptStarterV2/PromptStarter/renderPromptStarter.js.map +1 -1
  59. package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarter.js +9 -8
  60. package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarter.js.map +1 -1
  61. package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js +145 -10
  62. package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js.map +1 -1
  63. package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js +149 -0
  64. package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js.map +1 -0
  65. package/lib-commonjs/components/PromptStarterV2/PromptStarterList/PromptStarterList.js +1 -1
  66. package/lib-commonjs/components/PromptStarterV2/PromptStarterList/PromptStarterList.js.map +1 -1
  67. package/lib-commonjs/components/PromptStarterV2/PromptStarterList/PromptStarterList.types.js +0 -1
  68. package/lib-commonjs/components/PromptStarterV2/PromptStarterList/index.js +0 -1
  69. package/lib-commonjs/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js +1 -1
  70. package/lib-commonjs/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js.map +1 -1
  71. package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js +1 -1
  72. package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js.map +1 -1
  73. package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListContextValues.js +1 -1
  74. package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListContextValues.js.map +1 -1
  75. package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js +77 -0
  76. package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js.map +1 -0
  77. package/lib-commonjs/contexts/PromptStarterListContext.js +1 -1
  78. package/lib-commonjs/contexts/PromptStarterListContext.js.map +1 -1
  79. package/lib-commonjs/index.js +0 -1
  80. package/package.json +3 -3
@@ -16,7 +16,7 @@ const renderPromptStarter_unstable = (state)=>{
16
16
  children: [
17
17
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.primaryAction, {
18
18
  children: [
19
- /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
19
+ state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
20
20
  /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prompt, {}),
21
21
  state.reasonMarker && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.reasonMarker, {})
22
22
  ]
@@ -24,4 +24,4 @@ const renderPromptStarter_unstable = (state)=>{
24
24
  state.actions && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.actions, {})
25
25
  ]
26
26
  });
27
- }; //# sourceMappingURL=renderPromptStarter.js.map
27
+ };
@@ -1 +1 @@
1
- {"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState) => {\n assertSlots<PromptStarterSlots>(state);\n\n return (\n <state.root>\n <state.primaryAction>\n <state.icon />\n <state.prompt />\n {state.reasonMarker && <state.reasonMarker />}\n </state.primaryAction>\n {state.actions && <state.actions />}\n </state.root>\n );\n};\n"],"names":["renderPromptStarter_unstable","state","assertSlots","_jsxs","root","_jsx","primaryAction","prompt","reasonMarker"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;iCAE4B;AAGrB,MAAMA,+BAA+BC,CAAAA;oCAC1CC,EAAAA;WAEA,WAAA,GAAAC,IAAAA,gBACE,EAAAF,MAACA,IAAMG,EAAAA;;;;+BACL,GAAAC,IAAAA,eAACJ,EAAAA,MAAMK,IAAAA,EAAAA,CAAAA;oBAAa,WAAA,GAAAD,IAAAA,eAAA,EAAAJ,MAAAM,MAAA,EAAA,CAAA;oBAAAN,MAAAO,YAAA,IAAA,WAAA,GAAAH,IAAAA,eAAA,EAAAJ,MAAAO,YAAA,EAAA,CAAA;iBAAA;;;;;kDAGC"}
1
+ {"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState) => {\n assertSlots<PromptStarterSlots>(state);\n\n return (\n <state.root>\n <state.primaryAction>\n {state.icon && <state.icon />}\n <state.prompt />\n {state.reasonMarker && <state.reasonMarker />}\n </state.primaryAction>\n {state.actions && <state.actions />}\n </state.root>\n );\n};\n"],"names":["renderPromptStarter_unstable","state","assertSlots","_jsxs","root","primaryAction","icon","_jsx","prompt","reasonMarker","actions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;iCAE4B;AAGrB,MAAMA,+BAA+B,CAACC;IAC3CC,IAAAA,4BAAAA,EAAgCD;IAEhC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTD,IAAAA,gBAAA,EAACF,MAAMI,aAAa,EAAA;;oBACjBJ,MAAMK,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,IAAI,EAAA,CAAA;kCAC1BC,IAAAA,eAAA,EAACN,MAAMO,MAAM,EAAA,CAAA;oBACZP,MAAMQ,YAAY,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACN,MAAMQ,YAAY,EAAA,CAAA;;;YAE3CR,MAAMS,OAAO,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACN,MAAMS,OAAO,EAAA,CAAA;;;AAGtC"}
@@ -14,8 +14,9 @@ const usePromptStarter_unstable = (props, ref)=>{
14
14
  const id = (0, _reactcomponents.useId)('prompt-starter');
15
15
  const focusAttrs = (0, _reactcomponents.useFocusableGroup)();
16
16
  const numberOfColumns = (0, _PromptStarterListContext.usePromptStarterListContext)((ctx)=>ctx.numberOfColumns);
17
+ const isSingleColumn = numberOfColumns === 1;
17
18
  const state = {
18
- isSingleColumn: numberOfColumns === 1,
19
+ isSingleColumn,
19
20
  components: {
20
21
  root: 'div',
21
22
  primaryAction: 'button',
@@ -36,27 +37,27 @@ const usePromptStarter_unstable = (props, ref)=>{
36
37
  primaryAction: _reactcomponents.slot.always(props.primaryAction, {
37
38
  elementType: 'button'
38
39
  }),
39
- icon: _reactcomponents.slot.always(props.icon, {
40
+ icon: !isSingleColumn ? _reactcomponents.slot.optional(props.icon, {
40
41
  defaultProps: {
41
42
  id: `${id}-icon`
42
43
  },
43
44
  elementType: 'span'
44
- }),
45
+ }) : undefined,
45
46
  prompt: _reactcomponents.slot.always(props.prompt, {
46
47
  defaultProps: {
47
48
  id: `${id}-prompt`
48
49
  },
49
50
  elementType: 'span'
50
51
  }),
51
- reasonMarker: _reactcomponents.slot.optional(props.reasonMarker, {
52
+ reasonMarker: !isSingleColumn ? _reactcomponents.slot.optional(props.reasonMarker, {
52
53
  defaultProps: {
53
54
  id: `${id}-reasonMarker`
54
55
  },
55
56
  elementType: 'span'
56
- }),
57
- actions: _reactcomponents.slot.optional(props.actions, {
57
+ }) : undefined,
58
+ actions: !isSingleColumn ? _reactcomponents.slot.optional(props.actions, {
58
59
  elementType: 'span'
59
- })
60
+ }) : undefined
60
61
  };
61
62
  return state;
62
- }; //# sourceMappingURL=usePromptStarter.js.map
63
+ };
@@ -1 +1 @@
1
- {"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useFocusableGroup, useId } from '@fluentui/react-components';\nimport { usePromptStarterListContext } from '../../../contexts/PromptStarterListContext';\nimport type { PromptStarterProps, PromptStarterState } from './PromptStarter.types';\n\n/**\n * Create the state required to render PromptStarter.\n *\n * The returned state can be modified with hooks such as usePromptStarterStyles_unstable,\n * before being passed to renderPromptStarter_unstable.\n *\n * @param props - props from this instance of PromptStarter\n * @param ref - reference to root HTMLElement of PromptStarter\n */\nexport const usePromptStarter_unstable = (\n props: PromptStarterProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptStarterState => {\n const id = useId('prompt-starter');\n const focusAttrs = useFocusableGroup();\n\n const numberOfColumns = usePromptStarterListContext(ctx => ctx.numberOfColumns);\n\n const state: PromptStarterState = {\n isSingleColumn: numberOfColumns === 1,\n components: {\n root: 'div',\n primaryAction: 'button',\n icon: 'span',\n prompt: 'span',\n reasonMarker: 'span',\n actions: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n 'aria-labelledby': `${id}-prompt`,\n 'aria-describedby': `${id}-icon, ${id}-reasonMarker`,\n ...focusAttrs,\n ...props,\n }),\n { elementType: 'div' },\n ),\n primaryAction: slot.always(props.primaryAction, {\n elementType: 'button',\n }),\n icon: slot.always(props.icon, {\n defaultProps: { id: `${id}-icon` },\n elementType: 'span',\n }),\n prompt: slot.always(props.prompt, {\n defaultProps: { id: `${id}-prompt` },\n elementType: 'span',\n }),\n reasonMarker: slot.optional(props.reasonMarker, {\n defaultProps: { id: `${id}-reasonMarker` },\n elementType: 'span',\n }),\n actions: slot.optional(props.actions, { elementType: 'span' }),\n };\n\n return state;\n};\n"],"names":["id","props","ref","focusAttrs","numberOfColumns","usePromptStarterListContext","ctx","isSingleColumn","root","primaryAction","prompt","reasonMarker","actions","elementType","defaultProps","icon","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBQA;;;eAAAA;;;iCAjBiE;0CAC7B;AAgB1C,MAAMA,4BAAW,CAAAC,OAAAC;UACjBF,KAAMG,IAAAA,sBAAAA,EAAAA;UAENA,aAAMC,IAAAA,kCAAkBC;UAExBD,kBAAkCC,IAAAA,qDAAA,EAAAC,CAAAA,MAAAA,IAAAF,eAAA;UAChCG,QAAAA;wBACYH,oBAAA;oBACVI;kBACAC;2BACM;kBACNC;oBACAC;0BACAC;qBACF;;mCAGIV,CAAAA,MAAAA,CAAAA,IAAAA,yCAAAA,EAAAA,OAAAA;;+BAEA,CAAA,EAAAF,GAAA,OAA0B,CAAA;gCACb,CAAA,EAAAA,GAAA,OAAA,EAAAA,GAAA,aAAA,CAAA;yBACVC;eACLA,KACA;;yBAAqB;;uBAGrBY,qBAAAA,CAAAA,MAAa,CAAAZ,MAAAQ,aAAA,EAAA;yBACf;;mCAEEK,CAAAA,MAAAA,CAAAA,MAAcC,IAAA,EAAA;0BAAM;oBAAa,CAAA,EAAAf,GAAA,KAAA,CAAA;;yBAEnC;;gBAEEc,qBAAAA,CAAAA,MAAAA,CAAAA,MAAcJ,MAAA,EAAA;0BAAM;oBAAe,CAAA,EAAAV,GAAA,OAAA,CAAA;;yBAErC;;sBAEEc,qBAAAA,CAAAA,QAAc,CAAAb,MAAAU,YAAA,EAAA;0BAAM;oBAAqB,CAAA,EAAAX,GAAA,aAAA,CAAA;;yBAE3C;;iBACwCa,qBAAAA,CAAAA,QAAa,CAAAZ,MAAAW,OAAA,EAAA;yBAAO;QAC9D;;IAGA,OAAAI"}
1
+ {"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useFocusableGroup, useId } from '@fluentui/react-components';\nimport { usePromptStarterListContext } from '../../../contexts/PromptStarterListContext';\nimport type { PromptStarterProps, PromptStarterState } from './PromptStarter.types';\n\n/**\n * Create the state required to render PromptStarter.\n *\n * The returned state can be modified with hooks such as usePromptStarterStyles_unstable,\n * before being passed to renderPromptStarter_unstable.\n *\n * @param props - props from this instance of PromptStarter\n * @param ref - reference to root HTMLElement of PromptStarter\n */\nexport const usePromptStarter_unstable = (\n props: PromptStarterProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptStarterState => {\n const id = useId('prompt-starter');\n const focusAttrs = useFocusableGroup();\n\n const numberOfColumns = usePromptStarterListContext(ctx => ctx.numberOfColumns);\n\n const isSingleColumn = numberOfColumns === 1;\n\n const state: PromptStarterState = {\n isSingleColumn,\n components: {\n root: 'div',\n primaryAction: 'button',\n icon: 'span',\n prompt: 'span',\n reasonMarker: 'span',\n actions: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n 'aria-labelledby': `${id}-prompt`,\n 'aria-describedby': `${id}-icon, ${id}-reasonMarker`,\n ...focusAttrs,\n ...props,\n }),\n { elementType: 'div' },\n ),\n primaryAction: slot.always(props.primaryAction, {\n elementType: 'button',\n }),\n icon: !isSingleColumn\n ? slot.optional(props.icon, {\n defaultProps: { id: `${id}-icon` },\n elementType: 'span',\n })\n : undefined,\n prompt: slot.always(props.prompt, {\n defaultProps: { id: `${id}-prompt` },\n elementType: 'span',\n }),\n reasonMarker: !isSingleColumn\n ? slot.optional(props.reasonMarker, {\n defaultProps: { id: `${id}-reasonMarker` },\n elementType: 'span',\n })\n : undefined,\n actions: !isSingleColumn ? slot.optional(props.actions, { elementType: 'span' }) : undefined,\n };\n\n return state;\n};\n"],"names":["usePromptStarter_unstable","props","ref","id","useId","focusAttrs","useFocusableGroup","numberOfColumns","usePromptStarterListContext","ctx","isSingleColumn","state","components","root","primaryAction","icon","prompt","reasonMarker","actions","slot","always","getIntrinsicElementProps","elementType","optional","defaultProps","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;iCAb4D;0CAC7B;AAYrC,MAAMA,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,KAAKC,IAAAA,sBAAAA,EAAM;IACjB,MAAMC,aAAaC,IAAAA,kCAAAA;IAEnB,MAAMC,kBAAkBC,IAAAA,qDAAAA,EAA4BC,CAAAA,MAAOA,IAAIF,eAAe;IAE9E,MAAMG,iBAAiBH,oBAAoB;IAE3C,MAAMI,QAA4B;QAChCD;QACAE,YAAY;YACVC,MAAM;YACNC,eAAe;YACfC,MAAM;YACNC,QAAQ;YACRC,cAAc;YACdC,SAAS;QACX;QACAL,MAAMM,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,OAAO;YAC9BnB;YACA,mBAAmB,CAAC,EAAEC,GAAG,OAAO,CAAC;YACjC,oBAAoB,CAAC,EAAEA,GAAG,OAAO,EAAEA,GAAG,aAAa,CAAC;YACpD,GAAGE,UAAU;YACb,GAAGJ,KAAK;QACV,IACA;YAAEqB,aAAa;QAAM;QAEvBR,eAAeK,qBAAAA,CAAKC,MAAM,CAACnB,MAAMa,aAAa,EAAE;YAC9CQ,aAAa;QACf;QACAP,MAAM,CAACL,iBACHS,qBAAAA,CAAKI,QAAQ,CAACtB,MAAMc,IAAI,EAAE;YACxBS,cAAc;gBAAErB,IAAI,CAAC,EAAEA,GAAG,KAAK,CAAC;YAAC;YACjCmB,aAAa;QACf,KACAG;QACJT,QAAQG,qBAAAA,CAAKC,MAAM,CAACnB,MAAMe,MAAM,EAAE;YAChCQ,cAAc;gBAAErB,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAAC;YACnCmB,aAAa;QACf;QACAL,cAAc,CAACP,iBACXS,qBAAAA,CAAKI,QAAQ,CAACtB,MAAMgB,YAAY,EAAE;YAChCO,cAAc;gBAAErB,IAAI,CAAC,EAAEA,GAAG,aAAa,CAAC;YAAC;YACzCmB,aAAa;QACf,KACAG;QACJP,SAAS,CAACR,iBAAiBS,qBAAAA,CAAKI,QAAQ,CAACtB,MAAMiB,OAAO,EAAE;YAAEI,aAAa;QAAO,KAAKG;IACrF;IAEA,OAAOd;AACT"}
@@ -205,9 +205,6 @@ const useStyles = (0, _reactcomponents.__styles)({
205
205
  Be2twd7: "f13mqy1h",
206
206
  Bhrd7zp: "figsok6",
207
207
  Bg96gwp: "fcpl73t"
208
- },
209
- singleColumnStyles: {
210
- mc9l5x: "fjseox"
211
208
  }
212
209
  }, {
213
210
  d: [
@@ -332,8 +329,143 @@ const useStyles = (0, _reactcomponents.__styles)({
332
329
  ".f1sil6mw{overflow-y:hidden;}",
333
330
  ".f13mqy1h{font-size:var(--fontSizeBase100);}",
334
331
  ".figsok6{font-weight:var(--fontWeightRegular);}",
335
- ".fcpl73t{line-height:var(--lineHeightBase100);}",
336
- ".fjseox{display:none;}"
332
+ ".fcpl73t{line-height:var(--lineHeightBase100);}"
333
+ ],
334
+ f: [
335
+ ".ftqa4ok:focus{outline-style:none;}"
336
+ ],
337
+ i: [
338
+ ".f2hkw1w:focus-visible{outline-style:none;}"
339
+ ],
340
+ m: [
341
+ [
342
+ "@media (forced-colors: active){.f1j6vpng[data-fui-focus-visible]::after{border-top-color:Highlight;}}",
343
+ {
344
+ m: "(forced-colors: active)"
345
+ }
346
+ ],
347
+ [
348
+ "@media (forced-colors: active){.f1ffjurs[data-fui-focus-visible]::after{border-left-color:Highlight;}.f1pniga2[data-fui-focus-visible]::after{border-right-color:Highlight;}}",
349
+ {
350
+ m: "(forced-colors: active)"
351
+ }
352
+ ],
353
+ [
354
+ "@media (forced-colors: active){.f987i1v[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}",
355
+ {
356
+ m: "(forced-colors: active)"
357
+ }
358
+ ]
359
+ ]
360
+ });
361
+ const useSingleColumnStyles = (0, _reactcomponents.__styles)({
362
+ primaryAction: {
363
+ Beyfa6y: 0,
364
+ Bbmb7ep: 0,
365
+ Btl43ni: 0,
366
+ B7oj6ja: 0,
367
+ Dimara: "f1jxijnj",
368
+ Brovlpu: "ftqa4ok",
369
+ B486eqv: "f2hkw1w",
370
+ B8q5s1w: "f8hki3x",
371
+ Bci5o5g: [
372
+ "f1d2448m",
373
+ "ffh67wi"
374
+ ],
375
+ n8qw10: "f1bjia2o",
376
+ Bdrgwmp: [
377
+ "ffh67wi",
378
+ "f1d2448m"
379
+ ],
380
+ Bqhya38: "f1j6vpng",
381
+ Bwxa6fj: [
382
+ "f1pniga2",
383
+ "f1ffjurs"
384
+ ],
385
+ Bdhvstf: "f987i1v",
386
+ B7zbvrb: [
387
+ "f1ffjurs",
388
+ "f1pniga2"
389
+ ],
390
+ Bm4h7ae: "f15bsgw9",
391
+ B7ys5i9: "f14e48fq",
392
+ Busjfv9: "f18yb2kv",
393
+ Bhk32uz: "fd6o370",
394
+ f6g5ot: 0,
395
+ Boxcth7: 0,
396
+ Bhdgwq3: 0,
397
+ hgwjuy: 0,
398
+ Bshpdp8: 0,
399
+ Bsom6fd: 0,
400
+ Blkhhs4: 0,
401
+ Bonggc9: 0,
402
+ Ddfuxk: 0,
403
+ i03rao: 0,
404
+ kclons: 0,
405
+ clg4pj: 0,
406
+ Bpqj9nj: 0,
407
+ B6dhp37: 0,
408
+ Bf4ptjt: 0,
409
+ Bqtpl0w: 0,
410
+ i4rwgc: "ffwy5si",
411
+ Dah5zi: 0,
412
+ B1tsrr9: 0,
413
+ qqdqy8: 0,
414
+ Bkh64rk: 0,
415
+ e3fwne: "f178id4l",
416
+ J0r882: "f57olzd",
417
+ Bule8hv: [
418
+ "f4stah7",
419
+ "fs1por5"
420
+ ],
421
+ Bjwuhne: "f480a47",
422
+ Ghsupd: [
423
+ "fs1por5",
424
+ "f4stah7"
425
+ ]
426
+ },
427
+ prompt: {
428
+ Bahqtrf: "fk6fouc",
429
+ Be2twd7: "fy9rknc",
430
+ Bhrd7zp: "fl43uef",
431
+ Bg96gwp: "fwrc4pm"
432
+ }
433
+ }, {
434
+ d: [
435
+ [
436
+ ".f1jxijnj{border-radius:var(--borderRadius2XL);}",
437
+ {
438
+ p: -1
439
+ }
440
+ ],
441
+ ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}",
442
+ ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}",
443
+ ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}",
444
+ ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}",
445
+ ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}",
446
+ ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}",
447
+ ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}",
448
+ ".fd6o370[data-fui-focus-visible]::after{z-index:1;}",
449
+ [
450
+ ".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}",
451
+ {
452
+ p: -2
453
+ }
454
+ ],
455
+ [
456
+ ".f178id4l[data-fui-focus-visible]::after{border-radius:var(--borderRadius2XL);}",
457
+ {
458
+ p: -1
459
+ }
460
+ ],
461
+ ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}",
462
+ ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}",
463
+ ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}",
464
+ ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}",
465
+ ".fk6fouc{font-family:var(--fontFamilyBase);}",
466
+ ".fy9rknc{font-size:var(--fontSizeBase200);}",
467
+ ".fl43uef{font-weight:var(--fontWeightSemibold);}",
468
+ ".fwrc4pm{line-height:var(--lineHeightBase200);}"
337
469
  ],
338
470
  f: [
339
471
  ".ftqa4ok:focus{outline-style:none;}"
@@ -367,15 +499,18 @@ const usePromptStarterStyles_unstable = (state)=>{
367
499
  const { isSingleColumn } = state;
368
500
  const styles = useStyles();
369
501
  const rootResetStyles = useRootResetStyles();
502
+ const singleColumnStyles = useSingleColumnStyles();
370
503
  state.root.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.root, rootResetStyles, state.root.className);
371
- state.primaryAction.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.primaryAction, styles.primaryAction, state.primaryAction.className);
372
- state.icon.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.icon, styles.icon, isSingleColumn && styles.singleColumnStyles, state.icon.className);
373
- state.prompt.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);
504
+ state.primaryAction.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.primaryAction, styles.primaryAction, isSingleColumn && singleColumnStyles.primaryAction, state.primaryAction.className);
505
+ if (state.icon) {
506
+ state.icon.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.icon, styles.icon, state.icon.className);
507
+ }
508
+ state.prompt.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.prompt, styles.prompt, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
374
509
  if (state.reasonMarker) {
375
- state.reasonMarker.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.reasonMarker, styles.reasonMarker, isSingleColumn && styles.singleColumnStyles, state.reasonMarker.className);
510
+ state.reasonMarker.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.reasonMarker, styles.reasonMarker, state.reasonMarker.className);
376
511
  }
377
512
  if (state.actions) {
378
- state.actions.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.actions, styles.actions, isSingleColumn && styles.singleColumnStyles, state.actions.className);
513
+ state.actions.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.actions, styles.actions, state.actions.className);
379
514
  }
380
515
  return state;
381
516
  }; //# sourceMappingURL=usePromptStarterStyles.styles.js.map
@@ -1 +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 // Hide icon, actions, and reason marker in single column appearance\n singleColumnStyles: {\n display: 'none',\n },\n});\n\nexport const usePromptStarterStyles_unstable = (state: PromptStarterState): PromptStarterState => {\n 'use no memo';\n\n const { isSingleColumn } = state;\n\n const styles = useStyles();\n const rootResetStyles = useRootResetStyles();\n state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n state.primaryAction.className = mergeClasses(\n promptStarterClassNames.primaryAction,\n styles.primaryAction,\n state.primaryAction.className,\n );\n state.icon.className = mergeClasses(\n promptStarterClassNames.icon,\n styles.icon,\n isSingleColumn && styles.singleColumnStyles,\n state.icon.className,\n );\n state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);\n if (state.reasonMarker) {\n state.reasonMarker.className = mergeClasses(\n promptStarterClassNames.reasonMarker,\n styles.reasonMarker,\n isSingleColumn && styles.singleColumnStyles,\n state.reasonMarker.className,\n );\n }\n if (state.actions) {\n state.actions.className = mergeClasses(\n promptStarterClassNames.actions,\n styles.actions,\n isSingleColumn && styles.singleColumnStyles,\n state.actions.className,\n );\n }\n\n return state;\n};\n"],"names":["promptStarterClassNames","root","primaryAction","icon","prompt","reasonMarker","actions","useRootResetStyles","makeResetStyles","display","__styles","gridTemplateColumns","gridTemplateRows","minWidth","h3tjnc","Bw0ie65","boxShadow","transform","transition","Beyfa6y","Bbmb7ep","Bahqtrf","Bceei9c","oeaueh","clip","height","margin","overflow","padding","width","position","opacity","ibv6hh","icvyot","vrafjx","useStyles","makeStyles","gridRow","gridColumn","flexDirection","borderRadius","backgroundColor","color","fontFamily","tokens","fontFamilyBase","cursor","outlineStyle","textAlign","rowGap","spacingHorizontalS","shorthands","border","strokeWidthThin","createFocusOutlineStyle","style","Boxcth7","primaryActionHovered","Blkhhs4","alignItems","minHeight","clg4pj","Bkh64rk","typographyStyles","E5pizo","Cwk7ip","B3o57yi","singleColumnStyles","Bi2q7bf","mc9l5x","Bt984gj","isSingleColumn","sshi5w","styles","state","B6of3ja","className","qhf8xq","nk6f5a","Br312pm"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,uBAAAA;eAAAA;;;;;;iCANY;AAMlB,MAAMA,0BAA8D;UACzEC;mBACAC;UACAC;YACAC;kBACAC;aACAC;AACF;AAEA,MAAMC,qBAAqBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;CAAA;MACzCC,YAASC,IAAAA,yBAAA,EAAA;mBACTC;QACAC,QAAAA;QACAC,QAAAA;QAEAC,QAAA;QACAC,SAAA;iBACO;iBACHC;gBACAC;iBACAC;gBACF;QACFC,SAAA;QACAC,SAAA;iBACO;iBACHJ;gBACAC;gBACAC;gBACF;QACFG,SAAA;QAEAC,SAAA;QACAC,QAAA;gBACI;YAAG;YAAEvB;SAAAA;iBACLwB;iBACAC;gBACAC;gBACAC;gBACAC;iBACAC;iBACAC;iBACAC;YAAAA;YAAS;SAAA;iBACX;QACFC,QAAA;YAAA;YAAA;SAAA;QACFC,QAAA;QAEAC,QAAMC;YAAAA;YAAYC;SAAW;QAC3BlC,QAAAA;gBACEmC;YAAAA;YAAS;SAAA;gBACTC;gBACA7B;YAAAA;YAAS;SAAA;iBACT8B;gBACAT;YAAAA;YAAU;SAAA;iBACVU;iBACAC;iBACAC;iBACAC;YAAAA;YAAYC;SAAOC;gBACnBC;iBACAC;YAAAA;YAAc;SAAA;iBACdC;iBACAC;YAAAA;YAAeC;SAAAA;iBACftB;iBACGuB;YAAAA;YAAWC;SAAcC;iBACzBC;iBAA0BC;;iBAA+B;gBAAI;QAClEC,SAAA;QAEAC,SAAAA;gBACEzC;iBACAC;iBACAC;QACFwC,SAAA;QAEAvD,SAAM;gBACJM;gBACAkD;gBACAC;QACFC,QAAA;QACAvD,SAAS;iBACPoB;iBACS;iBACTI;gBACAO;gBACAC;iBAEAP;gBACAb;QACF4C,SAAA;QACA1D,QAAQ;gBACH2D;iBAEH;YAAA;YAAA;SAAA;iBACAtD;gBACA;YAAA;YAAA;SAAsB;;0BAEX;QACbuD,QAAA;QACA3D,SAAAA;iBACK0D;QACLE,QAAA;QAEAC,SAAA;QACAC,SAAAA;iBACE1D;QACF2D,SAAA;IACF;IAEAjE,MAAO;QACLkE,QAAA;QAEAC,SAAQC;QAERC,QAAMC;;aAEAxE;QACNyE,QAAMxE;QAKNwE,QAAMvE;QAMNuE,QAAMtE;QACNuE,SAAID;iBACFA;YAAMrE;YAAAA;SAAauE;QAMrBC,QAAA;QACAC,QAAIJ;gBACFA;QAMF5D,QAAA;QAEAC,SAAO2D;QACPK,SAAA"}
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":["promptStarterClassNames","root","primaryAction","icon","prompt","reasonMarker","actions","useRootResetStyles","makeResetStyles","display","__styles","gridTemplateColumns","gridTemplateRows","minWidth","h3tjnc","Bw0ie65","boxShadow","transform","transition","Beyfa6y","Bbmb7ep","Bahqtrf","Bceei9c","oeaueh","clip","height","margin","overflow","padding","width","position","opacity","ibv6hh","icvyot","vrafjx","useStyles","makeStyles","gridRow","gridColumn","flexDirection","borderRadius","backgroundColor","color","fontFamily","tokens","fontFamilyBase","cursor","outlineStyle","textAlign","rowGap","spacingHorizontalS","shorthands","border","strokeWidthThin","createFocusOutlineStyle","style","Boxcth7","primaryActionHovered","Blkhhs4","alignItems","minHeight","clg4pj","Bkh64rk","typographyStyles","E5pizo","Cwk7ip","B3o57yi","Bmy1vo4","useSingleColumnStyles","Frg6f3","t21cq0","B6of3ja","usePromptStarterStyles_unstable","B74szlk","qhf8xq","isSingleColumn","nk6f5a","styles","Ijaq50","rootResetStyles","singleColumnStyles","state","Beweih1","Bn62ygk","Bkqvd7p","Bi2q7bf","Be2twd7"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,uBAAAA;eAAAA;;;;;;iCANY;AAMlB,MAAMA,0BAA8D;UACzEC;mBACAC;UACAC;YACAC;kBACAC;aACAC;AACF;AAEA,MAAMC,qBAAqBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;CAAA;MACzCC,YAASC,IAAAA,yBAAA,EAAA;mBACTC;QACAC,QAAAA;QACAC,QAAAA;QAEAC,QAAA;QACAC,SAAA;iBACO;iBACHC;gBACAC;iBACAC;gBACF;QACFC,SAAA;QACAC,SAAA;iBACO;iBACHJ;gBACAC;gBACAC;gBACF;QACFG,SAAA;QAEAC,SAAA;QACAC,QAAA;gBACI;YAAG;YAAEvB;SAAAA;iBACLwB;iBACAC;gBACAC;gBACAC;gBACAC;iBACAC;iBACAC;iBACAC;YAAAA;YAAS;SAAA;iBACX;QACFC,QAAA;YAAA;YAAA;SAAA;QACFC,QAAA;QAEAC,QAAMC;YAAAA;YAAYC;SAAW;QAC3BlC,QAAAA;gBACEmC;YAAAA;YAAS;SAAA;gBACTC;gBACA7B;YAAAA;YAAS;SAAA;iBACT8B;gBACAT;YAAAA;YAAU;SAAA;iBACVU;iBACAC;iBACAC;iBACAC;YAAAA;YAAYC;SAAOC;gBACnBC;iBACAC;YAAAA;YAAc;SAAA;iBACdC;iBACAC;YAAAA;YAAeC;SAAAA;iBACftB;iBACGuB;YAAAA;YAAWC;SAAcC;iBACzBC;iBAA0BC;;iBAA+B;gBAAI;QAClEC,SAAA;QAEAC,SAAAA;gBACEzC;iBACAC;iBACAC;QACFwC,SAAA;QAEAvD,SAAM;gBACJM;gBACAkD;gBACAC;QACFC,QAAA;QACAvD,SAAS;iBACPoB;iBACS;iBACTI;gBACAO;gBACAC;iBAEAP;gBACAb;QACF4C,SAAA;QACA1D,QAAQ;gBACH2D;iBAEH;YAAA;YAAA;SAAA;iBACAtD;gBACA;YAAA;YAAA;SAAsB;;0BAEX;QACbuD,QAAA;QACA3D,SAAAA;iBACK0D;QACLE,QAAA;QACFC,SAAA;QAEAC,SAAMC;QACJlE,SAAAA;iBACEsC;;;;iBAC4E;gBAAI;;aAElFpC;gBACK2D;QACLM,QAAA;QACFC,QAAA;QAEAC,SAAaC;QACXC,SAAA;YAAA;YAAA;SAAA;QAEAC,QAAQC;QAERC,QAAMC;QACNC,QAAMC;QACNjE,QAAMkE;QACNC,SAAMhF;QACNgF,SAAM/E;QAMNgF,SAAID;gBACFA;QACFE,SAAA;QACAF,QAAM7E;QAMN8D,SAAIe;iBACFA;QAKFG,SAAA;QACAC,SAAIJ;;YAEJ;QAEA5D,SAAO4D;QACPK,SAAA"}
@@ -0,0 +1,149 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ promptStarterClassNames: function() {
13
+ return promptStarterClassNames;
14
+ },
15
+ usePromptStarterStyles_unstable: function() {
16
+ return usePromptStarterStyles_unstable;
17
+ }
18
+ });
19
+ const _reactcomponents = require("@fluentui/react-components");
20
+ const _tokens = require("@fluentui-copilot/tokens");
21
+ const promptStarterClassNames = {
22
+ root: 'fai-PromptStarter',
23
+ primaryAction: 'fai-PromptStarter__primaryAction',
24
+ icon: 'fai-PromptStarter__icon',
25
+ prompt: 'fai-PromptStarter__prompt',
26
+ reasonMarker: 'fai-PromptStarter__reasonMarker',
27
+ actions: 'fai-PromptStarter__actions'
28
+ };
29
+ const useRootResetStyles = (0, _reactcomponents.makeResetStyles)({
30
+ display: 'grid',
31
+ gridTemplateColumns: '1fr auto',
32
+ gridTemplateRows: 'max-content auto',
33
+ minWidth: '214px',
34
+ // Apply styles to the primary action on hover / active states
35
+ '&:hover': {
36
+ [`& .${promptStarterClassNames.primaryAction}`]: {
37
+ boxShadow: _tokens.tokens.shadow16,
38
+ transform: 'scale(1.03)',
39
+ transition: `transform ${_tokens.tokens.durationNormal} ${_tokens.tokens.curveDecelerateMin}`
40
+ }
41
+ },
42
+ '&:active': {
43
+ [`& .${promptStarterClassNames.primaryAction}`]: {
44
+ boxShadow: _tokens.tokens.shadow8,
45
+ transform: 'scale(1.03)',
46
+ transition: `transform ${_tokens.tokens.durationNormal} ${_tokens.tokens.curveDecelerateMin}`
47
+ }
48
+ },
49
+ // Hide actions when not focused or hovered
50
+ ':not(:focus-within):not(:hover)': {
51
+ [`& .${promptStarterClassNames.actions}`]: {
52
+ clip: 'rect(0px, 0px, 0px, 0px)',
53
+ height: '1px',
54
+ margin: '-1px',
55
+ overflow: 'hidden',
56
+ padding: '0px',
57
+ width: '1px',
58
+ position: 'absolute',
59
+ opacity: 0
60
+ }
61
+ }
62
+ });
63
+ const useStyles = (0, _reactcomponents.makeStyles)({
64
+ primaryAction: {
65
+ gridRow: '1 / 3',
66
+ gridColumn: '1 / 3',
67
+ display: 'flex',
68
+ flexDirection: 'column',
69
+ position: 'relative',
70
+ borderRadius: '28px',
71
+ backgroundColor: _tokens.tokens.colorNeutralBackground1,
72
+ color: _tokens.tokens.colorNeutralForeground2,
73
+ fontFamily: _tokens.tokens.fontFamilyBase,
74
+ cursor: 'pointer',
75
+ outlineStyle: 'none',
76
+ textAlign: 'left',
77
+ rowGap: _tokens.tokens.spacingHorizontalS,
78
+ padding: `${_tokens.tokens.spacingVerticalL} ${_tokens.tokens.spacingHorizontalL}`,
79
+ ..._reactcomponents.shorthands.border(_tokens.tokens.strokeWidthThin, 'solid', _tokens.tokens.colorNeutralStroke2),
80
+ ...(0, _reactcomponents.createFocusOutlineStyle)({
81
+ style: {
82
+ outlineRadius: '28px'
83
+ }
84
+ })
85
+ },
86
+ primaryActionHovered: {
87
+ boxShadow: _tokens.tokens.shadow16,
88
+ transform: 'scale(1.03)',
89
+ transition: `transform ${_tokens.tokens.durationNormal} ${_tokens.tokens.curveDecelerateMin}`
90
+ },
91
+ icon: {
92
+ display: 'flex',
93
+ alignItems: 'center',
94
+ minHeight: _tokens.tokens.spacingVerticalXXL
95
+ },
96
+ actions: {
97
+ margin: `${_tokens.tokens.spacingVerticalL} ${_tokens.tokens.spacingHorizontalL}
98
+ ${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalNone}`,
99
+ position: 'relative',
100
+ gridRow: '1 / 2',
101
+ gridColumn: '2 / 3',
102
+ opacity: 1,
103
+ transition: `opacity ${_tokens.tokens.durationFast} ${_tokens.tokens.curveLinear}`
104
+ },
105
+ prompt: {
106
+ ..._reactcomponents.typographyStyles.body1Strong,
107
+ // Truncate text after two lines.
108
+ display: '-webkit-box',
109
+ '-webkit-box-orient': 'vertical',
110
+ '-webkit-line-clamp': '2',
111
+ overflowY: 'hidden'
112
+ },
113
+ reasonMarker: {
114
+ ..._reactcomponents.typographyStyles.caption2
115
+ }
116
+ });
117
+ const useSingleColumnStyles = (0, _reactcomponents.makeStyles)({
118
+ primaryAction: {
119
+ borderRadius: _tokens.tokens.borderRadius2XL,
120
+ ...(0, _reactcomponents.createFocusOutlineStyle)({
121
+ style: {
122
+ outlineRadius: _tokens.tokens.borderRadius2XL
123
+ }
124
+ })
125
+ },
126
+ prompt: {
127
+ ..._reactcomponents.typographyStyles.caption1Strong
128
+ }
129
+ });
130
+ const usePromptStarterStyles_unstable = (state)=>{
131
+ 'use no memo';
132
+ const { isSingleColumn } = state;
133
+ const styles = useStyles();
134
+ const rootResetStyles = useRootResetStyles();
135
+ const singleColumnStyles = useSingleColumnStyles();
136
+ state.root.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.root, rootResetStyles, state.root.className);
137
+ state.primaryAction.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.primaryAction, styles.primaryAction, isSingleColumn && singleColumnStyles.primaryAction, state.primaryAction.className);
138
+ if (state.icon) {
139
+ state.icon.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.icon, styles.icon, state.icon.className);
140
+ }
141
+ state.prompt.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.prompt, styles.prompt, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
142
+ if (state.reasonMarker) {
143
+ state.reasonMarker.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.reasonMarker, styles.reasonMarker, state.reasonMarker.className);
144
+ }
145
+ if (state.actions) {
146
+ state.actions.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.actions, styles.actions, state.actions.className);
147
+ }
148
+ return state;
149
+ };
@@ -0,0 +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":["promptStarterClassNames","usePromptStarterStyles_unstable","root","primaryAction","icon","prompt","reasonMarker","actions","useRootResetStyles","makeResetStyles","display","gridTemplateColumns","gridTemplateRows","minWidth","boxShadow","tokens","shadow16","transform","transition","durationNormal","curveDecelerateMin","shadow8","clip","height","margin","overflow","padding","width","position","opacity","useStyles","makeStyles","gridRow","gridColumn","flexDirection","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","rowGap","spacingHorizontalS","spacingVerticalL","spacingHorizontalL","shorthands","border","strokeWidthThin","colorNeutralStroke2","createFocusOutlineStyle","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","typographyStyles","body1Strong","overflowY","caption2","useSingleColumnStyles","borderRadius2XL","caption1Strong","state","isSingleColumn","styles","rootResetStyles","singleColumnStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,uBAAAA;eAAAA;;IA+GAC,+BAAAA;eAAAA;;;iCApHN;wBACgB;AAIhB,MAAMD,0BAA8D;IACzEE,MAAM;IACNC,eAAe;IACfC,MAAM;IACNC,QAAQ;IACRC,cAAc;IACdC,SAAS;AACX;AAEA,MAAMC,qBAAqBC,IAAAA,gCAAAA,EAAgB;IACzCC,SAAS;IACTC,qBAAqB;IACrBC,kBAAkB;IAClBC,UAAU;IAEV,8DAA8D;IAC9D,WAAW;QACT,CAAC,CAAC,GAAG,EAAEb,wBAAwBG,aAAa,CAAC,CAAC,CAAC,EAAE;YAC/CW,WAAWC,cAAAA,CAAOC,QAAQ;YAC1BC,WAAW;YACXC,YAAY,CAAC,UAAU,EAAEH,cAAAA,CAAOI,cAAc,CAAC,CAAC,EAAEJ,cAAAA,CAAOK,kBAAkB,CAAC,CAAC;QAC/E;IACF;IACA,YAAY;QACV,CAAC,CAAC,GAAG,EAAEpB,wBAAwBG,aAAa,CAAC,CAAC,CAAC,EAAE;YAC/CW,WAAWC,cAAAA,CAAOM,OAAO;YACzBJ,WAAW;YACXC,YAAY,CAAC,UAAU,EAAEH,cAAAA,CAAOI,cAAc,CAAC,CAAC,EAAEJ,cAAAA,CAAOK,kBAAkB,CAAC,CAAC;QAC/E;IACF;IAEA,2CAA2C;IAC3C,mCAAmC;QACjC,CAAC,CAAC,GAAG,EAAEpB,wBAAwBO,OAAO,CAAC,CAAC,CAAC,EAAE;YACzCe,MAAM;YACNC,QAAQ;YACRC,QAAQ;YACRC,UAAU;YACVC,SAAS;YACTC,OAAO;YACPC,UAAU;YACVC,SAAS;QACX;IACF;AACF;AAEA,MAAMC,YAAYC,IAAAA,2BAAAA,EAAW;IAC3B5B,eAAe;QACb6B,SAAS;QACTC,YAAY;QACZvB,SAAS;QACTwB,eAAe;QACfN,UAAU;QACVO,cAAc;QACdC,iBAAiBrB,cAAAA,CAAOsB,uBAAuB;QAC/CC,OAAOvB,cAAAA,CAAOwB,uBAAuB;QACrCC,YAAYzB,cAAAA,CAAO0B,cAAc;QACjCC,QAAQ;QACRC,cAAc;QACdC,WAAW;QACXC,QAAQ9B,cAAAA,CAAO+B,kBAAkB;QACjCpB,SAAS,CAAC,EAAEX,cAAAA,CAAOgC,gBAAgB,CAAC,CAAC,EAAEhC,cAAAA,CAAOiC,kBAAkB,CAAC,CAAC;QAClE,GAAGC,2BAAAA,CAAWC,MAAM,CAACnC,cAAAA,CAAOoC,eAAe,EAAE,SAASpC,cAAAA,CAAOqC,mBAAmB,CAAC;QACjF,GAAGC,IAAAA,wCAAAA,EAAwB;YAAEC,OAAO;gBAAEC,eAAe;YAAO;QAAE,EAAE;IAClE;IAEAC,sBAAsB;QACpB1C,WAAWC,cAAAA,CAAOC,QAAQ;QAC1BC,WAAW;QACXC,YAAY,CAAC,UAAU,EAAEH,cAAAA,CAAOI,cAAc,CAAC,CAAC,EAAEJ,cAAAA,CAAOK,kBAAkB,CAAC,CAAC;IAC/E;IAEAhB,MAAM;QACJM,SAAS;QACT+C,YAAY;QACZC,WAAW3C,cAAAA,CAAO4C,kBAAkB;IACtC;IACApD,SAAS;QACPiB,QAAQ,CAAC,EAAET,cAAAA,CAAOgC,gBAAgB,CAAC,CAAC,EAAEhC,cAAAA,CAAOiC,kBAAkB,CAAC;aACvD,EAAEjC,cAAAA,CAAO6C,mBAAmB,CAAC,CAAC,EAAE7C,cAAAA,CAAO8C,qBAAqB,CAAC,CAAC;QACvEjC,UAAU;QACVI,SAAS;QACTC,YAAY;QAEZJ,SAAS;QACTX,YAAY,CAAC,QAAQ,EAAEH,cAAAA,CAAO+C,YAAY,CAAC,CAAC,EAAE/C,cAAAA,CAAOgD,WAAW,CAAC,CAAC;IACpE;IACA1D,QAAQ;QACN,GAAG2D,iCAAAA,CAAiBC,WAAW;QAE/B,iCAAiC;QACjCvD,SAAS;QACT,sBAAsB;QACtB,sBAAsB;QACtBwD,WAAW;IACb;IACA5D,cAAc;QACZ,GAAG0D,iCAAAA,CAAiBG,QAAQ;IAC9B;AACF;AAEA,MAAMC,wBAAwBrC,IAAAA,2BAAAA,EAAW;IACvC5B,eAAe;QACbgC,cAAcpB,cAAAA,CAAOsD,eAAe;QACpC,GAAGhB,IAAAA,wCAAAA,EAAwB;YAAEC,OAAO;gBAAEC,eAAexC,cAAAA,CAAOsD,eAAe;YAAC;QAAE,EAAE;IAClF;IACAhE,QAAQ;QACN,GAAG2D,iCAAAA,CAAiBM,cAAc;IACpC;AACF;AAEO,MAAMrE,kCAAkC,CAACsE;IAC9C;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGD;IAE3B,MAAME,SAAS3C;IACf,MAAM4C,kBAAkBlE;IACxB,MAAMmE,qBAAqBP;IAC3BG,MAAMrE,IAAI,CAAC0E,SAAS,GAAGC,IAAAA,6BAAAA,EAAa7E,wBAAwBE,IAAI,EAAEwE,iBAAiBH,MAAMrE,IAAI,CAAC0E,SAAS;IACvGL,MAAMpE,aAAa,CAACyE,SAAS,GAAGC,IAAAA,6BAAAA,EAC9B7E,wBAAwBG,aAAa,EACrCsE,OAAOtE,aAAa,EACpBqE,kBAAkBG,mBAAmBxE,aAAa,EAClDoE,MAAMpE,aAAa,CAACyE,SAAS;IAE/B,IAAIL,MAAMnE,IAAI,EAAE;QACdmE,MAAMnE,IAAI,CAACwE,SAAS,GAAGC,IAAAA,6BAAAA,EAAa7E,wBAAwBI,IAAI,EAAEqE,OAAOrE,IAAI,EAAEmE,MAAMnE,IAAI,CAACwE,SAAS;IACrG;IACAL,MAAMlE,MAAM,CAACuE,SAAS,GAAGC,IAAAA,6BAAAA,EACvB7E,wBAAwBK,MAAM,EAC9BoE,OAAOpE,MAAM,EACbmE,kBAAkBG,mBAAmBtE,MAAM,EAC3CkE,MAAMlE,MAAM,CAACuE,SAAS;IAExB,IAAIL,MAAMjE,YAAY,EAAE;QACtBiE,MAAMjE,YAAY,CAACsE,SAAS,GAAGC,IAAAA,6BAAAA,EAC7B7E,wBAAwBM,YAAY,EACpCmE,OAAOnE,YAAY,EACnBiE,MAAMjE,YAAY,CAACsE,SAAS;IAEhC;IACA,IAAIL,MAAMhE,OAAO,EAAE;QACjBgE,MAAMhE,OAAO,CAACqE,SAAS,GAAGC,IAAAA,6BAAAA,EAAa7E,wBAAwBO,OAAO,EAAEkE,OAAOlE,OAAO,EAAEgE,MAAMhE,OAAO,CAACqE,SAAS;IACjH;IAEA,OAAOL;AACT"}
@@ -20,4 +20,4 @@ const PromptStarterList = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
20
20
  (0, _usePromptStarterListStylesstyles.usePromptStarterListStyles_unstable)(state);
21
21
  return (0, _renderPromptStarterList.renderPromptStarterList_unstable)(state, contextValues);
22
22
  });
23
- PromptStarterList.displayName = 'PromptStarterList'; //# sourceMappingURL=PromptStarterList.js.map
23
+ PromptStarterList.displayName = 'PromptStarterList';
@@ -1 +1 @@
1
- {"version":3,"sources":["PromptStarterList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptStarterList_unstable } from './usePromptStarterList';\nimport { renderPromptStarterList_unstable } from './renderPromptStarterList';\nimport { usePromptStarterListStyles_unstable } from './usePromptStarterListStyles.styles';\nimport type { PromptStarterListProps } from './PromptStarterList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { usePromptStarterListContextValues } from './usePromptStarterListContextValues';\n\nexport const PromptStarterList: ForwardRefComponent<PromptStarterListProps> = React.forwardRef((props, ref) => {\n const state = usePromptStarterList_unstable(props, ref);\n const contextValues = usePromptStarterListContextValues(state);\n\n usePromptStarterListStyles_unstable(state);\n return renderPromptStarterList_unstable(state, contextValues);\n});\n\nPromptStarterList.displayName = 'PromptStarterList';\n"],"names":["PromptStarterList","React","forwardRef","props","state","usePromptStarterList_unstable","contextValues","usePromptStarterListContextValues","usePromptStarterListStyles_unstable","renderPromptStarterList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;sCACuB;yCACG;kDACG;mDAGF;AAE3C,MAAMA,oBAAAA,WAAAA,GAAAA,OAAiEC,UAAMC,CAAU,CAACC,OAACA;UAC9FC,QAAMA,IAAAA,mDAAQC,EAAAA,OAA8BF;UAC5CG,gBAAMA,IAAAA,oEAAgBC,EAAAA;6EAEtBC,EAAAA;WACAC,IAAAA,yDAAOA,EAAAA,OAAiCL;AAC1C;AAEAJ,kBAAkBU,WAAW,GAAG"}
1
+ {"version":3,"sources":["PromptStarterList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptStarterList_unstable } from './usePromptStarterList';\nimport { renderPromptStarterList_unstable } from './renderPromptStarterList';\nimport { usePromptStarterListStyles_unstable } from './usePromptStarterListStyles.styles';\nimport type { PromptStarterListProps } from './PromptStarterList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { usePromptStarterListContextValues } from './usePromptStarterListContextValues';\n\nexport const PromptStarterList: ForwardRefComponent<PromptStarterListProps> = React.forwardRef((props, ref) => {\n const state = usePromptStarterList_unstable(props, ref);\n const contextValues = usePromptStarterListContextValues(state);\n\n usePromptStarterListStyles_unstable(state);\n return renderPromptStarterList_unstable(state, contextValues);\n});\n\nPromptStarterList.displayName = 'PromptStarterList';\n"],"names":["PromptStarterList","React","forwardRef","props","ref","state","usePromptStarterList_unstable","contextValues","usePromptStarterListContextValues","usePromptStarterListStyles_unstable","renderPromptStarterList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;sCACuB;yCACG;kDACG;mDAGF;AAE3C,MAAMA,oBAAAA,WAAAA,GAAiEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQC,IAAAA,mDAAAA,EAA8BH,OAAOC;IACnD,MAAMG,gBAAgBC,IAAAA,oEAAAA,EAAkCH;IAExDI,IAAAA,qEAAAA,EAAoCJ;IACpC,OAAOK,IAAAA,yDAAAA,EAAiCL,OAAOE;AACjD;AAEAP,kBAAkBW,WAAW,GAAG"}
@@ -2,4 +2,3 @@
2
2
  Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
- //# sourceMappingURL=PromptStarterList.types.js.map
@@ -29,4 +29,3 @@ const _PromptStarterList = require("./PromptStarterList");
29
29
  const _renderPromptStarterList = require("./renderPromptStarterList");
30
30
  const _usePromptStarterList = require("./usePromptStarterList");
31
31
  const _usePromptStarterListStylesstyles = require("./usePromptStarterListStyles.styles");
32
- //# sourceMappingURL=index.js.map
@@ -26,4 +26,4 @@ const renderPromptStarterList_unstable = (state, contextValue)=>{
26
26
  ]
27
27
  })
28
28
  });
29
- }; //# sourceMappingURL=renderPromptStarterList.js.map
29
+ };
@@ -1 +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","state","value","contextValue","_jsx","PresenceGroup","gridWrapper"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBEA;;;eAAAA;;;4BAjBF;iCAE2C;0CACD;AAcxCA,MAAAA,mCAAoCC,CAAAA,OAAAA;oCAEpC,EAAAA;WAC6BC,WAAOC,GAAAA,IAAAA,eAAAA,EAAAA,mDAAAA,EAAAA;;;;8BAE9BC,IAAAA,eAAA,EAACC,8BAAAA,EAAAA;4CACCD,IAAAA,eAAA,EAAAH,MAAAK,WAACL,EAAMK;qDAAaL"}
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":["renderPromptStarterList_unstable","state","contextValue","assertSlots","_jsx","PromptStarterListProvider","value","_jsxs","root","PresenceGroup","gridWrapper","children","expandButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;4BAbb;iCAE2C;0CACD;AAUnC,MAAMA,mCAAmC,CAC9CC,OACAC;IAEAC,IAAAA,4BAAAA,EAAoCF;IAEpC,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,mDAAAA,EAAAA;QAA0BC,OAAOJ;kBAChC,WAAA,GAAAK,IAAAA,gBAAA,EAACN,MAAMO,IAAI,EAAA;;8BACTJ,IAAAA,eAAA,EAACK,8BAAAA,EAAAA;8BACC,WAAA,GAAAL,IAAAA,eAAA,EAACH,MAAMS,WAAW,EAAA;kCAAET,MAAMO,IAAI,CAACG,QAAQ;;;gBAExCV,MAAMW,YAAY,IAAA,WAAA,GAAIR,IAAAA,eAAA,EAACH,MAAMW,YAAY,EAAA,CAAA;;;;AAIlD"}
@@ -113,4 +113,4 @@ const usePromptStarterList_unstable = (props, ref)=>{
113
113
  state.expandButton.onClick = (0, _reactcomponents.mergeCallbacks)(state.expandButton.onClick, ()=>setIsExpanded(!isExpanded));
114
114
  }
115
115
  return state;
116
- }; //# sourceMappingURL=usePromptStarterList.js.map
116
+ };
@@ -1 +1 @@
1
- {"version":3,"sources":["usePromptStarterList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n slot,\n Button,\n useArrowNavigationGroup,\n mergeCallbacks,\n useFluent,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport type { PromptStarterListProps, PromptStarterListState } from './PromptStarterList.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport { ChevronDown12Regular } from '@fluentui/react-icons';\nimport { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';\n\n/**\n * Create the state required to render PromptStarterList.\n *\n * The returned state can be modified with hooks such as usePromptStarterListStyles_unstable,\n * before being passed to renderPromptStarterList_unstable.\n *\n * @param props - props from this instance of PromptStarterList\n * @param ref - reference to root HTMLElement of PromptStarterList\n */\nexport const usePromptStarterList_unstable = (\n props: PromptStarterListProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptStarterListState => {\n const { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less' } = props;\n const designVersion = useDesignVersion(props.designVersion);\n const focusAttrs = useArrowNavigationGroup({\n ...arrowNavigationOptions,\n axis: arrowNavigationOptions?.axis ?? 'grid-linear',\n memorizeCurrent: arrowNavigationOptions?.memorizeCurrent ?? true,\n });\n\n const [isExpanded, setIsExpanded] = React.useState(false);\n const [numberOfColumns, setNumberOfColumns] = React.useState<number>(3);\n\n const gridWrapperRef = React.useRef<HTMLDivElement>(null);\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n React.useEffect(() => {\n if (!win || !gridWrapperRef.current) return;\n\n const promptStarterGrid = gridWrapperRef.current;\n\n const updateNumberOfColumns = () => {\n const numColumns = win.getComputedStyle(promptStarterGrid).gridTemplateColumns.split(' ').length;\n setNumberOfColumns(numColumns);\n };\n\n const ro = new win.ResizeObserver(updateNumberOfColumns);\n ro.observe(promptStarterGrid);\n\n return () => {\n ro.unobserve(promptStarterGrid);\n };\n }, [win]);\n\n const state: PromptStarterListState = {\n numberOfColumns: numberOfColumns,\n isExpanded,\n designVersion,\n components: {\n root: 'div',\n gridWrapper: 'div',\n expandButton: Button,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n gridWrapper: slot.always(props.gridWrapper, {\n defaultProps: {\n role: 'group',\n ...focusAttrs,\n },\n elementType: 'div',\n }),\n expandButton: slot.optional(props.expandButton, {\n defaultProps: {\n appearance: 'subtle',\n size: 'small',\n shape: 'rounded',\n icon: <ChevronDown12Regular />,\n iconPosition: 'after',\n 'aria-expanded': isExpanded,\n children: isExpanded ? collapseButtonLabel : expandButtonLabel,\n },\n renderByDefault: true,\n elementType: Button,\n }),\n };\n\n state.gridWrapper.ref = useMergedRefs(gridWrapperRef, state.gridWrapper.ref);\n\n // Get the array of children.\n const childrenArray = React.useMemo<(React.ReactChild | React.ReactFragment | React.ReactPortal)[]>(() => {\n return React.Children.toArray(state.root.children);\n }, [state.root.children]);\n\n // Add motion to the children.\n const childrenWithMotion = React.useMemo(\n () =>\n childrenArray.map((child, index) => {\n // Throw error if the child is not a valid React element or is a Fragment.\n if (!React.isValidElement(child) || child.type === React.Fragment) {\n throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');\n }\n\n // In the collapsed state, if there is one column, we show three children.\n // If there are two or three columns, we show two or three. All children\n // are shown in the expanded state.\n const visibility = (numberOfColumns === 1 && index < 3) || index < numberOfColumns || isExpanded;\n\n return (\n <PromptStarterMotion appear key={index} index={index} visible={visibility} numberOfColumns={numberOfColumns}>\n {child}\n </PromptStarterMotion>\n );\n }),\n [childrenArray, numberOfColumns, isExpanded],\n );\n\n state.root.children = childrenWithMotion;\n\n if (state.expandButton) {\n state.expandButton.onClick = mergeCallbacks(\n state.expandButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n () => setIsExpanded(!isExpanded),\n );\n }\n\n return state;\n};\n"],"names":["arrowNavigationOptions","expandButtonLabel","useArrowNavigationGroup","memorizeCurrent","_arrowNavigationOptions_axis","_arrowNavigationOptions_memorizeCurrent","focusAttrs","isExpanded","React","setNumberOfColumns","axis","gridWrapperRef","targetDocument","useFluent","setIsExpanded","useState","numberOfColumns","promptStarterGrid","numColumns","win","defaultView","useEffect","ro","observe","current","getComputedStyle","gridTemplateColumns","split","length","ResizeObserver","updateNumberOfColumns","state","components","root","gridWrapper","slot","ref","props","Button","always","getIntrinsicElementProps","defaultProps","elementType","expandButton","size","icon","iconPosition","renderByDefault","createElement","ChevronDown12Regular","children","collapseButtonLabel","childrenArray","useMemo","childrenWithMotion","Error","map","child","index","isValidElement","type","Fragment","PromptStarterMotion","appear","visibility","mergeCallbacks","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["usePromptStarterList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n slot,\n Button,\n useArrowNavigationGroup,\n mergeCallbacks,\n useFluent,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport type { PromptStarterListProps, PromptStarterListState } from './PromptStarterList.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport { ChevronDown12Regular } from '@fluentui/react-icons';\nimport { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';\n\n/**\n * Create the state required to render PromptStarterList.\n *\n * The returned state can be modified with hooks such as usePromptStarterListStyles_unstable,\n * before being passed to renderPromptStarterList_unstable.\n *\n * @param props - props from this instance of PromptStarterList\n * @param ref - reference to root HTMLElement of PromptStarterList\n */\nexport const usePromptStarterList_unstable = (\n props: PromptStarterListProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptStarterListState => {\n const { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less' } = props;\n const designVersion = useDesignVersion(props.designVersion);\n const focusAttrs = useArrowNavigationGroup({\n ...arrowNavigationOptions,\n axis: arrowNavigationOptions?.axis ?? 'grid-linear',\n memorizeCurrent: arrowNavigationOptions?.memorizeCurrent ?? true,\n });\n\n const [isExpanded, setIsExpanded] = React.useState(false);\n const [numberOfColumns, setNumberOfColumns] = React.useState<number>(3);\n\n const gridWrapperRef = React.useRef<HTMLDivElement>(null);\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n React.useEffect(() => {\n if (!win || !gridWrapperRef.current) return;\n\n const promptStarterGrid = gridWrapperRef.current;\n\n const updateNumberOfColumns = () => {\n const numColumns = win.getComputedStyle(promptStarterGrid).gridTemplateColumns.split(' ').length;\n setNumberOfColumns(numColumns);\n };\n\n const ro = new win.ResizeObserver(updateNumberOfColumns);\n ro.observe(promptStarterGrid);\n\n return () => {\n ro.unobserve(promptStarterGrid);\n };\n }, [win]);\n\n const state: PromptStarterListState = {\n numberOfColumns: numberOfColumns,\n isExpanded,\n designVersion,\n components: {\n root: 'div',\n gridWrapper: 'div',\n expandButton: Button,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n gridWrapper: slot.always(props.gridWrapper, {\n defaultProps: {\n role: 'group',\n ...focusAttrs,\n },\n elementType: 'div',\n }),\n expandButton: slot.optional(props.expandButton, {\n defaultProps: {\n appearance: 'subtle',\n size: 'small',\n shape: 'rounded',\n icon: <ChevronDown12Regular />,\n iconPosition: 'after',\n 'aria-expanded': isExpanded,\n children: isExpanded ? collapseButtonLabel : expandButtonLabel,\n },\n renderByDefault: true,\n elementType: Button,\n }),\n };\n\n state.gridWrapper.ref = useMergedRefs(gridWrapperRef, state.gridWrapper.ref);\n\n // Get the array of children.\n const childrenArray = React.useMemo<(React.ReactChild | React.ReactFragment | React.ReactPortal)[]>(() => {\n return React.Children.toArray(state.root.children);\n }, [state.root.children]);\n\n // Add motion to the children.\n const childrenWithMotion = React.useMemo(\n () =>\n childrenArray.map((child, index) => {\n // Throw error if the child is not a valid React element or is a Fragment.\n if (!React.isValidElement(child) || child.type === React.Fragment) {\n throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');\n }\n\n // In the collapsed state, if there is one column, we show three children.\n // If there are two or three columns, we show two or three. All children\n // are shown in the expanded state.\n const visibility = (numberOfColumns === 1 && index < 3) || index < numberOfColumns || isExpanded;\n\n return (\n <PromptStarterMotion appear key={index} index={index} visible={visibility} numberOfColumns={numberOfColumns}>\n {child}\n </PromptStarterMotion>\n );\n }),\n [childrenArray, numberOfColumns, isExpanded],\n );\n\n state.root.children = childrenWithMotion;\n\n if (state.expandButton) {\n state.expandButton.onClick = mergeCallbacks(\n state.expandButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n () => setIsExpanded(!isExpanded),\n );\n }\n\n return state;\n};\n"],"names":["usePromptStarterList_unstable","props","ref","arrowNavigationOptions","expandButtonLabel","collapseButtonLabel","designVersion","useDesignVersion","focusAttrs","useArrowNavigationGroup","axis","memorizeCurrent","isExpanded","setIsExpanded","React","useState","numberOfColumns","setNumberOfColumns","gridWrapperRef","useRef","targetDocument","useFluent","win","defaultView","useEffect","current","promptStarterGrid","updateNumberOfColumns","numColumns","getComputedStyle","gridTemplateColumns","split","length","ro","ResizeObserver","observe","unobserve","state","components","root","gridWrapper","expandButton","Button","slot","always","getIntrinsicElementProps","elementType","defaultProps","role","optional","appearance","size","shape","icon","createElement","ChevronDown12Regular","iconPosition","children","renderByDefault","useMergedRefs","childrenArray","useMemo","Children","toArray","childrenWithMotion","map","child","index","isValidElement","type","Fragment","Error","visibility","PromptStarterMotion","appear","key","visible","onClick","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}