@koine/react 1.0.9 → 1.0.12

package/node/Collapsable/CollapsableReach.js

@@ -1,141 +1,253 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Collapsable = exports.CollapsableBody = exports.CollapsableBodyRoot = exports.CollasableBodyWrap = exports.CollapsableInput = exports.CollapsableHead = exports.CollapsableHeadIcon = exports.CollapsableHeadText = exports.collapsableHeadLineMotion = exports.CollaspableHeadLine = exports.CollapsableHeadAction = exports.CollapsableHeadSpace = exports.CollapsableHeadRoot = exports.CollapsableRoot = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * @file
  *
  * Maybe do a simplified version following this example:
  * https://codesandbox.io/s/framer-motion-accordion-qx958?file=/src/Example.tsx
  */
-const react_1 = require("react");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const framer_motion_1 = require("framer-motion");
-const disclosure_1 = require("@reach/disclosure");
-const bs_1 = require("react-icons/bs");
-const Buttons_1 = require("../Buttons");
-const useWindowSize_1 = require("../hooks/useWindowSize");
-const styles_1 = require("../Forms/styles");
-/**
- * `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
- */
-exports.CollapsableRoot = (0, styled_components_1.default)(disclosure_1.Disclosure) `
-  overflow-anchor: none;
-`;
-exports.CollapsableHeadRoot = (0, styled_components_1.default)(framer_motion_1.m.label).attrs((props) => ({
-    htmlFor: `${props.id}-input`,
-})) `
-  ${Buttons_1.btnStyleReset}
-  width: 100%;
-  padding: 0;
-  text-align: left;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-`;
-exports.CollapsableHeadSpace = styled_components_1.default.div `
-  flex: 1;
-  padding-left: 20px;
-`;
-exports.CollapsableHeadAction = styled_components_1.default.div `
-  padding-left: 20px;
-`;
-exports.CollaspableHeadLine = (0, styled_components_1.default)(framer_motion_1.m.div) `
-  width: 0%;
-  height: 1px;
-  background: #bbb;
-`;
-exports.collapsableHeadLineMotion = {
-    hover: {
-        width: "100%",
-        transition: {
-            duration: 0.4,
-        },
-    },
-};
-exports.CollapsableHeadText = styled_components_1.default.div ``;
-exports.CollapsableHeadIcon = (0, styled_components_1.default)(framer_motion_1.m.div) ``;
-const CollapsableHead = ({ $expanded, id, onClick, HeadRoot = exports.CollapsableHeadRoot, HeadAction = exports.CollapsableHeadAction, HeadIcon = exports.CollapsableHeadIcon, children, }) => {
-    return ((0, jsx_runtime_1.jsxs)(disclosure_1.DisclosureButton, { onClick: onClick, 
-        // tabIndex={0}
-        // role="tab"
-        initial: "rest", whileHover: "hover", "$expanded": $expanded, as: HeadRoot, id: id, children: [(0, jsx_runtime_1.jsx)(exports.CollapsableHeadText, { children: children }), (0, jsx_runtime_1.jsx)(exports.CollapsableHeadSpace, { children: (0, jsx_runtime_1.jsx)(exports.CollaspableHeadLine, { variants: exports.collapsableHeadLineMotion, animate: $expanded ? "hover" : "" }) }), HeadAction && ((0, jsx_runtime_1.jsx)(HeadAction, { children: HeadIcon && ((0, jsx_runtime_1.jsx)(HeadIcon, { animate: { rotate: $expanded ? 180 : 0 }, children: (0, jsx_runtime_1.jsx)(bs_1.BsBoxArrowInDown, {}) })) }))] }));
-};
-exports.CollapsableHead = CollapsableHead;
-exports.CollapsableInput = (0, styled_components_1.default)(styles_1.InputInvisible).attrs({
-    type: "checkbox",
-}) ``;
-exports.CollasableBodyWrap = (0, styled_components_1.default)(disclosure_1.DisclosurePanel) `
-  /* this is because @reach adds the "hidden" attribute */
-
-  &[hidden] {
-    display: block;
-  }
-`;
-exports.CollapsableBodyRoot = (0, styled_components_1.default)(framer_motion_1.m.div) `
-  .no-js & {
-    transition: margin-top 0.2s ease;
-  }
-  .no-js ${exports.CollapsableInput}:checked + ${exports.CollasableBodyWrap} & {
-    margin-top: 0 !important;
-    opacity: 1 !important;
-  }
-`;
-exports.CollapsableBody = (0, react_1.forwardRef)(function CollapsableBody(props, ref) {
-    return (0, jsx_runtime_1.jsx)(exports.CollapsableBodyRoot, { ref: ref, ...props });
-});
-const Collapsable = ({ expanded: propExpanded, recalc, onChange, id, head, body, 
-// autoCollapse,
-components = {}, ariaExpand = "Expand", ariaCollapse = "Collapse", ...props }) => {
-    const isControlled = typeof propExpanded !== "undefined";
-    const [stateExpanded, setStateExpanded] = (0, react_1.useState)(propExpanded);
-    const [height, setHeight] = (0, react_1.useState)(0);
-    const hash = id ? `#${id}` : "";
-    const winSize = (0, useWindowSize_1.useWindowSize)();
-    const expanded = isControlled ? propExpanded : stateExpanded;
-    const [overflow, setOverflow] = (0, react_1.useState)(expanded ? "unset" : "hidden");
-    const content = (0, react_1.useRef)(null);
-    const defaultId = (0, react_1.useId)();
-    id = id || defaultId;
-    const handleClick = (0, react_1.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 = (0, react_1.useCallback)(() => {
-        setOverflow("hidden");
-    }, []);
-    const handleAnimationComplete = (0, react_1.useCallback)(() => {
-        setOverflow(expanded ? "unset" : "hidden");
-    }, [expanded]);
-    (0, react_1.useEffect)(() => {
-        if (content.current) {
-            setHeight(Math.ceil(content.current.offsetHeight));
-        }
-    }, [winSize, recalc]);
-    // deeplink on mount
-    (0, react_1.useEffect)(() => {
-        if (!isControlled && hash && window.location.hash === hash) {
-            setStateExpanded(true);
-        }
-    }, [hash, isControlled]);
-    return ((0, jsx_runtime_1.jsxs)(exports.CollapsableRoot, { id: id, ...props, open: expanded || false, children: [head !== null && ((0, jsx_runtime_1.jsx)(exports.CollapsableHead, { id: id, "$expanded": expanded, onClick: handleClick, ...components, children: head })), (0, jsx_runtime_1.jsx)(exports.CollapsableInput, { id: `${id}-input` }), (0, jsx_runtime_1.jsx)(exports.CollasableBodyWrap, { "$expanded": expanded, style: { overflow }, children: (0, jsx_runtime_1.jsx)(exports.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,
-                    }, children: body }) })] }));
-};
-exports.Collapsable = Collapsable;
+// 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";
+// import { useId } from "../hooks/useId";
+// 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/node/Collapsable/index.js

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

package/node/Debug/Debug.js

@@ -1,26 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Debug = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const Root = styled_components_1.default.div `
-  background: #f4f4f4;
-  border: 1px solid #ddd;
-  border-left: 3px solid #f36d33;
-  color: #666;
-  page-break-inside: avoid;
-  font-family: monospace;
-  font-size: small;
-  line-height: 1.6;
-  margin-bottom: 1.6em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1em 1.5em;
-  display: block;
-  word-wrap: break-word;
-`;
-const Debug = ({ data }) => {
+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/node/Debug/index.js

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

package/node/Details/Details.js

@@ -0,0 +1,67 @@
+"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");
+var useId_1 = require("../hooks/useId");
+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, useId_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, tslib_1.__assign({ "$open": open, onClick: handleClick }, { children: summary || " " })), (0, jsx_runtime_1.jsx)(exports.Body, tslib_1.__assign({ "$open": open, style: { overflow: overflow } }, { children: (0, jsx_runtime_1.jsx)(exports.Content
+                // ref={content}
+                , tslib_1.__assign({ "$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/node/Details/index.js

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

package/node/Dialog/DialogMui.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ModalUnstyled_1 = tslib_1.__importDefault(require("@mui/base/ModalUnstyled"));
-const md_1 = require("react-icons/md");
-const helpers_1 = require("../helpers");
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ModalUnstyled_1 = tslib_1.__importDefault(require("@mui/base/ModalUnstyled"));
+var md_1 = require("react-icons/md");
+var helpers_1 = require("../helpers");
 exports.Root = ModalUnstyled_1.default;
 exports.Backdrop = "div";
 exports.Container = "div";
@@ -49,16 +49,17 @@ exports.Body = "div";
  *
  * FIXME: it actually works even without forwardRef, check if we do need it
  */
-const DialogWithRef = (0, react_1.forwardRef)(function Dialog({ children, title, $scrollPaper, Root: _Root, Backdrop: _Backdrop, Container: _Container, Paper: _Paper, Close: _Close, Header: _Header, Body: _Body, onClose, ...props }, ref) {
+var DialogWithRef = (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
-    const backdropClick = (0, react_1.useRef)();
-    const handleMouseDown = (event) => {
+    var backdropClick = (0, react_1.useRef)();
+    var handleMouseDown = function (event) {
         // We don't want to close the dialog when clicking the dialog content.
         // Make sure the event starts and ends on the same DOM element.
         backdropClick.current = event.target === event.currentTarget;
     };
-    const handleBackdropClick = (event) => {
+    var handleBackdropClick = function (event) {
         // Ignore the events not coming from the "backdrop".
         if (!backdropClick.current) {
             return;
@@ -69,7 +70,7 @@ const DialogWithRef = (0, react_1.forwardRef)(function Dialog({ children, title,
             onClose(event, "backdropClick");
         }
     };
-    return ((0, jsx_runtime_1.jsx)(exports.Root, { BackdropComponent: 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 })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.Root, tslib_1.__assign({ BackdropComponent: exports.Backdrop, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(exports.Container, tslib_1.__assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsxs)(exports.Paper, tslib_1.__assign({ "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && (0, jsx_runtime_1.jsx)(exports.Header, { children: title }), (0, jsx_runtime_1.jsx)(exports.Close, tslib_1.__assign({ 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,

package/node/Dialog/css/bare.js

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
-const tslib_1 = require("tslib");
-const helpers_1 = require("../../helpers");
-const _ = tslib_1.__importStar(require("../DialogMui"));
+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) `dialog`;
-exports.Backdrop = (0, helpers_1.classed)(_.Backdrop) `dialogBackdrop`;
-exports.Container = (0, helpers_1.classed)(_.Container) `dialogContainer`;
-exports.Paper = (0, helpers_1.classed)(_.Paper) `dialogPaper`;
-exports.Close = (0, helpers_1.classed)(_.Close) `"dialogClose`;
-exports.Header = (0, helpers_1.classed)(_.Header) `dialogHeader`;
-exports.Body = (0, helpers_1.classed)(_.Body) `dialogBody`;
+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,
@@ -21,3 +21,4 @@ exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
     Header: exports.Header,
     Body: exports.Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;