@copilotkit/react-textarea 0.19.0-alpha.7 → 0.19.0-alpha.8

package/dist/chunk-U5AJ5PBH.mjs

@@ -1,107 +0,0 @@
-import { HoveringInsertionPromptBox } from './chunk-ZA3R6NZI.mjs';
-import { useHoveringEditorContext } from './chunk-YW3REYX6.mjs';
-import { Portal, Menu } from './chunk-XHUMROEY.mjs';
-import { getTextAroundSelection, getFullEditorTextWithNewlines } from './chunk-IXJ2HCOA.mjs';
-import { useRef, useState, useEffect } from 'react';
-import { Transforms } from 'slate';
-import { useSlate, useSlateSelection } from 'slate-react';
-import { jsx } from 'react/jsx-runtime';
-
-var HoveringToolbar = (props) => {
-  const ref = useRef(null);
-  const editor = useSlate();
-  const selection = useSlateSelection();
-  const { isDisplayed, setIsDisplayed } = useHoveringEditorContext();
-  const [isClient, setIsClient] = useState(false);
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-  useEffect(() => {
-    const el = ref.current;
-    const { selection: selection2 } = editor;
-    if (!el) {
-      return;
-    }
-    if (!selection2) {
-      el.removeAttribute("style");
-      return;
-    }
-    const domSelection = window.getSelection();
-    if (!domSelection) {
-      return;
-    }
-    const domRange = domSelection.getRangeAt(0);
-    const rect = domRange.getBoundingClientRect();
-    if (rect.top === 0 && rect.left === 0 && rect.width === 0 && rect.height === 0) {
-      return;
-    }
-    const minGapFromEdge = 60;
-    const verticalOffsetFromCorner = 35;
-    const horizontalOffsetFromCorner = 15;
-    let top = rect.top + window.scrollY - el.offsetHeight + verticalOffsetFromCorner;
-    if (top < minGapFromEdge) {
-      top = rect.bottom + window.scrollY + minGapFromEdge;
-    } else if (top + el.offsetHeight > window.innerHeight - minGapFromEdge) {
-      top = rect.top + window.scrollY - el.offsetHeight - minGapFromEdge;
-    }
-    let left = rect.left + window.scrollX - el.offsetWidth / 2 + rect.width / 2 + horizontalOffsetFromCorner;
-    if (left < minGapFromEdge) {
-      left = minGapFromEdge;
-    } else if (left + el.offsetWidth > window.innerWidth - minGapFromEdge) {
-      left = window.innerWidth - el.offsetWidth - minGapFromEdge;
-    }
-    el.style.opacity = "1";
-    el.style.top = `${top}px`;
-    el.style.left = `${left}px`;
-  });
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        setIsDisplayed(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [ref, setIsDisplayed]);
-  if (!isClient) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Portal, {
-    children: /* @__PURE__ */ jsx(Menu, {
-      ref,
-      className: "p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700",
-      children: isDisplayed && selection && /* @__PURE__ */ jsx(HoveringInsertionPromptBox, {
-        editorState: editorState(editor),
-        apiConfig: props.apiConfig,
-        closeWindow: () => {
-          setIsDisplayed(false);
-        },
-        performInsertion: (insertedText) => {
-          console.log("inserted text", insertedText);
-          Transforms.delete(editor, { at: selection });
-          Transforms.insertText(editor, insertedText, {
-            at: selection
-          });
-          setIsDisplayed(false);
-        }
-      })
-    })
-  });
-};
-function editorState(editor, selection) {
-  const textAroundCursor = getTextAroundSelection(editor);
-  if (textAroundCursor) {
-    return textAroundCursor;
-  }
-  return {
-    textBeforeCursor: getFullEditorTextWithNewlines(editor),
-    textAfterCursor: "",
-    selectedText: ""
-  };
-}
-
-export { HoveringToolbar };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-U5AJ5PBH.mjs.map

package/dist/chunk-U5AJ5PBH.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/hovering-toolbar/hovering-toolbar.tsx"],"names":["selection"],"mappings":"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","sourcesContent":["import { css } from \"@emotion/css\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { BaseSelection, Editor, Range, Location, Transforms } from \"slate\";\nimport { useSlate, useSlateSelection } from \"slate-react\";\nimport { HoveringInsertionPromptBox } from \"./text-insertion-prompt-box\";\nimport { Button, Icon, Menu, Portal } from \"./hovering-toolbar-components\";\nimport { useHoveringEditorContext } from \"./hovering-editor-provider\";\nimport {\n  getFullEditorTextWithNewlines,\n  getTextAroundSelection,\n} from \"../../lib/get-text-around-cursor\";\nimport {\n  EditingEditorState,\n  InsertionEditorApiConfig,\n} from \"../../types/base/autosuggestions-bare-function\";\n\nexport interface HoveringToolbarProps {\n  apiConfig: InsertionEditorApiConfig;\n}\n\nexport const HoveringToolbar: (\n  props: HoveringToolbarProps\n) => JSX.Element | null = (props) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const editor = useSlate();\n  const selection = useSlateSelection();\n  const { isDisplayed, setIsDisplayed } = useHoveringEditorContext();\n\n  // only render on client\n  const [isClient, setIsClient] = useState(false);\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  useEffect(() => {\n    const el = ref.current;\n    const { selection } = editor;\n\n    if (!el) {\n      return;\n    }\n\n    if (!selection) {\n      el.removeAttribute(\"style\");\n      return;\n    }\n\n    const domSelection = window.getSelection();\n    if (!domSelection) {\n      return;\n    }\n\n    const domRange = domSelection.getRangeAt(0);\n    const rect = domRange.getBoundingClientRect();\n\n    // We use window = (0,0,0,0) as a signal that the selection is not in the original copilot-textarea,\n    // but inside the hovering window.\n    //\n    // in such case, we simply do nothing.\n    if (\n      rect.top === 0 &&\n      rect.left === 0 &&\n      rect.width === 0 &&\n      rect.height === 0\n    ) {\n      return;\n    }\n\n    const minGapFromEdge = 60;\n    const verticalOffsetFromCorner = 35;\n    const horizontalOffsetFromCorner = 15;\n    let top =\n      rect.top + window.scrollY - el.offsetHeight + verticalOffsetFromCorner;\n    // make sure top is in the viewport and not too close to the edge\n    if (top < minGapFromEdge) {\n      top = rect.bottom + window.scrollY + minGapFromEdge;\n    } else if (top + el.offsetHeight > window.innerHeight - minGapFromEdge) {\n      top = rect.top + window.scrollY - el.offsetHeight - minGapFromEdge;\n    }\n\n    let left =\n      rect.left +\n      window.scrollX -\n      el.offsetWidth / 2 +\n      rect.width / 2 +\n      horizontalOffsetFromCorner;\n    // make sure left is in the viewport and not too close to the edge\n    if (left < minGapFromEdge) {\n      left = minGapFromEdge;\n    } else if (left + el.offsetWidth > window.innerWidth - minGapFromEdge) {\n      left = window.innerWidth - el.offsetWidth - minGapFromEdge;\n    }\n\n    el.style.opacity = \"1\";\n    el.style.top = `${top}px`;\n    el.style.left = `${left}px`;\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        setIsDisplayed(false);\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [ref, setIsDisplayed]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  return (\n    <Portal>\n      <Menu\n        ref={ref}\n        className=\"p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700\"\n      >\n        {isDisplayed && selection && (\n          <HoveringInsertionPromptBox\n            editorState={editorState(editor, selection)}\n            apiConfig={props.apiConfig}\n            closeWindow={() => {\n              setIsDisplayed(false);\n            }}\n            performInsertion={(insertedText) => {\n              console.log(\"inserted text\", insertedText);\n              // replace the selection with the inserted text\n              Transforms.delete(editor, { at: selection });\n              Transforms.insertText(editor, insertedText, {\n                at: selection,\n              });\n              setIsDisplayed(false);\n            }}\n          />\n        )}\n      </Menu>\n    </Portal>\n  );\n};\n\nfunction editorState(editor: Editor, selection: Location): EditingEditorState {\n  const textAroundCursor = getTextAroundSelection(editor);\n  if (textAroundCursor) {\n    return textAroundCursor;\n  }\n\n  return {\n    textBeforeCursor: getFullEditorTextWithNewlines(editor),\n    textAfterCursor: \"\",\n    selectedText: \"\",\n  };\n}\n"]}

package/dist/chunk-UHD44NC5.mjs

@@ -1,101 +0,0 @@
-import { areEqual_autocompleteState } from './chunk-JAFCXEPU.mjs';
-import { nullableCompatibleEqualityCheck } from './chunk-KGKLUWKW.mjs';
-import { Debouncer } from './chunk-NKW5OU2S.mjs';
-import { __async } from './chunk-MRXNTQOX.mjs';
-import { useState, useCallback, useMemo, useEffect } from 'react';
-
-function useAutosuggestions(debounceTime, acceptAutosuggestionKey, autosuggestionFunction, insertAutocompleteSuggestion, disableWhenEmpty, disabled) {
-  const [previousAutocompleteState, setPreviousAutocompleteState] = useState(null);
-  const [currentAutocompleteSuggestion, setCurrentAutocompleteSuggestion] = useState(null);
-  const awaitForAndAppendSuggestion = useCallback(
-    (editorAutocompleteState, abortSignal) => __async(this, null, function* () {
-      if (disabled) {
-        return;
-      }
-      if (disableWhenEmpty && editorAutocompleteState.textBeforeCursor === "" && editorAutocompleteState.textAfterCursor === "") {
-        return;
-      }
-      const suggestion = yield autosuggestionFunction(
-        editorAutocompleteState,
-        abortSignal
-      );
-      if (!suggestion || abortSignal.aborted) {
-        throw new DOMException("Aborted", "AbortError");
-      }
-      setCurrentAutocompleteSuggestion({
-        text: suggestion,
-        point: editorAutocompleteState.cursorPoint
-      });
-    }),
-    [
-      autosuggestionFunction,
-      setCurrentAutocompleteSuggestion,
-      disableWhenEmpty,
-      disabled
-    ]
-  );
-  const debouncedFunction = useMemo(
-    () => new Debouncer(
-      debounceTime
-    ),
-    [debounceTime]
-  );
-  useEffect(() => {
-    return () => {
-      debouncedFunction.cancel();
-      setCurrentAutocompleteSuggestion(null);
-    };
-  }, [debouncedFunction, disabled]);
-  const onChange = useCallback(
-    (newEditorState) => {
-      const editorStateHasChanged = !nullableCompatibleEqualityCheck(
-        areEqual_autocompleteState,
-        previousAutocompleteState,
-        newEditorState
-      );
-      setPreviousAutocompleteState(newEditorState);
-      if (!editorStateHasChanged) {
-        return;
-      }
-      setCurrentAutocompleteSuggestion(null);
-      if (newEditorState) {
-        debouncedFunction.debounce(awaitForAndAppendSuggestion, newEditorState);
-      } else {
-        debouncedFunction.cancel();
-      }
-    },
-    [
-      previousAutocompleteState,
-      setPreviousAutocompleteState,
-      debouncedFunction,
-      awaitForAndAppendSuggestion,
-      setCurrentAutocompleteSuggestion
-    ]
-  );
-  const keyDownHandler = useCallback(
-    (event) => {
-      if (currentAutocompleteSuggestion) {
-        if (event.key === acceptAutosuggestionKey) {
-          event.preventDefault();
-          insertAutocompleteSuggestion(currentAutocompleteSuggestion);
-          setCurrentAutocompleteSuggestion(null);
-        }
-      }
-    },
-    [
-      currentAutocompleteSuggestion,
-      setCurrentAutocompleteSuggestion,
-      insertAutocompleteSuggestion,
-      acceptAutosuggestionKey
-    ]
-  );
-  return {
-    currentAutocompleteSuggestion,
-    onChangeHandler: onChange,
-    onKeyDownHandler: keyDownHandler
-  };
-}
-
-export { useAutosuggestions };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-UHD44NC5.mjs.map

package/dist/chunk-UHD44NC5.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/base-copilot-textarea-implementation/use-autosuggestions.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,aAAa,WAAW,SAAS,gBAAgB;AAgBnD,SAAS,mBACd,cACA,yBACA,wBACA,8BACA,kBACA,UAC0B;AAC1B,QAAM,CAAC,2BAA2B,4BAA4B,IAC5D,SAAyC,IAAI;AAE/C,QAAM,CAAC,+BAA+B,gCAAgC,IACpE,SAAqC,IAAI;AAE3C,QAAM,8BAGe;AAAA,IACnB,CACE,yBACA,gBACG;AAEH,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,UACE,oBACA,wBAAwB,qBAAqB,MAC7C,wBAAwB,oBAAoB,IAC5C;AACA;AAAA,MACF;AAGA,YAAM,aAAa,MAAM;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAGA,UAAI,CAAC,cAAc,YAAY,SAAS;AACtC,cAAM,IAAI,aAAa,WAAW,YAAY;AAAA,MAChD;AAEA,uCAAiC;AAAA,QAC/B,MAAM;AAAA,QACN,OAAO,wBAAwB;AAAA,MACjC,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,oBAAoB;AAAA,IACxB,MACE,IAAI;AAAA,MACF;AAAA,IACF;AAAA,IACF,CAAC,YAAY;AAAA,EACf;AAGA,YAAU,MAAM;AACd,WAAO,MAAM;AACX,wBAAkB,OAAO;AACzB,uCAAiC,IAAI;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,mBAAmB,QAAQ,CAAC;AAEhC,QAAM,WAAW;AAAA,IACf,CAAC,mBAAmD;AAClD,YAAM,wBAAwB,CAAC;AAAA,QAC7B;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,mCAA6B,cAAc;AAG3C,UAAI,CAAC,uBAAuB;AAC1B;AAAA,MACF;AAGA,uCAAiC,IAAI;AAGrC,UAAI,gBAAgB;AAClB,0BAAkB,SAAS,6BAA6B,cAAc;AAAA,MACxE,OAAO;AACL,0BAAkB,OAAO;AAAA,MAC3B;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,UAAI,+BAA+B;AACjC,YAAI,MAAM,QAAQ,yBAAyB;AACzC,gBAAM,eAAe;AACrB,uCAA6B,6BAA6B;AAC1D,2CAAiC,IAAI;AAAA,QACvC;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,EACpB;AACF","sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { Debouncer } from \"../../lib/debouncer\";\nimport { nullableCompatibleEqualityCheck } from \"../../lib/utils\";\nimport { AutosuggestionsBareFunction } from \"../../types/base\";\nimport { AutosuggestionState } from \"../../types/base/autosuggestion-state\";\nimport {\n  EditorAutocompleteState,\n  areEqual_autocompleteState,\n} from \"../../types/base/editor-autocomplete-state\";\n\nexport interface UseAutosuggestionsResult {\n  currentAutocompleteSuggestion: AutosuggestionState | null;\n  onChangeHandler: (newEditorState: EditorAutocompleteState | null) => void;\n  onKeyDownHandler: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nexport function useAutosuggestions(\n  debounceTime: number,\n  acceptAutosuggestionKey: string,\n  autosuggestionFunction: AutosuggestionsBareFunction,\n  insertAutocompleteSuggestion: (suggestion: AutosuggestionState) => void,\n  disableWhenEmpty: boolean,\n  disabled: boolean\n): UseAutosuggestionsResult {\n  const [previousAutocompleteState, setPreviousAutocompleteState] =\n    useState<EditorAutocompleteState | null>(null);\n\n  const [currentAutocompleteSuggestion, setCurrentAutocompleteSuggestion] =\n    useState<AutosuggestionState | null>(null);\n\n  const awaitForAndAppendSuggestion: (\n    editorAutocompleteState: EditorAutocompleteState,\n    abortSignal: AbortSignal\n  ) => Promise<void> = useCallback(\n    async (\n      editorAutocompleteState: EditorAutocompleteState,\n      abortSignal: AbortSignal\n    ) => {\n      // early return if disabled\n      if (disabled) {\n        return;\n      }\n\n      if (\n        disableWhenEmpty &&\n        editorAutocompleteState.textBeforeCursor === \"\" &&\n        editorAutocompleteState.textAfterCursor === \"\"\n      ) {\n        return;\n      }\n\n      // fetch the suggestion\n      const suggestion = await autosuggestionFunction(\n        editorAutocompleteState,\n        abortSignal\n      );\n\n      // We'll assume for now that the autocomplete function might or might not respect the abort signal.\n      if (!suggestion || abortSignal.aborted) {\n        throw new DOMException(\"Aborted\", \"AbortError\");\n      }\n\n      setCurrentAutocompleteSuggestion({\n        text: suggestion,\n        point: editorAutocompleteState.cursorPoint,\n      });\n    },\n    [\n      autosuggestionFunction,\n      setCurrentAutocompleteSuggestion,\n      disableWhenEmpty,\n      disabled,\n    ]\n  );\n\n  const debouncedFunction = useMemo(\n    () =>\n      new Debouncer<[editorAutocompleteState: EditorAutocompleteState]>(\n        debounceTime\n      ),\n    [debounceTime]\n  );\n\n  // clean current state when unmounting or disabling\n  useEffect(() => {\n    return () => {\n      debouncedFunction.cancel();\n      setCurrentAutocompleteSuggestion(null);\n    };\n  }, [debouncedFunction, disabled]);\n\n  const onChange = useCallback(\n    (newEditorState: EditorAutocompleteState | null) => {\n      const editorStateHasChanged = !nullableCompatibleEqualityCheck(\n        areEqual_autocompleteState,\n        previousAutocompleteState,\n        newEditorState\n      );\n      setPreviousAutocompleteState(newEditorState);\n\n      // if no change, do nothing\n      if (!editorStateHasChanged) {\n        return;\n      }\n\n      // if change, then first null out the current suggestion\n      setCurrentAutocompleteSuggestion(null);\n\n      // then try to get a new suggestion, debouncing to avoid too many requests while typing\n      if (newEditorState) {\n        debouncedFunction.debounce(awaitForAndAppendSuggestion, newEditorState);\n      } else {\n        debouncedFunction.cancel();\n      }\n    },\n    [\n      previousAutocompleteState,\n      setPreviousAutocompleteState,\n      debouncedFunction,\n      awaitForAndAppendSuggestion,\n      setCurrentAutocompleteSuggestion,\n    ]\n  );\n\n  const keyDownHandler = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (currentAutocompleteSuggestion) {\n        if (event.key === acceptAutosuggestionKey) {\n          event.preventDefault();\n          insertAutocompleteSuggestion(currentAutocompleteSuggestion);\n          setCurrentAutocompleteSuggestion(null);\n        }\n      }\n    },\n    [\n      currentAutocompleteSuggestion,\n      setCurrentAutocompleteSuggestion,\n      insertAutocompleteSuggestion,\n      acceptAutosuggestionKey,\n    ]\n  );\n\n  return {\n    currentAutocompleteSuggestion,\n    onChangeHandler: onChange,\n    onKeyDownHandler: keyDownHandler,\n  };\n}\n"]}

package/dist/chunk-WADHCMPK.mjs

@@ -1,3 +0,0 @@
-
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-WADHCMPK.mjs.map

package/dist/chunk-WADHCMPK.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/chunk-WJHSY5T6.mjs

@@ -1,3 +0,0 @@
-
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-WJHSY5T6.mjs.map

package/dist/chunk-WJHSY5T6.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/chunk-WJYQWL4I.mjs

@@ -1,27 +0,0 @@
-import { Transforms } from 'slate';
-
-// src/lib/slatejs-edits/add-autocompletions.ts
-function addAutocompletionsToEditor(editor, newSuggestion, point) {
-  const editorPosition = editor.selection;
-  Transforms.insertNodes(
-    editor,
-    [
-      {
-        type: "suggestion",
-        inline: true,
-        content: newSuggestion,
-        children: [{ text: "" }]
-      }
-    ],
-    {
-      at: point
-    }
-  );
-  if (editorPosition) {
-    editor.selection = editorPosition;
-  }
-}
-
-export { addAutocompletionsToEditor };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-WJYQWL4I.mjs.map

package/dist/chunk-WJYQWL4I.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/lib/slatejs-edits/add-autocompletions.ts"],"names":[],"mappings":";AAAA,SAAoB,kBAAkB;AAG/B,SAAS,2BACd,QACA,eACA,OACA;AACA,QAAM,iBAAiB,OAAO;AAE9B,aAAW;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,QACE,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE,IAAI;AAAA,IACN;AAAA,EACF;AAGA,MAAI,gBAAgB;AAClB,WAAO,YAAY;AAAA,EACrB;AACF","sourcesContent":["import { BasePoint, Transforms } from \"slate\";\nimport { CustomEditor } from \"../../types/base/custom-editor\";\n\nexport function addAutocompletionsToEditor(\n  editor: CustomEditor,\n  newSuggestion: string,\n  point: BasePoint\n) {\n  const editorPosition = editor.selection;\n\n  Transforms.insertNodes(\n    editor,\n    [\n      {\n        type: \"suggestion\",\n        inline: true,\n        content: newSuggestion,\n        children: [{ text: \"\" }],\n      },\n    ],\n    {\n      at: point,\n    }\n  );\n\n  // restore cursor position\n  if (editorPosition) {\n    editor.selection = editorPosition;\n  }\n}\n"]}

package/dist/chunk-XA7M72ZO.mjs

@@ -1,106 +0,0 @@
-import { Dialog, DialogContent } from './chunk-O5OWT5GE.mjs';
-import { cn } from './chunk-KGKLUWKW.mjs';
-import { __objRest, __spreadValues, __spreadProps } from './chunk-MRXNTQOX.mjs';
-import * as React from 'react';
-import { Command as Command$1 } from 'cmdk';
-import { jsx } from 'react/jsx-runtime';
-
-var Command = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(Command$1, __spreadValues({
-    ref,
-    className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )
-  }, props));
-});
-Command.displayName = Command$1.displayName;
-var CommandDialog = (_a) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx(Dialog, __spreadProps(__spreadValues({}, props), {
-    children: /* @__PURE__ */ jsx(DialogContent, {
-      className: "overflow-hidden p-0 shadow-lg",
-      children: /* @__PURE__ */ jsx(Command, {
-        className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
-        children
-      })
-    })
-  }));
-};
-var CommandInput = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx("div", {
-    className: "flex items-center border-b px-3",
-    "cmdk-input-wrapper": "",
-    children: /* @__PURE__ */ jsx(Command$1.Input, __spreadValues({
-      ref,
-      className: cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )
-    }, props))
-  });
-});
-CommandInput.displayName = Command$1.Input.displayName;
-var CommandList = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(Command$1.List, __spreadValues({
-    ref,
-    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)
-  }, props));
-});
-CommandList.displayName = Command$1.List.displayName;
-var CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, __spreadValues({
-  ref,
-  className: "py-6 text-center text-sm"
-}, props)));
-CommandEmpty.displayName = Command$1.Empty.displayName;
-var CommandGroup = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(Command$1.Group, __spreadValues({
-    ref,
-    className: cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )
-  }, props));
-});
-CommandGroup.displayName = Command$1.Group.displayName;
-var CommandSeparator = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(Command$1.Separator, __spreadValues({
-    ref,
-    className: cn("-mx-1 h-px bg-border", className)
-  }, props));
-});
-CommandSeparator.displayName = Command$1.Separator.displayName;
-var CommandItem = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(Command$1.Item, __spreadValues({
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )
-  }, props));
-});
-CommandItem.displayName = Command$1.Item.displayName;
-var CommandShortcut = (_a) => {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx("span", __spreadValues({
-    className: cn(
-      "ml-auto text-xs tracking-widest text-muted-foreground",
-      className
-    )
-  }, props));
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-XA7M72ZO.mjs.map

package/dist/chunk-XA7M72ZO.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/ui/command.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAEA,YAAY,WAAW;AAEvB,SAAS,WAAW,wBAAwB;AAU1C;AAdF;AAUA,IAAM,UAAgB,iBAGpB,CAAC,IAAyB,QAAK;AAA9B,eAAE,YAbL,IAaG,IAAgB,kBAAhB,IAAgB,CAAd;AACH,6BAAC;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,KACI,MACN;AAAA,CACD;AACD,QAAQ,cAAc,iBAAiB;AAIvC,IAAM,gBAAgB,CAAC,OAA+C;AAA/C,eAAE,WA3BzB,IA2BuB,IAAe,kBAAf,IAAe,CAAb;AACvB,SACE,oBAAC,yCAAW,QAAX;AAAA,IACC,8BAAC;AAAA,MAAc,WAAU;AAAA,MACvB,8BAAC;AAAA,QAAQ,WAAU;AAAA,QAChB;AAAA,OACH;AAAA,KACF;AAAA,IACF;AAEJ;AAEA,IAAM,eAAqB,iBAGzB,CAAC,IAAyB,QAAK;AAA9B,eAAE,YA1CL,IA0CG,IAAgB,kBAAhB,IAAgB,CAAd;AACH,6BAAC;AAAA,IAAI,WAAU;AAAA,IAAkC,sBAAmB;AAAA,IAElE,8BAAC,iBAAiB,OAAjB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,OACI,MACN;AAAA,GACF;AAAA,CACD;AAED,aAAa,cAAc,iBAAiB,MAAM;AAElD,IAAM,cAAoB,iBAGxB,CAAC,IAAyB,QAAK;AAA9B,eAAE,YA7DL,IA6DG,IAAgB,kBAAhB,IAAgB,CAAd;AACH,6BAAC,iBAAiB,MAAjB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,mDAAmD,SAAS;AAAA,KACtE,MACN;AAAA,CACD;AAED,YAAY,cAAc,iBAAiB,KAAK;AAEhD,IAAM,eAAqB,iBAGzB,CAAC,OAAO,QACR,oBAAC,iBAAiB,OAAjB;AAAA,EACC;AAAA,EACA,WAAU;AAAA,GACN,MACN,CACD;AAED,aAAa,cAAc,iBAAiB,MAAM;AAElD,IAAM,eAAqB,iBAGzB,CAAC,IAAyB,QAAK;AAA9B,eAAE,YAvFL,IAuFG,IAAgB,kBAAhB,IAAgB,CAAd;AACH,6BAAC,iBAAiB,OAAjB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,KACI,MACN;AAAA,CACD;AAED,aAAa,cAAc,iBAAiB,MAAM;AAElD,IAAM,mBAAyB,iBAG7B,CAAC,IAAyB,QAAK;AAA9B,eAAE,YAvGL,IAuGG,IAAgB,kBAAhB,IAAgB,CAAd;AACH,6BAAC,iBAAiB,WAAjB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,wBAAwB,SAAS;AAAA,KAC3C,MACN;AAAA,CACD;AACD,iBAAiB,cAAc,iBAAiB,UAAU;AAE1D,IAAM,cAAoB,iBAGxB,CAAC,IAAyB,QAAK;AAA9B,eAAE,YAnHL,IAmHG,IAAgB,kBAAhB,IAAgB,CAAd;AACH,6BAAC,iBAAiB,MAAjB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,KACI,MACN;AAAA,CACD;AAED,YAAY,cAAc,iBAAiB,KAAK;AAEhD,IAAM,kBAAkB,CAAC,OAGoB;AAHpB,eACvB;AAAA;AAAA,EAjIF,IAgIyB,IAEpB,kBAFoB,IAEpB;AAAA,IADH;AAAA;AAGA,SACE,oBAAC;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,KACI,MACN;AAEJ;AACA,gBAAgB,cAAc","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { DialogProps } from \"@radix-ui/react-dialog\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Search } from \"lucide-react\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Dialog, DialogContent } from \"./dialog\";\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    {/* <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" /> */}\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n    {...props}\n  />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    {...props}\n  />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n};\nCommandShortcut.displayName = \"CommandShortcut\";\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};\n"]}

package/dist/chunk-XHUMROEY.mjs

@@ -1,91 +0,0 @@
-import { __objRest, __spreadProps, __spreadValues } from './chunk-MRXNTQOX.mjs';
-import { cx, css } from '@emotion/css';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { jsx } from 'react/jsx-runtime';
-
-var Button = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      active,
-      reversed
-    } = _b, props = __objRest(_b, [
-      "className",
-      "active",
-      "reversed"
-    ]);
-    return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, props), {
-      ref,
-      className: cx(
-        className,
-        css`
-          cursor: pointer;
-          color: ${reversed ? active ? "white" : "#aaa" : active ? "black" : "#ccc"};
-        `
-      )
-    }));
-  }
-);
-var Icon = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, props), {
-      ref,
-      className: cx(
-        "material-icons",
-        className,
-        css`
-          font-size: 18px;
-          vertical-align: text-bottom;
-        `
-      )
-    }));
-  }
-);
-var Menu = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, props), {
-      "data-test-id": "menu",
-      ref,
-      className: cx(
-        className,
-        css`
-          & > * {
-            display: inline-block;
-          }
-
-          & > * + * {
-            margin-left: 15px;
-          }
-        `
-      )
-    }));
-  }
-);
-var Portal = ({ children }) => {
-  return typeof document === "object" ? ReactDOM.createPortal(children, document.body) : null;
-};
-var Toolbar = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx(Menu, __spreadProps(__spreadValues({}, props), {
-      ref,
-      className: cx(
-        className,
-        css`
-          position: relative;
-          padding: 1px 18px 17px;
-          margin: 0 -20px;
-          border-bottom: 2px solid #eee;
-          margin-bottom: 20px;
-        `
-      )
-    }));
-  }
-);
-
-export { Button, Icon, Menu, Portal, Toolbar };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-XHUMROEY.mjs.map

package/dist/chunk-XHUMROEY.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/hovering-toolbar/hovering-toolbar-components.tsx"],"names":[],"mappings":";;;;;;;AAAA,SAAS,KAAK,UAAU;AACxB,OAAO,WAAuC;AAC9C,OAAO,cAAc;AAsBjB;AAfG,IAAM,SAAS,MAAM;AAAA,EAC1B,CACE,IAWA,QACA;AAZA,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,IAdN,IAWI,IAIK,kBAJL,IAIK;AAAA,MAHH;AAAA,MACA;AAAA,MACA;AAAA;AAUF,+BAAC,yCACK,QADL;AAAA,MAEC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA;AAAA,mBAEW,WACL,SACE,UACA,SACF,SACA,UACA;AAAA;AAAA,MAER;AAAA,MACF;AAAA;AAEJ;AAEO,IAAM,OAAO,MAAM;AAAA,EACxB,CACE,IACA,QACA;AAFA,iBAAE,YA9CN,IA8CI,IAAgB,kBAAhB,IAAgB,CAAd;AAGF,+BAAC,yCACK,QADL;AAAA,MAEC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,MAIF;AAAA,MACF;AAAA;AAEJ;AAEO,IAAM,OAAO,MAAM;AAAA,EACxB,CACE,IACA,QACA;AAFA,iBAAE,YAlEN,IAkEI,IAAgB,kBAAhB,IAAgB,CAAd;AAGF,+BAAC,wCACK,QADL;AAAA,MAEC,gBAAa;AAAA,MACb;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASF;AAAA,MACF;AAAA;AAEJ;AACO,IAAM,SAAS,CAAC,EAAE,SAAS,MAAqC;AACrE,SAAO,OAAO,aAAa,WACvB,SAAS,aAAa,UAAU,SAAS,IAAI,IAC7C;AACN;AAEO,IAAM,UAAU,MAAM;AAAA,EAC3B,CACE,IACA,QACA;AAFA,iBAAE,YAhGN,IAgGI,IAAgB,kBAAhB,IAAgB,CAAd;AAGF,+BAAC,uCACK,QADL;AAAA,MAEC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOF;AAAA,MACF;AAAA;AAEJ","sourcesContent":["import { css, cx } from \"@emotion/css\";\nimport React, { PropsWithChildren, Ref } from \"react\";\nimport ReactDOM from \"react-dom\";\n\ninterface BaseProps {\n  className: string;\n  [key: string]: unknown;\n}\n\nexport const Button = React.forwardRef(\n  (\n    {\n      className,\n      active,\n      reversed,\n      ...props\n    }: PropsWithChildren<\n      {\n        active: boolean;\n        reversed: boolean;\n      } & BaseProps\n    >,\n    ref: Ref<HTMLSpanElement | null>\n  ) => (\n    <span\n      {...props}\n      ref={ref as Ref<HTMLSpanElement>}\n      className={cx(\n        className,\n        css`\n          cursor: pointer;\n          color: ${reversed\n            ? active\n              ? \"white\"\n              : \"#aaa\"\n            : active\n            ? \"black\"\n            : \"#ccc\"};\n        `\n      )}\n    />\n  )\n);\n\nexport const Icon = React.forwardRef(\n  (\n    { className, ...props }: PropsWithChildren<BaseProps>,\n    ref: Ref<HTMLSpanElement | null>\n  ) => (\n    <span\n      {...props}\n      ref={ref as Ref<HTMLSpanElement>}\n      className={cx(\n        \"material-icons\",\n        className,\n        css`\n          font-size: 18px;\n          vertical-align: text-bottom;\n        `\n      )}\n    />\n  )\n);\n\nexport const Menu = React.forwardRef(\n  (\n    { className, ...props }: PropsWithChildren<BaseProps>,\n    ref: Ref<HTMLDivElement | null>\n  ) => (\n    <div\n      {...props}\n      data-test-id=\"menu\"\n      ref={ref as Ref<HTMLDivElement>}\n      className={cx(\n        className,\n        css`\n          & > * {\n            display: inline-block;\n          }\n\n          & > * + * {\n            margin-left: 15px;\n          }\n        `\n      )}\n    />\n  )\n);\nexport const Portal = ({ children }: { children: React.ReactNode }) => {\n  return typeof document === \"object\"\n    ? ReactDOM.createPortal(children, document.body)\n    : null;\n};\n\nexport const Toolbar = React.forwardRef(\n  (\n    { className, ...props }: PropsWithChildren<BaseProps>,\n    ref?: Ref<HTMLDivElement>\n  ) => (\n    <Menu\n      {...props}\n      ref={ref}\n      className={cx(\n        className,\n        css`\n          position: relative;\n          padding: 1px 18px 17px;\n          margin: 0 -20px;\n          border-bottom: 2px solid #eee;\n          margin-bottom: 20px;\n        `\n      )}\n    />\n  )\n);\n"]}