@koine/react 1.0.8 → 1.0.9

package/Dialog/sc/bare.d.ts

@@ -0,0 +1,105 @@
+/// <reference types="react" />
+import type { Components } from "../DialogMui";
+import * as _ from "../DialogMui";
+export type { KoineDialogProps } from "../DialogMui";
+export declare const Root: import("styled-components").StyledComponent<import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>, import("styled-components").DefaultTheme, {}, never>;
+export declare const Backdrop: import("styled-components").StyledComponent<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"> & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & {
+    open?: boolean | undefined;
+}>, import("styled-components").DefaultTheme, {}, never>;
+/**
+ * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
+ */
+export declare const Container: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Pick<_.OwnProps, "$scrollPaper"> & {
+    children?: import("react").ReactNode;
+}>, import("styled-components").DefaultTheme, Pick<_.OwnProps, "$scrollPaper"> & {
+    children?: import("react").ReactNode;
+}, never>;
+/**
+ * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
+ */
+export declare const Paper: import("styled-components").StyledComponent<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"> & {
+    "aria-label": string;
+} & Pick<_.OwnProps, "$scrollPaper"> & {
+    children?: import("react").ReactNode;
+}>, import("styled-components").DefaultTheme, {
+    "aria-label": string;
+} & Pick<_.OwnProps, "$scrollPaper"> & {
+    children?: import("react").ReactNode;
+}, never>;
+export declare const Close: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps & {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const Header: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    children?: import("react").ReactNode;
+}>, import("styled-components").DefaultTheme, {}, never>;
+/**
+ * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
+ */
+export declare const Body: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    children?: import("react").ReactNode;
+}>, import("styled-components").DefaultTheme, {}, never>;
+export declare const KoineDialog: ((props: Pick<import("type-fest/source/simplify").Simplify<import("../../helpers").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> & import("react").RefAttributes<HTMLDivElement>) => import("react").FunctionComponentElement<any>) & {
+    Root: import("styled-components").StyledComponent<import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>, import("styled-components").DefaultTheme, {}, never>;
+    Backdrop: import("styled-components").StyledComponent<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"> & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        open?: boolean | undefined;
+    }>, import("styled-components").DefaultTheme, {}, never>;
+    Container: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Pick<_.OwnProps, "$scrollPaper"> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, Pick<_.OwnProps, "$scrollPaper"> & {
+        children?: import("react").ReactNode;
+    }, never>;
+    Paper: import("styled-components").StyledComponent<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"> & {
+        "aria-label": string;
+    } & Pick<_.OwnProps, "$scrollPaper"> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, {
+        "aria-label": string;
+    } & Pick<_.OwnProps, "$scrollPaper"> & {
+        children?: import("react").ReactNode;
+    }, never>;
+    Close: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps & {
+        disabled?: boolean | undefined;
+    }, never>;
+    Header: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, {}, never>;
+    Body: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, {}, never>;
+} & {
+    defaultProps: {
+        Root: import("styled-components").StyledComponent<import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>, import("styled-components").DefaultTheme, {}, never>;
+        Backdrop: import("styled-components").StyledComponent<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"> & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+        } & {
+            open?: boolean | undefined;
+        }>, import("styled-components").DefaultTheme, {}, never>;
+        Container: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Pick<_.OwnProps, "$scrollPaper"> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, Pick<_.OwnProps, "$scrollPaper"> & {
+            children?: import("react").ReactNode;
+        }, never>;
+        Paper: import("styled-components").StyledComponent<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"> & {
+            "aria-label": string;
+        } & Pick<_.OwnProps, "$scrollPaper"> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, {
+            "aria-label": string;
+        } & Pick<_.OwnProps, "$scrollPaper"> & {
+            children?: import("react").ReactNode;
+        }, never>;
+        Close: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps & {
+            disabled?: boolean | undefined;
+        }, never>;
+        Header: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, {}, never>;
+        Body: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, {}, never>;
+    };
+};

package/Dialog/sc/bare.js

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+import { extendComponent } from "../../helpers";
+import { inset0 } from "../../styles/styled";
+import { IconButton } from "../../Buttons";
+import * as _ from "../DialogMui";
+export const Root = styled(_.Root) `
+  z-index: 1300;
+  position: fixed;
+  ${inset0}
+`;
+// export const Backdrop = (props) => {
+//   return <div {...props} />;
+// }
+export const Backdrop = styled(_.Backdrop) `
+  z-index: -1;
+  position: fixed;
+  ${inset0}
+  backdrop-filter: blur(0px);
+  -webkit-tap-highlight-color: transparent;
+`;
+/**
+ * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
+ */
+export const Container = styled(_.Container) `
+  height: 100%;
+  outline: 0;
+  ${(p) => p.$scrollPaper
+    ? "display: flex; justify-content: center; align-items: center;"
+    : "overflow: hidden auto; text-align: center; &:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }"}
+`;
+/**
+ * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
+ */
+export const Paper = styled(_.Paper) `
+  position: relative;
+  ${(p) => p.$scrollPaper
+    ? "display: flex; flex-direction: column; max-height: calc(100%-64px);"
+    : "display: inline-block; vertical-align: middle; text-align: initial;"}
+`;
+export const Close = styled(IconButton) `
+  position: absolute;
+`;
+export const Header = styled(_.Header) ``;
+/**
+ * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
+ */
+export const Body = styled(_.Body) `
+  flex: 1 1 auto;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  overflow: auto;
+`;
+export const KoineDialog = extendComponent(_.KoineDialog, {
+    Root,
+    Backdrop,
+    Container,
+    Paper,
+    Close,
+    Header,
+    Body,
+});

package/Dialog/sc/framer.d.ts

@@ -0,0 +1,80 @@
+export type { KoineDialogProps } from "../DialogMui";
+export declare const KoineDialog: ((props: Pick<import("type-fest/source/simplify").Simplify<import("../../helpers").WithComponents<import("../DialogMui").OwnProps, import("../DialogMui").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 import("../DialogMui").Components> & import("react").RefAttributes<HTMLDivElement>) => import("react").FunctionComponentElement<any>) & {
+    Root: import("styled-components").StyledComponent<import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>, import("styled-components").DefaultTheme, {}, never>;
+    Backdrop: import("framer-motion").CustomDomComponent<{
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }>;
+    Container: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+        children?: import("react").ReactNode;
+    }, never>;
+    Paper: import("framer-motion").CustomDomComponent<{
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }>;
+    Close: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps & {
+        disabled?: boolean | undefined;
+    }, never>;
+    Header: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, {}, never>;
+    Body: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, {}, never>;
+    mBackdrop: import("framer-motion").MotionProps;
+    mPaper: import("framer-motion").MotionProps;
+} & {
+    defaultProps: {
+        Root: import("styled-components").StyledComponent<import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>, import("styled-components").DefaultTheme, {}, never>;
+        Backdrop: import("framer-motion").CustomDomComponent<{
+            [x: string]: any;
+            [x: number]: any;
+            [x: symbol]: any;
+        } & {
+            theme?: import("styled-components").DefaultTheme | undefined;
+        } & {
+            as?: string | import("react").ComponentType<any> | undefined;
+            forwardedAs?: string | import("react").ComponentType<any> | undefined;
+        }>;
+        Container: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+            children?: import("react").ReactNode;
+        }, never>;
+        Paper: import("framer-motion").CustomDomComponent<{
+            [x: string]: any;
+            [x: number]: any;
+            [x: symbol]: any;
+        } & {
+            theme?: import("styled-components").DefaultTheme | undefined;
+        } & {
+            as?: string | import("react").ComponentType<any> | undefined;
+            forwardedAs?: string | import("react").ComponentType<any> | undefined;
+        }>;
+        Close: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps & {
+            disabled?: boolean | undefined;
+        }, never>;
+        Header: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, {}, never>;
+        Body: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, {}, never>;
+        mBackdrop: import("framer-motion").MotionProps;
+        mPaper: import("framer-motion").MotionProps;
+    };
+};

package/Dialog/sc/framer.js

@@ -0,0 +1,16 @@
+import { m } from "framer-motion";
+import { extendComponent } from "../../helpers";
+import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
+import { KoineDialog as _ } from "../m/bare";
+import { Root, Backdrop, Container, Paper, Close, Header, Body } from "./bare";
+export const KoineDialog = extendComponent(_, {
+    Root,
+    Backdrop: m(Backdrop),
+    Container,
+    Paper: m(Paper),
+    Close,
+    Header,
+    Body,
+    mBackdrop: dialogBackdropMotion,
+    mPaper: dialogPaperMotion,
+});

package/Dialog/sc/framerMaterial.d.ts

@@ -0,0 +1,79 @@
+export declare const KoineDialog: ((props: Pick<import("type-fest/source/simplify").Simplify<import("../../helpers").WithComponents<import("../DialogMui").OwnProps, import("../DialogMui").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 import("../DialogMui").Components> & import("react").RefAttributes<HTMLDivElement>) => import("react").FunctionComponentElement<any>) & {
+    Root: import("styled-components").StyledComponent<import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>, import("styled-components").DefaultTheme, {}, never>;
+    Backdrop: import("framer-motion").CustomDomComponent<{
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }>;
+    Container: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+        children?: import("react").ReactNode;
+    }, never>;
+    Paper: import("framer-motion").CustomDomComponent<{
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }>;
+    Close: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps & {
+        disabled?: boolean | undefined;
+    }, never>;
+    Header: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, {}, never>;
+    Body: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, {}, never>;
+    mBackdrop: import("framer-motion").MotionProps;
+    mPaper: import("framer-motion").MotionProps;
+} & {
+    defaultProps: {
+        Root: import("styled-components").StyledComponent<import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>, import("styled-components").DefaultTheme, {}, never>;
+        Backdrop: import("framer-motion").CustomDomComponent<{
+            [x: string]: any;
+            [x: number]: any;
+            [x: symbol]: any;
+        } & {
+            theme?: import("styled-components").DefaultTheme | undefined;
+        } & {
+            as?: string | import("react").ComponentType<any> | undefined;
+            forwardedAs?: string | import("react").ComponentType<any> | undefined;
+        }>;
+        Container: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+            children?: import("react").ReactNode;
+        }, never>;
+        Paper: import("framer-motion").CustomDomComponent<{
+            [x: string]: any;
+            [x: number]: any;
+            [x: symbol]: any;
+        } & {
+            theme?: import("styled-components").DefaultTheme | undefined;
+        } & {
+            as?: string | import("react").ComponentType<any> | undefined;
+            forwardedAs?: string | import("react").ComponentType<any> | undefined;
+        }>;
+        Close: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps & {
+            disabled?: boolean | undefined;
+        }, never>;
+        Header: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, {}, never>;
+        Body: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, {}, never>;
+        mBackdrop: import("framer-motion").MotionProps;
+        mPaper: import("framer-motion").MotionProps;
+    };
+};

package/Dialog/sc/framerMaterial.js

@@ -0,0 +1,16 @@
+import { m } from "framer-motion";
+import { extendComponent } from "../../helpers";
+import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
+import { KoineDialog as _ } from "../m/bare";
+import { Root, Backdrop, Container, Paper, Close, Header, Body, } from "./material";
+export const KoineDialog = extendComponent(_, {
+    Root,
+    Backdrop: m(Backdrop),
+    Container,
+    Paper: m(Paper),
+    Close,
+    Header,
+    Body,
+    mBackdrop: dialogBackdropMotion,
+    mPaper: dialogPaperMotion,
+});

package/Dialog/sc/material.d.ts

@@ -0,0 +1,94 @@
+/// <reference types="react" />
+export type { KoineDialogProps } from "./bare";
+export declare const Root: import("styled-components").StyledComponent<import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>, import("styled-components").DefaultTheme, {}, never>;
+export declare const Backdrop: import("styled-components").StyledComponent<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"> & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & {
+    open?: boolean | undefined;
+}>, import("styled-components").DefaultTheme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+    children?: import("react").ReactNode;
+}>, import("styled-components").DefaultTheme, Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+    children?: import("react").ReactNode;
+}, never>;
+export declare const Paper: import("styled-components").StyledComponent<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"> & {
+    "aria-label": string;
+} & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+    children?: import("react").ReactNode;
+}>, import("styled-components").DefaultTheme, {
+    "aria-label": string;
+} & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+    children?: import("react").ReactNode;
+}, never>;
+export declare const Close: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps & {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const Header: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    children?: import("react").ReactNode;
+}>, import("styled-components").DefaultTheme, {}, never>;
+export declare const Body: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    children?: import("react").ReactNode;
+}>, import("styled-components").DefaultTheme, {}, never>;
+export declare const KoineDialog: ((props: Pick<import("type-fest/source/simplify").Simplify<import("../../helpers").WithComponents<import("../DialogMui").OwnProps, import("../DialogMui").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 import("../DialogMui").Components> & import("react").RefAttributes<HTMLDivElement>) => import("react").FunctionComponentElement<any>) & {
+    Root: import("styled-components").StyledComponent<import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>, import("styled-components").DefaultTheme, {}, never>;
+    Backdrop: import("styled-components").StyledComponent<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"> & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        open?: boolean | undefined;
+    }>, import("styled-components").DefaultTheme, {}, never>;
+    Container: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+        children?: import("react").ReactNode;
+    }, never>;
+    Paper: import("styled-components").StyledComponent<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"> & {
+        "aria-label": string;
+    } & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, {
+        "aria-label": string;
+    } & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+        children?: import("react").ReactNode;
+    }, never>;
+    Close: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps & {
+        disabled?: boolean | undefined;
+    }, never>;
+    Header: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, {}, never>;
+    Body: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        children?: import("react").ReactNode;
+    }>, import("styled-components").DefaultTheme, {}, never>;
+} & {
+    defaultProps: {
+        Root: import("styled-components").StyledComponent<import("@mui/types").OverridableComponent<import("@mui/base/ModalUnstyled").ModalUnstyledTypeMap<{}, "div">>, import("styled-components").DefaultTheme, {}, never>;
+        Backdrop: import("styled-components").StyledComponent<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"> & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+        } & {
+            open?: boolean | undefined;
+        }>, import("styled-components").DefaultTheme, {}, never>;
+        Container: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+            children?: import("react").ReactNode;
+        }, never>;
+        Paper: import("styled-components").StyledComponent<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"> & {
+            "aria-label": string;
+        } & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, {
+            "aria-label": string;
+        } & Pick<import("../DialogMui").OwnProps, "$scrollPaper"> & {
+            children?: import("react").ReactNode;
+        }, never>;
+        Close: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps & {
+            disabled?: boolean | undefined;
+        }, never>;
+        Header: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, {}, never>;
+        Body: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            children?: import("react").ReactNode;
+        }>, import("styled-components").DefaultTheme, {}, never>;
+    };
+};

package/Dialog/sc/material.js

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+import { extendComponent } from "../../helpers";
+import { KoineDialog as _ } from "./bare";
+export const Root = styled(_.Root) ``;
+export const Backdrop = styled(_.Backdrop) `
+  background: rgba(0, 0, 0, 0.5);
+  filter: backdrop-blur(4px);
+`;
+export const Container = styled(_.Container) ``;
+export const Paper = styled(_.Paper) `
+  max-width: 640px;
+  margin: 64px;
+  border-radius: 4px;
+  background: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+`;
+export const Close = styled(_.Close) `
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 8px;
+  font-size: 2rem;
+  opacity: 0.5;
+`;
+export const Header = styled(_.Header) `
+  padding: 16px;
+  font-size: 1.25rem;
+`;
+export const Body = styled(_.Body) `
+  padding: 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+`;
+export const KoineDialog = extendComponent(_, {
+    Root,
+    Backdrop,
+    Container,
+    Paper,
+    Close,
+    Header,
+    Body,
+});