catchup-library-web 2.6.25 → 2.7.0

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 (4) hide show
  1. package/dist/index.js +98 -2
  2. package/dist/index.mjs +98 -2
  3. package/package.json +1 -1
  4. package/src/components/groups/InputGroup.tsx +96 -2
package/dist/index.js CHANGED
@@ -4019,6 +4019,7 @@ var InputGroup = ({
4019
4019
  const textAreaRef = (0, import_react13.useRef)(null);
4020
4020
  const latexTextAreaRef = (0, import_react13.useRef)(null);
4021
4021
  const [showMathConstructor, setShowMathConstructor] = (0, import_react13.useState)(false);
4022
+ const [showCheatSheet, setShowCheatSheet] = (0, import_react13.useState)(false);
4022
4023
  const [mathValue, setMathValue] = (0, import_react13.useState)("");
4023
4024
  const mathFieldRef = (0, import_react13.useRef)(null);
4024
4025
  (0, import_react13.useEffect)(() => {
@@ -4125,7 +4126,7 @@ var InputGroup = ({
4125
4126
  value: mathValue,
4126
4127
  onInput: handleMathFieldChange,
4127
4128
  placeholder: i18n_default.t("expression"),
4128
- "virtual-keyboard-mode": "off",
4129
+ "virtual-keyboard-mode": "onfocus",
4129
4130
  "smart-fence": true,
4130
4131
  "smart-mode": true,
4131
4132
  "smart-superscript": true,
@@ -4152,7 +4153,7 @@ var InputGroup = ({
4152
4153
  {
4153
4154
  ref: latexTextAreaRef,
4154
4155
  readOnly: true,
4155
- value: mathValue,
4156
+ value: mathValue ? `$$${mathValue}$$` : "",
4156
4157
  className: "w-full h-[44px] py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large resize-none focus:outline-none",
4157
4158
  placeholder: i18n_default.t("latex_will_appear_here")
4158
4159
  }
@@ -4167,6 +4168,101 @@ var InputGroup = ({
4167
4168
  }
4168
4169
  )
4169
4170
  ] })
4171
+ ] }),
4172
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
4173
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
4174
+ "button",
4175
+ {
4176
+ onClick: () => setShowCheatSheet(!showCheatSheet),
4177
+ className: "flex items-center gap-x-1 text-md font-semibold pl-2 py-1 text-catchup-blue-400 hover:text-catchup-blue-500 transition-colors",
4178
+ type: "button",
4179
+ children: [
4180
+ i18n_default.t("latex_cheat_sheet"),
4181
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4182
+ "svg",
4183
+ {
4184
+ className: `w-3 h-3 transition-transform ${showCheatSheet ? "rotate-180" : ""}`,
4185
+ fill: "none",
4186
+ stroke: "currentColor",
4187
+ viewBox: "0 0 24 24",
4188
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4189
+ "path",
4190
+ {
4191
+ strokeLinecap: "round",
4192
+ strokeLinejoin: "round",
4193
+ strokeWidth: 2,
4194
+ d: "M19 9l-7 7-7-7"
4195
+ }
4196
+ )
4197
+ }
4198
+ )
4199
+ ]
4200
+ }
4201
+ ),
4202
+ showCheatSheet && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mt-2 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large p-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "w-full text-md", children: [
4203
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "text-left text-catchup-gray-400", children: [
4204
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "pb-2 font-semibold", children: "LaTeX" }),
4205
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "pb-2 font-semibold" })
4206
+ ] }) }),
4207
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tbody", { className: "font-mono text-catchup-gray-400", children: [
4208
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4209
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\\frac{a}{b}" }),
4210
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "a/b" })
4211
+ ] }),
4212
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4213
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "x^{2}" }),
4214
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "x\xB2" })
4215
+ ] }),
4216
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4217
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "x_{i}" }),
4218
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "x\u2090" })
4219
+ ] }),
4220
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4221
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\\sqrt{x}" }),
4222
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\u221Ax" })
4223
+ ] }),
4224
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4225
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\\sqrt[3]{x}" }),
4226
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\u221Bx" })
4227
+ ] }),
4228
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4229
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\\sum_{i=1}^{n}" }),
4230
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\u03A3" })
4231
+ ] }),
4232
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4233
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\\int_{a}^{b}" }),
4234
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\u222B" })
4235
+ ] }),
4236
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4237
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\\infty" }),
4238
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\u221E" })
4239
+ ] }),
4240
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4241
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\\pi" }),
4242
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\u03C0" })
4243
+ ] }),
4244
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4245
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\\alpha \\beta \\gamma" }),
4246
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\u03B1 \u03B2 \u03B3" })
4247
+ ] }),
4248
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4249
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\\leq \\geq \\neq" }),
4250
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\u2264 \u2265 \u2260" })
4251
+ ] }),
4252
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4253
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\\pm \\times \\div" }),
4254
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\xB1 \xD7 \xF7" })
4255
+ ] }),
4256
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4257
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\\log_{a}{b}" }),
4258
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "log" })
4259
+ ] }),
4260
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { children: [
4261
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "\\sin \\cos \\tan" }),
4262
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "py-1", children: "sin cos tan" })
4263
+ ] })
4264
+ ] })
4265
+ ] }) })
4170
4266
  ] })
4171
4267
  ] }) })
4172
4268
  }
package/dist/index.mjs CHANGED
@@ -3779,6 +3779,7 @@ var InputGroup = ({
3779
3779
  const textAreaRef = useRef(null);
3780
3780
  const latexTextAreaRef = useRef(null);
3781
3781
  const [showMathConstructor, setShowMathConstructor] = useState13(false);
3782
+ const [showCheatSheet, setShowCheatSheet] = useState13(false);
3782
3783
  const [mathValue, setMathValue] = useState13("");
3783
3784
  const mathFieldRef = useRef(null);
3784
3785
  useEffect3(() => {
@@ -3885,7 +3886,7 @@ var InputGroup = ({
3885
3886
  value: mathValue,
3886
3887
  onInput: handleMathFieldChange,
3887
3888
  placeholder: i18n_default.t("expression"),
3888
- "virtual-keyboard-mode": "off",
3889
+ "virtual-keyboard-mode": "onfocus",
3889
3890
  "smart-fence": true,
3890
3891
  "smart-mode": true,
3891
3892
  "smart-superscript": true,
@@ -3912,7 +3913,7 @@ var InputGroup = ({
3912
3913
  {
3913
3914
  ref: latexTextAreaRef,
3914
3915
  readOnly: true,
3915
- value: mathValue,
3916
+ value: mathValue ? `$$${mathValue}$$` : "",
3916
3917
  className: "w-full h-[44px] py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large resize-none focus:outline-none",
3917
3918
  placeholder: i18n_default.t("latex_will_appear_here")
3918
3919
  }
@@ -3927,6 +3928,101 @@ var InputGroup = ({
3927
3928
  }
3928
3929
  )
3929
3930
  ] })
3931
+ ] }),
3932
+ /* @__PURE__ */ jsxs15("div", { children: [
3933
+ /* @__PURE__ */ jsxs15(
3934
+ "button",
3935
+ {
3936
+ onClick: () => setShowCheatSheet(!showCheatSheet),
3937
+ className: "flex items-center gap-x-1 text-md font-semibold pl-2 py-1 text-catchup-blue-400 hover:text-catchup-blue-500 transition-colors",
3938
+ type: "button",
3939
+ children: [
3940
+ i18n_default.t("latex_cheat_sheet"),
3941
+ /* @__PURE__ */ jsx24(
3942
+ "svg",
3943
+ {
3944
+ className: `w-3 h-3 transition-transform ${showCheatSheet ? "rotate-180" : ""}`,
3945
+ fill: "none",
3946
+ stroke: "currentColor",
3947
+ viewBox: "0 0 24 24",
3948
+ children: /* @__PURE__ */ jsx24(
3949
+ "path",
3950
+ {
3951
+ strokeLinecap: "round",
3952
+ strokeLinejoin: "round",
3953
+ strokeWidth: 2,
3954
+ d: "M19 9l-7 7-7-7"
3955
+ }
3956
+ )
3957
+ }
3958
+ )
3959
+ ]
3960
+ }
3961
+ ),
3962
+ showCheatSheet && /* @__PURE__ */ jsx24("div", { className: "mt-2 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large p-4", children: /* @__PURE__ */ jsxs15("table", { className: "w-full text-md", children: [
3963
+ /* @__PURE__ */ jsx24("thead", { children: /* @__PURE__ */ jsxs15("tr", { className: "text-left text-catchup-gray-400", children: [
3964
+ /* @__PURE__ */ jsx24("th", { className: "pb-2 font-semibold", children: "LaTeX" }),
3965
+ /* @__PURE__ */ jsx24("th", { className: "pb-2 font-semibold" })
3966
+ ] }) }),
3967
+ /* @__PURE__ */ jsxs15("tbody", { className: "font-mono text-catchup-gray-400", children: [
3968
+ /* @__PURE__ */ jsxs15("tr", { children: [
3969
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\frac{a}{b}" }),
3970
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "a/b" })
3971
+ ] }),
3972
+ /* @__PURE__ */ jsxs15("tr", { children: [
3973
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "x^{2}" }),
3974
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "x\xB2" })
3975
+ ] }),
3976
+ /* @__PURE__ */ jsxs15("tr", { children: [
3977
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "x_{i}" }),
3978
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "x\u2090" })
3979
+ ] }),
3980
+ /* @__PURE__ */ jsxs15("tr", { children: [
3981
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\sqrt{x}" }),
3982
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u221Ax" })
3983
+ ] }),
3984
+ /* @__PURE__ */ jsxs15("tr", { children: [
3985
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\sqrt[3]{x}" }),
3986
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u221Bx" })
3987
+ ] }),
3988
+ /* @__PURE__ */ jsxs15("tr", { children: [
3989
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\sum_{i=1}^{n}" }),
3990
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u03A3" })
3991
+ ] }),
3992
+ /* @__PURE__ */ jsxs15("tr", { children: [
3993
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\int_{a}^{b}" }),
3994
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u222B" })
3995
+ ] }),
3996
+ /* @__PURE__ */ jsxs15("tr", { children: [
3997
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\infty" }),
3998
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u221E" })
3999
+ ] }),
4000
+ /* @__PURE__ */ jsxs15("tr", { children: [
4001
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\pi" }),
4002
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u03C0" })
4003
+ ] }),
4004
+ /* @__PURE__ */ jsxs15("tr", { children: [
4005
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\alpha \\beta \\gamma" }),
4006
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u03B1 \u03B2 \u03B3" })
4007
+ ] }),
4008
+ /* @__PURE__ */ jsxs15("tr", { children: [
4009
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\leq \\geq \\neq" }),
4010
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u2264 \u2265 \u2260" })
4011
+ ] }),
4012
+ /* @__PURE__ */ jsxs15("tr", { children: [
4013
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\pm \\times \\div" }),
4014
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\xB1 \xD7 \xF7" })
4015
+ ] }),
4016
+ /* @__PURE__ */ jsxs15("tr", { children: [
4017
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\log_{a}{b}" }),
4018
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "log" })
4019
+ ] }),
4020
+ /* @__PURE__ */ jsxs15("tr", { children: [
4021
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\sin \\cos \\tan" }),
4022
+ /* @__PURE__ */ jsx24("td", { className: "py-1", children: "sin cos tan" })
4023
+ ] })
4024
+ ] })
4025
+ ] }) })
3930
4026
  ] })
3931
4027
  ] }) })
3932
4028
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "catchup-library-web",
3
- "version": "2.6.25",
3
+ "version": "2.7.0",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/groups/InputGroup.tsx CHANGED
@@ -73,6 +73,7 @@ const InputGroup = ({
73
73
  const latexTextAreaRef = useRef<HTMLTextAreaElement>(null);
74
74
  const [showMathConstructor, setShowMathConstructor] =
75
75
  useState<boolean>(false);
76
+ const [showCheatSheet, setShowCheatSheet] = useState<boolean>(false);
76
77
  const [mathValue, setMathValue] = useState<string>("");
77
78
  const mathFieldRef = useRef<MathfieldElement>(null);
78
79
 
@@ -190,7 +191,7 @@ const InputGroup = ({
190
191
  value={mathValue}
191
192
  onInput={handleMathFieldChange}
192
193
  placeholder={i18n.t("expression")}
193
- virtual-keyboard-mode="off"
194
+ virtual-keyboard-mode="onfocus"
194
195
  smart-fence={true}
195
196
  smart-mode={true}
196
197
  smart-superscript={true}
@@ -219,7 +220,7 @@ const InputGroup = ({
219
220
  <textarea
220
221
  ref={latexTextAreaRef}
221
222
  readOnly
222
- value={mathValue}
223
+ value={mathValue ? `$$${mathValue}$$` : ""}
223
224
  className="w-full h-[44px] py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large resize-none focus:outline-none"
224
225
  placeholder={i18n.t("latex_will_appear_here")}
225
226
  />
@@ -232,6 +233,99 @@ const InputGroup = ({
232
233
  </button>
233
234
  </div>
234
235
  </div>
236
+
237
+ <div>
238
+ <button
239
+ onClick={() => setShowCheatSheet(!showCheatSheet)}
240
+ className="flex items-center gap-x-1 text-md font-semibold pl-2 py-1 text-catchup-blue-400 hover:text-catchup-blue-500 transition-colors"
241
+ type="button"
242
+ >
243
+ {i18n.t("latex_cheat_sheet")}
244
+ <svg
245
+ className={`w-3 h-3 transition-transform ${showCheatSheet ? "rotate-180" : ""}`}
246
+ fill="none"
247
+ stroke="currentColor"
248
+ viewBox="0 0 24 24"
249
+ >
250
+ <path
251
+ strokeLinecap="round"
252
+ strokeLinejoin="round"
253
+ strokeWidth={2}
254
+ d="M19 9l-7 7-7-7"
255
+ />
256
+ </svg>
257
+ </button>
258
+ {showCheatSheet && (
259
+ <div className="mt-2 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large p-4">
260
+ <table className="w-full text-md">
261
+ <thead>
262
+ <tr className="text-left text-catchup-gray-400">
263
+ <th className="pb-2 font-semibold">LaTeX</th>
264
+ <th className="pb-2 font-semibold"></th>
265
+ </tr>
266
+ </thead>
267
+ <tbody className="font-mono text-catchup-gray-400">
268
+ <tr>
269
+ <td className="py-1">{"\\frac{a}{b}"}</td>
270
+ <td className="py-1">a/b</td>
271
+ </tr>
272
+ <tr>
273
+ <td className="py-1">{"x^{2}"}</td>
274
+ <td className="py-1">x²</td>
275
+ </tr>
276
+ <tr>
277
+ <td className="py-1">{"x_{i}"}</td>
278
+ <td className="py-1">x&#8336;</td>
279
+ </tr>
280
+ <tr>
281
+ <td className="py-1">{"\\sqrt{x}"}</td>
282
+ <td className="py-1">&radic;x</td>
283
+ </tr>
284
+ <tr>
285
+ <td className="py-1">{"\\sqrt[3]{x}"}</td>
286
+ <td className="py-1">&#8731;x</td>
287
+ </tr>
288
+ <tr>
289
+ <td className="py-1">{"\\sum_{i=1}^{n}"}</td>
290
+ <td className="py-1">&Sigma;</td>
291
+ </tr>
292
+ <tr>
293
+ <td className="py-1">{"\\int_{a}^{b}"}</td>
294
+ <td className="py-1">&int;</td>
295
+ </tr>
296
+ <tr>
297
+ <td className="py-1">{"\\infty"}</td>
298
+ <td className="py-1">&infin;</td>
299
+ </tr>
300
+ <tr>
301
+ <td className="py-1">{"\\pi"}</td>
302
+ <td className="py-1">&pi;</td>
303
+ </tr>
304
+ <tr>
305
+ <td className="py-1">{"\\alpha \\beta \\gamma"}</td>
306
+ <td className="py-1">&alpha; &beta; &gamma;</td>
307
+ </tr>
308
+ <tr>
309
+ <td className="py-1">{"\\leq \\geq \\neq"}</td>
310
+ <td className="py-1">&le; &ge; &ne;</td>
311
+ </tr>
312
+ <tr>
313
+ <td className="py-1">{"\\pm \\times \\div"}</td>
314
+ <td className="py-1">&plusmn; &times; &divide;</td>
315
+ </tr>
316
+ <tr>
317
+ <td className="py-1">{"\\log_{a}{b}"}</td>
318
+ <td className="py-1">log</td>
319
+ </tr>
320
+ <tr>
321
+ <td className="py-1">{"\\sin \\cos \\tan"}</td>
322
+ <td className="py-1">sin cos tan</td>
323
+ </tr>
324
+ </tbody>
325
+ </table>
326
+ </div>
327
+ )}
328
+ </div>
235
329
  </div>
236
330
  </div>
237
331
  </BaseModal>