react-miui 0.7.0 → 0.8.0

package/esm/components/ui/toaster/Toaster.js

@@ -0,0 +1,74 @@
+import React, { createContext, useContext } from "react";
+import { Notification } from "./Notification";
+const ToasterContext = createContext(() => {
+    throw new Error("Toaster Provider missing in the tree");
+});
+const prefix = `${Date.now()}_`;
+let counter = 0;
+const DEFAULT_TIMEOUT = 5000;
+class ToasterProvider extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this._add = (text) => {
+            this._removeAllToasts();
+            const id = prefix + String(counter++);
+            const hide = false;
+            this.setState(prev => ({
+                ...prev,
+                list: [...prev.list, {
+                        id,
+                        text,
+                        hide,
+                    }],
+            }));
+            setTimeout(() => {
+                this.setState(prev => ({
+                    ...prev,
+                    list: prev.list.map(p => {
+                        if (p.id !== id) {
+                            return p;
+                        }
+                        return {
+                            ...p,
+                            hide: true,
+                        };
+                    }),
+                }));
+            }, DEFAULT_TIMEOUT);
+        };
+        this._handleRemove = (id) => {
+            this.setState(prev => ({
+                ...prev,
+                list: prev.list.filter(p => p.id !== id),
+            }));
+        };
+        this._removeAllToasts = () => {
+            this.setState(prev => ({
+                ...prev,
+                list: prev.list.map(p => {
+                    if (p.hide) {
+                        return p;
+                    }
+                    return {
+                        ...p,
+                        hide: true,
+                    };
+                }),
+            }));
+        };
+        this.state = {
+            list: [],
+        };
+    }
+    render() {
+        const notifications = this.state.list.map((t) => {
+            return React.createElement(Notification, { onRemove: this._handleRemove, key: t.id, toast: t });
+        });
+        return (React.createElement(ToasterContext.Provider, { value: this._add },
+            notifications,
+            this.props.children));
+    }
+}
+const useToaster = () => useContext(ToasterContext);
+export { ToasterProvider, useToaster };
+//# sourceMappingURL=Toaster.js.map

package/esm/components/ui/toaster/Toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.tsx"],"names":[],"mappings":"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"}

package/esm/components/ui/toaster/Toaster.module.scss

@@ -0,0 +1,32 @@
+@keyframes show {
+    from {
+        transform: translateY(calc(100% + calc(190px / var(--ratio-dimensions))))
+    }
+}
+
+.toast {
+    position: fixed;
+    bottom: 0;
+    left: 40px;
+    right: 40px;
+    display: flex;
+    justify-content: center;
+    z-index: 1;
+
+    span {
+        background: rgba(56, 50, 46, 0.85);
+        color: #F9F6F2;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.37);
+        border-radius: 12px; // around 22 @TODO use calc here
+        display: inline-block;
+        padding: 1em 1em;
+        animation: show 500ms 1;
+        animation-fill-mode: forwards;
+        margin-bottom: calc(190px / var(--ratio-dimensions));
+    }
+}
+
+.hide {
+    transition: opacity 300ms;
+    opacity: 0;
+}

package/esm/components/ui/toaster/types.d.ts

@@ -0,0 +1,7 @@
+interface Toast {
+    id: string;
+    text: string;
+    hide: boolean;
+}
+export type { Toast, };
+//# sourceMappingURL=types.d.ts.map

package/esm/components/ui/toaster/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toaster/types.ts"],"names":[],"mappings":"AAAA,UAAU,KAAK;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACjB;AAED,YAAY,EACR,KAAK,GACR,CAAC"}

package/esm/components/ui/toaster/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/components/ui/toaster/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/types.ts"],"names":[],"mappings":""}

package/esm/global.scss

@@ -28,6 +28,9 @@
 
     --toolbar-border: #ababab;
     --toolbar-bg: #f8f8f8;
+    --modal-bg: #f7f7f7;
+    --modal-button-bg: #f8f8f8;
+    --modal-button-border: #c2c2c2;
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;

package/esm/index.d.ts

@@ -16,4 +16,7 @@ export * from "./components/ui/action/Action.js";
 export * from "./components/ui/action/EqualActions.js";
 export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";
+export * from "./components/ui/modal/Modal.js";
+export * from "./components/ui/modal/ModalButtons.js";
+export * from "./components/ui/toaster/Toaster.js";
 //# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,oCAAoC,CAAC"}

package/esm/index.js

@@ -16,4 +16,7 @@ export * from "./components/ui/action/Action.js";
 export * from "./components/ui/action/EqualActions.js";
 export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";
+export * from "./components/ui/modal/Modal.js";
+export * from "./components/ui/modal/ModalButtons.js";
+export * from "./components/ui/toaster/Toaster.js";
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,oCAAoC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -13,7 +13,7 @@
     "lint": "eslint src --ext .ts,.tsx,.js,.jsx,.mjs",
     "lint:fix": "yarn lint --fix",
     "prepack": "yarn compile",
-    "prepublishOnly": "yarn audit && yarn lint && yarn test && yarn docs",
+    "prepublishOnly": "yarn lint && yarn test && yarn docs",
     "start:dev": "next dev",
     "deploy:dev": "next build && next export && netlify deploy --dir out"
   },

package/src/components/layout/list/Header.tsx

@@ -3,11 +3,24 @@ import classnames from "classnames";
 
 import styles from "./Item.module.scss";
 import headerStyles from "./Header.module.scss";
+import { makeVariants } from "../../../utils/makeVariants";
+
+type Variant = "inset";
+
+interface Props {
+    variant?: Variant | Variant[];
+}
+
+const Header: React.FC<Props> = (props) => {
+    const v = makeVariants(props.variant);
+
+    const cls = classnames(styles.item, headerStyles.header, {
+        [styles.inset]: v.includes("inset"),
+    });
 
-const Header: React.FC = (props) => {
     // @TODO way to use h1, h2, h3 instead of div
     return (
-        <li className={classnames(styles.item, headerStyles.header)}>
+        <li className={cls}>
             <div>{props.children}</div>
         </li>
     );

package/src/components/layout/list/Item.module.scss

@@ -4,7 +4,7 @@
     padding: 0;
     font-size: calc(34px / var(--ratio-font));
 
-    &:not(:first-child) > * {
+    &:not(:first-child) {
         border-top: 0.37px solid var(--header-border);
     }
 
@@ -29,3 +29,18 @@
     min-height: calc(174px / var(--ratio-dimensions));
     align-items: center;
 }
+
+.inset {
+    padding-left: calc(37px / var(--ratio-dimensions));
+    padding-right: calc(37px / var(--ratio-dimensions));
+}
+
+.icon {
+    width: 7px;
+    margin-right: 10px;
+    display: inline-block;
+}
+
+.selected {
+    color: var(--main-color);
+}

package/src/components/layout/list/Item.tsx

@@ -4,11 +4,15 @@ import classnames from "classnames";
 import styles from "./Item.module.scss";
 import { Value } from "./Value.js";
 import { Label } from "./Label.js";
+import { makeVariants } from "../../../utils/makeVariants";
+import { ICON, Icon } from "../../icons/Icon";
 
 interface LinkProps {
     href: string;
 }
 
+type Variant = "inset";
+
 interface Props {
     href?: string;
     to?: string;
@@ -16,6 +20,8 @@ interface Props {
     className?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
     ratio?: string; // @TODO number/number/number/.. type?
+    variant?: Variant | Variant[];
+    selected?: boolean | undefined;
 }
 
 interface SubComponents {
@@ -23,11 +29,26 @@ interface SubComponents {
     Value: typeof Value;
 }
 
-// eslint-disable-next-line max-statements
+const icon = <Icon className={styles.icon} name={ICON.forward} />;
+const noIcon = <span className={styles.icon} />;
+
+// eslint-disable-next-line max-statements,max-lines-per-function
 const Item: React.FC<Props> & SubComponents = (props) => {
-    const { className, children, href, to, onClick, Link, ratio, ...restProps } = props;
+    const { className, children, href, to, onClick, Link, ratio, variant, selected, ...restProps } = props;
+    const v = makeVariants(variant);
     const cls = classnames(styles.item, className);
 
+    const innerCls = classnames(styles.content, {
+        [styles.inset]: v.includes("inset"),
+        [styles.selected]: selected,
+    });
+
+    const pre = typeof selected === "boolean"
+        ? (
+            selected ? icon : noIcon
+        )
+        : null;
+
     const liProps = {
         className: cls,
     };
@@ -42,7 +63,7 @@ const Item: React.FC<Props> & SubComponents = (props) => {
         if (index in r) {
             flex = r[index];
         }
-        return <div style={{ flex }}>{child}</div>;
+        return <div style={{ flex }}>{pre}{child}</div>;
     });
 
     if (to) {
@@ -50,25 +71,25 @@ const Item: React.FC<Props> & SubComponents = (props) => {
             throw new TypeError("`to` prop given without `Link` component");
         }
 
-        return <li {...liProps}><Link href={to} {...restProps}><a className={styles.content}>{ren}</a></Link></li>;
+        return <li {...liProps}><Link href={to} {...restProps}><a className={innerCls}>{ren}</a></Link></li>;
     }
     if (href) {
         const aProps: typeof restProps & { onClick?: Props["onClick"]} = { ...restProps };
         if (onClick) {
             aProps.onClick = onClick;
         }
-        return <li {...liProps}><a href={href} {...aProps} className={styles.content}>{ren}</a></li>;
+        return <li {...liProps}><a href={href} {...aProps} className={innerCls}>{ren}</a></li>;
     }
     if (onClick) {
         return (
             <li {...liProps}>
-                <button className={classnames(styles.button, styles.content)} onClick={props.onClick}{...restProps}>
+                <button className={classnames(styles.button, innerCls)} onClick={props.onClick} {...restProps}>
                     {ren}
                 </button>
             </li>
         );
     }
-    return <li {...liProps}><div {...restProps} className={styles.content}>{ren}</div></li>;
+    return <li {...liProps}><div {...restProps} className={innerCls}>{ren}</div></li>;
 };
 
 Item.Label = Label;

package/src/components/layout/list/List.module.scss

@@ -2,3 +2,7 @@
     margin: 0 23px;
     padding: 0;
 }
+
+.inset {
+    margin: 0;
+}

package/src/components/layout/list/List.tsx

@@ -1,15 +1,42 @@
 import React from "react";
+import classnames from "classnames";
 
 import { Header } from "./Header.js";
+import { makeVariants } from "../../../utils/makeVariants";
+import { Item } from "./Item";
 import styles from "./List.module.scss";
 
+type Variant = "inset";
+
+interface Props {
+    className?: string;
+    variant?: Variant | Variant[];
+}
+
 interface SubComponents {
     Header: typeof Header;
 }
 
-const List: React.FC & SubComponents = (props) => {
+const List: React.FC<Props> & SubComponents = (props) => {
+    const v = makeVariants(props.variant);
+
+    const chld = React.Children.map(props.children, (child) => {
+        if (child && typeof child === "object" && "type" in child && (child.type === Item || child.type === Header)) {
+            return React.cloneElement(child, {
+                // @TODO this will override but should merge?
+                variant: props.variant,
+            });
+        }
+        return child;
+    });
+
     return (
-        <ul className={styles.list}>{props.children}</ul>
+        <ul
+            className={classnames(styles.list, {
+                [styles.inset]: v.includes("inset"),
+            })}
+        >{chld}
+        </ul>
     );
 };
 

package/src/components/ui/button/Button.tsx

@@ -8,8 +8,10 @@ interface Props {
     variant?: "inline" | "outline";
 }
 
-const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props> = ({ className, children, ...props }) => {
-    const variants = makeVariants(props.variant);
+const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props> = ({
+    className, children, variant, ...props
+}) => {
+    const variants = makeVariants(variant);
 
     const cls = classnames(styles.btn, {
         [styles["btn--inline"]]: variants.includes("inline"),

package/src/components/ui/modal/Modal.module.scss

@@ -0,0 +1,92 @@
+@keyframes overlay {
+    from {
+        background: #00000000;
+    }
+
+    to {
+        background: #0000004c;
+    }
+}
+
+.overlay {
+    position: fixed;
+    z-index: 4;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: overlay 300ms;
+    animation-fill-mode: forwards;
+}
+
+.overlayOnBottom {
+    align-items: flex-end;
+    padding-bottom: calc(24px / var(--ratio-dimensions));
+}
+
+@keyframes container {
+    from {
+        transform: translateY(30px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.container {
+    background: var(--modal-bg);
+    border-radius: calc(12px / var(--ratio-dimensions));
+    max-width: 333px;
+    width: calc(100% - 30px);
+    padding: 20px;
+    position: relative;
+    box-sizing: border-box;
+    animation: container 300ms;
+    animation-fill-mode: forwards;
+}
+
+.full {
+    width: calc(100vw - 30px);
+    max-width: 1000px;
+}
+
+.isClosing {
+    // keep this after .overlay .container to prevent overwriting
+    animation-direction: reverse;
+}
+
+.close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    + .title {
+        margin-right: 40px;
+        margin-top: -4px;
+    }
+}
+
+.title {
+    font-size: calc(40px / var(--ratio-font));
+    text-align: center;
+    color: black;
+    margin: calc(90px / var(--ratio-dimensions)) 0;
+}
+
+.negateMargin {
+    margin: 0 -20px -20px;
+}
+
+.removeMargin {
+    margin: 0;
+}

package/src/components/ui/modal/Modal.tsx

@@ -0,0 +1,136 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import classnames from "classnames";
+
+import styles from "./Modal.module.scss";
+import { makeVariants } from "../../../utils/makeVariants";
+import { ModalNegateMargin } from "./ModalNoMargin";
+
+type Variant = "bottom" | "full";
+
+interface Props {
+    onOverlayClick?: (() => void) | "close" | null;
+    closeOnEsc?: boolean;
+    onClose: () => void;
+    isOpen: boolean;
+    title?: React.ReactNode;
+    className?: string;
+    variant?: Variant | Variant[];
+}
+
+interface SubComponents {
+    NegateMargin: typeof ModalNegateMargin;
+}
+
+// eslint-disable-next-line max-lines-per-function,max-statements
+const Modal: React.FC<Props> & SubComponents = ({
+    children,
+    onClose,
+    isOpen,
+    title,
+    className,
+    onOverlayClick = "close",
+    closeOnEsc = true,
+    variant,
+}) => {
+    const [isClosing, setIsClosing] = useState(false);
+    const [isRendered, setIsRendered] = useState(false);
+    const overlayRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const v = makeVariants(variant);
+
+    useEffect(() => {
+        if (!isOpen || !closeOnEsc) {
+            return;
+        }
+
+        const onKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [isOpen, closeOnEsc]);
+
+    useEffect(() => {
+        if (!isOpen) {
+            setIsClosing(true);
+            return;
+        }
+        setIsRendered(true);
+        setIsClosing(false);
+    }, [isOpen]);
+
+    useEffect(() => {
+        if (!isClosing) {
+            return;
+        }
+
+        if (!overlayRef.current || !containerRef.current) {
+            return;
+        }
+
+        overlayRef.current.style.animation = "none";
+        containerRef.current.style.animation = "none";
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        overlayRef.current.offsetHeight; // force sync document reflow
+        overlayRef.current.style.removeProperty("animation");
+        containerRef.current.style.removeProperty("animation");
+    }, [isClosing]);
+
+    const titleElem = title && <div className={styles.title}>{title}</div>;
+
+    const handleOverlayClick = useCallback((e: React.MouseEvent) => {
+        if (e.target !== e.currentTarget) {
+            return;
+        }
+        if (onOverlayClick === "close") {
+            onClose();
+        }
+        if (typeof onOverlayClick === "function") {
+            onOverlayClick();
+        }
+    }, [onOverlayClick, onClose]);
+
+    const handleAnimationEnd = useCallback(() => {
+        if (isOpen) {
+            return;
+        }
+
+        setIsRendered(false);
+    }, [isOpen]);
+
+    if (!isRendered) {
+        return null;
+    }
+
+    const overlayCls = classnames(styles.overlay, {
+        [styles.isClosing]: isClosing,
+        [styles.overlayOnBottom]: v.includes("bottom"),
+    });
+
+    const containerCls = classnames(styles.container, className, {
+        [styles.isClosing]: isClosing,
+        [styles.full]: v.includes("full"),
+    });
+
+    return (
+        <div
+            className={overlayCls}
+            onClick={handleOverlayClick}
+            ref={overlayRef}
+            onAnimationEnd={handleAnimationEnd}
+        >
+            <div className={containerCls} ref={containerRef}>
+                {titleElem}
+                {children}
+            </div>
+        </div>
+    );
+};
+Modal.NegateMargin = ModalNegateMargin;
+
+export { Modal };

package/src/components/ui/modal/ModalButton.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import styles from "./ModalButtons.module.scss";
+import { makeVariants } from "../../../utils/makeVariants";
+import classnames from "classnames";
+
+type Variant = "main";
+
+interface Props {
+    variant?: Variant | Variant[];
+}
+
+const ModalButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props> = ({
+    className, children, variant, ...props
+}) => {
+    const v = makeVariants(variant);
+
+    const cls = classnames(styles.button, {
+        [styles.buttonMain]: v.includes("main"),
+    }, className);
+
+    return <button {...props} className={cls}>{children}</button>;
+};
+
+export { ModalButton };