@koine/react 1.1.10 → 1.1.12

package/Dialog/tw/material.js

@@ -1,20 +1,23 @@
-import { __makeTemplateObject } from "tslib";
-import { classed, extendComponent } from "../../helpers";
-import { KoineDialog as _ } from "./bare";
-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,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var helpers_1 = require("../../helpers");
+var bare_1 = require("./bare");
+exports.Root = (0, helpers_1.classed)(bare_1.KoineDialog.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+exports.Backdrop = (0, helpers_1.classed)(bare_1.KoineDialog.Backdrop)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["< class=\"bg-black/[.5] backdrop-blur-sm"], ["< class=\"bg-black/[.5] backdrop-blur-sm"])));
+exports.Container = (0, helpers_1.classed)(bare_1.KoineDialog.Container)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
+exports.Paper = (0, helpers_1.classed)(bare_1.KoineDialog.Paper)(templateObject_4 || (templateObject_4 = tslib_1.__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"])));
+exports.Close = (0, helpers_1.classed)(bare_1.KoineDialog.Close)(templateObject_5 || (templateObject_5 = tslib_1.__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"])));
+exports.Header = (0, helpers_1.classed)(bare_1.KoineDialog.Header)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["< class=\"p-4 text-xl"], ["< class=\"p-4 text-xl"])));
+exports.Body = (0, helpers_1.classed)(bare_1.KoineDialog.Body)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["< class=\"p-4 border-t border-gray-200"], ["< class=\"p-4 border-t border-gray-200"])));
+exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
+    Root: exports.Root,
+    Backdrop: exports.Backdrop,
+    Container: exports.Container,
+    Paper: exports.Paper,
+    Close: exports.Close,
+    Header: exports.Header,
+    Body: exports.Body,
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/tw/material.mjs

@@ -0,0 +1,20 @@
+import { __makeTemplateObject } from "tslib";
+import { classed, extendComponent } from "../../helpers";
+import { KoineDialog as _ } from "./bare";
+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,26 +1,31 @@
-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 var EditorBar = function (_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = exports.EditorBar = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_2 = require("@tiptap/react");
+var starter_kit_1 = tslib_1.__importDefault(require("@tiptap/starter-kit"));
+var components_1 = require("./components");
+var EditorBar = function (_a) {
     var editor = _a.editor;
-    var handleClick = useCallback(function (e, type) {
+    var handleClick = (0, react_1.useCallback)(function (e, type) {
         e.preventDefault();
         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, __assign({ onClick: function (e) {
+    return ((0, jsx_runtime_1.jsxs)(components_1.EditorBarRoot, { children: [(0, jsx_runtime_1.jsx)(components_1.EditorBarBtn, tslib_1.__assign({ onClick: function (e) {
                     return handleClick(e, "Bold");
-                }, className: editor.isActive("bold") ? "is-active" : "" }, { children: _jsx(EditorIconBold, {}) })), _jsx(EditorBarBtn, __assign({ onClick: function (e) {
+                }, className: editor.isActive("bold") ? "is-active" : "" }, { children: (0, jsx_runtime_1.jsx)(components_1.EditorIconBold, {}) })), (0, jsx_runtime_1.jsx)(components_1.EditorBarBtn, tslib_1.__assign({ onClick: function (e) {
                     return handleClick(e, "Italic");
-                }, className: editor.isActive("bold") ? "is-active" : "" }, { children: _jsx(EditorIconItalic, {}) }))] }));
+                }, className: editor.isActive("bold") ? "is-active" : "" }, { children: (0, jsx_runtime_1.jsx)(components_1.EditorIconItalic, {}) }))] }));
 };
-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))] }));
+exports.EditorBar = EditorBar;
+var Editor = function (_a) {
+    var options = _a.options, props = tslib_1.__rest(_a, ["options"]);
+    var editor = (0, react_2.useEditor)(tslib_1.__assign({ extensions: [starter_kit_1.default], content: "" }, (options || {})));
+    return ((0, jsx_runtime_1.jsxs)(components_1.EditorRoot, { children: [(0, jsx_runtime_1.jsx)(components_1.EditorGlobalStyles, {}), (0, jsx_runtime_1.jsx)(exports.EditorBar, { editor: editor }), (0, jsx_runtime_1.jsx)(react_2.EditorContent, tslib_1.__assign({ className: "EditorContent", editor: editor }, props))] }));
 };
+exports.Editor = Editor;

package/Editor/Editor--tiptap.mjs

@@ -0,0 +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 var EditorBar = function (_a) {
+    var editor = _a.editor;
+    var handleClick = useCallback(function (e, type) {
+        e.preventDefault();
+        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, __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 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,10 +1,15 @@
-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 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);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorGlobalStyles = exports.EditorBarBtn = exports.EditorBarRoot = exports.EditorRoot = exports.EditorIconItalic = exports.EditorIconBold = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importStar(require("styled-components"));
+var IconButton_1 = require("../Buttons/IconButton");
+var styles_1 = require("../Forms/styles");
+var md_1 = require("react-icons/md");
+Object.defineProperty(exports, "EditorIconBold", { enumerable: true, get: function () { return md_1.MdFormatBold; } });
+Object.defineProperty(exports, "EditorIconItalic", { enumerable: true, get: function () { return md_1.MdFormatItalic; } });
+exports.EditorRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), styles_1.inputBorder, styles_1.inputFocus);
+exports.EditorBarRoot = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__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"])));
+exports.EditorBarBtn = (0, styled_components_1.default)(IconButton_1.IconButton)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
+exports.EditorGlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_4 || (templateObject_4 = tslib_1.__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"])), styles_1.inputPadding);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Editor/components.mjs

@@ -0,0 +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 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/Editor/index.js

@@ -1 +1,4 @@
-export * from "./Editor--tiptap";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Editor--tiptap"), exports);

package/Editor/index.mjs

@@ -0,0 +1 @@
+export * from "./Editor--tiptap";

package/Editor/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Editor/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/FaviconTags/FaviconTags.js

@@ -1,4 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FaviconTags = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Favicon tags.
  *
@@ -9,8 +12,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * @see https://realfavicongenerator.net/
  */
-export var FaviconTags = function (_a) {
+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: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), _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 })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), (0, jsx_runtime_1.jsx)("link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" }), (0, jsx_runtime_1.jsx)("link", { rel: "manifest", href: "/site.webmanifest" }), (0, jsx_runtime_1.jsx)("link", { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: safariTabColor || color }), (0, jsx_runtime_1.jsx)("meta", { name: "apple-mobile-web-app-title", content: name }), (0, jsx_runtime_1.jsx)("meta", { name: "application-name", content: name }), (0, jsx_runtime_1.jsx)("meta", { name: "msapplication-TileColor", content: tileColor || color }), (0, jsx_runtime_1.jsx)("meta", { name: "theme-color", content: themeColor || color })] }));
 };
-export default FaviconTags;
+exports.FaviconTags = FaviconTags;
+exports.default = exports.FaviconTags;

package/FaviconTags/FaviconTags.mjs

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Favicon tags.
+ *
+ * This component is meant to be wrapped in a `<head>` manager component.
+ *
+ * These tags have been produced by [realfavicongenerator.net](https://realfavicongenerator.net/)
+ * on _**16 Feb 2022**_.
+ *
+ * @see https://realfavicongenerator.net/
+ */
+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: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), _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 })] }));
+};
+export default FaviconTags;

package/FaviconTags/index.js

@@ -1,2 +1,7 @@
-export * from "./FaviconTags";
-export { FaviconTags as default } from "./FaviconTags";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FaviconTags"), exports);
+var FaviconTags_1 = require("./FaviconTags");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return FaviconTags_1.FaviconTags; } });

package/FaviconTags/index.mjs

@@ -0,0 +1,2 @@
+export * from "./FaviconTags";
+export { FaviconTags as default } from "./FaviconTags";

package/FaviconTags/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/FaviconTags/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Form/Form.d.ts

@@ -61,51 +61,77 @@ export type ComponentsProps = {
 export type Props = Simplify<WithComponents<OwnProps, Components>>;
 export type FormProps = Props;
 export type KoineFormProps = Props;
-export declare const Root: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>>;
-export declare const Overlay: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>>;
-export declare const Progress: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>>;
-export declare const Collapsable: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+export declare const Root: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">>>;
+export declare const Overlay: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>;
+export declare const Progress: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>;
+export declare const Collapsable: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     $open?: boolean | undefined;
     recalc?: boolean | undefined;
     body?: React.ReactNode;
 }>>;
-export declare const Ok: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+export declare const Ok: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     children?: import("react").ReactNode;
 }>>;
-export declare const Fail: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+export declare const Fail: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     children?: import("react").ReactNode;
 }>>;
 export type FormFeedbackView = "" | "ok" | "fail";
 export declare const Form: ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Collapsable: _Collapsable, ok, fail, loading, Ok: _Ok, okProps, Fail: _Fail, failProps, collapseOnOk, collapseOnFail, okTimeout, failTimeout, children, ...props }: FormProps) => JSX.Element;
-export declare const KoineForm: ((props: Simplify<WithComponents<OwnProps, Components>>) => import("react").FunctionComponentElement<any>) & {
-    Root: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>>;
-    Overlay: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>>;
-    Progress: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>>;
-    Collapsable: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+export declare const KoineForm: ((props: {
+    action: string;
+    ok?: boolean | undefined;
+    okProps?: object | undefined;
+    fail?: boolean | undefined;
+    failProps?: object | undefined;
+    loading?: boolean | undefined;
+    collapseOnOk?: boolean | undefined;
+    collapseOnFail?: boolean | undefined;
+    okTimeout?: number | undefined;
+    failTimeout?: number | undefined;
+    children?: import("react").ReactNode;
+    Root: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">>>;
+    Overlay: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>;
+    Progress: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>;
+    Collapsable: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        $open?: boolean | undefined;
+        recalc?: boolean | undefined;
+        body?: React.ReactNode;
+    }>>;
+    Ok: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        children?: import("react").ReactNode;
+    }>>;
+    Fail: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        children?: import("react").ReactNode;
+    }>>;
+}) => import("react").FunctionComponentElement<any>) & {
+    Root: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">>>;
+    Overlay: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>;
+    Progress: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>;
+    Collapsable: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         $open?: boolean | undefined;
         recalc?: boolean | undefined;
         body?: React.ReactNode;
     }>>;
-    Ok: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    Ok: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         children?: import("react").ReactNode;
     }>>;
-    Fail: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    Fail: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         children?: import("react").ReactNode;
     }>>;
 } & {
     defaultProps: {
-        Root: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>>;
-        Overlay: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>>;
-        Progress: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>>;
-        Collapsable: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        Root: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">>>;
+        Overlay: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>;
+        Progress: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>;
+        Collapsable: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             $open?: boolean | undefined;
             recalc?: boolean | undefined;
             body?: React.ReactNode;
         }>>;
-        Ok: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        Ok: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             children?: import("react").ReactNode;
         }>>;
-        Fail: NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        Fail: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             children?: import("react").ReactNode;
         }>>;
     };

package/Form/Form.js

@@ -1,28 +1,31 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineForm = exports.Form = exports.Fail = exports.Ok = exports.Collapsable = exports.Progress = exports.Overlay = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 // import type { MotionProps } from "framer-motion";
-import { extendComponent, } from "../helpers";
-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 helpers_1 = require("../helpers");
+exports.Root = "form";
+exports.Overlay = "div";
+exports.Progress = "div";
+exports.Collapsable = "div";
+exports.Ok = null;
+exports.Fail = null;
+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];
+    } : _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 = tslib_1.__rest(_a, ["Root", "Overlay", "Progress", "Collapsable", "ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
+    var _f = (0, react_1.useState)(""), open = _f[0], setOpen = _f[1];
     var commonProps = {
         head: null,
         components: {
             HeadIcon: null,
         },
     };
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (!loading) {
             if (ok)
                 setOpen("ok");
@@ -30,7 +33,7 @@ export var Form = function (_a) {
                 setOpen("fail");
         }
     }, [ok, fail, loading]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         var timeout;
         if (open === "fail" && failTimeout) {
             timeout = setTimeout(function () { return setOpen(""); }, failTimeout);
@@ -49,13 +52,14 @@ export var Form = function (_a) {
         formExpanded = false;
     if (collapseOnOk && ok)
         formExpanded = false;
-    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)) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(exports.Root, tslib_1.__assign({ method: "post", noValidate: true }, props, { children: [(0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": formExpanded, recalc: loading, body: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, loading && ((0, jsx_runtime_1.jsx)(exports.Overlay, { children: (0, jsx_runtime_1.jsx)(exports.Progress, {}) }))] }) })), (0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": open === "ok" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Ok, tslib_1.__assign({}, okProps)) })), (0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": open === "fail" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Fail, tslib_1.__assign({}, failProps)) }))] })));
 };
-export var KoineForm = extendComponent(Form, {
-    Root: Root,
-    Overlay: Overlay,
-    Progress: Progress,
-    Collapsable: Collapsable,
-    Ok: Ok,
-    Fail: Fail,
+exports.Form = Form;
+exports.KoineForm = (0, helpers_1.extendComponent)(exports.Form, {
+    Root: exports.Root,
+    Overlay: exports.Overlay,
+    Progress: exports.Progress,
+    Collapsable: exports.Collapsable,
+    Ok: exports.Ok,
+    Fail: exports.Fail,
 });

package/Form/Form.mjs

@@ -0,0 +1,61 @@
+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 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(function () {
+        if (!loading) {
+            if (ok)
+                setOpen("ok");
+            else if (fail)
+                setOpen("fail");
+        }
+    }, [ok, fail, loading]);
+    useEffect(function () {
+        var timeout;
+        if (open === "fail" && failTimeout) {
+            timeout = setTimeout(function () { return setOpen(""); }, failTimeout);
+        }
+        else if (open === "ok" && okTimeout) {
+            timeout = setTimeout(function () { return setOpen(""); }, okTimeout);
+        }
+        return function () {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+        };
+    }, [open, failTimeout, okTimeout]);
+    var formExpanded = true;
+    if (collapseOnFail && fail)
+        formExpanded = false;
+    if (collapseOnOk && ok)
+        formExpanded = false;
+    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 var KoineForm = extendComponent(Form, {
+    Root: Root,
+    Overlay: Overlay,
+    Progress: Progress,
+    Collapsable: Collapsable,
+    Ok: Ok,
+    Fail: Fail,
+});

package/Form/index.js

@@ -1 +1,4 @@
-export * from "./Form";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Form"), exports);

package/Form/index.mjs

@@ -0,0 +1 @@
+export * from "./Form";

package/Form/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Form/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }