@koine/react 2.0.0-beta.1 → 2.0.0-beta.11

package/Collapsable/CollapsableReach.js

@@ -1,252 +0,0 @@
-"use strict";
-/**
- * @file
- *
- * Maybe do a simplified version following this example:
- * https://codesandbox.io/s/framer-motion-accordion-qx958?file=/src/Example.tsx
- */
-// import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
-// import styled from "styled-components";
-// import { MotionProps, m } from "framer-motion";
-// import {
-//   Disclosure,
-//   DisclosureButton,
-//   DisclosurePanel,
-// } from "@reach/disclosure";
-// import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
-// import { btnStyleReset } from "../Buttons";
-// import { useWindowSize } from "../hooks/useWindowSize";
-// import { InputInvisible } from "../Forms/styles";
-// export type CollapsableStyledProps = {
-//   $expanded?: boolean;
-// };
-// /**
-//  * `overflow-anchor: none;` keeps the same scrolling position
-//  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Accordion/Accordion.js#L54
-//  */
-// export const CollapsableRoot = styled(Disclosure)`
-//   overflow-anchor: none;
-// `;
-// export const CollapsableHeadRoot = styled(m.label).attrs(
-//   (props: Pick<CollapsableHeadProps, "id">) => ({
-//     htmlFor: `${props.id}-input`,
-//   })
-// )<Pick<CollapsableStyledProps, "$expanded">>`
-//   ${btnStyleReset}
-//   width: 100%;
-//   padding: 0;
-//   text-align: left;
-//   display: flex;
-//   justify-content: space-between;
-//   align-items: center;
-//   cursor: pointer;
-// `;
-// export const CollapsableHeadSpace = styled.div`
-//   flex: 1;
-//   padding-left: 20px;
-// `;
-// export const CollapsableHeadAction = styled.div`
-//   padding-left: 20px;
-// `;
-// export const CollaspableHeadLine = styled(m.div)`
-//   width: 0%;
-//   height: 1px;
-//   background: #bbb;
-// `;
-// export const collapsableHeadLineMotion = {
-//   hover: {
-//     width: "100%",
-//     transition: {
-//       duration: 0.4,
-//     },
-//   },
-// };
-// export const CollapsableHeadText = styled.div``;
-// export const CollapsableHeadIcon = styled(m.div)``;
-// export type CollapsableHeadProps = React.PropsWithChildren<
-//   Pick<CollapsableStyledProps, "$expanded"> &
-//     CollapsableComponents & {
-//       id: CollapsableProps["id"];
-//       onClick: (...args: any) => any;
-//     }
-// >;
-// export const CollapsableHead = ({
-//   $expanded,
-//   id,
-//   onClick,
-//   HeadRoot = CollapsableHeadRoot,
-//   HeadAction = CollapsableHeadAction,
-//   HeadIcon = CollapsableHeadIcon,
-//   children,
-// }: CollapsableHeadProps) => {
-//   return (
-//     <DisclosureButton
-//       onClick={onClick}
-//       // tabIndex={0}
-//       // role="tab"
-//       initial="rest"
-//       whileHover="hover"
-//       $expanded={$expanded}
-//       as={HeadRoot}
-//       id={id}
-//     >
-//       <CollapsableHeadText>{children}</CollapsableHeadText>
-//       <CollapsableHeadSpace>
-//         <CollaspableHeadLine
-//           variants={collapsableHeadLineMotion}
-//           animate={$expanded ? "hover" : ""}
-//         />
-//       </CollapsableHeadSpace>
-//       {HeadAction && (
-//         <HeadAction>
-//           {HeadIcon && (
-//             <HeadIcon animate={{ rotate: $expanded ? 180 : 0 }}>
-//               <IconCollapse />
-//             </HeadIcon>
-//           )}
-//         </HeadAction>
-//       )}
-//     </DisclosureButton>
-//   );
-// };
-// export const CollapsableInput = styled(InputInvisible).attrs({
-//   type: "checkbox",
-// })``;
-// export const CollasableBodyWrap = styled(
-//   DisclosurePanel
-// )<CollapsableStyledProps>`
-//   /* this is because @reach adds the "hidden" attribute */
-//   &[hidden] {
-//     display: block;
-//   }
-// `;
-// export const CollapsableBodyRoot = styled(m.div)`
-//   .no-js & {
-//     transition: margin-top 0.2s ease;
-//   }
-//   .no-js ${CollapsableInput}:checked + ${CollasableBodyWrap} & {
-//     margin-top: 0 !important;
-//     opacity: 1 !important;
-//   }
-// `;
-// export type CollapsableBodyProps = MotionProps &
-//   Pick<CollapsableStyledProps, "$expanded"> & {
-//     children?: React.ReactNode;
-//     style?: React.CSSProperties;
-//   };
-// export const CollapsableBody = forwardRef<HTMLDivElement, CollapsableBodyProps>(
-//   function CollapsableBody(props, ref) {
-//     return <CollapsableBodyRoot ref={ref} {...props} />;
-//   }
-// );
-// export type CollapsableComponents = {
-//   HeadRoot?: typeof CollapsableHeadRoot;
-//   HeadAction?: null | typeof CollapsableHeadAction | React.FC<any>;
-//   HeadIcon?: null | typeof CollapsableHeadIcon | React.FC<any>;
-// };
-// export type CollapsableProps = React.ComponentPropsWithoutRef<"div"> & {
-//   id?: string;
-//   expanded?: boolean;
-//   /** Used to trigger a recalculation effect */
-//   recalc?: any;
-//   onChange?: () => any;
-//   head: null | React.ReactNode;
-//   body: React.ReactNode;
-//   /** Amount of milliseconds after which the component collapses */
-//   // autoCollapse?: number;
-//   components?: CollapsableComponents;
-//   /** @default "Expand" */
-//   ariaExpand?: string;
-//   /** @default "Collapse" */
-//   ariaCollapse?: string;
-// };
-// export const Collapsable = ({
-//   expanded: propExpanded,
-//   recalc,
-//   onChange,
-//   id,
-//   head,
-//   body,
-//   // autoCollapse,
-//   components = {},
-//   ariaExpand = "Expand",
-//   ariaCollapse = "Collapse",
-//   ...props
-// }: CollapsableProps) => {
-//   const isControlled = typeof propExpanded !== "undefined";
-//   const [stateExpanded, setStateExpanded] = useState(propExpanded);
-//   const [height, setHeight] = useState(0);
-//   const hash = id ? `#${id}` : "";
-//   const winSize = useWindowSize();
-//   const expanded = isControlled ? propExpanded : stateExpanded;
-//   const [overflow, setOverflow] = useState(expanded ? "unset" : "hidden");
-//   const content = useRef<HTMLDivElement>(null);
-//   const defaultId = useId();
-//   id = id || defaultId;
-//   const handleClick = useCallback(() => {
-//     if (hash) {
-//       window.history.replaceState(
-//         null,
-//         "",
-//         expanded ? window.location.pathname + window.location.search : hash
-//       );
-//     }
-//     if (onChange) {
-//       onChange();
-//     }
-//     if (!isControlled) {
-//       setStateExpanded((prevExpanded) => !prevExpanded);
-//     }
-//   }, [expanded, hash, onChange, isControlled]);
-//   const handleAnimationStart = useCallback(() => {
-//     setOverflow("hidden");
-//   }, []);
-//   const handleAnimationComplete = useCallback(() => {
-//     setOverflow(expanded ? "unset" : "hidden");
-//   }, [expanded]);
-//   useEffect(() => {
-//     if (content.current) {
-//       setHeight(Math.ceil(content.current.offsetHeight));
-//     }
-//   }, [winSize, recalc]);
-//   // deeplink on mount
-//   useEffect(() => {
-//     if (!isControlled && hash && window.location.hash === hash) {
-//       setStateExpanded(true);
-//     }
-//   }, [hash, isControlled]);
-//   return (
-//     <CollapsableRoot id={id} {...props} open={expanded || false}>
-//       {head !== null && (
-//         <CollapsableHead
-//           id={id}
-//           $expanded={expanded}
-//           onClick={handleClick}
-//           {...components}
-//         >
-//           {head}
-//         </CollapsableHead>
-//       )}
-//       <CollapsableInput id={`${id}-input`} />
-//       <CollasableBodyWrap $expanded={expanded} style={{ overflow }}>
-//         <CollapsableBody
-//           ref={content}
-//           $expanded={expanded}
-//           // aria-expanded={expanded}
-//           // aria-label={expanded ? ariaCollapse : ariaExpand}
-//           style={{
-//             pointerEvents: expanded ? "all" : "none",
-//           }}
-//           onAnimationStart={handleAnimationStart}
-//           onAnimationComplete={handleAnimationComplete}
-//           animate={{
-//             marginTop: expanded ? 0 : height ? `-${height}px` : "-100vh",
-//             opacity: expanded ? 1 : 0.4,
-//           }}
-//         >
-//           {body}
-//         </CollapsableBody>
-//       </CollasableBodyWrap>
-//     </CollapsableRoot>
-//   );
-// };

package/Collapsable/index.js

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

package/Collapsable/package.json

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

package/Debug/Debug.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Debug = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background: #f4f4f4;\n  border: 1px solid #ddd;\n  border-left: 3px solid #f36d33;\n  color: #666;\n  page-break-inside: avoid;\n  font-family: monospace;\n  font-size: small;\n  line-height: 1.6;\n  margin-bottom: 1.6em;\n  max-width: 100%;\n  overflow: auto;\n  padding: 1em 1.5em;\n  display: block;\n  word-wrap: break-word;\n"], ["\n  background: #f4f4f4;\n  border: 1px solid #ddd;\n  border-left: 3px solid #f36d33;\n  color: #666;\n  page-break-inside: avoid;\n  font-family: monospace;\n  font-size: small;\n  line-height: 1.6;\n  margin-bottom: 1.6em;\n  max-width: 100%;\n  overflow: auto;\n  padding: 1em 1.5em;\n  display: block;\n  word-wrap: break-word;\n"])));
-var Debug = function (_a) {
-    var data = _a.data;
-    return (0, jsx_runtime_1.jsx)(Root, { children: JSON.stringify(data, undefined, 2) });
-};
-exports.Debug = Debug;
-var templateObject_1;

package/Debug/index.js

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

package/Debug/package.json

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

package/Details/Details.js

@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDetails = exports.Content = exports.Body = exports.Summary = exports.Root = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var useWindowSize_1 = require("../hooks/useWindowSize");
-var helpers_1 = require("../helpers");
-exports.Root = "details";
-exports.Summary = "summary";
-exports.Body = "div";
-exports.Content = "div";
-/**
- * FIXME: it actually works even without forwardRef, check if we do need it
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
- */
-var DetailsWithRef = (0, react_1.forwardRef)(function Details(_a, ref) {
-    var id = _a.id, propOpen = _a.open, recalc = _a.recalc, summary = _a.summary, children = _a.children, _Root = _a.Root, _Summary = _a.Summary, _Body = _a.Body, _Content = _a.Content, onChange = _a.onChange, props = tslib_1.__rest(_a, ["id", "open", "recalc", "summary", "children", "Root", "Summary", "Body", "Content", "onChange"]);
-    var isControlled = typeof propOpen !== "undefined";
-    var _b = (0, react_1.useState)(propOpen), stateOpen = _b[0], setStateOpen = _b[1];
-    var _c = (0, react_1.useState)(0), height = _c[0], setHeight = _c[1];
-    var hash = id ? "#".concat(id) : "";
-    var winSize = (0, useWindowSize_1.useWindowSize)();
-    var open = isControlled ? propOpen : stateOpen;
-    var _d = (0, react_1.useState)(open ? "unset" : "hidden"), overflow = _d[0], setOverflow = _d[1];
-    var content = (0, react_1.useRef)(null);
-    var defaultId = (0, react_1.useId)();
-    id = id || defaultId;
-    var handleClick = (0, react_1.useCallback)(function () {
-        if (hash) {
-            window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
-        }
-        if (onChange) {
-            onChange();
-        }
-        if (!isControlled) {
-            setStateOpen(function (prevOpen) { return !prevOpen; });
-        }
-    }, [open, hash, onChange, isControlled]);
-    (0, react_1.useEffect)(function () {
-        if (content.current) {
-            setHeight(Math.ceil(content.current.offsetHeight));
-        }
-    }, [winSize, recalc]);
-    // deeplink on mount
-    (0, react_1.useEffect)(function () {
-        if (!isControlled && hash && window.location.hash === hash) {
-            setStateOpen(true);
-        }
-    }, [hash, isControlled]);
-    return ((0, jsx_runtime_1.jsxs)(exports.Root, tslib_1.__assign({}, props, { open: open || false, children: [(0, jsx_runtime_1.jsx)(exports.Summary, { "$open": open, onClick: handleClick, children: summary || " " }), (0, jsx_runtime_1.jsx)(exports.Body, { "$open": open, style: { overflow: overflow }, children: (0, jsx_runtime_1.jsx)(exports.Content
-                // ref={content}
-                , { "$open": open, 
-                    // aria-expanded={open}
-                    // aria-label={open ? ariaCollapse : ariaExpand}
-                    style: {
-                        pointerEvents: open ? "all" : "none",
-                    }, children: children }) })] })));
-});
-exports.KoineDetails = (0, helpers_1.extendComponent)(DetailsWithRef, {
-    Root: exports.Root,
-    Summary: exports.Summary,
-    Body: exports.Body,
-    Content: exports.Content,
-});

package/Details/index.js

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

package/Details/package.json

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

package/Dialog/DialogMui.js

@@ -1,83 +0,0 @@
-"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 jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Modal_1 = tslib_1.__importDefault(require("@mui/base/Modal"));
-var md_1 = require("react-icons/md");
-var helpers_1 = require("../helpers");
-exports.Root = Modal_1.default;
-exports.Backdrop = "div";
-exports.Container = "div";
-exports.Paper = "div";
-exports.Close = "button";
-exports.Header = "div";
-exports.Body = "div";
-// const Dialog = ({
-//   children,
-//   title,
-//   $scrollPaper,
-//   Root: _Root,
-//   Backdrop: _Backdrop,
-//   Container: _Container,
-//   Paper: _Paper,
-//   Close: _Close,
-//   Header: _Header,
-//   Body: _Body,
-//   ...props
-// }: KoineDialogProps) => (
-//   <Root components={{ Backdrop }} onBackdropClick={props.onClose} {...props}>
-//     <Container $scrollPaper={$scrollPaper}>
-//       <Paper aria-label={title || ""} $scrollPaper={$scrollPaper}>
-//         {title && <Header>{title}</Header>}
-//         <Close onClick={props.onClose}>
-//           <IconClose />
-//         </Close>
-//         <Body>{children}</Body>
-//       </Paper>
-//     </Container>
-//   </Root>
-// );
-/**
- *
- * Main differences from [Mui Dialog](https://mui.com/material-ui/react-dialog):
- *
- * - By default uses `scroll="body"` instead of paper.
- * - Optionally uses `framer-motion` for animations
- * - Uses backdrop blur by default
- *
- * FIXME: it actually works even without forwardRef, check if we do need it
- */
-var DialogWithRef = (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, onClose = _a.onClose, props = tslib_1.__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
-    var backdropClick = (0, react_1.useRef)();
-    var handleMouseDown = function (event) {
-        // We don't want to close the dialog when clicking the dialog content.
-        // Make sure the event starts and ends on the same DOM element.
-        backdropClick.current = event.target === event.currentTarget;
-    };
-    var handleBackdropClick = function (event) {
-        // Ignore the events not coming from the "backdrop".
-        if (!backdropClick.current) {
-            return;
-        }
-        backdropClick.current = null;
-        // if (onBackdropClick) onBackdropClick(event);
-        if (onClose) {
-            onClose(event, "backdropClick");
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(exports.Root, tslib_1.__assign({ slots: { backdrop: exports.Backdrop }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(exports.Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsxs)(exports.Paper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && (0, jsx_runtime_1.jsx)(exports.Header, { children: title }), (0, jsx_runtime_1.jsx)(exports.Close, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) }), (0, jsx_runtime_1.jsx)(exports.Body, { children: children })] }) }) })));
-});
-exports.KoineDialog = (0, helpers_1.extendComponent)(DialogWithRef, {
-    Root: exports.Root,
-    Backdrop: exports.Backdrop,
-    Container: exports.Container,
-    Paper: exports.Paper,
-    Close: exports.Close,
-    Header: exports.Header,
-    Body: exports.Body,
-});

package/Dialog/css/bare.js

@@ -1,24 +0,0 @@
-"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"));
-// export type { KoineDialogProps } from "../DialogMui";
-exports.Root = (0, helpers_1.classed)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["dialog"], ["dialog"])));
-exports.Backdrop = (0, helpers_1.classed)(_.Backdrop)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["dialogBackdrop"], ["dialogBackdrop"])));
-exports.Container = (0, helpers_1.classed)(_.Container)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["dialogContainer"], ["dialogContainer"])));
-exports.Paper = (0, helpers_1.classed)(_.Paper)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["dialogPaper"], ["dialogPaper"])));
-exports.Close = (0, helpers_1.classed)(_.Close)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\"dialogClose"], ["\"dialogClose"])));
-exports.Header = (0, helpers_1.classed)(_.Header)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["dialogHeader"], ["dialogHeader"])));
-exports.Body = (0, helpers_1.classed)(_.Body)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["dialogBody"], ["dialogBody"])));
-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/index.js

@@ -1,5 +0,0 @@
-"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; } });

package/Dialog/m/bare.js

@@ -1,55 +0,0 @@
-"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");
-/**
- * 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]);
-    // 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) {
-        // 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) {
-        // Ignore the events not coming from the "backdrop".
-        if (!backdropClick.current) {
-            return;
-        }
-        backdropClick.current = null;
-        // if (onBackdropClick) onBackdropClick(event);
-        if (onClose) {
-            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 })] }))) }) }) })));
-});
-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,
-});

package/Dialog/m/basic.js

@@ -1,35 +0,0 @@
-"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 = {
-    initial: {
-        opacity: 0,
-    },
-    animate: {
-        backdropFilter: "blur(10px)",
-        opacity: 1,
-    },
-    exit: {
-        backdropFilter: "blur(0px)",
-        opacity: 0,
-    },
-};
-exports.dialogPaperMotion = {
-    initial: {
-        // scale: .9,
-        translateY: -60,
-        opacity: 0,
-    },
-    animate: {
-        // scale: 1,
-        translateY: 0,
-        opacity: 1,
-    },
-    exit: {
-        // scale: 0.9,
-        translateY: 60,
-        opacity: 0,
-    },
-};

package/Dialog/m/index.js

@@ -1,8 +0,0 @@
-"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;

package/Dialog/m/package.json

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

package/Dialog/package.json

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

package/Dialog/sc/bare.js

@@ -1,46 +0,0 @@
-"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 styled_1 = require("../../styles/styled");
-var Buttons_1 = require("../../Buttons");
-var _ = tslib_1.__importStar(require("../DialogMui"));
-exports.Root = (0, styled_components_1.default)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"], ["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"])), styled_1.inset0);
-// export const Backdrop = (props) => {
-//   return <div {...props} />;
-// }
-exports.Backdrop = (0, styled_components_1.default)(_.Backdrop)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  z-index: -1;\n  position: fixed;\n  ", "\n  backdrop-filter: blur(0px);\n  -webkit-tap-highlight-color: transparent;\n"], ["\n  z-index: -1;\n  position: fixed;\n  ", "\n  backdrop-filter: blur(0px);\n  -webkit-tap-highlight-color: transparent;\n"])), styled_1.inset0);
-/**
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
- */
-exports.Container = (0, styled_components_1.default)(_.Container)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  height: 100%;\n  outline: 0;\n  ", "\n"], ["\n  height: 100%;\n  outline: 0;\n  ", "\n"])), function (p) {
-    return p.$scrollPaper
-        ? "display: flex; justify-content: center; align-items: center;"
-        : "overflow: hidden auto; text-align: center; &:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }";
-});
-/**
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
- */
-exports.Paper = (0, styled_components_1.default)(_.Paper)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (p) {
-    return p.$scrollPaper
-        ? "display: flex; flex-direction: column; max-height: calc(100%-64px);"
-        : "display: inline-block; vertical-align: middle; text-align: initial;";
-});
-exports.Close = (0, styled_components_1.default)(Buttons_1.IconButton)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n"], ["\n  position: absolute;\n"])));
-exports.Header = (0, styled_components_1.default)(_.Header)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject([""], [""])));
-/**
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
- */
-exports.Body = (0, styled_components_1.default)(_.Body)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n  flex: 1 1 auto;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n  overflow: auto;\n"], ["\n  flex: 1 1 auto;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n  overflow: auto;\n"])));
-exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
-    Root: exports.Root,
-    Backdrop: exports.Backdrop,
-    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;