package.json

@@ -17,7 +17,7 @@
     "@formkit/auto-animate": "^1.0.0-beta.6",
     "@fortawesome/fontawesome-free": "5.15.4",
     "@lingdocs/lingdocs-main": "^0.3.3",
-    "@lingdocs/ps-react": "^7.7.6",
+    "@lingdocs/ps-react": "^7.7.3",
     "@mdx-js/rollup": "^2.2.1",
     "@stefanprobst/rehype-extract-toc": "^2.2.0",
     "@types/mdx": "^2.0.3",

src/components/BasicVerbShowCase.tsx

@@ -49,13 +49,12 @@ function BasicVerbShowCase({
       render={(item) => {
         return {
           title: (
-            <InlinePs
+            <InlinePs opts={opts}>
-              opts={opts}
+              {{
-              ps={{
                 ...removeFVarients(item.entry),
                 e: undefined,
               }}
-            />
+            </InlinePs>
           ),
           body: (
             <BasicVerbChart

src/components/GenderTable.jsx

@@ -20,10 +20,10 @@ export default function GenderTable({ rows }) {
                         return <td key={`row-${i}-${gender}`} style={{ background: genderColors[gender === "masc" ? "m" : "f"] }}>
                             {item.ending && <div>
                                 {typeof item.ending === "string" ? item.ending
-                                : <InlinePs opts={opts} ps={item.ending} />}
+                                : <InlinePs opts={opts}>{item.ending}</InlinePs>}
                             </div>}
                             <div>
-                                {item.ending ? "eg. " : ""}<InlinePs opts={opts} ps={item.ex} />
+                                {item.ending ? "eg. " : ""}<InlinePs opts={opts}>{item.ex}</InlinePs>
                             </div>
                         </td>
                     })}

src/components/InflectionCarousel.tsx

@@ -9,22 +9,15 @@ import {
     Types as T,
 } from "@lingdocs/ps-react";
 
-function InflectionCarousel({
+function InflectionCarousel({ items }: { items: (T.NounEntry | T.AdjectiveEntry)[] }) {
-  items,
-}: {
-  items: (T.NounEntry | T.AdjectiveEntry)[];
-}) {
     if (!items.length) {
         return "no items for carousel";
     }
     return (
         <div className="mt-3">
-      <Carousel
+            <Carousel items={items} render={item => {
-        items={items}
-        render={(item) => {
                 const e = getEnglishWord(item);
-          const english =
+                const english = e === undefined
-            e === undefined
                     ? item.e
                     : typeof e === "string"
                     ? e
@@ -36,30 +29,21 @@ function InflectionCarousel({
                     return {
                         title: "Oops! 🤷‍♂️",
                         // @ts-ignore
-              body: (
+                        body: <div>Oops! No inflections for <InlinePs opts={opts}>{item}</InlinePs></div>,
-                <div>
-                  Oops! No inflections for <InlinePs opts={opts} ps={item} />
-                </div>
-              ),
                     };
                 }
                 return {
                     // @ts-ignore
-            title: (
+                    title: <InlinePs opts={opts} ps={{
-              <InlinePs
-                opts={opts}
-                ps={{
                         ...removeFVarients(item),
                         e: english,
-                }}
+                    }} />,
-              />
+                    body: <InflectionsTable
-            ),
+                        inf={infOut.inflections}
-            body: (
+                        textOptions={opts}
-              <InflectionsTable inf={infOut.inflections} textOptions={opts} />
+                    />,
-            ),
                 };
-        }}
+            }}/>
-      />
         </div>
     );
 }

src/components/phrase-diagram/BlockDiagram.tsx

@@ -7,41 +7,27 @@ import {
     getEnglishFromRendered,
 } from "@lingdocs/ps-react";
 
-function BlockDiagram({
+function BlockDiagram({ opts, children }: {
-  opts,
+    opts: T.TextOptions,
-  children,
+    children: T.NPSelection | T.APSelection,
-}: {
-  opts: T.TextOptions;
-  children: T.NPSelection | T.APSelection;
 }) {
     try {
-    const rendered =
+    const rendered = children.type === "AP"
-      children.type === "AP"
         ? renderAPSelection(children, 0)
         : renderNPSelection(children, false, false, "subject", "none", false);
     const english = getEnglishFromRendered(rendered);
-    return (
+    return <div className="mb-3">
-      <div className="mb-3">
+         <div className="d-flex flex-row justify-content-center text-center" style={{ maxWidth: "100%" }}>
-        <div
+            {rendered.type === "NP"
-          className="d-flex flex-row justify-content-center text-center"
+                ? <NPBlock script="f" opts={opts} english={english}>{rendered}</NPBlock>
-          style={{ maxWidth: "100%" }}
+                : <APBlock script="f" opts={opts} english={english}>{rendered}</APBlock>}
-        >
-          {rendered.type === "NP" ? (
-            <NPBlock script="f" opts={opts} english={english}>
-              {rendered}
-            </NPBlock>
-          ) : (
-            <APBlock script="f" opts={opts} english={english}>
-              {rendered}
-            </APBlock>
-          )}
         </div>
-      </div>
+    </div>;
-    );
     } catch(e) {
         console.log(e);
         return <div>ERROR</div>;
     }
 }
 
+
 export default BlockDiagram;

src/components/phrase-diagram/EditableBlock.tsx

@@ -1,5 +1,12 @@
-import { Types as T, NPPicker, APPicker } from "@lingdocs/ps-react";
+import {
-import { useEffect, useRef } from "react";
+    Types as T,
+    NPPicker,
+    APPicker,
+} from "@lingdocs/ps-react";
+import {
+    useEffect,
+    useRef,
+} from "react";
 import { useState } from "react";
 import BlockDiagram from "./BlockDiagram";
 import entryFeeder from "../../lib/entry-feeder";
@@ -9,36 +16,28 @@ export function EditIcon() {
     return <i className="fas fa-edit" />;
 }
 
-function selectionToBlock(
+function selectionToBlock(s: T.NPSelection | T.APSelection): { type: "NP", block: T.NPSelection | undefined } | { type: "AP", block: T.APSelection | undefined } {
-  s: T.NPSelection | T.APSelection
+    return (s.type === "AP")
-):
+        ? { type: "AP", block: s }
-  | { type: "NP"; block: T.NPSelection | undefined }
+        : { type: "NP", block: s };
-  | { type: "AP"; block: T.APSelection | undefined } {
-  return s.type === "AP" ? { type: "AP", block: s } : { type: "NP", block: s };
 }
 
-function EditableBlock({
+function EditableBlock({ opts, children: block }: {
-  opts,
+    opts: T.TextOptions,
-  children: block,
+    children: T.NPSelection | T.APSelection,
-}: {
-  opts: T.TextOptions;
-  children: T.NPSelection | T.APSelection;
 }) {
     const parent = useRef<HTMLDivElement>(null);
     useEffect(() => {
-    parent.current && autoAnimate(parent.current);
+        parent.current && autoAnimate(parent.current)
     }, [parent]);
     const [editing, setEditing] = useState<boolean>(false);
-  const [edited, setEdited] = useState<
+    const [edited, setEdited] = useState<{
-    | {
+        type: "NP",
-        type: "NP";
+        block: T.NPSelection | undefined,
-        block: T.NPSelection | undefined;
+    } | {
-      }
+        type: "AP",
-    | {
+        block: T.APSelection | undefined,
-        type: "AP";
+    }>(selectionToBlock(block));
-        block: T.APSelection | undefined;
-      }
-  >(selectionToBlock(block));
     function handleNPChange(np: T.NPSelection | undefined) {
         setEdited({ type: "NP", block: np });
     }
@@ -49,8 +48,7 @@ function EditableBlock({
         setEdited(selectionToBlock(block));
         setEditing(false);
     }
-  return (
+    return <div>
-    <div>
         <div
             className="text-right clickable"
             onClick={editing ? handleReset : () => setEditing(true)}
@@ -58,10 +56,9 @@ function EditableBlock({
             {!editing ? <EditIcon /> : <i className="fas fa-undo" />}
         </div>
         <div ref={parent} className="d-flex flex-column align-items-center">
-        {editing && (
+            {editing && <div style={{ maxWidth: "225px", marginBottom: "2rem" }}>
-          <div style={{ maxWidth: "225px", marginBottom: "2rem" }}>
+                {edited.type === "NP"
-            {edited.type === "NP" ? (
+                    ? <NPPicker
-              <NPPicker
                         opts={opts}
                         np={edited.block}
                         onChange={handleNPChange}
@@ -69,27 +66,23 @@ function EditableBlock({
                         role="subject"
                         counterPart={undefined}
                         phraseIsComplete={false}
-                negative={false}
                     />
-            ) : (
+                    : <APPicker
-              <APPicker
                         opts={opts}
                         AP={edited.block}
                         onChange={handleAPChange}
                         entryFeeder={entryFeeder}
                         phraseIsComplete={false}
                         onRemove={() => null}
-                negative={false}
                     />
-            )}
+                }
+            </div>}
+            {edited.block
+                && <BlockDiagram opts={opts}>
+                    {edited.block}
+                </BlockDiagram>}
         </div>
-        )}
+    </div>;
-        {edited.block && (
-          <BlockDiagram opts={opts}>{edited.block}</BlockDiagram>
-        )}
-      </div>
-    </div>
-  );
 }
 
 export default EditableBlock;

src/content/verbs/GoingStems.tsx

@@ -11,113 +11,26 @@ import {
 
 export default function GoingStems() {
     const items = [
-    {
+      {"ts":1527815348,"i":3666,"p":"تلل","f":"tlul","g":"tlul","e":"to go","c":"v. intrans. irreg.","psp":"ځ","psf":"dz","ssp":"لاړ ش","ssf":"láaR sh","prp":"لاړ","prf":"láaR","ec":"go,goes,going,went,gone"},
-      ts: 1527815348,
+      {"ts":1527815216,"i":6642,"p":"راتلل","f":"raatlúl","g":"raatlul","e":"to come","c":"v. intrans. irreg.","psp":"راځ","psf":"raadz","ssp":"راش","ssf":"ráash","prp":"راغلل","prf":"ráaghlul","pprtp":"راغلی","pprtf":"raaghúley","tppp":"راغی","tppf":"ráaghey","noOo":true,"separationAtP":2,"separationAtF":3,"ec":"come,comes,coming,came,come"},
-      i: 3666,
+      {"ts":1585228551150,"i":6062,"p":"درتلل","f":"dărtlul","g":"dartlul","e":"to come (to you / second person)","c":"v. intrans. irreg.","psp":"درځ","psf":"dărdz","ssp":"درش","ssf":"dársh","prp":"درغلل","prf":"dáraghlul","pprtp":"درغلی","pprtf":"dăraghúley","tppp":"درغی","tppf":"dáraghey","noOo":true,"separationAtP":2,"separationAtF":3,"ec":"come,comes,coming,came,come"},
-      p: "تلل",
+      {"ts":1585228579997,"i":14282,"p":"ورتلل","f":"wărtlul","g":"wartlul","e":"to come / go over to (third person or place)","c":"v. intrans. irreg.","psp":"ورځ","psf":"wărdz","ssp":"ورش","ssf":"wársh","prp":"ورغلل","prf":"wáraghlul","pprtp":"ورغلی","pprtf":"wăraghúley","tppp":"ورغی","tppf":"wáraghey","noOo":true,"separationAtP":2,"separationAtF":3,"ec":"come,comes,coming,came,come"},
-      f: "tlul",
+    ].map(entry => ({ entry }));
-      g: "tlul",
+    return <Carousel stickyTitle items={items} render={(item) => {
-      e: "to go",
-      c: "v. intrans. irreg.",
-      psp: "ځ",
-      psf: "dz",
-      ssp: "لاړ ش",
-      ssf: "láaR sh",
-      prp: "لاړ",
-      prf: "láaR",
-      ec: "go,goes,going,went,gone",
-    },
-    {
-      ts: 1527815216,
-      i: 6642,
-      p: "راتلل",
-      f: "raatlúl",
-      g: "raatlul",
-      e: "to come",
-      c: "v. intrans. irreg.",
-      psp: "راځ",
-      psf: "raadz",
-      ssp: "راش",
-      ssf: "ráash",
-      prp: "راغلل",
-      prf: "ráaghlul",
-      pprtp: "راغلی",
-      pprtf: "raaghúley",
-      tppp: "راغی",
-      tppf: "ráaghey",
-      noOo: true,
-      separationAtP: 2,
-      separationAtF: 3,
-      ec: "come,comes,coming,came,come",
-    },
-    {
-      ts: 1585228551150,
-      i: 6062,
-      p: "درتلل",
-      f: "dărtlul",
-      g: "dartlul",
-      e: "to come (to you / second person)",
-      c: "v. intrans. irreg.",
-      psp: "درځ",
-      psf: "dărdz",
-      ssp: "درش",
-      ssf: "dársh",
-      prp: "درغلل",
-      prf: "dáraghlul",
-      pprtp: "درغلی",
-      pprtf: "dăraghúley",
-      tppp: "درغی",
-      tppf: "dáraghey",
-      noOo: true,
-      separationAtP: 2,
-      separationAtF: 3,
-      ec: "come,comes,coming,came,come",
-    },
-    {
-      ts: 1585228579997,
-      i: 14282,
-      p: "ورتلل",
-      f: "wărtlul",
-      g: "wartlul",
-      e: "to come / go over to (third person or place)",
-      c: "v. intrans. irreg.",
-      psp: "ورځ",
-      psf: "wărdz",
-      ssp: "ورش",
-      ssf: "wársh",
-      prp: "ورغلل",
-      prf: "wáraghlul",
-      pprtp: "ورغلی",
-      pprtf: "wăraghúley",
-      tppp: "ورغی",
-      tppf: "wáraghey",
-      noOo: true,
-      separationAtP: 2,
-      separationAtF: 3,
-      ec: "come,comes,coming,came,come",
-    },
-  ].map((entry) => ({ entry }));
-  return (
-    <Carousel
-      stickyTitle
-      items={items}
-      render={(item) => {
           const rs = getAbilityRootsAndStems(
             ensureNonComboVerbInfo(getVerbInfo(item.entry))
             );
           return {
-          title: (
+              title: <InlinePs opts={opts}>
-            <InlinePs
+                {{
-              opts={opts}
-              ps={{
                   ...removeFVarients(item.entry),
                   e: undefined,
                 }}
-            />
+              </InlinePs>,
-          ),
+              body: <RootsAndStems
-          body: <RootsAndStems textOptions={opts} info={rs} />,
+                textOptions={opts}
+                info={rs}
+              />,
           };
-      }}
+    }}/>
-    />
-  );
 }

src/games/sub-cores/EquativeGame.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
-import { comparePs } from "../../lib/game-utils";
+import {
+    comparePs,
+} from "../../lib/game-utils";
 import GameCore from "../GameCore";
 import {
     Types as T,
@@ -19,27 +21,21 @@ const amount = 12;
 const timeLimit = 100;
 
 type Question = {
-  EPS: T.EPSelectionComplete;
+    EPS: T.EPSelectionComplete,
-  phrase: { ps: T.PsString[]; e?: string[] };
+    phrase: { ps: T.PsString[], e?: string[] },
-  equative: T.EquativeRendered;
+    equative: T.EquativeRendered,
 };
 
-export default function EquativeGame({
+export default function EquativeGame({ inChapter, id, link, level }: { inChapter: boolean, id: string, link: string, level: T.EquativeTense | "allTenses" }) {
-  inChapter,
-  id,
-  link,
-  level,
-}: {
-  inChapter: boolean;
-  id: string;
-  link: string;
-  level: T.EquativeTense | "allTenses";
-}) {
     const epsPool = randomEPSPool(level);
     function getQuestion(): Question {
         const EPS = epsPool();
         const EP = renderEP(EPS);
-    const compiled = compileEP(EP, true, { equative: true, kidsSection: true });
+        const compiled = compileEP(
+            EP,
+            true,
+            { equative: true, kidsSection: true },
+        );
         const phrase = {
             ps: compiled.ps,
             e: compiled.e,
@@ -49,42 +45,35 @@ export default function EquativeGame({
             phrase,
             equative: getEqFromRendered(EP),
         };
-  }
+    };
     
     function Display({ question, callback }: QuestionDisplayProps<Question>) {
         const [answer, setAnswer] = useState<string>("");
         const [withBa, setWithBa] = useState<boolean>(false);
-    const handleInput = ({
+        const handleInput = ({ target: { value }}: React.ChangeEvent<HTMLInputElement>) => {
-      target: { value },
-    }: React.ChangeEvent<HTMLInputElement>) => {
             setAnswer(value);
-    };
+        }
         const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
             e.preventDefault();
-      const correct =
+            const correct = comparePs(answer, question.equative.ps)
-        comparePs(answer, question.equative.ps) &&
+                && (withBa === question.equative.hasBa);
-        withBa === question.equative.hasBa;
             if (correct) {
                 setAnswer("");
             }
             callback(correct);
-    };
+        }
         useEffect(() => {
             if (level === "allTenses") setWithBa(false);
         }, [question]);
         
-    return (
+        return <div>
-      <div>
             <div className="mb-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
                 <Examples lineHeight={1} opts={opts}>
                     {/* @ts-ignore  TODO: REMOVE AS P_INFLE */}
                     {modExs(question.phrase.ps, withBa)[0]}
                 </Examples>
-          {question.phrase.e &&
+                {question.phrase.e && question.phrase.e.map((e, i) => (
-            question.phrase.e.map((e, i) => (
+                    <div key={e+i} className="text-muted">{e}</div>
-              <div key={e + i} className="text-muted">
-                {e}
-              </div>
                 ))}
                 <div>{humanReadableTense(question.EPS.equative.tense)} equative</div>
             </div>
@@ -95,11 +84,10 @@ export default function EquativeGame({
                         className="form-check-input"
                         type="checkbox"
                         checked={withBa}
-              onChange={(e) => setWithBa(e.target.checked)}
+                        onChange={e => setWithBa(e.target.checked)}
                     />
                     <label className="form-check-label text-muted" htmlFor="baCheckbox">
-              with <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the{" "}
+                        with <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the <span style={{ color: kidsColor }}>kids' section</span>
-              <span style={{ color: kidsColor }}>kids' section</span>
                     </label>
                 </div>
                 <div className="my-1" style={{ maxWidth: "200px", margin: "0 auto" }}>
@@ -116,9 +104,7 @@ export default function EquativeGame({
                 </div>
                 <div className="text-center my-2">
                     {/* <div> */}
-            <button className="btn btn-primary" type="submit">
+                        <button className="btn btn-primary" type="submit">submit ↵</button>
-              submit ↵
-            </button>
                     {/* </div> */}
                     {/* <div className="text-muted small text-center mt-2">
                         Type <kbd>Enter</kbd> to check
@@ -126,23 +112,18 @@ export default function EquativeGame({
                 </div>
             </form>
         </div>
-    );
     }
     
     function Instructions() {
-    return (
+        return <div>
-      <div>
             <p className="lead">
-          Fill in the blank with the correct{" "}
+                Fill in the blank with the correct {level === "allTenses" ? "" : humanReadableTense(level)} equative
-          {level === "allTenses" ? "" : humanReadableTense(level)} equative
             </p>
             {level === "allTenses" && <div>⚠ All tenses included...</div>}
-      </div>
+        </div>;
-    );
     }
 
-  return (
+    return <GameCore
-    <GameCore
         inChapter={inChapter}
         studyLink={link}
         getQuestion={getQuestion}
@@ -153,39 +134,24 @@ export default function EquativeGame({
         amount={amount}
         Instructions={Instructions}
     />
-  );
+};
-}
 
-function DisplayCorrectAnswer({
+function DisplayCorrectAnswer({ question }: { question: Question }): JSX.Element {
-  question,
+    return <div>
-}: {
-  question: Question;
-}): JSX.Element {
-  return (
         <div>
-      <div>
+            {flattenLengths(question.equative.ps).reduce(((accum, curr, i): JSX.Element[] => (
-        {flattenLengths(question.equative.ps).reduce(
+                [
-          (accum, curr, i): JSX.Element[] => [
                     ...accum,
-            ...(i > 0 ? [<span className="text-muted"> or </span>] : []),
+                    ...i > 0 ? [<span className="text-muted"> or </span>] : [],
                     <span key={i}>{curr.p}</span>,
-          ],
+                ]
-          [] as JSX.Element[]
+            )), [] as JSX.Element[])}
-        )}
         </div>
-      <div>
+        <div><strong>{question.equative.hasBa ? "with" : "without"}</strong> a <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the kids' section.</div>
-        <strong>{question.equative.hasBa ? "with" : "without"}</strong> a{" "}
+    </div>;
-        <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the kids'
-        section.
-      </div>
-    </div>
-  );
 }
-function modExs(
+function modExs(exs: T.PsString[], withBa: boolean): { p: JSX.Element, f: JSX.Element }[] {
-  exs: T.PsString[],
+    return exs.map(ps => {
-  withBa: boolean
-): { p: JSX.Element; f: JSX.Element }[] {
-  return exs.map((ps) => {
         if (!ps.p.includes(" ___ ")) {
             return {
                 p: <>{ps.p}</>,
@@ -195,20 +161,8 @@ function modExs(
         const splitP = ps.p.split(" ___ ");
         const splitF = ps.f.split(" ___ ");
         return {
-      p: (
+            p: <>{splitP[0]} <span style={{ color: kidsColor }}>{withBa ? "به" : "__"}</span> {splitP[1]}</>,
-        <>
+            f: <>{splitF[0]} <span style={{ color: kidsColor }}>{withBa ? "ba" : "__"}</span> {splitF[1]}</>,
-          {splitP[0]}{" "}
-          <span style={{ color: kidsColor }}>{withBa ? "به" : "__"}</span>{" "}
-          {splitP[1]}
-        </>
-      ),
-      f: (
-        <>
-          {splitF[0]}{" "}
-          <span style={{ color: kidsColor }}>{withBa ? "ba" : "__"}</span>{" "}
-          {splitF[1]}
-        </>
-      ),
         };
     });
 }
@@ -225,9 +179,10 @@ function humanReadableTense(tense: T.EquativeTense | "allProduce"): string {
         : tense;
 }
 
+
+
 function getEqFromRendered(e: T.EPRendered): T.EquativeRendered {
-  const eblock = e.blocks[0].find((x) => x.block.type === "equative");
+    const eblock = e.blocks[0].find(x => x.block.type === "equative");
-  if (!eblock || eblock.block.type !== "equative")
+    if (!eblock || eblock.block.type !== "equative") throw new Error("Error getting equative block");
-    throw new Error("Error getting equative block");
     return eblock.block.equative;
 }

src/games/sub-cores/NPAdjGame.tsx

@@ -19,32 +19,26 @@ const amount = 16;
 const timeLimit = 270;
 
 type Question = {
-  selection: T.NPSelection | T.APSelection;
+    selection: T.NPSelection | T.APSelection,
-  answer: T.PsString[];
+    answer: T.PsString[],
-  english: string;
+    english: string,
 };
 
 type Level = "hints" | "no-hints" | "sandwiches";
 
-const NPAdjWriting: GameSubCore<Level> = ({
+const NPAdjWriting: GameSubCore<Level> = ({ inChapter, id, link, level }: {
-  inChapter,
+    inChapter: boolean,
-  id,
+    id: string,
-  link,
+    link: string,
-  level,
+    level: Level,
-}: {
-  inChapter: boolean;
-  id: string;
-  link: string;
-  level: Level;
 }) => {
     const npPool = makeNPAdjGenerator(level === "sandwiches" ? "low" : "high");
 
     function getQuestion(): Question {
         const np = npPool();
-    const selection: T.NPSelection | T.APSelection =
+        const selection: T.NPSelection | T.APSelection = level === "sandwiches"
-      level === "sandwiches" ? makeSandwich(np) : np;
+            ? makeSandwich(np) : np;
-    const rendered: T.Rendered<T.NPSelection> | T.Rendered<T.APSelection> =
+        const rendered: T.Rendered<T.NPSelection> | T.Rendered<T.APSelection> = selection.type === "AP"
-      selection.type === "AP"
             ? renderAPSelection(selection, 0) // WOULD BE CLEANER IF THIS WAS JUST A PURE SANDWICH, NOT AT AP
             : renderNPSelection(np, false, false, "subject", "none", false);
         const answer = getPashtoFromRendered(rendered, false);
@@ -53,7 +47,7 @@ const NPAdjWriting: GameSubCore<Level> = ({
             answer,
             english: getEnglishFromRendered(rendered) || "ERROR",
         };
-  }
+    };
     
     function Display({ question, callback }: QuestionDisplayProps<Question>) {
         const [answer, setAnswer] = useState<string>("");
@@ -64,43 +58,30 @@ const NPAdjWriting: GameSubCore<Level> = ({
                 setAnswer("");
             }
             callback(correct);
-    };
-    if (
-      !(
-        (question.selection.type === "AP" &&
-          question.selection.selection.type === "sandwich" &&
-          question.selection.selection.inside.selection.type === "noun") ||
-        (question.selection.type === "NP" &&
-          question.selection.selection.type === "noun")
-      )
-    ) {
-      throw new Error("QUESTION ERROR - BAD SELECTION");
         }
-    const nounSelection: T.NounSelection =
+        if (!(
-      question.selection.type === "AP"
+            (question.selection.type === "AP" && question.selection.selection.type === "sandwich" && question.selection.selection.inside.selection.type === "noun")
-        ? (question.selection.selection.inside.selection as T.NounSelection) // ts being dumb
+            ||
+            (question.selection.type === "NP" && question.selection.selection.type === "noun")
+        )) {
+            throw new Error("QUESTION ERROR - BAD SELECTION")
+        }
+        const nounSelection: T.NounSelection = question.selection.type === "AP"
+            ? question.selection.selection.inside.selection as T.NounSelection // ts being dumb
             : question.selection.selection;
-    const adjEntry: T.AdjectiveEntry | undefined =
+        const adjEntry: T.AdjectiveEntry | undefined = nounSelection.adjectives[0]?.entry;
-      nounSelection.adjectives[0]?.entry;
         if (!adjEntry) {
             throw new Error("QUESTION ERROR - MISSING ADJECTIVE");
         }
-    const handleInput = ({
+        const handleInput = ({ target: { value }}: React.ChangeEvent<HTMLInputElement>) => {
-      target: { value },
-    }: React.ChangeEvent<HTMLInputElement>) => {
             setAnswer(value);
-    };
+        }
-    const sandwich =
+        const sandwich = question.selection.type === "AP"
-      question.selection.type === "AP"
             ? question.selection.selection
             : undefined;
-    return (
+        return <div>
-      <div>
             <div className="my-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
-          <div
+                <div className="d-flex flex-row justify-content-center" style={{ gap: "1rem"}}>
-            className="d-flex flex-row justify-content-center"
-            style={{ gap: "1rem" }}
-          >
                     <WordCard
                         showHint={level === "hints"}
                         entry={adjEntry}
@@ -112,20 +93,16 @@ const NPAdjWriting: GameSubCore<Level> = ({
                         selection={nounSelection}
                     />
                 </div>
-          {sandwich && (
+                {sandwich && <div className="mt-2">
-            <div className="mt-2">
+                    <InlinePs opts={opts}>
-              <InlinePs
+                        {concatPsString(sandwich.before, " ... ", sandwich.after)}
-                opts={opts}
+                    </InlinePs>
-                ps={concatPsString(sandwich.before, " ... ", sandwich.after)}
+                </div>}
-              />
+                <div className="my-3 h5">
+                    {question.english}
                 </div>
-          )}
-          <div className="my-3 h5">{question.english}</div>
                 <form onSubmit={handleSubmit}>
-            <div
+                    <div className="mt-2 mb-1" style={{ maxWidth: "200px", margin: "0 auto" }}>
-              className="mt-2 mb-1"
-              style={{ maxWidth: "200px", margin: "0 auto" }}
-            >
                         <input
                             type="text"
                             className="form-control"
@@ -138,29 +115,20 @@ const NPAdjWriting: GameSubCore<Level> = ({
                         />
                     </div>
                     <div className="text-center my-3">
-              <button className="btn btn-primary" type="submit">
+                        <button className="btn btn-primary" type="submit">submit ↵</button>
-                submit ↵
-              </button>
                     </div>
                 </form>
             </div>
         </div>
-    );
     }
     
     function Instructions() {
-    return (
+        return <div>
-      <div>
+            <p className="lead">Write the {level === "sandwiches" ? "sandwich including the" : ""} adjective and noun together with the proper inflections.</p>
-        <p className="lead">
-          Write the {level === "sandwiches" ? "sandwich including the" : ""}{" "}
-          adjective and noun together with the proper inflections.
-        </p>
         </div>
-    );
     }
 
-  return (
+    return <GameCore
-    <GameCore
         inChapter={inChapter}
         studyLink={link}
         getQuestion={getQuestion}
@@ -171,31 +139,21 @@ const NPAdjWriting: GameSubCore<Level> = ({
         amount={amount}
         Instructions={Instructions}
     />
-  );
 };
 
-function DisplayCorrectAnswer({
+function DisplayCorrectAnswer({ question }: { question: Question }): JSX.Element {
-  question,
-}: {
-  question: Question;
-}): JSX.Element {
     // TODO: extract this reduces for the or, or different variations, used in VerbGame (etc.?)
-  return (
+    return <div>
         <div>
-      <div>
+            {question.answer.reduce(((accum, curr, i): JSX.Element[] => (
-        {question.answer.reduce(
+                [
-          (accum, curr, i): JSX.Element[] => [
                     ...accum,
-            ...(i > 0 ? [<span className="text-muted"> or </span>] : []),
+                    ...i > 0 ? [<span className="text-muted"> or </span>] : [],
-            <span key={i}>
+                    <span key={i}>{curr.p} - {curr.f}</span>,
-              {curr.p} - {curr.f}
+                ]
-            </span>,
+            )), [] as JSX.Element[])}
-          ],
-          [] as JSX.Element[]
-        )}
         </div>
-    </div>
+    </div>;
-  );
 }
 
 export default NPAdjWriting;

src/games/sub-cores/PerfectGame.tsx

@@ -270,8 +270,8 @@ const VerbGame: GameSubCore<PerfectGameLevel> = ({
                 className="form-check-label text-muted"
                 htmlFor="baCheckbox"
               >
-                with <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in
+                with <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs>{" "}
-                the <span style={{ color: kidsColor }}>kids' section</span>
+                in the <span style={{ color: kidsColor }}>kids' section</span>
               </label>
             </div>
           )}
@@ -352,7 +352,7 @@ function DisplayCorrectAnswer({
       </div>
       <div>
         <strong>{verbHasBa(question.rendered) ? "with" : "without"}</strong> a{" "}
-        <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the kids'
+        <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the kids'
         section.
       </div>
     </div>

src/games/sub-cores/PluralNounGame.tsx

@@ -45,7 +45,7 @@ export const nouns = wordQuery("nouns", [
   "gaawanDay",
   "sakhtee",
   "dostee",
-  "aRtyaa",
+  "aRtiyaa",
   "DaakTar",
   "laas",
   "waadu",

src/games/sub-cores/VerbFormulas.tsx

@@ -14,23 +14,19 @@ import { isImperativeTense } from "@lingdocs/ps-react/dist/lib/src/type-predicat
 const amount = 12;
 const timeLimit = 125;
 
-type StemRoot =
+type StemRoot = "imperfective stem" | "perfective stem" | "imperfective root" | "perfective root";
-  | "imperfective stem"
-  | "perfective stem"
-  | "imperfective root"
-  | "perfective root";
 type Ending = "present" | "past" | "imperative"; 
 type Formula = {
-  ba: boolean;
+    ba: boolean,
-  mu: boolean;
+    mu: boolean,
-  stemRoot: StemRoot;
+    stemRoot: StemRoot,
-  ending: Ending;
+    ending: Ending,
 };
 
 type Question = {
-  tense: T.VerbTense | T.ImperativeTense | "negative imperative";
+    tense: T.VerbTense | T.ImperativeTense | "negative imperative",
-  formula: Formula;
+    formula: Formula,
-};
+}
 
 const questions: Question[] = [
     {
@@ -131,20 +127,10 @@ const questions: Question[] = [
             stemRoot: "imperfective stem",
             ending: "imperative",
         },
-  },
+    }
 ];
 
-export default function VerbFormulas({
+export default function VerbFormulas({ inChapter, id, link, level }: { inChapter: boolean, id: string, link: string, level: "all" }) {
-  inChapter,
-  id,
-  link,
-  level,
-}: {
-  inChapter: boolean;
-  id: string;
-  link: string;
-  level: "all";
-}) {
     const questionsPool = makePool(questions);
     function getQuestion() {
         return questionsPool();
@@ -152,8 +138,7 @@ export default function VerbFormulas({
     function Instructions() {
         return <p className="lead">Pick the formula for each verb tense</p>;
     }
-  return (
+    return <GameCore
-    <GameCore
         inChapter={inChapter}
         studyLink={link}
         getQuestion={getQuestion}
@@ -164,8 +149,7 @@ export default function VerbFormulas({
         amount={amount}
         Instructions={Instructions}
     />
-  );
+};
-}
 
 function Display({ question, callback }: QuestionDisplayProps<Question>) {
     const [ba, setBa] = useState<boolean>(false);
@@ -179,22 +163,24 @@ function Display({ question, callback }: QuestionDisplayProps<Question>) {
         setMu(false);
     }, [question]);
     const canSubmit = !!(stemRoot && ending);
-  const showMu =
+    const showMu = question.tense === "negative imperative" || isImperativeTense(question.tense); 
-    question.tense === "negative imperative" ||
-    isImperativeTense(question.tense);
     function handleSubmit() {
         const { formula } = question;
         callback(
-      ba === formula.ba &&
+            (ba === formula.ba)
-        mu === formula.mu &&
+            &&
-        stemRoot === formula.stemRoot &&
+            (mu === formula.mu)
-        ending === formula.ending
+            &&
+            (stemRoot === formula.stemRoot)
+            &&
+            (ending === formula.ending)
         );
     }
-  return (
+    return <div>
-    <div>
         <div className="my-4" style={{ maxWidth: "300px", margin: "0 auto" }}>
-        <p className="lead">{humanReadableT(question.tense)}</p>
+            <p className="lead">
+                {humanReadableT(question.tense)}
+            </p>
         </div>
         <div className="text-center mb-2">
             <BaPicker value={ba} onChange={setBa} />
@@ -211,58 +197,38 @@ function Display({ question, callback }: QuestionDisplayProps<Question>) {
         </div>
         <samp>{printFormula({ ba, stemRoot, ending, mu })}</samp>
     </div>
-  );
 }
 
-function humanReadableT(
+function humanReadableT(tense: T.VerbTense | T.ImperativeTense | "negative imperative"): string {
-  tense: T.VerbTense | T.ImperativeTense | "negative imperative"
-): string {
     if (tense === "negative imperative") {
         return tense;
     }
     return humanReadableVerbForm(tense);
 }
 
-function printFormula({
+function printFormula({ mu, ba, stemRoot, ending }: {
-  mu,
+    mu: boolean,
-  ba,
+    ba: boolean,
-  stemRoot,
+    stemRoot: StemRoot | "",
-  ending,
+    ending: Ending | "",
-}: {
-  mu: boolean;
-  ba: boolean;
-  stemRoot: StemRoot | "";
-  ending: Ending | "";
 }): string {
     const elements = [
         mu ? "mu" : undefined,
         ba ? "ba" : undefined,
         stemRoot,
         ending ? `${ending} ending` : undefined,
-  ].filter((x) => x) as string[];
+    ].filter(x => x) as string[];
     return elements.join(" + ");
 }
 
-function DisplayCorrectAnswer({
+function DisplayCorrectAnswer({ question }: { question: Question }): JSX.Element {
-  question,
+    return <div>
-}: {
-  question: Question;
-}): JSX.Element {
-  return (
-    <div>
         <samp>{printFormula(question.formula)}</samp>
-    </div>
+    </div>;
-  );
 }
 
-function EndingPicker({
+function EndingPicker({ onChange, value }: { value: Ending | "", onChange: (e: Ending | "") => void }) {
-  onChange,
+    const options: { label: string, value: Ending }[] = [
-  value,
-}: {
-  value: Ending | "";
-  onChange: (e: Ending | "") => void;
-}) {
-  const options: { label: string; value: Ending }[] = [
         { label: "Present", value: "present" },
         { label: "Past", value: "past" },
         { label: "Imperative", value: "imperative" },
@@ -271,81 +237,58 @@ function EndingPicker({
         // onChange(ending === e ? "" : e);
         onChange(e);
     }
-  return (
+    return <div className="my-3">
-    <div className="my-3">
         <span className="mr-2">Ending:</span> 
         <div className="btn-group">
             {options.map((option) => (
                 <button
                     key={option.value}
                     type="button"
-            className={classNames("btn", "btn-outline-secondary", {
+                    className={classNames(
-              active: value === option.value,
+                        "btn",
-            })}
+                         "btn-outline-secondary",
+                        { active: value === option.value },
+                    )}
                     onClick={() => handleClick(option.value)}
                 >
                     {option.label}
                 </button>
             ))}
         </div>
-    </div>
+    </div>;
-  );
 }
 
-function BaPicker({
+function BaPicker({ onChange, value }: { value: boolean, onChange: (b: boolean) => void }) {
-  onChange,
+    return <div className="form-check my-3" style={{ fontSize: "larger" }}>
-  value,
-}: {
-  value: boolean;
-  onChange: (b: boolean) => void;
-}) {
-  return (
-    <div className="form-check my-3" style={{ fontSize: "larger" }}>
         <input
             id="baCheckbox"
             className="form-check-input"
             type="checkbox"
             checked={value}
-        onChange={(e) => onChange(e.target.checked)}
+            onChange={e => onChange(e.target.checked)}
         />
         <label className="form-check-label text-muted" htmlFor="baCheckbox">
-        with <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the kids'
+            with <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the kids' section
-        section
         </label>
     </div>
-  );
 }
 
-function MuPicker({
+function MuPicker({ onChange, value }: { value: boolean, onChange: (b: boolean) => void }) {
-  onChange,
+    return <div className="form-check my-3" style={{ fontSize: "larger" }}>
-  value,
-}: {
-  value: boolean;
-  onChange: (b: boolean) => void;
-}) {
-  return (
-    <div className="form-check my-3" style={{ fontSize: "larger" }}>
         <input
             id="baCheckbox"
             className="form-check-input"
             type="checkbox"
             checked={value}
-        onChange={(e) => onChange(e.target.checked)}
+            onChange={e => onChange(e.target.checked)}
         />
         <label className="form-check-label text-muted" htmlFor="baCheckbox">
-        with <InlinePs opts={opts} ps={{ p: "مه", f: "mú" }} />
+            with <InlinePs opts={opts}>{{ p: "مه", f: "mú" }}</InlinePs>
         </label>
     </div>
-  );
 }
 
-function RootsAndStemsPicker({
+function RootsAndStemsPicker({ onChange, value }: { value: StemRoot | "", onChange: (s: StemRoot | "" ) => void }) {
-  onChange,
-  value,
-}: {
-  value: StemRoot | "";
-  onChange: (s: StemRoot | "") => void;
-}) {
     const colClass = "col col-md-5 px-0 mb-1";
     const rowClass = "row justify-content-between";
     const title: CSSProperties = {
@@ -359,10 +302,7 @@ function RootsAndStemsPicker({
     function handleStemRootClick(s: StemRoot) {
         onChange(value === s ? "" : s);
     }
-  return (
+    return <div className="verb-info" style={{
-    <div
-      className="verb-info"
-      style={{
         textAlign: "center",
         maxWidth: "400px",
         margin: "0 auto", 
@@ -370,16 +310,12 @@ function RootsAndStemsPicker({
         backgroundRepeat: "no-repeat",
         backgroundPosition: "50% 45%",
         backgroundSize: "50%",    
-      }}
+    }}>
-    >
+        <div style={{
-      <div
-        style={{
             border: "2px solid black",
             padding: "1rem",
             margin: "0.25rem",
-        }}
+        }} className="container">
-        className="container"
-      >
             <div className={rowClass + " align-items-center"}>
                 <div className={colClass}>
                     <i className="fas fa-video fa-lg" />
@@ -393,60 +329,32 @@ function RootsAndStemsPicker({
                 </div>
             </div>
             <div className={rowClass}>
-          <div
+                <div className={colClass} style={value === "imperfective stem" ? highlight : {}}>
-            className={colClass}
+                    <div className="clickable" style={title} onClick={() => handleStemRootClick("imperfective stem")}>
-            style={value === "imperfective stem" ? highlight : {}}
-          >
-            <div
-              className="clickable"
-              style={title}
-              onClick={() => handleStemRootClick("imperfective stem")}
-            >
                         <div>Imperfective Stem</div>
                     </div>
                 </div>
-          <div
+                <div className={colClass} style={value === "perfective stem" ? highlight : {}}>
-            className={colClass}
+                    <div className="clickable" style={title} onClick={() => handleStemRootClick("perfective stem")}>
-            style={value === "perfective stem" ? highlight : {}}
-          >
-            <div
-              className="clickable"
-              style={title}
-              onClick={() => handleStemRootClick("perfective stem")}
-            >
                         <div>Perfective Stem</div>
                     </div>
                 </div>
             </div>
             <div className={rowClass}>
-          <div
+                <div className={colClass} style={value === "imperfective root" ? highlight : {}}>
-            className={colClass}
+                    <div className="clickable" style={title} onClick={() => handleStemRootClick("imperfective root")}>
-            style={value === "imperfective root" ? highlight : {}}
-          >
-            <div
-              className="clickable"
-              style={title}
-              onClick={() => handleStemRootClick("imperfective root")}
-            >
                         <div>Imperfective Root</div>
                     </div>
                 </div>
-          <div
+                <div className={colClass} style={value === "perfective root" ? highlight : {}}>
-            className={colClass}
-            style={value === "perfective root" ? highlight : {}}
-          >
                     <div>
-              <div
+                        <div className="clickable" style={title} onClick={() => handleStemRootClick("perfective root")}>
-                className="clickable"
-                style={title}
-                onClick={() => handleStemRootClick("perfective root")}
-              >
                             <div>Perfective Root</div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </div>;
-  );
 }
+

src/games/sub-cores/VerbGame.tsx

@@ -276,8 +276,8 @@ const VerbGame: GameSubCore<VerbGameLevel> = ({
               onChange={(e) => setWithBa(e.target.checked)}
             />
             <label className="form-check-label text-muted" htmlFor="baCheckbox">
-              with <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the{" "}
+              with <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in
-              <span style={{ color: kidsColor }}>kids' section</span>
+              the <span style={{ color: kidsColor }}>kids' section</span>
             </label>
           </div>
           <div className="my-1" style={{ maxWidth: "200px", margin: "0 auto" }}>
@@ -400,7 +400,7 @@ function DisplayCorrectAnswer({
       </div>
       <div>
         <strong>{verbHasBa(question.rendered) ? "with" : "without"}</strong> a{" "}
-        <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the kids'
+        <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the kids'
         section.
       </div>
     </div>

src/lib/misc-helpers.ts

@@ -4,7 +4,3 @@
 export function removeAShort(s: string): string {
     return s.replace(/ă/g, "a");
 }
-
-export function removeAyn(s: string): string {
-  return s.replace(/'/g, "");
-}

src/words/words.ts

@@ -6,19 +6,17 @@ import {
     Types as T,
 } from "@lingdocs/ps-react";
 import { categorize } from "../lib/categorize";
-import { removeAShort, removeAyn } from "../lib/misc-helpers";
+import { removeAShort } from "../lib/misc-helpers";
+
 
 // TODO: BIG ISSUE WITH THE LOC ADVERBS BEING LUMPED INTO THE ADVERBS!
-const words = categorize<
+const words = categorize<T.Entry, {
-  T.Entry,
+    nouns: T.NounEntry[],
-  {
+    adjectives: T.AdjectiveEntry[],
-    nouns: T.NounEntry[];
+    verbs: T.VerbEntry[],
-    adjectives: T.AdjectiveEntry[];
+    adverbs: T.AdverbEntry[],
-    verbs: T.VerbEntry[];
+    locativeAdverbs: T.LocativeAdverbEntry[],
-    adverbs: T.AdverbEntry[];
+}>(rawWords, {
-    locativeAdverbs: T.LocativeAdverbEntry[];
-  }
->(rawWords, {
     nouns: tp.isNounEntry,
     adjectives: tp.isAdjectiveEntry,
     verbs: tp.isVerbEntry,
@@ -31,52 +29,37 @@ export default words;
 export const { nouns, adjectives, verbs, adverbs, locativeAdverbs } = words;
 
 export function wordQuery(category: "nouns", w: string[]): T.NounEntry[];
-export function wordQuery(
+export function wordQuery(category: "adjectives", w: string[]): T.AdjectiveEntry[];
-  category: "adjectives",
-  w: string[]
-): T.AdjectiveEntry[];
 export function wordQuery(category: "adverbs", w: string[]): T.AdverbEntry[];
-export function wordQuery(
+export function wordQuery(category: "locativeAdverbs", w: string[]): T.LocativeAdverbEntry[];
-  category: "locativeAdverbs",
-  w: string[]
-): T.LocativeAdverbEntry[];
 export function wordQuery(category: "verbs", w: string[]): T.VerbEntry[];
 export function wordQuery(
     category: "nouns" | "adjectives" | "adverbs" | "locativeAdverbs" | "verbs",
-  w: string[]
+    w: string[],
-):
+): T.NounEntry[] | T.AdjectiveEntry[] | T.AdverbEntry[] | T.LocativeAdverbEntry[] | T.VerbEntry[] {
-  | T.NounEntry[]
-  | T.AdjectiveEntry[]
-  | T.AdverbEntry[]
-  | T.LocativeAdverbEntry[]
-  | T.VerbEntry[] {
     function queryRemoveAccents(s: string): string {
-    return removeAyn(removeAShort(removeAccents(s)));
+        return removeAShort(removeAccents(s));
     } 
     if (category === "verbs") {
-    return w.map((word) => {
+        return w.map(word => {
             const l = words[category];
-      const found = l.find((x) => vMatches(x, word));
+            const found = l.find(x => vMatches(x, word));
             if (!found) throw new Error(`${word} not found by wordQuery`);
             return found;
         });
     }
     function vMatches(x: T.VerbEntry, y: string) {
-    return (
+        return (y === x.entry.p) 
-      y === x.entry.p ||
+            || (queryRemoveAccents(y) === queryRemoveAccents(removeFVarients(x.entry.f)));
-      queryRemoveAccents(y) === queryRemoveAccents(removeFVarients(x.entry.f))
-    );
     }
     function wMatches(x: T.DictionaryEntry, y: string) {
-    return (
+        return (y === x.p) 
-      y === x.p ||
+            || (queryRemoveAccents(y) === queryRemoveAccents(removeFVarients(x.f)));
-      queryRemoveAccents(y) === queryRemoveAccents(removeFVarients(x.f))
-    );
     }
-  return w.map((word) => {
+    return w.map(word => {
         const l = words[category];
         // @ts-ignore
-    const found = l.find((x) => wMatches(x, word));
+        const found = l.find(x => wMatches(x, word));
         if (!found) throw new Error(`${word} not found by wordQuery`);
         return found;
     });

yarn.lock

@@ -1597,10 +1597,10 @@
     rambda "^6.7.0"
     react-select "^5.2.2"
 
-"@lingdocs/ps-react@^7.7.6":
+"@lingdocs/ps-react@^7.7.3":
-  version "7.7.6"
+  version "7.7.3"
-  resolved "https://npm.lingdocs.com/@lingdocs/ps-react/-/ps-react-7.7.6.tgz#07b6d30a326ca567ad469bbc338275d456fdc1a1"
+  resolved "https://npm.lingdocs.com/@lingdocs/ps-react/-/ps-react-7.7.3.tgz#353b6ddabdfabb4eae45a1d8554adb360f7238fc"
-  integrity sha512-pE8Fn8/9fSaJHSvcJiFxQOJ8M3OoI/PireM1+NSko6HvDN6Y7QIoVp785rnWJm3ZTHfq/7NzQrqfGIaMoGD/9w==
+  integrity sha512-TSK5kgyCEHTmJRH+9XfchVPUVvsjOfsLlrZlW4PL95LhvBD1dh5CazZDQlPV99CLZGz3jVf9VKpiQP7RdGYTrg==
   dependencies:
     "@formkit/auto-animate" "^1.0.0-beta.3"
     classnames "^2.5.1"