import { _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import Modal from '../components/Modal.js';
import Button from '../components/Button.js';
import Typography from '../components/Typography.js';
import '@mui/material/useMediaQuery';
import '@mui/material/styles';
import '@mui/material/Box';
import '@mui/material/Fade';
import '@mui/material/Modal';
import '@mui/material/Backdrop';
import '../components/Container.js';
import '../components/IconButton.js';
import '@mui/material/IconButton';
import '../components/Icon.js';
import '../icons/ArrowLeft.js';
import '../icons/ArrowRight.js';
import '../icons/CloseCircle.js';
import '../icons/InfoCircle.js';
import '../icons/ErrorCircle.js';
import '../icons/Attention.js';
import '../icons/HelpCircle.js';
import '../icons/Document.js';
import '../icons/DocumentText.js';
import '../icons/Lock.js';
import '../icons/Delete.js';
import '../icons/Users.js';
import '../icons/Stakefish.js';
import '../icons/Sound.js';
import '../icons/Beacon.js';
import '../icons/TriangleRight.js';
import '../icons/TriangleLeft.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/Sent.js';
import '../icons/Download.js';
import '../icons/Faster.js';
import '../icons/Slower.js';
import '../icons/Usb.js';
import '../icons/Key.js';
import '../icons/Edit.js';
import '../icons/Expand.js';
import '../icons/Collapse.js';
import '../icons/Success.js';
import '../icons/SuccessCircle.js';
import '../icons/Fail.js';
import '../icons/Desktop.js';
import '../icons/Mobile.js';
import '../icons/Loading.js';
import '../icons/Upload.js';
import '../icons/Check.js';
import '../icons/ChevronLeft.js';
import '../icons/ChevronRight.js';
import '../icons/Plus.js';
import '../icons/Minus.js';
import '../icons/Globe.js';
import '../icons/Link.js';
import '../icons/Copy.js';
import '../icons/Medium.js';
import '../icons/Twitter.js';
import '../icons/Telegram.js';
import '../icons/Eth.js';
import '../icons/Sort.js';
import '../icons/Close.js';
import '../icons/DollarSign.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../icons/Instagram.js';
import '../icons/LinkedIn.js';
import '../icons/Reddit.js';
import '../icons/YouTube.js';
import '../icons/Chrome.js';
import '../icons/CloudConnect.js';
import '../icons/Update.js';
import '../icons/Menu.js';
import '../icons/Settings.js';
import '../theme/boxShadow.js';
import '../clsx.m-6243b874.js';
import '@mui/material/Button';
import '../theme/colors.js';
import '@mui/material/Typography';
import '../theme/typography.js';

var argTypes = {
    size: {
        defaultValue: "sm",
        control: { type: "select" },
        options: ["sm", "md", "safeArea", "fullScreen"]
    },
    closeButton: {
        defaultValue: false,
        control: { type: "boolean" }
    },
    scrollable: {
        defaultValue: false,
        control: { type: "boolean" }
    },
    titleId: { table: { disable: true } },
    descriptionId: { table: { disable: true } },
    ref: { table: { disable: true } },
    sx: { table: { disable: true } },
    classes: { table: { disable: true } },
    closeAfterTransition: { table: { disable: true } },
    componentsProps: { table: { disable: true } },
    container: { table: { disable: true } },
    disableAutoFocus: { table: { disable: true } },
    disableEnforceFocus: { table: { disable: true } },
    disableEscapeKeyDown: { table: { disable: true } },
    hideBackdrop: { table: { disable: true } },
    keepMounted: { table: { disable: true } },
    onBackdropClick: { table: { disable: true } },
    onClose: { table: { disable: true } },
    disableScrollLock: { table: { disable: true } },
    disableRestoreFocus: { table: { disable: true } },
    disablePortal: { table: { disable: true } },
    components: { table: { disable: true } },
    BackdropComponent: { table: { disable: true } },
    BackdropProps: { table: { disable: true } },
    children: { table: { disable: true } },
    open: { table: { disable: true } }
};
var Template = function (_a) {
    var size = _a.size, closeButton = _a.closeButton, scrollable = _a.scrollable;
    var _b = useState(false), open = _b[0], setOpen = _b[1];
    return (jsxs(Fragment, { children: [jsx(Button, __assign({ color: "primary", onClick: function () { return setOpen(true); } }, { children: "Open Modal" }), void 0), jsx(Modal, __assign({ open: open, onClose: function () { return setOpen(false); }, scrollable: scrollable, size: size, closeButton: closeButton, titleId: "transition-modal-title", descriptionId: "transition-modal-description" }, { children: jsxs(Fragment, { children: [jsx(Typography, __assign({ variant: "h2", id: "transition-modal-title" }, { children: "This is title of the modal." }), void 0), jsx(Typography, __assign({ variant: "description", id: "transition-modal-description" }, { children: "This is content of the modal. Consequat nullam imperdiet rhoncus nibh netus vel, pulvinar urna auctor euismod tortor class, risus congue ad quis nulla. Ligula quisque ridiculus lacus per maecenas pulvinar rhoncus velit platea, molestie montes tempor congue aenean tristique suscipit urna. Curae magna placerat sociosqu est netus convallis suspendisse viverra, morbi a aptent tortor ornare lorem dui, purus pulvinar odio rhoncus augue sit aliquam." }), void 0)] }, void 0) }), void 0)] }, void 0));
};
var Default = Template.bind({});
var Modal_stories = {
    title: "Components/Modal",
    component: Modal,
    argTypes: argTypes
};

export { Default, Modal_stories as default };
