@koine/react 1.0.9 → 1.0.12

package/node/Dialog/m/bare.js

@@ -1,31 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineDialog = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const md_1 = require("react-icons/md");
-const framer_motion_1 = require("framer-motion");
-const helpers_1 = require("../../helpers");
-const index_1 = require("./index");
-const DialogMui_1 = require("../DialogMui");
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var md_1 = require("react-icons/md");
+var framer_motion_1 = require("framer-motion");
+var helpers_1 = require("../../helpers");
+var index_1 = require("./index");
+var DialogMui_1 = require("../DialogMui");
 /**
  * About nested `AnimatePresence` and animated dialogs with framer @see:
  *
  * - https://github.com/framer/motion/issues/478
  * - https://codesandbox.io/s/clever-banzai-7km49?file=/src/Modal.js
  */
-const Dialog = (0, react_1.forwardRef)(function Dialog({ children, title, $scrollPaper, Root, Backdrop, Container, Paper, Close, Header, Body, mBackdrop, mPaper, onClose, ...props }, ref) {
-    const BackdropMotion = (0, react_1.useMemo)(() => (props) => ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: props.open && (0, jsx_runtime_1.jsx)(Backdrop, { ...mBackdrop, ...props }) })), [Backdrop, mBackdrop]);
+var Dialog = (0, react_1.forwardRef)(function Dialog(_a, ref) {
+    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, Root = _a.Root, Backdrop = _a.Backdrop, Container = _a.Container, Paper = _a.Paper, Close = _a.Close, Header = _a.Header, Body = _a.Body, mBackdrop = _a.mBackdrop, mPaper = _a.mPaper, onClose = _a.onClose, props = tslib_1.__rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "mBackdrop", "mPaper", "onClose"]);
+    var BackdropMotion = (0, react_1.useMemo)(function () { return function (props) {
+        return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: props.open && (0, jsx_runtime_1.jsx)(Backdrop, tslib_1.__assign({}, mBackdrop, props)) }));
+    }; }, [Backdrop, mBackdrop]);
     // FIXME: extract this logic either in a useDialog hook or in a useclickOutside hook
     // click handling is taken from
     // @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
-    const backdropClick = (0, react_1.useRef)();
-    const handleMouseDown = (event) => {
+    var backdropClick = (0, react_1.useRef)();
+    var handleMouseDown = function (event) {
         // We don't want to close the dialog when clicking the dialog content.
         // Make sure the event starts and ends on the same DOM element.
         backdropClick.current = event.target === event.currentTarget;
     };
-    const handleBackdropClick = (event) => {
+    var handleBackdropClick = function (event) {
         // Ignore the events not coming from the "backdrop".
         if (!backdropClick.current) {
             return;
@@ -36,9 +40,9 @@ const Dialog = (0, react_1.forwardRef)(function Dialog({ children, title, $scrol
             onClose(event, "backdropClick");
         }
     };
-    return ((0, jsx_runtime_1.jsx)(Root, { keepMounted: true, BackdropComponent: BackdropMotion, onClick: handleBackdropClick, onClose: onClose, ref: ref, ...props, style: (0, index_1.mRootStyle)(props), children: (0, jsx_runtime_1.jsx)(Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: props.open && (
+    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ keepMounted: true, BackdropComponent: BackdropMotion, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { style: (0, index_1.mRootStyle)(props) }, { children: (0, jsx_runtime_1.jsx)(Container, tslib_1.__assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: props.open && (
                 // @ts-expect-error framer props collision...
-                (0, jsx_runtime_1.jsxs)(Paper, { ...mPaper, "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && (0, jsx_runtime_1.jsx)(Header, { children: title }), (0, jsx_runtime_1.jsx)(Close, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) }), (0, jsx_runtime_1.jsx)(Body, { children: children })] })) }) }) }));
+                (0, jsx_runtime_1.jsxs)(Paper, tslib_1.__assign({}, mPaper, { "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && (0, jsx_runtime_1.jsx)(Header, { children: title }), (0, jsx_runtime_1.jsx)(Close, tslib_1.__assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) })), (0, jsx_runtime_1.jsx)(Body, { children: children })] }))) }) })) })));
 });
 exports.KoineDialog = (0, helpers_1.extendComponent)(Dialog, {
     Root: DialogMui_1.Root,

package/node/Dialog/m/basic.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dialogPaperMotion = exports.dialogBackdropMotion = void 0;
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./index"), exports);
 exports.dialogBackdropMotion = {
     initial: {

package/node/Dialog/m/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mRootStyle = void 0;
-const mRootStyle = (props) => ({
-    pointerEvents: props.open ? "all" : "none",
-    ...(props.style || {}),
-});
+var tslib_1 = require("tslib");
+var mRootStyle = function (props) {
+    return (tslib_1.__assign({ pointerEvents: props.open ? "all" : "none" }, (props.style || {})));
+};
 exports.mRootStyle = mRootStyle;

package/node/Dialog/sc/bare.js

@@ -1,59 +1,39 @@
 "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;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const helpers_1 = require("../../helpers");
-const styled_1 = require("../../styles/styled");
-const Buttons_1 = require("../../Buttons");
-const _ = tslib_1.__importStar(require("../DialogMui"));
-exports.Root = (0, styled_components_1.default)(_.Root) `
-  z-index: 1300;
-  position: fixed;
-  ${styled_1.inset0}
-`;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var helpers_1 = require("../../helpers");
+var styled_1 = require("../../styles/styled");
+var Buttons_1 = require("../../Buttons");
+var _ = tslib_1.__importStar(require("../DialogMui"));
+exports.Root = (0, styled_components_1.default)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"], ["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"])), styled_1.inset0);
 // export const Backdrop = (props) => {
 //   return <div {...props} />;
 // }
-exports.Backdrop = (0, styled_components_1.default)(_.Backdrop) `
-  z-index: -1;
-  position: fixed;
-  ${styled_1.inset0}
-  backdrop-filter: blur(0px);
-  -webkit-tap-highlight-color: transparent;
-`;
+exports.Backdrop = (0, styled_components_1.default)(_.Backdrop)(templateObject_2 || (templateObject_2 = tslib_1.__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"])), styled_1.inset0);
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
  */
-exports.Container = (0, styled_components_1.default)(_.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; }"}
-`;
+exports.Container = (0, styled_components_1.default)(_.Container)(templateObject_3 || (templateObject_3 = tslib_1.__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
  */
-exports.Paper = (0, styled_components_1.default)(_.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;"}
-`;
-exports.Close = (0, styled_components_1.default)(Buttons_1.IconButton) `
-  position: absolute;
-`;
-exports.Header = (0, styled_components_1.default)(_.Header) ``;
+exports.Paper = (0, styled_components_1.default)(_.Paper)(templateObject_4 || (templateObject_4 = tslib_1.__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;";
+});
+exports.Close = (0, styled_components_1.default)(Buttons_1.IconButton)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n"], ["\n  position: absolute;\n"])));
+exports.Header = (0, styled_components_1.default)(_.Header)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject([""], [""])));
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
  */
-exports.Body = (0, styled_components_1.default)(_.Body) `
-  flex: 1 1 auto;
-  -webkit-overflow-scrolling: touch;
-  overflow-y: auto;
-  overflow: auto;
-`;
+exports.Body = (0, styled_components_1.default)(_.Body)(templateObject_7 || (templateObject_7 = tslib_1.__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"])));
 exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
     Root: exports.Root,
     Backdrop: exports.Backdrop,
@@ -63,3 +43,4 @@ exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
     Header: exports.Header,
     Body: exports.Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/node/Dialog/sc/framer.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineDialog = void 0;
-const framer_motion_1 = require("framer-motion");
-const helpers_1 = require("../../helpers");
-const basic_1 = require("../m/basic");
-const bare_1 = require("../m/bare");
-const bare_2 = require("./bare");
+var framer_motion_1 = require("framer-motion");
+var helpers_1 = require("../../helpers");
+var basic_1 = require("../m/basic");
+var bare_1 = require("../m/bare");
+var bare_2 = require("./bare");
 exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
     Root: bare_2.Root,
     Backdrop: (0, framer_motion_1.m)(bare_2.Backdrop),

package/node/Dialog/sc/framerMaterial.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineDialog = void 0;
-const framer_motion_1 = require("framer-motion");
-const helpers_1 = require("../../helpers");
-const basic_1 = require("../m/basic");
-const bare_1 = require("../m/bare");
-const material_1 = require("./material");
+var framer_motion_1 = require("framer-motion");
+var helpers_1 = require("../../helpers");
+var basic_1 = require("../m/basic");
+var bare_1 = require("../m/bare");
+var material_1 = require("./material");
 exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
     Root: material_1.Root,
     Backdrop: (0, framer_motion_1.m)(material_1.Backdrop),

package/node/Dialog/sc/material.js

@@ -1,39 +1,17 @@
 "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;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const helpers_1 = require("../../helpers");
-const bare_1 = require("./bare");
-exports.Root = (0, styled_components_1.default)(bare_1.KoineDialog.Root) ``;
-exports.Backdrop = (0, styled_components_1.default)(bare_1.KoineDialog.Backdrop) `
-  background: rgba(0, 0, 0, 0.5);
-  filter: backdrop-blur(4px);
-`;
-exports.Container = (0, styled_components_1.default)(bare_1.KoineDialog.Container) ``;
-exports.Paper = (0, styled_components_1.default)(bare_1.KoineDialog.Paper) `
-  max-width: 640px;
-  margin: 64px;
-  border-radius: 4px;
-  background: white;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-`;
-exports.Close = (0, styled_components_1.default)(bare_1.KoineDialog.Close) `
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 8px;
-  font-size: 2rem;
-  opacity: 0.5;
-`;
-exports.Header = (0, styled_components_1.default)(bare_1.KoineDialog.Header) `
-  padding: 16px;
-  font-size: 1.25rem;
-`;
-exports.Body = (0, styled_components_1.default)(bare_1.KoineDialog.Body) `
-  padding: 16px;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
-`;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var helpers_1 = require("../../helpers");
+var bare_1 = require("./bare");
+exports.Root = (0, styled_components_1.default)(bare_1.KoineDialog.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+exports.Backdrop = (0, styled_components_1.default)(bare_1.KoineDialog.Backdrop)(templateObject_2 || (templateObject_2 = tslib_1.__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"])));
+exports.Container = (0, styled_components_1.default)(bare_1.KoineDialog.Container)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
+exports.Paper = (0, styled_components_1.default)(bare_1.KoineDialog.Paper)(templateObject_4 || (templateObject_4 = tslib_1.__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"])));
+exports.Close = (0, styled_components_1.default)(bare_1.KoineDialog.Close)(templateObject_5 || (templateObject_5 = tslib_1.__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"])));
+exports.Header = (0, styled_components_1.default)(bare_1.KoineDialog.Header)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  padding: 16px;\n  font-size: 1.25rem;\n"], ["\n  padding: 16px;\n  font-size: 1.25rem;\n"])));
+exports.Body = (0, styled_components_1.default)(bare_1.KoineDialog.Body)(templateObject_7 || (templateObject_7 = tslib_1.__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"])));
 exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
     Root: exports.Root,
     Backdrop: exports.Backdrop,
@@ -43,3 +21,4 @@ exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
     Header: exports.Header,
     Body: exports.Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/node/Dialog/tw/bare.js

@@ -1,25 +1,29 @@
 "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;
-const tslib_1 = require("tslib");
-const helpers_1 = require("../../helpers");
-const _ = tslib_1.__importStar(require("../DialogMui"));
-exports.Root = (0, helpers_1.classed)(_.Root) `< class="dialog fixed z-[1300] inset-0`;
-exports.Backdrop = (0, helpers_1.classed)(_.Backdrop) `< class="dialogBackdrop fixed -z-[1] inset-0 [-webkit-tap-highlight-color:transparent]`;
+var tslib_1 = require("tslib");
+var helpers_1 = require("../../helpers");
+var _ = tslib_1.__importStar(require("../DialogMui"));
+exports.Root = (0, helpers_1.classed)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["< class=\"dialog fixed z-[1300] inset-0"], ["< class=\"dialog fixed z-[1300] inset-0"])));
+exports.Backdrop = (0, helpers_1.classed)(_.Backdrop)(templateObject_2 || (templateObject_2 = tslib_1.__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
  */
-exports.Container = (0, helpers_1.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"}`;
+exports.Container = (0, helpers_1.classed)(_.Container)(templateObject_3 || (templateObject_3 = tslib_1.__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
  */
-exports.Paper = (0, helpers_1.classed)(_.Paper) `< class="dialogPaper relative ${(p) => p.$scrollPaper
-    ? "flex flex-col max-h-[calc(100%-64px)]"
-    : "inline-block align-middle [text-align:initial]"}`;
-exports.Close = (0, helpers_1.classed)(_.Close) `< class="dialogClose`;
-exports.Header = (0, helpers_1.classed)(_.Header) `< class="dialogHeader`;
+exports.Paper = (0, helpers_1.classed)(_.Paper)(templateObject_4 || (templateObject_4 = tslib_1.__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]";
+});
+exports.Close = (0, helpers_1.classed)(_.Close)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["< class=\"dialogClose"], ["< class=\"dialogClose"])));
+exports.Header = (0, helpers_1.classed)(_.Header)(templateObject_6 || (templateObject_6 = tslib_1.__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,
@@ -28,7 +32,7 @@ exports.Header = (0, helpers_1.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
  */
-exports.Body = (0, helpers_1.classed)(_.Body) `< class="dialogBody flex-1 basis-auto overflow-y-auto [-webkit-overflow-scrolling:touch]`;
+exports.Body = (0, helpers_1.classed)(_.Body)(templateObject_7 || (templateObject_7 = tslib_1.__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]"])));
 exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
     Root: exports.Root,
     Backdrop: exports.Backdrop,
@@ -38,3 +42,4 @@ exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
     Header: exports.Header,
     Body: exports.Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/node/Dialog/tw/elegant.js

@@ -1,15 +1,16 @@
 "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;
-const helpers_1 = require("../../helpers");
-const bare_1 = require("./bare");
-exports.Root = (0, helpers_1.classed)(bare_1.KoineDialog.Root) ``;
-exports.Backdrop = (0, helpers_1.classed)(bare_1.KoineDialog.Backdrop) `< class="bg-white/[.5] backdrop-blur-sm`;
-exports.Container = (0, helpers_1.classed)(bare_1.KoineDialog.Container) ``;
-exports.Paper = (0, helpers_1.classed)(bare_1.KoineDialog.Paper) `< class="bg-white shadow-xl m-8 max-w-screen-sm border border-gray-400`;
-exports.Close = (0, helpers_1.classed)(bare_1.KoineDialog.Close) `< class="absolute top-0 right-0 p-8 text-2xl opacity-20 hover:opacity-100 focus:opacity-100`;
-exports.Header = (0, helpers_1.classed)(bare_1.KoineDialog.Header) `< class="p-8 text-2xl bold italic`;
-exports.Body = (0, helpers_1.classed)(bare_1.KoineDialog.Body) `< class="p-8 pt-4`;
+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-white/[.5] backdrop-blur-sm"], ["< class=\"bg-white/[.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=\"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"])));
+exports.Close = (0, helpers_1.classed)(bare_1.KoineDialog.Close)(templateObject_5 || (templateObject_5 = tslib_1.__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"])));
+exports.Header = (0, helpers_1.classed)(bare_1.KoineDialog.Header)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["< class=\"p-8 text-2xl bold italic"], ["< class=\"p-8 text-2xl bold italic"])));
+exports.Body = (0, helpers_1.classed)(bare_1.KoineDialog.Body)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["< class=\"p-8 pt-4"], ["< class=\"p-8 pt-4"])));
 exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
     Root: exports.Root,
     Backdrop: exports.Backdrop,
@@ -19,3 +20,4 @@ exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
     Header: exports.Header,
     Body: exports.Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/node/Dialog/tw/framer.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineDialog = void 0;
-const framer_motion_1 = require("framer-motion");
-const helpers_1 = require("../../helpers");
-const basic_1 = require("../m/basic");
-const bare_1 = require("../m/bare");
-const bare_2 = require("./bare");
+var framer_motion_1 = require("framer-motion");
+var helpers_1 = require("../../helpers");
+var basic_1 = require("../m/basic");
+var bare_1 = require("../m/bare");
+var bare_2 = require("./bare");
 exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
     Root: bare_2.Root,
     Backdrop: (0, framer_motion_1.m)(bare_2.Backdrop),

package/node/Dialog/tw/framerMaterial.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineDialog = void 0;
-const framer_motion_1 = require("framer-motion");
-const helpers_1 = require("../../helpers");
-const basic_1 = require("../m/basic");
-const bare_1 = require("../m/bare");
-const material_1 = require("./material");
+var framer_motion_1 = require("framer-motion");
+var helpers_1 = require("../../helpers");
+var basic_1 = require("../m/basic");
+var bare_1 = require("../m/bare");
+var material_1 = require("./material");
 exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
     Root: material_1.Root,
     Backdrop: (0, framer_motion_1.m)(material_1.Backdrop),

package/node/Dialog/tw/material.js

@@ -1,15 +1,16 @@
 "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;
-const helpers_1 = require("../../helpers");
-const bare_1 = require("./bare");
-exports.Root = (0, helpers_1.classed)(bare_1.KoineDialog.Root) ``;
-exports.Backdrop = (0, helpers_1.classed)(bare_1.KoineDialog.Backdrop) `< class="bg-black/[.5] backdrop-blur-sm`;
-exports.Container = (0, helpers_1.classed)(bare_1.KoineDialog.Container) ``;
-exports.Paper = (0, helpers_1.classed)(bare_1.KoineDialog.Paper) `< class="rounded bg-white shadow-xl m-8 max-w-screen-sm`;
-exports.Close = (0, helpers_1.classed)(bare_1.KoineDialog.Close) `< class="absolute top-0 right-0 p-4 text-2xl opacity-50`;
-exports.Header = (0, helpers_1.classed)(bare_1.KoineDialog.Header) `< class="p-4 text-xl`;
-exports.Body = (0, helpers_1.classed)(bare_1.KoineDialog.Body) `< class="p-4 border-t border-gray-200`;
+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,
@@ -19,3 +20,4 @@ exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
     Header: exports.Header,
     Body: exports.Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/node/Editor/Editor--tiptap.js

@@ -1,29 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = exports.EditorBar = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@tiptap/react");
-const starter_kit_1 = tslib_1.__importDefault(require("@tiptap/starter-kit"));
-const components_1 = require("./components");
-const EditorBar = ({ editor }) => {
-    const handleClick = (0, react_1.useCallback)((e, type) => {
+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 = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(components_1.EditorBarRoot, { children: [(0, jsx_runtime_1.jsx)(components_1.EditorBarBtn, { onClick: (e) => handleClick(e, "Bold"), className: editor.isActive("bold") ? "is-active" : "", children: (0, jsx_runtime_1.jsx)(components_1.EditorIconBold, {}) }), (0, jsx_runtime_1.jsx)(components_1.EditorBarBtn, { onClick: (e) => handleClick(e, "Italic"), className: editor.isActive("bold") ? "is-active" : "", children: (0, jsx_runtime_1.jsx)(components_1.EditorIconItalic, {}) })] }));
+    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: (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: (0, jsx_runtime_1.jsx)(components_1.EditorIconItalic, {}) }))] }));
 };
 exports.EditorBar = EditorBar;
-const Editor = ({ options, ...props }) => {
-    const editor = (0, react_2.useEditor)({
-        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, { className: "EditorContent", editor: editor, ...props })] }));
+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/node/Editor/components.js

@@ -1,34 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorGlobalStyles = exports.EditorBarBtn = exports.EditorBarRoot = exports.EditorRoot = exports.EditorIconItalic = exports.EditorIconBold = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importStar(require("styled-components"));
-const IconButton_1 = require("../Buttons/IconButton");
-const styles_1 = require("../Forms/styles");
+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 `
-  ${styles_1.inputBorder}
-  ${styles_1.inputFocus}
-`;
-exports.EditorBarRoot = styled_components_1.default.div `
-  display: flex;
-  justify-content: flex-end;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  /* background: var(--grey900); */
-`;
-exports.EditorBarBtn = (0, styled_components_1.default)(IconButton_1.IconButton) ``;
-exports.EditorGlobalStyles = (0, styled_components_1.createGlobalStyle) `
-  .ProseMirror {
-    ${styles_1.inputPadding}
-    
-    &:focus {
-      outline:none;
-    }
-
-    > *:first-child {
-      margin-top: 0;
-    }
-  }
-`;
+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/node/Editor/index.js

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

package/node/Favicon/FaviconTags.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FaviconTags = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+var jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Favicon tags.
  *
@@ -12,7 +12,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *
  * @see https://realfavicongenerator.net/
  */
-const FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor, }) => {
+var FaviconTags = function (_a) {
+    var name = _a.name, color = _a.color, safariTabColor = _a.safariTabColor, tileColor = _a.tileColor, themeColor = _a.themeColor;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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 })] }));
 };
 exports.FaviconTags = FaviconTags;

package/node/Favicon/index.js

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