@koine/react 1.0.11 → 1.0.14

package/Dialog/sc/bare.js

@@ -1,61 +1,43 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
 import { extendComponent } from "../../helpers";
 import { inset0 } from "../../styles/styled";
 import { IconButton } from "../../Buttons";
 import * as _ from "../DialogMui";
-export const Root = styled(_.Root) `
-  z-index: 1300;
-  position: fixed;
-  ${inset0}
-`;
+export var Root = styled(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"], ["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"])), inset0);
 // export const Backdrop = (props) => {
 //   return <div {...props} />;
 // }
-export const Backdrop = styled(_.Backdrop) `
-  z-index: -1;
-  position: fixed;
-  ${inset0}
-  backdrop-filter: blur(0px);
-  -webkit-tap-highlight-color: transparent;
-`;
+export var Backdrop = styled(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: -1;\n  position: fixed;\n  ", "\n  backdrop-filter: blur(0px);\n  -webkit-tap-highlight-color: transparent;\n"], ["\n  z-index: -1;\n  position: fixed;\n  ", "\n  backdrop-filter: blur(0px);\n  -webkit-tap-highlight-color: transparent;\n"])), inset0);
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
  */
-export const Container = styled(_.Container) `
-  height: 100%;
-  outline: 0;
-  ${(p) => p.$scrollPaper
-    ? "display: flex; justify-content: center; align-items: center;"
-    : "overflow: hidden auto; text-align: center; &:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }"}
-`;
+export var Container = styled(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  outline: 0;\n  ", "\n"], ["\n  height: 100%;\n  outline: 0;\n  ", "\n"])), function (p) {
+    return p.$scrollPaper
+        ? "display: flex; justify-content: center; align-items: center;"
+        : "overflow: hidden auto; text-align: center; &:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }";
+});
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
  */
-export const Paper = styled(_.Paper) `
-  position: relative;
-  ${(p) => p.$scrollPaper
-    ? "display: flex; flex-direction: column; max-height: calc(100%-64px);"
-    : "display: inline-block; vertical-align: middle; text-align: initial;"}
-`;
-export const Close = styled(IconButton) `
-  position: absolute;
-`;
-export const Header = styled(_.Header) ``;
+export var Paper = styled(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (p) {
+    return p.$scrollPaper
+        ? "display: flex; flex-direction: column; max-height: calc(100%-64px);"
+        : "display: inline-block; vertical-align: middle; text-align: initial;";
+});
+export var Close = styled(IconButton)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n"], ["\n  position: absolute;\n"])));
+export var Header = styled(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
  */
-export const Body = styled(_.Body) `
-  flex: 1 1 auto;
-  -webkit-overflow-scrolling: touch;
-  overflow-y: auto;
-  overflow: auto;
-`;
-export const KoineDialog = extendComponent(_.KoineDialog, {
-    Root,
-    Backdrop,
-    Container,
-    Paper,
-    Close,
-    Header,
-    Body,
+export var Body = styled(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n  overflow: auto;\n"], ["\n  flex: 1 1 auto;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n  overflow: auto;\n"])));
+export var KoineDialog = extendComponent(_.KoineDialog, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/sc/framer.js

@@ -3,14 +3,14 @@ import { extendComponent } from "../../helpers";
 import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
 import { KoineDialog as _ } from "../m/bare";
 import { Root, Backdrop, Container, Paper, Close, Header, Body } from "./bare";
-export const KoineDialog = extendComponent(_, {
-    Root,
+export var KoineDialog = extendComponent(_, {
+    Root: Root,
     Backdrop: m(Backdrop),
-    Container,
+    Container: Container,
     Paper: m(Paper),
-    Close,
-    Header,
-    Body,
+    Close: Close,
+    Header: Header,
+    Body: Body,
     mBackdrop: dialogBackdropMotion,
     mPaper: dialogPaperMotion,
 });

package/Dialog/sc/framerMaterial.js

@@ -3,14 +3,14 @@ import { extendComponent } from "../../helpers";
 import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
 import { KoineDialog as _ } from "../m/bare";
 import { Root, Backdrop, Container, Paper, Close, Header, Body, } from "./material";
-export const KoineDialog = extendComponent(_, {
-    Root,
+export var KoineDialog = extendComponent(_, {
+    Root: Root,
     Backdrop: m(Backdrop),
-    Container,
+    Container: Container,
     Paper: m(Paper),
-    Close,
-    Header,
-    Body,
+    Close: Close,
+    Header: Header,
+    Body: Body,
     mBackdrop: dialogBackdropMotion,
     mPaper: dialogPaperMotion,
 });

package/Dialog/sc/material.js

@@ -1,41 +1,21 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
 import { extendComponent } from "../../helpers";
 import { KoineDialog as _ } from "./bare";
-export const Root = styled(_.Root) ``;
-export const Backdrop = styled(_.Backdrop) `
-  background: rgba(0, 0, 0, 0.5);
-  filter: backdrop-blur(4px);
-`;
-export const Container = styled(_.Container) ``;
-export const Paper = styled(_.Paper) `
-  max-width: 640px;
-  margin: 64px;
-  border-radius: 4px;
-  background: white;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-`;
-export const Close = styled(_.Close) `
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 8px;
-  font-size: 2rem;
-  opacity: 0.5;
-`;
-export const Header = styled(_.Header) `
-  padding: 16px;
-  font-size: 1.25rem;
-`;
-export const Body = styled(_.Body) `
-  padding: 16px;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
-`;
-export const KoineDialog = extendComponent(_, {
-    Root,
-    Backdrop,
-    Container,
-    Paper,
-    Close,
-    Header,
-    Body,
+export var Root = styled(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+export var Backdrop = styled(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: rgba(0, 0, 0, 0.5);\n  filter: backdrop-blur(4px);\n"], ["\n  background: rgba(0, 0, 0, 0.5);\n  filter: backdrop-blur(4px);\n"])));
+export var Container = styled(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var Paper = styled(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-width: 640px;\n  margin: 64px;\n  border-radius: 4px;\n  background: white;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n"], ["\n  max-width: 640px;\n  margin: 64px;\n  border-radius: 4px;\n  background: white;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n"])));
+export var Close = styled(_.Close)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 8px;\n  font-size: 2rem;\n  opacity: 0.5;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 8px;\n  font-size: 2rem;\n  opacity: 0.5;\n"])));
+export var Header = styled(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding: 16px;\n  font-size: 1.25rem;\n"], ["\n  padding: 16px;\n  font-size: 1.25rem;\n"])));
+export var Body = styled(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 16px;\n  border-top: 1px solid rgba(0, 0, 0, 0.08);\n"], ["\n  padding: 16px;\n  border-top: 1px solid rgba(0, 0, 0, 0.08);\n"])));
+export var KoineDialog = extendComponent(_, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/tw/bare.js

@@ -1,21 +1,26 @@
+import { __makeTemplateObject } from "tslib";
 import { classed, extendComponent } from "../../helpers";
 import * as _ from "../DialogMui";
-export const Root = classed(_.Root) `< class="dialog fixed z-[1300] inset-0`;
-export const Backdrop = classed(_.Backdrop) `< class="dialogBackdrop fixed -z-[1] inset-0 [-webkit-tap-highlight-color:transparent]`;
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["< class=\"dialog fixed z-[1300] inset-0"], ["< class=\"dialog fixed z-[1300] inset-0"])));
+export var Backdrop = classed(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"dialogBackdrop fixed -z-[1] inset-0 [-webkit-tap-highlight-color:transparent]"], ["< class=\"dialogBackdrop fixed -z-[1] inset-0 [-webkit-tap-highlight-color:transparent]"])));
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
  */
-export const Container = classed(_.Container) `< class="dialogContainer h-full outline-0 ${(p) => p.$scrollPaper
-    ? "flex justify-center items-center"
-    : "overflow-y-auto overflow-x-hidden text-center [after:content:''] after:inline-block after:align-middle after:h-full after:w-0"}`;
+export var Container = classed(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["< class=\"dialogContainer h-full outline-0 ", ""], ["< class=\"dialogContainer h-full outline-0 ", ""])), function (p) {
+    return p.$scrollPaper
+        ? "flex justify-center items-center"
+        : "overflow-y-auto overflow-x-hidden text-center [after:content:''] after:inline-block after:align-middle after:h-full after:w-0";
+});
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
  */
-export const Paper = classed(_.Paper) `< class="dialogPaper relative ${(p) => p.$scrollPaper
-    ? "flex flex-col max-h-[calc(100%-64px)]"
-    : "inline-block align-middle [text-align:initial]"}`;
-export const Close = classed(_.Close) `< class="dialogClose`;
-export const Header = classed(_.Header) `< class="dialogHeader`;
+export var Paper = classed(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"dialogPaper relative ", ""], ["< class=\"dialogPaper relative ", ""])), function (p) {
+    return p.$scrollPaper
+        ? "flex flex-col max-h-[calc(100%-64px)]"
+        : "inline-block align-middle [text-align:initial]";
+});
+export var Close = classed(_.Close)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"dialogClose"], ["< class=\"dialogClose"])));
+export var Header = classed(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["< class=\"dialogHeader"], ["< class=\"dialogHeader"])));
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
  * The arbitrary rule webkit-overflow-scrolling is to add iOS momentum scrolling for iOS < 13.0,
@@ -24,13 +29,14 @@ export const Header = classed(_.Header) `< class="dialogHeader`;
  * @see https://github.com/tailwindlabs/tailwindcss.com/issues/483
  * @see https://v2.tailwindcss.com/docs/upgrading-to-v2#the-scrolling-touch-and-scrolling-auto-utilities-have-been-removed
  */
-export const Body = classed(_.Body) `< class="dialogBody flex-1 basis-auto overflow-y-auto [-webkit-overflow-scrolling:touch]`;
-export const KoineDialog = extendComponent(_.KoineDialog, {
-    Root,
-    Backdrop,
-    Container,
-    Paper,
-    Close,
-    Header,
-    Body,
+export var Body = classed(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["< class=\"dialogBody flex-1 basis-auto overflow-y-auto [-webkit-overflow-scrolling:touch]"], ["< class=\"dialogBody flex-1 basis-auto overflow-y-auto [-webkit-overflow-scrolling:touch]"])));
+export var KoineDialog = extendComponent(_.KoineDialog, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/tw/elegant.js

@@ -1,18 +1,20 @@
+import { __makeTemplateObject } from "tslib";
 import { classed, extendComponent } from "../../helpers";
 import { KoineDialog as _ } from "./bare";
-export const Root = classed(_.Root) ``;
-export const Backdrop = classed(_.Backdrop) `< class="bg-white/[.5] backdrop-blur-sm`;
-export const Container = classed(_.Container) ``;
-export const Paper = classed(_.Paper) `< class="bg-white shadow-xl m-8 max-w-screen-sm border border-gray-400`;
-export const Close = classed(_.Close) `< class="absolute top-0 right-0 p-8 text-2xl opacity-20 hover:opacity-100 focus:opacity-100`;
-export const Header = classed(_.Header) `< class="p-8 text-2xl bold italic`;
-export const Body = classed(_.Body) `< class="p-8 pt-4`;
-export const KoineDialog = extendComponent(_, {
-    Root,
-    Backdrop,
-    Container,
-    Paper,
-    Close,
-    Header,
-    Body,
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+export var Backdrop = classed(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"bg-white/[.5] backdrop-blur-sm"], ["< class=\"bg-white/[.5] backdrop-blur-sm"])));
+export var Container = classed(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var Paper = classed(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"bg-white shadow-xl m-8 max-w-screen-sm border border-gray-400"], ["< class=\"bg-white shadow-xl m-8 max-w-screen-sm border border-gray-400"])));
+export var Close = classed(_.Close)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"absolute top-0 right-0 p-8 text-2xl opacity-20 hover:opacity-100 focus:opacity-100"], ["< class=\"absolute top-0 right-0 p-8 text-2xl opacity-20 hover:opacity-100 focus:opacity-100"])));
+export var Header = classed(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["< class=\"p-8 text-2xl bold italic"], ["< class=\"p-8 text-2xl bold italic"])));
+export var Body = classed(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["< class=\"p-8 pt-4"], ["< class=\"p-8 pt-4"])));
+export var KoineDialog = extendComponent(_, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/tw/framer.js

@@ -3,14 +3,14 @@ import { extendComponent } from "../../helpers";
 import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
 import { KoineDialog as _ } from "../m/bare";
 import { Root, Backdrop, Container, Paper, Close, Header, Body } from "./bare";
-export const KoineDialog = extendComponent(_, {
-    Root,
+export var KoineDialog = extendComponent(_, {
+    Root: Root,
     Backdrop: m(Backdrop),
-    Container,
+    Container: Container,
     Paper: m(Paper),
-    Close,
-    Header,
-    Body,
+    Close: Close,
+    Header: Header,
+    Body: Body,
     mBackdrop: dialogBackdropMotion,
     mPaper: dialogPaperMotion,
 });

package/Dialog/tw/framerMaterial.js

@@ -3,14 +3,14 @@ import { extendComponent } from "../../helpers";
 import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
 import { KoineDialog as _ } from "../m/bare";
 import { Root, Backdrop, Container, Paper, Close, Header, Body, } from "./material";
-export const KoineDialog = extendComponent(_, {
-    Root,
+export var KoineDialog = extendComponent(_, {
+    Root: Root,
     Backdrop: m(Backdrop),
-    Container,
+    Container: Container,
     Paper: m(Paper),
-    Close,
-    Header,
-    Body,
+    Close: Close,
+    Header: Header,
+    Body: Body,
     mBackdrop: dialogBackdropMotion,
     mPaper: dialogPaperMotion,
 });

package/Dialog/tw/material.js

@@ -1,18 +1,20 @@
+import { __makeTemplateObject } from "tslib";
 import { classed, extendComponent } from "../../helpers";
 import { KoineDialog as _ } from "./bare";
-export const Root = classed(_.Root) ``;
-export const Backdrop = classed(_.Backdrop) `< class="bg-black/[.5] backdrop-blur-sm`;
-export const Container = classed(_.Container) ``;
-export const Paper = classed(_.Paper) `< class="rounded bg-white shadow-xl m-8 max-w-screen-sm`;
-export const Close = classed(_.Close) `< class="absolute top-0 right-0 p-4 text-2xl opacity-50`;
-export const Header = classed(_.Header) `< class="p-4 text-xl`;
-export const Body = classed(_.Body) `< class="p-4 border-t border-gray-200`;
-export const KoineDialog = extendComponent(_, {
-    Root,
-    Backdrop,
-    Container,
-    Paper,
-    Close,
-    Header,
-    Body,
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+export var Backdrop = classed(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"bg-black/[.5] backdrop-blur-sm"], ["< class=\"bg-black/[.5] backdrop-blur-sm"])));
+export var Container = classed(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var Paper = classed(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"rounded bg-white shadow-xl m-8 max-w-screen-sm"], ["< class=\"rounded bg-white shadow-xl m-8 max-w-screen-sm"])));
+export var Close = classed(_.Close)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"absolute top-0 right-0 p-4 text-2xl opacity-50"], ["< class=\"absolute top-0 right-0 p-4 text-2xl opacity-50"])));
+export var Header = classed(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["< class=\"p-4 text-xl"], ["< class=\"p-4 text-xl"])));
+export var Body = classed(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["< class=\"p-4 border-t border-gray-200"], ["< class=\"p-4 border-t border-gray-200"])));
+export var KoineDialog = extendComponent(_, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Editor/Editor--tiptap.js

@@ -1,23 +1,26 @@
+import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import { EditorGlobalStyles, EditorRoot, EditorBarRoot, EditorBarBtn, EditorIconBold, EditorIconItalic, } from "./components";
-export const EditorBar = ({ editor }) => {
-    const handleClick = useCallback((e, type) => {
+export var EditorBar = function (_a) {
+    var editor = _a.editor;
+    var handleClick = useCallback(function (e, type) {
         e.preventDefault();
-        editor?.chain().focus()[`toggle${type}`]().run();
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus()["toggle".concat(type)]().run();
     }, [editor]);
     if (!editor) {
         return null;
     }
-    return (_jsxs(EditorBarRoot, { children: [_jsx(EditorBarBtn, { onClick: (e) => handleClick(e, "Bold"), className: editor.isActive("bold") ? "is-active" : "", children: _jsx(EditorIconBold, {}) }), _jsx(EditorBarBtn, { onClick: (e) => handleClick(e, "Italic"), className: editor.isActive("bold") ? "is-active" : "", children: _jsx(EditorIconItalic, {}) })] }));
+    return (_jsxs(EditorBarRoot, { children: [_jsx(EditorBarBtn, __assign({ onClick: function (e) {
+                    return handleClick(e, "Bold");
+                }, className: editor.isActive("bold") ? "is-active" : "" }, { children: _jsx(EditorIconBold, {}) })), _jsx(EditorBarBtn, __assign({ onClick: function (e) {
+                    return handleClick(e, "Italic");
+                }, className: editor.isActive("bold") ? "is-active" : "" }, { children: _jsx(EditorIconItalic, {}) }))] }));
 };
-export const Editor = ({ options, ...props }) => {
-    const editor = useEditor({
-        extensions: [StarterKit],
-        content: "",
-        ...(options || {}),
-    });
-    return (_jsxs(EditorRoot, { children: [_jsx(EditorGlobalStyles, {}), _jsx(EditorBar, { editor: editor }), _jsx(EditorContent, { className: "EditorContent", editor: editor, ...props })] }));
+export var Editor = function (_a) {
+    var options = _a.options, props = __rest(_a, ["options"]);
+    var editor = useEditor(__assign({ extensions: [StarterKit], content: "" }, (options || {})));
+    return (_jsxs(EditorRoot, { children: [_jsx(EditorGlobalStyles, {}), _jsx(EditorBar, { editor: editor }), _jsx(EditorContent, __assign({ className: "EditorContent", editor: editor }, props))] }));
 };

package/Editor/components.js

@@ -1,28 +1,10 @@
+import { __makeTemplateObject } from "tslib";
 import styled, { createGlobalStyle } from "styled-components";
 import { IconButton } from "../Buttons/IconButton";
 import { inputPadding, inputBorder, inputFocus } from "../Forms/styles";
 export { MdFormatBold as EditorIconBold, MdFormatItalic as EditorIconItalic, } from "react-icons/md";
-export const EditorRoot = styled.div `
-  ${inputBorder}
-  ${inputFocus}
-`;
-export const EditorBarRoot = styled.div `
-  display: flex;
-  justify-content: flex-end;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  /* background: var(--grey900); */
-`;
-export const EditorBarBtn = styled(IconButton) ``;
-export const EditorGlobalStyles = createGlobalStyle `
-  .ProseMirror {
-    ${inputPadding}
-    
-    &:focus {
-      outline:none;
-    }
-
-    > *:first-child {
-      margin-top: 0;
-    }
-  }
-`;
+export var EditorRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), inputBorder, inputFocus);
+export var EditorBarRoot = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  /* background: var(--grey900); */\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  /* background: var(--grey900); */\n"])));
+export var EditorBarBtn = styled(IconButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var EditorGlobalStyles = createGlobalStyle(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .ProseMirror {\n    ", "\n    \n    &:focus {\n      outline:none;\n    }\n\n    > *:first-child {\n      margin-top: 0;\n    }\n  }\n"], ["\n  .ProseMirror {\n    ", "\n    \n    &:focus {\n      outline:none;\n    }\n\n    > *:first-child {\n      margin-top: 0;\n    }\n  }\n"])), inputPadding);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Favicon/FaviconTags.js

@@ -9,6 +9,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * @see https://realfavicongenerator.net/
  */
-export const FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor, }) => {
+export var FaviconTags = function (_a) {
+    var name = _a.name, color = _a.color, safariTabColor = _a.safariTabColor, tileColor = _a.tileColor, themeColor = _a.themeColor;
     return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }), _jsx("link", { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" }), _jsx("link", { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" }), _jsx("link", { rel: "manifest", href: "/site.webmanifest" }), _jsx("link", { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: safariTabColor || color }), _jsx("meta", { name: "apple-mobile-web-app-title", content: name }), _jsx("meta", { name: "application-name", content: name }), _jsx("meta", { name: "msapplication-TileColor", content: tileColor || color }), _jsx("meta", { name: "theme-color", content: themeColor || color })] }));
 };

package/Form/Form.js

@@ -1,26 +1,28 @@
+import { __assign, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 // import { type MotionProps } from "framer-motion";
 import { extendComponent, } from "../helpers";
-export const Root = "form";
-export const Overlay = "div";
-export const Progress = "div";
-export const Collapsable = "div";
-export const Ok = null;
-export const Fail = null;
-export const Form = ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Collapsable: _Collapsable, ok, fail, loading, Ok: _Ok, okProps = {
-    children: "Sent!",
-}, Fail: _Fail, failProps = {
-    children: "Failed.",
-}, collapseOnOk, collapseOnFail, okTimeout = 3000, failTimeout = 3000, children, ...props }) => {
-    const [open, setOpen] = useState("");
-    const commonProps = {
+export var Root = "form";
+export var Overlay = "div";
+export var Progress = "div";
+export var Collapsable = "div";
+export var Ok = null;
+export var Fail = null;
+export var Form = function (_a) {
+    var _Root = _a.Root, _Overlay = _a.Overlay, _Progress = _a.Progress, _Collapsable = _a.Collapsable, ok = _a.ok, fail = _a.fail, loading = _a.loading, _Ok = _a.Ok, _b = _a.okProps, okProps = _b === void 0 ? {
+        children: "Sent!",
+    } : _b, _Fail = _a.Fail, _c = _a.failProps, failProps = _c === void 0 ? {
+        children: "Failed.",
+    } : _c, collapseOnOk = _a.collapseOnOk, collapseOnFail = _a.collapseOnFail, _d = _a.okTimeout, okTimeout = _d === void 0 ? 3000 : _d, _e = _a.failTimeout, failTimeout = _e === void 0 ? 3000 : _e, children = _a.children, props = __rest(_a, ["Root", "Overlay", "Progress", "Collapsable", "ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
+    var _f = useState(""), open = _f[0], setOpen = _f[1];
+    var commonProps = {
         head: null,
         components: {
             HeadIcon: null,
         },
     };
-    useEffect(() => {
+    useEffect(function () {
         if (!loading) {
             if (ok)
                 setOpen("ok");
@@ -28,32 +30,32 @@ export const Form = ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Coll
                 setOpen("fail");
         }
     }, [ok, fail, loading]);
-    useEffect(() => {
-        let timeout;
+    useEffect(function () {
+        var timeout;
         if (open === "fail" && failTimeout) {
-            timeout = setTimeout(() => setOpen(""), failTimeout);
+            timeout = setTimeout(function () { return setOpen(""); }, failTimeout);
         }
         else if (open === "ok" && okTimeout) {
-            timeout = setTimeout(() => setOpen(""), okTimeout);
+            timeout = setTimeout(function () { return setOpen(""); }, okTimeout);
         }
-        return () => {
+        return function () {
             if (timeout) {
                 clearTimeout(timeout);
             }
         };
     }, [open, failTimeout, okTimeout]);
-    let formExpanded = true;
+    var formExpanded = true;
     if (collapseOnFail && fail)
         formExpanded = false;
     if (collapseOnOk && ok)
         formExpanded = false;
-    return (_jsxs(Root, { method: "post", noValidate: true, ...props, children: [_jsx(Collapsable, { ...commonProps, "$open": formExpanded, recalc: loading, body: _jsxs(_Fragment, { children: [children, loading && (_jsx(Overlay, { children: _jsx(Progress, {}) }))] }) }), _jsx(Collapsable, { ...commonProps, "$open": open === "ok" && !loading, body: _jsx(Ok, { ...okProps }) }), _jsx(Collapsable, { ...commonProps, "$open": open === "fail" && !loading, body: _jsx(Fail, { ...failProps }) })] }));
+    return (_jsxs(Root, __assign({ method: "post", noValidate: true }, props, { children: [_jsx(Collapsable, __assign({}, commonProps, { "$open": formExpanded, recalc: loading, body: _jsxs(_Fragment, { children: [children, loading && (_jsx(Overlay, { children: _jsx(Progress, {}) }))] }) })), _jsx(Collapsable, __assign({}, commonProps, { "$open": open === "ok" && !loading, body: _jsx(Ok, __assign({}, okProps)) })), _jsx(Collapsable, __assign({}, commonProps, { "$open": open === "fail" && !loading, body: _jsx(Fail, __assign({}, failProps)) }))] })));
 };
-export const KoineForm = extendComponent(Form, {
-    Root,
-    Overlay,
-    Progress,
-    Collapsable,
-    Ok,
-    Fail,
+export var KoineForm = extendComponent(Form, {
+    Root: Root,
+    Overlay: Overlay,
+    Progress: Progress,
+    Collapsable: Collapsable,
+    Ok: Ok,
+    Fail: Fail,
 });

package/Form/sc/bare.js

@@ -1,3 +1,4 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
 import { overlay, centered } from "../../styles/styled";
 import { Collapsable } from "../../Collapsable";
@@ -5,25 +6,15 @@ import { ProgressCircular } from "../../Progress";
 import { Alert } from "../../Alert";
 import { extendComponent } from "../../helpers";
 import * as _ from "../Form";
-export const Root = styled(_.Root) `
-  position: relative;
-`;
-export const Overlay = styled(_.Overlay) `
-  z-index: 4;
-  ${overlay}
-  ${centered}
-  background: rgba(var(--bodyBg--rgb),.8);
-  pointer-events: none;
-  backdrop-filter: blur(2px);
-`;
-export const Feedback = styled(Alert) `
-  padding: 2em 0;
-`;
-export const KoineForm = extendComponent(_.KoineForm, {
-    Root,
-    Overlay,
+export var Root = styled(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+export var Overlay = styled(_.Overlay)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 4;\n  ", "\n  ", "\n  background: rgba(var(--bodyBg--rgb),.8);\n  pointer-events: none;\n  backdrop-filter: blur(2px);\n"], ["\n  z-index: 4;\n  ", "\n  ", "\n  background: rgba(var(--bodyBg--rgb),.8);\n  pointer-events: none;\n  backdrop-filter: blur(2px);\n"])), overlay, centered);
+export var Feedback = styled(Alert)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 2em 0;\n"], ["\n  padding: 2em 0;\n"])));
+export var KoineForm = extendComponent(_.KoineForm, {
+    Root: Root,
+    Overlay: Overlay,
     Progress: ProgressCircular,
-    Collapsable,
+    Collapsable: Collapsable,
     Ok: Feedback,
     Fail: Feedback,
 });
+var templateObject_1, templateObject_2, templateObject_3;