@koine/react 1.0.10 → 1.0.13

package/Collapsable/CollapsableReach.js

@@ -0,0 +1,253 @@
+"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";
+// 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/Collapsable/index.d.ts

@@ -0,0 +1 @@
+export * from "./Collapsable";

package/Collapsable/index.js

@@ -0,0 +1,2 @@
+export * from "./Collapsable";
+// export * from "./CollapsableReach";

package/Collapsable/package.json

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

package/Debug/Debug.d.ts

@@ -0,0 +1,4 @@
+export declare type DebugProps = {
+    data: object;
+};
+export declare const Debug: ({ data }: DebugProps) => JSX.Element;

package/Debug/Debug.js

@@ -0,0 +1,9 @@
+import { __makeTemplateObject } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+var Root = styled.div(templateObject_1 || (templateObject_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"])));
+export var Debug = function (_a) {
+    var data = _a.data;
+    return _jsx(Root, { children: JSON.stringify(data, undefined, 2) });
+};
+var templateObject_1;

package/Debug/index.d.ts

@@ -0,0 +1 @@
+export * from "./Debug";

package/Debug/index.js

@@ -0,0 +1 @@
+export * from "./Debug";

package/Debug/package.json

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

package/Details/Details.d.ts

@@ -0,0 +1,114 @@
+/// <reference types="react" />
+import { type WithComponents, type Simplify } from "../helpers";
+export declare type OwnProps = React.ComponentProps<"details"> & {
+    open?: boolean;
+    onChange?: () => any;
+    summary: null | React.ReactNode;
+    /** Amount of milliseconds after which the component collapses */
+    /** @default "Expand" */
+    ariaExpand?: string;
+    /** @default "Collapse" */
+    ariaCollapse?: string;
+    id?: string;
+    /** Used to trigger a recalculation effect */
+    recalc?: any;
+};
+export declare type Components = {
+    Root: {
+        type: "details";
+        props: React.PropsWithChildren<{}>;
+    };
+    Summary: {
+        type: "summary";
+        props: React.PropsWithChildren<{
+            $open: OwnProps["open"];
+        } & Pick<OwnProps, "onChange">>;
+    };
+    Body: {
+        type: "div";
+        props: React.PropsWithChildren<{
+            $open: OwnProps["open"];
+        } & Pick<OwnProps, "onChange">>;
+        motionable: true;
+    };
+    Content: {
+        type: "div";
+        props: React.PropsWithChildren<{
+            $open: OwnProps["open"];
+            "aria-expanded"?: React.AriaAttributes["aria-expanded"];
+            "aria-label"?: React.AriaAttributes["aria-label"];
+        } & Pick<OwnProps, "onChange">>;
+        motionable: true;
+    };
+};
+export declare type ComponentsProps = {
+    [Name in keyof Components]: Components[Name]["props"];
+};
+export declare type Props = Simplify<WithComponents<OwnProps, Components>>;
+export declare type DetailsProps = Props;
+export declare type KoineDetailsProps = Props;
+export declare const Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "key" | keyof import("react").DetailsHTMLAttributes<HTMLDetailsElement>> & {
+    children?: import("react").ReactNode;
+}>;
+export declare const Summary: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & {
+    $open: OwnProps["open"];
+} & Pick<OwnProps, "onChange"> & {
+    children?: import("react").ReactNode;
+}>;
+export declare const Body: import("react").ElementType<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    $open: OwnProps["open"];
+} & Pick<OwnProps, "onChange"> & {
+    children?: import("react").ReactNode;
+}>;
+export declare const Content: import("react").ElementType<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    $open: OwnProps["open"];
+    "aria-expanded"?: React.AriaAttributes["aria-expanded"];
+    "aria-label"?: React.AriaAttributes["aria-label"];
+} & Pick<OwnProps, "onChange"> & {
+    children?: import("react").ReactNode;
+}>;
+export declare const KoineDetails: ((props: Pick<Simplify<WithComponents<OwnProps, Components>>, "key" | "summary" | keyof import("react").DetailsHTMLAttributes<HTMLDetailsElement> | "ariaExpand" | "ariaCollapse" | "recalc" | keyof Components> & import("react").RefAttributes<HTMLDivElement>) => import("react").FunctionComponentElement<any>) & {
+    Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "key" | keyof import("react").DetailsHTMLAttributes<HTMLDetailsElement>> & {
+        children?: import("react").ReactNode;
+    }>;
+    Summary: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & {
+        $open: OwnProps["open"];
+    } & Pick<OwnProps, "onChange"> & {
+        children?: import("react").ReactNode;
+    }>;
+    Body: import("react").ElementType<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+        $open: OwnProps["open"];
+    } & Pick<OwnProps, "onChange"> & {
+        children?: import("react").ReactNode;
+    }>;
+    Content: import("react").ElementType<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+        $open: OwnProps["open"];
+        "aria-expanded"?: React.AriaAttributes["aria-expanded"];
+        "aria-label"?: React.AriaAttributes["aria-label"];
+    } & Pick<OwnProps, "onChange"> & {
+        children?: import("react").ReactNode;
+    }>;
+} & {
+    defaultProps: {
+        Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "key" | keyof import("react").DetailsHTMLAttributes<HTMLDetailsElement>> & {
+            children?: import("react").ReactNode;
+        }>;
+        Summary: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & {
+            $open: OwnProps["open"];
+        } & Pick<OwnProps, "onChange"> & {
+            children?: import("react").ReactNode;
+        }>;
+        Body: import("react").ElementType<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+            $open: OwnProps["open"];
+        } & Pick<OwnProps, "onChange"> & {
+            children?: import("react").ReactNode;
+        }>;
+        Content: import("react").ElementType<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+            $open: OwnProps["open"];
+            "aria-expanded"?: React.AriaAttributes["aria-expanded"];
+            "aria-label"?: React.AriaAttributes["aria-label"];
+        } & Pick<OwnProps, "onChange"> & {
+            children?: import("react").ReactNode;
+        }>;
+    };
+};

package/Details/Details.js

@@ -0,0 +1,65 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, 
+/* useId, */ useRef, useState, } from "react";
+import { useWindowSize } from "../hooks/useWindowSize";
+import { extendComponent, } from "../helpers";
+import { useId } from "../hooks/useId";
+export var Root = "details";
+export var Summary = "summary";
+export var Body = "div";
+export var 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 = 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 = __rest(_a, ["id", "open", "recalc", "summary", "children", "Root", "Summary", "Body", "Content", "onChange"]);
+    var isControlled = typeof propOpen !== "undefined";
+    var _b = useState(propOpen), stateOpen = _b[0], setStateOpen = _b[1];
+    var _c = useState(0), height = _c[0], setHeight = _c[1];
+    var hash = id ? "#".concat(id) : "";
+    var winSize = useWindowSize();
+    var open = isControlled ? propOpen : stateOpen;
+    var _d = useState(open ? "unset" : "hidden"), overflow = _d[0], setOverflow = _d[1];
+    var content = useRef(null);
+    var defaultId = useId();
+    id = id || defaultId;
+    var handleClick = 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]);
+    useEffect(function () {
+        if (content.current) {
+            setHeight(Math.ceil(content.current.offsetHeight));
+        }
+    }, [winSize, recalc]);
+    // deeplink on mount
+    useEffect(function () {
+        if (!isControlled && hash && window.location.hash === hash) {
+            setStateOpen(true);
+        }
+    }, [hash, isControlled]);
+    return (_jsxs(Root, __assign({}, props, { open: open || false }, { children: [_jsx(Summary, __assign({ "$open": open, onClick: handleClick }, { children: summary || " " })), _jsx(Body, __assign({ "$open": open, style: { overflow: overflow } }, { children: _jsx(Content
+                // ref={content}
+                , __assign({ "$open": open, 
+                    // aria-expanded={open}
+                    // aria-label={open ? ariaCollapse : ariaExpand}
+                    style: {
+                        pointerEvents: open ? "all" : "none",
+                    } }, { children: children })) }))] })));
+});
+export var KoineDetails = extendComponent(DetailsWithRef, {
+    Root: Root,
+    Summary: Summary,
+    Body: Body,
+    Content: Content,
+});

package/Details/index.d.ts

@@ -0,0 +1 @@
+export * from "./Details";

package/Details/index.js

@@ -0,0 +1 @@
+export * from "./Details";

package/Details/package.json

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

package/Dialog/DialogMui.d.ts

@@ -0,0 +1,139 @@
+import React from "react";
+import ModalUnstyled, { type ModalUnstyledProps } from "@mui/base/ModalUnstyled";
+import { type MotionProps } from "framer-motion";
+import { type WithComponents, type Simplify } from "../helpers";
+declare type ReducedModalUnstyledProps = Omit<ModalUnstyledProps, "onClose" | "BackdropComponent" | "classes" | "closeAfterTransition" | "component" | "components" | "componentsProps">;
+export declare type OwnProps = React.PropsWithChildren<ReducedModalUnstyledProps & {
+    onClose: (event: object, reason?: string) => any;
+    title?: string;
+    /** @default true */
+    /** @default false */
+    $scrollPaper?: boolean;
+    mBackdrop?: MotionProps;
+    mPaper?: MotionProps;
+}>;
+export declare type Components = {
+    Root: {
+        type: typeof ModalUnstyled;
+        props: React.PropsWithChildren<ReducedModalUnstyledProps>;
+    };
+    Backdrop: {
+        type: "div";
+        props: ModalUnstyledProps["BackdropProps"] & {
+            open?: OwnProps["open"];
+        };
+        motionable: true;
+    };
+    Container: {
+        type: "div";
+        props: React.PropsWithChildren<Pick<OwnProps, "$scrollPaper">>;
+    };
+    Paper: {
+        type: "div";
+        props: React.PropsWithChildren<{
+            "aria-label": string;
+        } & Pick<OwnProps, "$scrollPaper">>;
+        motionable: true;
+    };
+    Close: {
+        type: "button";
+        props: React.PropsWithChildren<{
+            onClick: OwnProps["onClose"];
+        }>;
+    };
+    Header: {
+        type: "div";
+        props: React.PropsWithChildren<{}>;
+    };
+    Body: {
+        type: "div";
+        props: React.PropsWithChildren<{}>;
+    };
+};
+export declare type ComponentsProps = {
+    [Name in keyof Components]: Components[Name]["props"];
+};
+export declare type Props = Simplify<WithComponents<OwnProps, Components>>;
+export declare type DialogProps = Props;
+export declare type KoineDialogProps = Props;
+export declare const Root: import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>;
+export declare const Backdrop: React.ElementType<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+} & {
+    open?: boolean | undefined;
+}>;
+export declare const Container: React.ElementType<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & Pick<OwnProps, "$scrollPaper"> & {
+    children?: React.ReactNode;
+}>;
+export declare const Paper: React.ElementType<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    "aria-label": string;
+} & Pick<OwnProps, "$scrollPaper"> & {
+    children?: React.ReactNode;
+}>;
+export declare const Close: React.ElementType<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    onClick: OwnProps["onClose"];
+} & {
+    children?: React.ReactNode;
+}>;
+export declare const Header: React.ElementType<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    children?: React.ReactNode;
+}>;
+export declare const Body: React.ElementType<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    children?: React.ReactNode;
+}>;
+export declare const KoineDialog: ((props: Pick<Simplify<WithComponents<OwnProps, Components>>, "key" | "id" | "title" | "color" | "slot" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "BackdropProps" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "open" | "$scrollPaper" | "mBackdrop" | "mPaper" | keyof Components> & React.RefAttributes<HTMLDivElement>) => React.FunctionComponentElement<any>) & {
+    Root: import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>;
+    Backdrop: React.ElementType<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        open?: boolean | undefined;
+    }>;
+    Container: React.ElementType<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & Pick<OwnProps, "$scrollPaper"> & {
+        children?: React.ReactNode;
+    }>;
+    Paper: React.ElementType<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+        "aria-label": string;
+    } & Pick<OwnProps, "$scrollPaper"> & {
+        children?: React.ReactNode;
+    }>;
+    Close: React.ElementType<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+        onClick: OwnProps["onClose"];
+    } & {
+        children?: React.ReactNode;
+    }>;
+    Header: React.ElementType<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        children?: React.ReactNode;
+    }>;
+    Body: React.ElementType<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        children?: React.ReactNode;
+    }>;
+} & {
+    defaultProps: {
+        Root: import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>;
+        Backdrop: React.ElementType<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        } & {
+            open?: boolean | undefined;
+        }>;
+        Container: React.ElementType<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & Pick<OwnProps, "$scrollPaper"> & {
+            children?: React.ReactNode;
+        }>;
+        Paper: React.ElementType<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+            "aria-label": string;
+        } & Pick<OwnProps, "$scrollPaper"> & {
+            children?: React.ReactNode;
+        }>;
+        Close: React.ElementType<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+            onClick: OwnProps["onClose"];
+        } & {
+            children?: React.ReactNode;
+        }>;
+        Header: React.ElementType<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+            children?: React.ReactNode;
+        }>;
+        Body: React.ElementType<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+            children?: React.ReactNode;
+        }>;
+    };
+};
+export {};