@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

package/Dialog/css/bare.mjs

@@ -1,21 +1,19 @@
-import { __makeTemplateObject } from "tslib";
 import { classed, extendComponent } from "../../helpers";
 import * as _ from "../DialogMui";
 // export type { KoineDialogProps } from "../DialogMui";
-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,
+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
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/css/index.stories.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    default: function() {
+        return _default;
+    },
+    bare: function() {
+        return bare;
+    }
+});
+const _stories = require("@koine/stories");
+const _bare = require("./bare");
+const _default = {
+    component: _bare.KoineDialog,
+    title: "Base/Dialog/CSS",
+    ..._stories.storyDialogMeta,
+    decorators: [
+        (Story)=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", null, `
+.dialog {
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.dialogRoot {
+  z-index: 1300;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.dialogBackdrop {
+  z-index: -1;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  backdrop-filter: blur(0px);
+}
+
+.dialogContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.dialogPaper {
+  position: relative;
+}
+
+.dialogClose {
+  position: absolute;
+}
+
+.dialogHeader {
+}
+
+.dialogBody {
+}
+`), /*#__PURE__*/ React.createElement(Story, null))
+    ]
+};
+const bareTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(_stories.StoryDialog, {
+        ...args,
+        Dialog: _bare.KoineDialog
+    });
+};
+const bare = bareTemplate.bind({});
+bare.args = _stories.storyDialogArgs;

package/Dialog/css/index.stories.mjs

@@ -0,0 +1,67 @@
+import { StoryDialog, storyDialogArgs, storyDialogMeta } from "@koine/stories";
+import { KoineDialog as bareComp } from "./bare";
+export default {
+    component: bareComp,
+    title: "Base/Dialog/CSS",
+    ...storyDialogMeta,
+    decorators: [
+        (Story)=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", null, `
+.dialog {
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.dialogRoot {
+  z-index: 1300;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.dialogBackdrop {
+  z-index: -1;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  backdrop-filter: blur(0px);
+}
+
+.dialogContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.dialogPaper {
+  position: relative;
+}
+
+.dialogClose {
+  position: absolute;
+}
+
+.dialogHeader {
+}
+
+.dialogBody {
+}
+`), /*#__PURE__*/ React.createElement(Story, null))
+    ]
+};
+const bareTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(StoryDialog, {
+        ...args,
+        Dialog: bareComp
+    });
+};
+export const bare = bareTemplate.bind({});
+bare.args = storyDialogArgs;

package/Dialog/index.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-var DialogMui_1 = require("./DialogMui");
-Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return DialogMui_1.KoineDialog; } });
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "KoineDialog", {
+    enumerable: true,
+    get: function() {
+        return _DialogMui.KoineDialog;
+    }
+});
+const _DialogMui = require("./DialogMui");

package/Dialog/m/bare.d.ts

@@ -4,11 +4,11 @@ export type { KoineDialogProps } from "../DialogMui";
 export declare const KoineDialog: ((props: Omit<{
     key?: import("react").Key | null | undefined;
     id?: string | undefined;
-    title?: string | undefined;
-    color?: string | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    title?: string | undefined;
+    color?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -51,7 +51,7 @@ export declare const KoineDialog: ((props: Omit<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -65,12 +65,12 @@ export declare const KoineDialog: ((props: Omit<{
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "location" | "time" | "true" | "false" | "page" | "step" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "location" | "true" | "false" | "page" | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;

package/Dialog/m/bare.js

@@ -1,35 +1,42 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-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");
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "KoineDialog", {
+    enumerable: true,
+    get: function() {
+        return KoineDialog;
+    }
+});
+const _framermotion = require("framer-motion");
+const _react = require("react");
+const _md = require("react-icons/md");
+const _helpers = require("../../helpers");
+const _DialogMui = require("../DialogMui");
+const _index = require("./index");
 /**
  * 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
- */
-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]);
+ */ const Dialog = /*#__PURE__*/ (0, _react.forwardRef)(function Dialog({ children, title, $scrollPaper, Root, Backdrop, Container, Paper, Close, Header, Body, mBackdrop, mPaper, onClose, ...props }, ref) {
+    const BackdropMotion = (0, _react.useMemo)(()=>(props)=>/*#__PURE__*/ React.createElement(_framermotion.AnimatePresence, null, props.open && /*#__PURE__*/ React.createElement(Backdrop, {
+                ...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
-    var backdropClick = (0, react_1.useRef)();
-    var handleMouseDown = function (event) {
+    const backdropClick = (0, _react.useRef)();
+    const handleMouseDown = (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;
     };
-    var handleBackdropClick = function (event) {
+    const handleBackdropClick = (event)=>{
         // Ignore the events not coming from the "backdrop".
         if (!backdropClick.current) {
             return;
@@ -40,16 +47,34 @@ var Dialog = (0, react_1.forwardRef)(function Dialog(_a, ref) {
             onClose(event, "backdropClick");
         }
     };
-    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ keepMounted: true, slots: { backdrop: 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 && (
-                // @ts-expect-error framer props collision...
-                (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, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) }), (0, jsx_runtime_1.jsx)(Body, { children: children })] }))) }) }) })));
+    return /*#__PURE__*/ React.createElement(Root, {
+        keepMounted: true,
+        slots: {
+            backdrop: BackdropMotion
+        },
+        onClick: handleBackdropClick,
+        onClose: onClose,
+        ref: ref,
+        ...props,
+        style: (0, _index.mRootStyle)(props)
+    }, /*#__PURE__*/ React.createElement(Container, {
+        $scrollPaper: $scrollPaper,
+        onMouseDown: handleMouseDown
+    }, /*#__PURE__*/ React.createElement(_framermotion.AnimatePresence, null, props.open && // @ts-expect-error framer props collision...
+    /*#__PURE__*/ React.createElement(Paper, {
+        ...mPaper,
+        "aria-label": title || "",
+        $scrollPaper: $scrollPaper
+    }, title && /*#__PURE__*/ React.createElement(Header, null, title), /*#__PURE__*/ React.createElement(Close, {
+        onClick: onClose
+    }, /*#__PURE__*/ React.createElement(_md.MdClear, null)), /*#__PURE__*/ React.createElement(Body, null, children)))));
 });
-exports.KoineDialog = (0, helpers_1.extendComponent)(Dialog, {
-    Root: DialogMui_1.Root,
-    Backdrop: (0, framer_motion_1.m)(DialogMui_1.Backdrop),
-    Container: DialogMui_1.Container,
-    Paper: (0, framer_motion_1.m)(DialogMui_1.Paper),
-    Close: DialogMui_1.Close,
-    Header: DialogMui_1.Header,
-    Body: DialogMui_1.Body,
+const KoineDialog = (0, _helpers.extendComponent)(Dialog, {
+    Root: _DialogMui.Root,
+    Backdrop: (0, _framermotion.m)(_DialogMui.Backdrop),
+    Container: _DialogMui.Container,
+    Paper: (0, _framermotion.m)(_DialogMui.Paper),
+    Close: _DialogMui.Close,
+    Header: _DialogMui.Header,
+    Body: _DialogMui.Body
 });

package/Dialog/m/bare.mjs

@@ -1,32 +1,32 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, m } from "framer-motion";
 import { forwardRef, useMemo, useRef } from "react";
 import { MdClear as IconClose } from "react-icons/md";
-import { AnimatePresence, m } from "framer-motion";
 import { extendComponent } from "../../helpers";
+import { Backdrop, Body, Close, Container, Header, Paper, Root } from "../DialogMui";
 import { mRootStyle } from "./index";
-import { Root, Backdrop, Container, Paper, Close, Header, Body, } from "../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
- */
-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]);
+ */ const Dialog = /*#__PURE__*/ forwardRef(function Dialog({ children, title, $scrollPaper, Root, Backdrop, Container, Paper, Close, Header, Body, mBackdrop, mPaper, onClose, ...props }, ref) {
+    const BackdropMotion = useMemo(()=>(props)=>/*#__PURE__*/ React.createElement(AnimatePresence, null, props.open && /*#__PURE__*/ React.createElement(Backdrop, {
+                ...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
-    var backdropClick = useRef();
-    var handleMouseDown = function (event) {
+    const backdropClick = useRef();
+    const handleMouseDown = (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;
     };
-    var handleBackdropClick = function (event) {
+    const handleBackdropClick = (event)=>{
         // Ignore the events not coming from the "backdrop".
         if (!backdropClick.current) {
             return;
@@ -37,16 +37,34 @@ var Dialog = forwardRef(function Dialog(_a, ref) {
             onClose(event, "backdropClick");
         }
     };
-    return (_jsx(Root, __assign({ keepMounted: true, slots: { backdrop: BackdropMotion }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { style: mRootStyle(props), children: _jsx(Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: _jsx(AnimatePresence, { children: props.open && (
-                // @ts-expect-error framer props collision...
-                _jsxs(Paper, __assign({}, mPaper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && _jsx(Header, { children: title }), _jsx(Close, { onClick: onClose, children: _jsx(IconClose, {}) }), _jsx(Body, { children: children })] }))) }) }) })));
+    return /*#__PURE__*/ React.createElement(Root, {
+        keepMounted: true,
+        slots: {
+            backdrop: BackdropMotion
+        },
+        onClick: handleBackdropClick,
+        onClose: onClose,
+        ref: ref,
+        ...props,
+        style: mRootStyle(props)
+    }, /*#__PURE__*/ React.createElement(Container, {
+        $scrollPaper: $scrollPaper,
+        onMouseDown: handleMouseDown
+    }, /*#__PURE__*/ React.createElement(AnimatePresence, null, props.open && // @ts-expect-error framer props collision...
+    /*#__PURE__*/ React.createElement(Paper, {
+        ...mPaper,
+        "aria-label": title || "",
+        $scrollPaper: $scrollPaper
+    }, title && /*#__PURE__*/ React.createElement(Header, null, title), /*#__PURE__*/ React.createElement(Close, {
+        onClick: onClose
+    }, /*#__PURE__*/ React.createElement(IconClose, null)), /*#__PURE__*/ React.createElement(Body, null, children)))));
 });
-export var KoineDialog = extendComponent(Dialog, {
-    Root: Root,
+export const KoineDialog = extendComponent(Dialog, {
+    Root,
     Backdrop: m(Backdrop),
-    Container: Container,
+    Container,
     Paper: m(Paper),
-    Close: Close,
-    Header: Header,
-    Body: Body,
+    Close,
+    Header,
+    Body
 });

package/Dialog/m/basic.js

@@ -1,35 +1,50 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dialogPaperMotion = exports.dialogBackdropMotion = void 0;
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./index"), exports);
-exports.dialogBackdropMotion = {
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    dialogBackdropMotion: function() {
+        return dialogBackdropMotion;
+    },
+    dialogPaperMotion: function() {
+        return dialogPaperMotion;
+    }
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./index"), exports);
+const dialogBackdropMotion = {
     initial: {
-        opacity: 0,
+        opacity: 0
     },
     animate: {
         backdropFilter: "blur(10px)",
-        opacity: 1,
+        opacity: 1
     },
     exit: {
         backdropFilter: "blur(0px)",
-        opacity: 0,
-    },
+        opacity: 0
+    }
 };
-exports.dialogPaperMotion = {
+const dialogPaperMotion = {
     initial: {
         // scale: .9,
         translateY: -60,
-        opacity: 0,
+        opacity: 0
     },
     animate: {
         // scale: 1,
         translateY: 0,
-        opacity: 1,
+        opacity: 1
     },
     exit: {
         // scale: 0.9,
         translateY: 60,
-        opacity: 0,
-    },
+        opacity: 0
+    }
 };

package/Dialog/m/basic.mjs

@@ -1,31 +1,31 @@
 export * from "./index";
-export var dialogBackdropMotion = {
+export const dialogBackdropMotion = {
     initial: {
-        opacity: 0,
+        opacity: 0
     },
     animate: {
         backdropFilter: "blur(10px)",
-        opacity: 1,
+        opacity: 1
     },
     exit: {
         backdropFilter: "blur(0px)",
-        opacity: 0,
-    },
+        opacity: 0
+    }
 };
-export var dialogPaperMotion = {
+export const dialogPaperMotion = {
     initial: {
         // scale: .9,
         translateY: -60,
-        opacity: 0,
+        opacity: 0
     },
     animate: {
         // scale: 1,
         translateY: 0,
-        opacity: 1,
+        opacity: 1
     },
     exit: {
         // scale: 0.9,
         translateY: 60,
-        opacity: 0,
-    },
+        opacity: 0
+    }
 };

package/Dialog/m/index.js

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

package/Dialog/m/index.mjs

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

package/Dialog/sc/bare.d.ts

@@ -41,11 +41,11 @@ export declare const Body: import("styled-components").StyledComponent<NonNullab
 export declare const KoineDialog: ((props: Omit<{
     key?: import("react").Key | null | undefined;
     id?: string | undefined;
-    title?: string | undefined;
-    color?: string | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    title?: string | undefined;
+    color?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -88,7 +88,7 @@ export declare const KoineDialog: ((props: Omit<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -102,12 +102,12 @@ export declare const KoineDialog: ((props: Omit<{
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "location" | "time" | "true" | "false" | "page" | "step" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "location" | "true" | "false" | "page" | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;