@koine/react 1.1.10 → 1.1.11

package/Dialog/sc/bare.mjs

@@ -0,0 +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 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 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 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 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 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

@@ -1,16 +1,19 @@
-import { m } from "framer-motion";
-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 var KoineDialog = extendComponent(_, {
-    Root: Root,
-    Backdrop: m(Backdrop),
-    Container: Container,
-    Paper: m(Paper),
-    Close: Close,
-    Header: Header,
-    Body: Body,
-    mBackdrop: dialogBackdropMotion,
-    mPaper: dialogPaperMotion,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = void 0;
+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),
+    Container: bare_2.Container,
+    Paper: (0, framer_motion_1.m)(bare_2.Paper),
+    Close: bare_2.Close,
+    Header: bare_2.Header,
+    Body: bare_2.Body,
+    mBackdrop: basic_1.dialogBackdropMotion,
+    mPaper: basic_1.dialogPaperMotion,
 });

package/Dialog/sc/framer.mjs

@@ -0,0 +1,16 @@
+import { m } from "framer-motion";
+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 var KoineDialog = extendComponent(_, {
+    Root: Root,
+    Backdrop: m(Backdrop),
+    Container: Container,
+    Paper: m(Paper),
+    Close: Close,
+    Header: Header,
+    Body: Body,
+    mBackdrop: dialogBackdropMotion,
+    mPaper: dialogPaperMotion,
+});

package/Dialog/sc/framerMaterial.js

@@ -1,16 +1,19 @@
-import { m } from "framer-motion";
-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 var KoineDialog = extendComponent(_, {
-    Root: Root,
-    Backdrop: m(Backdrop),
-    Container: Container,
-    Paper: m(Paper),
-    Close: Close,
-    Header: Header,
-    Body: Body,
-    mBackdrop: dialogBackdropMotion,
-    mPaper: dialogPaperMotion,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = void 0;
+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),
+    Container: material_1.Container,
+    Paper: (0, framer_motion_1.m)(material_1.Paper),
+    Close: material_1.Close,
+    Header: material_1.Header,
+    Body: material_1.Body,
+    mBackdrop: basic_1.dialogBackdropMotion,
+    mPaper: basic_1.dialogPaperMotion,
 });

package/Dialog/sc/framerMaterial.mjs

@@ -0,0 +1,16 @@
+import { m } from "framer-motion";
+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 var KoineDialog = extendComponent(_, {
+    Root: Root,
+    Backdrop: m(Backdrop),
+    Container: Container,
+    Paper: m(Paper),
+    Close: Close,
+    Header: Header,
+    Body: Body,
+    mBackdrop: dialogBackdropMotion,
+    mPaper: dialogPaperMotion,
+});

package/Dialog/sc/material.js

@@ -1,21 +1,24 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
-import { extendComponent } from "../../helpers";
-import { KoineDialog as _ } from "./bare";
-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,
+"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 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,
+    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/sc/material.mjs

@@ -0,0 +1,21 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+import { extendComponent } from "../../helpers";
+import { KoineDialog as _ } from "./bare";
+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,12 +1,15 @@
-import { __makeTemplateObject } from "tslib";
-import { classed, extendComponent } from "../../helpers";
-import * as _ from "../DialogMui";
-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]"])));
+"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 _ = 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
  */
-export var Container = classed(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["< class=\"dialogContainer h-full outline-0 ", ""], ["< class=\"dialogContainer h-full outline-0 ", ""])), function (p) {
+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";
@@ -14,13 +17,13 @@ export var Container = classed(_.Container)(templateObject_3 || (templateObject_
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
  */
-export var Paper = classed(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"dialogPaper relative ", ""], ["< class=\"dialogPaper relative ", ""])), function (p) {
+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]";
 });
-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"])));
+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,
@@ -29,14 +32,14 @@ export var Header = classed(_.Header)(templateObject_6 || (templateObject_6 = __
  * @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 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,
+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,
+    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/bare.mjs

@@ -0,0 +1,42 @@
+import { __makeTemplateObject } from "tslib";
+import { classed, extendComponent } from "../../helpers";
+import * as _ from "../DialogMui";
+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 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 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,
+ * this was removed from tailiwnd 2.0 on
+ *
+ * @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 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,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-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,
+"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-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,
+    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/elegant.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-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

@@ -1,16 +1,19 @@
-import { m } from "framer-motion";
-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 var KoineDialog = extendComponent(_, {
-    Root: Root,
-    Backdrop: m(Backdrop),
-    Container: Container,
-    Paper: m(Paper),
-    Close: Close,
-    Header: Header,
-    Body: Body,
-    mBackdrop: dialogBackdropMotion,
-    mPaper: dialogPaperMotion,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = void 0;
+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),
+    Container: bare_2.Container,
+    Paper: (0, framer_motion_1.m)(bare_2.Paper),
+    Close: bare_2.Close,
+    Header: bare_2.Header,
+    Body: bare_2.Body,
+    mBackdrop: basic_1.dialogBackdropMotion,
+    mPaper: basic_1.dialogPaperMotion,
 });

package/Dialog/tw/framer.mjs

@@ -0,0 +1,16 @@
+import { m } from "framer-motion";
+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 var KoineDialog = extendComponent(_, {
+    Root: Root,
+    Backdrop: m(Backdrop),
+    Container: Container,
+    Paper: m(Paper),
+    Close: Close,
+    Header: Header,
+    Body: Body,
+    mBackdrop: dialogBackdropMotion,
+    mPaper: dialogPaperMotion,
+});

package/Dialog/tw/framerMaterial.js

@@ -1,16 +1,19 @@
-import { m } from "framer-motion";
-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 var KoineDialog = extendComponent(_, {
-    Root: Root,
-    Backdrop: m(Backdrop),
-    Container: Container,
-    Paper: m(Paper),
-    Close: Close,
-    Header: Header,
-    Body: Body,
-    mBackdrop: dialogBackdropMotion,
-    mPaper: dialogPaperMotion,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = void 0;
+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),
+    Container: material_1.Container,
+    Paper: (0, framer_motion_1.m)(material_1.Paper),
+    Close: material_1.Close,
+    Header: material_1.Header,
+    Body: material_1.Body,
+    mBackdrop: basic_1.dialogBackdropMotion,
+    mPaper: basic_1.dialogPaperMotion,
 });

package/Dialog/tw/framerMaterial.mjs

@@ -0,0 +1,16 @@
+import { m } from "framer-motion";
+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 var KoineDialog = extendComponent(_, {
+    Root: Root,
+    Backdrop: m(Backdrop),
+    Container: Container,
+    Paper: m(Paper),
+    Close: Close,
+    Header: Header,
+    Body: Body,
+    mBackdrop: dialogBackdropMotion,
+    mPaper: dialogPaperMotion,
+});

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;