@koine/react 1.0.9 → 1.0.12

package/Dialog/DialogMui.js

@@ -1,15 +1,16 @@
+import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import ModalUnstyled from "@mui/base/ModalUnstyled";
 import { MdClear as IconClose } from "react-icons/md";
 import { extendComponent, } from "../helpers";
-export const Root = ModalUnstyled;
-export const Backdrop = "div";
-export const Container = "div";
-export const Paper = "div";
-export const Close = "button";
-export const Header = "div";
-export const Body = "div";
+export var Root = ModalUnstyled;
+export var Backdrop = "div";
+export var Container = "div";
+export var Paper = "div";
+export var Close = "button";
+export var Header = "div";
+export var Body = "div";
 // const Dialog = ({
 //   children,
 //   title,
@@ -45,16 +46,17 @@ export const Body = "div";
  *
  * FIXME: it actually works even without forwardRef, check if we do need it
  */
-const DialogWithRef = forwardRef(function Dialog({ children, title, $scrollPaper, Root: _Root, Backdrop: _Backdrop, Container: _Container, Paper: _Paper, Close: _Close, Header: _Header, Body: _Body, onClose, ...props }, ref) {
+var DialogWithRef = 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, onClose = _a.onClose, props = __rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "onClose"]);
     // 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 = useRef();
-    const handleMouseDown = (event) => {
+    var backdropClick = 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;
@@ -65,14 +67,14 @@ const DialogWithRef = forwardRef(function Dialog({ children, title, $scrollPaper
             onClose(event, "backdropClick");
         }
     };
-    return (_jsx(Root, { BackdropComponent: Backdrop, onClick: handleBackdropClick, onClose: onClose, ref: ref, ...props, children: _jsx(Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: _jsxs(Paper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && _jsx(Header, { children: title }), _jsx(Close, { onClick: onClose, children: _jsx(IconClose, {}) }), _jsx(Body, { children: children })] }) }) }));
+    return (_jsx(Root, __assign({ BackdropComponent: Backdrop, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: _jsx(Container, __assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: _jsxs(Paper, __assign({ "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && _jsx(Header, { children: title }), _jsx(Close, __assign({ onClick: onClose }, { children: _jsx(IconClose, {}) })), _jsx(Body, { children: children })] })) })) })));
 });
-export const KoineDialog = extendComponent(DialogWithRef, {
-    Root,
-    Backdrop,
-    Container,
-    Paper,
-    Close,
-    Header,
-    Body,
+export var KoineDialog = extendComponent(DialogWithRef, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
 });

package/Dialog/css/bare.js

@@ -1,19 +1,21 @@
+import { __makeTemplateObject } from "tslib";
 import { classed, extendComponent } from "../../helpers";
 import * as _ from "../DialogMui";
 // export type { KoineDialogProps } from "../DialogMui";
-export const Root = classed(_.Root) `dialog`;
-export const Backdrop = classed(_.Backdrop) `dialogBackdrop`;
-export const Container = classed(_.Container) `dialogContainer`;
-export const Paper = classed(_.Paper) `dialogPaper`;
-export const Close = classed(_.Close) `"dialogClose`;
-export const Header = classed(_.Header) `dialogHeader`;
-export const Body = classed(_.Body) `dialogBody`;
-export const KoineDialog = extendComponent(_.KoineDialog, {
-    Root,
-    Backdrop,
-    Container,
-    Paper,
-    Close,
-    Header,
-    Body,
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["dialog"], ["dialog"])));
+export var Backdrop = classed(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["dialogBackdrop"], ["dialogBackdrop"])));
+export var Container = classed(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["dialogContainer"], ["dialogContainer"])));
+export var Paper = classed(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["dialogPaper"], ["dialogPaper"])));
+export var Close = classed(_.Close)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\"dialogClose"], ["\"dialogClose"])));
+export var Header = classed(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["dialogHeader"], ["dialogHeader"])));
+export var Body = classed(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["dialogBody"], ["dialogBody"])));
+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/m/bare.js

@@ -1,3 +1,4 @@
+import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo, useRef } from "react";
 import { MdClear as IconClose } from "react-icons/md";
@@ -11,18 +12,21 @@ import { Root, Backdrop, Container, Paper, Close, Header, Body, } from "../Dialo
  * - https://github.com/framer/motion/issues/478
  * - https://codesandbox.io/s/clever-banzai-7km49?file=/src/Modal.js
  */
-const Dialog = forwardRef(function Dialog({ children, title, $scrollPaper, Root, Backdrop, Container, Paper, Close, Header, Body, mBackdrop, mPaper, onClose, ...props }, ref) {
-    const BackdropMotion = useMemo(() => (props) => (_jsx(AnimatePresence, { children: props.open && _jsx(Backdrop, { ...mBackdrop, ...props }) })), [Backdrop, mBackdrop]);
+var Dialog = 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 = __rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "mBackdrop", "mPaper", "onClose"]);
+    var BackdropMotion = useMemo(function () { return function (props) {
+        return (_jsx(AnimatePresence, { children: props.open && _jsx(Backdrop, __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 = useRef();
-    const handleMouseDown = (event) => {
+    var backdropClick = 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;
@@ -33,16 +37,16 @@ const Dialog = forwardRef(function Dialog({ children, title, $scrollPaper, Root,
             onClose(event, "backdropClick");
         }
     };
-    return (_jsx(Root, { keepMounted: true, BackdropComponent: BackdropMotion, onClick: handleBackdropClick, onClose: onClose, ref: ref, ...props, style: mRootStyle(props), children: _jsx(Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: _jsx(AnimatePresence, { children: props.open && (
+    return (_jsx(Root, __assign({ keepMounted: true, BackdropComponent: BackdropMotion, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { style: mRootStyle(props) }, { children: _jsx(Container, __assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: _jsx(AnimatePresence, { children: props.open && (
                 // @ts-expect-error framer props collision...
-                _jsxs(Paper, { ...mPaper, "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && _jsx(Header, { children: title }), _jsx(Close, { onClick: onClose, children: _jsx(IconClose, {}) }), _jsx(Body, { children: children })] })) }) }) }));
+                _jsxs(Paper, __assign({}, mPaper, { "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && _jsx(Header, { children: title }), _jsx(Close, __assign({ onClick: onClose }, { children: _jsx(IconClose, {}) })), _jsx(Body, { children: children })] }))) }) })) })));
 });
-export const KoineDialog = extendComponent(Dialog, {
-    Root,
+export var KoineDialog = extendComponent(Dialog, {
+    Root: Root,
     Backdrop: m(Backdrop),
-    Container,
+    Container: Container,
     Paper: m(Paper),
-    Close,
-    Header,
-    Body,
+    Close: Close,
+    Header: Header,
+    Body: Body,
 });

package/Dialog/m/basic.js

@@ -1,5 +1,5 @@
 export * from "./index";
-export const dialogBackdropMotion = {
+export var dialogBackdropMotion = {
     initial: {
         opacity: 0,
     },
@@ -12,7 +12,7 @@ export const dialogBackdropMotion = {
         opacity: 0,
     },
 };
-export const dialogPaperMotion = {
+export var dialogPaperMotion = {
     initial: {
         // scale: .9,
         translateY: -60,

package/Dialog/m/index.js

@@ -1,4 +1,4 @@
-export const mRootStyle = (props) => ({
-    pointerEvents: props.open ? "all" : "none",
-    ...(props.style || {}),
-});
+import { __assign } from "tslib";
+export var mRootStyle = function (props) {
+    return (__assign({ pointerEvents: props.open ? "all" : "none" }, (props.style || {})));
+};

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))] }));
 };