@veritone-ce/design-system 1.12.14 → 1.12.16

package/dist/components/MenuFlyout/MenuFlyout.stories.js

@@ -1,38 +1,60 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
-import PersonAddAltOutlinedIcon from '@mui/icons-material/PersonAddAltOutlined';
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import { editLabel, shareWithLabel, deleteLabel } from './constants';
-import MenuFlyout from '.';
-export default {
-    title: 'Components/MenuFlyout',
-    component: MenuFlyout
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutIcons = exports.WithIcons = exports.Default = void 0;
+var _EditOutlined = _interopRequireDefault(require("@mui/icons-material/EditOutlined"));
+var _PersonAddAltOutlined = _interopRequireDefault(require("@mui/icons-material/PersonAddAltOutlined"));
+var _DeleteOutlined = _interopRequireDefault(require("@mui/icons-material/DeleteOutlined"));
+var _constants = require("./constants");
+var _ = _interopRequireDefault(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components/MenuFlyout',
+  component: _.default
 };
-const Template = (args) => (_jsx(MenuFlyout, Object.assign({}, args)));
-export const Default = Template.bind({});
+exports.default = _default;
+const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+  ...args
+});
+const Default = Template.bind({});
+exports.Default = Default;
 Default.args = {
-    menuOptions: [
-        {
-            label: 'This is an example of a 2 line item',
-            icon: _jsx(EditOutlinedIcon, {})
-        },
-        { label: '1 Line Item', icon: _jsx(EditOutlinedIcon, {}) },
-        { label: '2 Line Item', icon: _jsx(EditOutlinedIcon, {}) }
-    ]
+  menuOptions: [{
+    label: 'This is an example of a 2 line item',
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditOutlined.default, {})
+  }, {
+    label: '1 Line Item',
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditOutlined.default, {})
+  }, {
+    label: '2 Line Item',
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditOutlined.default, {})
+  }]
 };
-export const WithIcons = Template.bind({});
+const WithIcons = Template.bind({});
+exports.WithIcons = WithIcons;
 WithIcons.args = {
-    menuOptions: [
-        { label: editLabel, icon: _jsx(EditOutlinedIcon, {}) },
-        { label: shareWithLabel, icon: _jsx(PersonAddAltOutlinedIcon, {}) },
-        { label: deleteLabel, icon: _jsx(DeleteOutlinedIcon, {}) }
-    ]
+  menuOptions: [{
+    label: _constants.editLabel,
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditOutlined.default, {})
+  }, {
+    label: _constants.shareWithLabel,
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PersonAddAltOutlined.default, {})
+  }, {
+    label: _constants.deleteLabel,
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteOutlined.default, {})
+  }]
 };
-export const WithoutIcons = Template.bind({});
+const WithoutIcons = Template.bind({});
+exports.WithoutIcons = WithoutIcons;
 WithoutIcons.args = {
-    menuOptions: [
-        { label: editLabel },
-        { label: shareWithLabel },
-        { label: deleteLabel }
-    ]
-};
+  menuOptions: [{
+    label: _constants.editLabel
+  }, {
+    label: _constants.shareWithLabel
+  }, {
+    label: _constants.deleteLabel
+  }]
+};

package/dist/components/MenuFlyout/__tests__/MenuFlyout.test.js

@@ -1,24 +1,42 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '../../../utils/tests/helpers';
-import { screen } from '@testing-library/react';
-import { editLabel, shareWithLabel } from '../constants';
-import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
-import MenuFlyout from '..';
+"use strict";
+
+var _helpers = require("../../../utils/tests/helpers");
+var _react = require("@testing-library/react");
+var _constants = require("../constants");
+var _EditOutlined = _interopRequireDefault(require("@mui/icons-material/EditOutlined"));
+var _ = _interopRequireDefault(require(".."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 describe('<MenuFlyout />', () => {
-    const mockMenuOptions = [{ label: editLabel }, { label: shareWithLabel }];
-    const mockMenuIconOptions = [{ label: editLabel, icon: _jsx(EditOutlinedIcon, {}) }];
-    it('should render the MenuFlyout component, multi item list without icons', () => {
-        render(_jsx(MenuFlyout, { "data-testid": "menu-flyout", open: true, menuOptions: mockMenuOptions }));
-        expect(screen.getByTestId('menu-flyout')).toBeInTheDocument();
-        expect(screen.getByText(editLabel)).toBeInTheDocument();
-        expect(screen.getByText(shareWithLabel)).toBeInTheDocument();
-        expect(screen.getByRole('menu').children).toHaveLength(2);
-    });
-    it('should render MenuFlyout component, single item list with icon', () => {
-        render(_jsx(MenuFlyout, { "data-testid": "menu-flyout", open: true, menuOptions: mockMenuIconOptions }));
-        expect(screen.getByTestId('menu-flyout')).toBeInTheDocument();
-        expect(screen.getByText(editLabel)).toBeInTheDocument();
-        expect(screen.getByTestId('EditOutlinedIcon')).toBeVisible();
-        expect(screen.getByRole('menu').children).toHaveLength(1);
-    });
-});
+  const mockMenuOptions = [{
+    label: _constants.editLabel
+  }, {
+    label: _constants.shareWithLabel
+  }];
+  const mockMenuIconOptions = [{
+    label: _constants.editLabel,
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditOutlined.default, {})
+  }];
+  it('should render the MenuFlyout component, multi item list without icons', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      "data-testid": "menu-flyout",
+      open: true,
+      menuOptions: mockMenuOptions
+    }));
+    expect(_react.screen.getByTestId('menu-flyout')).toBeInTheDocument();
+    expect(_react.screen.getByText(_constants.editLabel)).toBeInTheDocument();
+    expect(_react.screen.getByText(_constants.shareWithLabel)).toBeInTheDocument();
+    expect(_react.screen.getByRole('menu').children).toHaveLength(2);
+  });
+  it('should render MenuFlyout component, single item list with icon', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      "data-testid": "menu-flyout",
+      open: true,
+      menuOptions: mockMenuIconOptions
+    }));
+    expect(_react.screen.getByTestId('menu-flyout')).toBeInTheDocument();
+    expect(_react.screen.getByText(_constants.editLabel)).toBeInTheDocument();
+    expect(_react.screen.getByTestId('EditOutlinedIcon')).toBeVisible();
+    expect(_react.screen.getByRole('menu').children).toHaveLength(1);
+  });
+});

package/dist/components/MenuFlyout/constants.js

@@ -1,3 +1,12 @@
-export const editLabel = 'Edit Project';
-export const shareWithLabel = 'Share with...';
-export const deleteLabel = 'Delete Project';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shareWithLabel = exports.editLabel = exports.deleteLabel = void 0;
+const editLabel = 'Edit Project';
+exports.editLabel = editLabel;
+const shareWithLabel = 'Share with...';
+exports.shareWithLabel = shareWithLabel;
+const deleteLabel = 'Delete Project';
+exports.deleteLabel = deleteLabel;

package/dist/components/MenuFlyout/index.js

@@ -1,27 +1,48 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _material = require("@mui/material");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const MenuFlyout = ({
+  menuOptions,
+  open,
+  ...props
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Menu, {
+    "data-testid": true,
+    open: true,
+    ...props,
+    children: menuOptions.map((menuItem, index) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              mr: '10px'
+            },
+            children: menuItem.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+              children: menuItem.icon
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontSize: '14px'
+              },
+              children: menuItem.label
+            })
+          })]
+        })
+      }, index);
+    })
+  });
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Menu, MenuItem, ListItemIcon, Box, Typography } from '@mui/material';
-const MenuFlyout = (_a) => {
-    var { menuOptions, open } = _a, props = __rest(_a, ["menuOptions", "open"]);
-    return (_jsx(Menu, Object.assign({ "data-testid": true, open: true }, props, { children: menuOptions.map((menuItem, index) => {
-            return (_jsx(MenuItem, { children: _jsxs(Box, Object.assign({ sx: {
-                        display: 'flex',
-                        alignItems: 'center'
-                    } }, { children: [_jsx(Box, Object.assign({ sx: {
-                                mr: '10px'
-                            } }, { children: menuItem.icon && _jsx(ListItemIcon, { children: menuItem.icon }) })), _jsx(Box, { children: _jsx(Typography, Object.assign({ sx: {
-                                    fontSize: '14px'
-                                } }, { children: menuItem.label })) })] })) }, index));
-        }) })));
-};
-export default MenuFlyout;
+var _default = MenuFlyout;
+exports.default = _default;

package/dist/components/MenuFlyout/menuFlyout.theme.js

@@ -1,40 +1,48 @@
-export const menuFlyoutTheme = (theme) => ({
-    styleOverrides: {
-        root: () => ({
-            height: 'auto',
-            fontSize: '14px',
-            borderRadius: '2px',
-            fontFamily: 'Nunito',
-            fontStyle: 'normal',
-            fontWeight: 400,
-            textTransform: 'capitalize',
-            backgroundColor: theme.palette.common.white,
-            ':hover, :focus': {
-                backgroundColor: theme.palette.misc.altBackground
-            },
-            '& .MuiList-root, &.MuiMenu-list': {
-                minWidth: 168,
-                maxWidth: 200,
-                padding: 0
-            },
-            '& .MuiPaper-root': {
-                background: '#FFFFFF',
-                border: '1px solid #7C848D',
-                borderRadius: '0px 0px 4px 4px',
-                padding: '10px',
-                gap: '20px',
-                boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.2)'
-            }
-        })
-    }
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-export const menuItemTheme = (theme) => ({
-    styleOverrides: {
-        root: () => ({
-            whiteSpace: 'normal',
-            minWidth: 168,
-            maxWidth: 200,
-            padding: '5px'
-        })
-    }
+exports.menuItemTheme = exports.menuFlyoutTheme = void 0;
+const menuFlyoutTheme = theme => ({
+  styleOverrides: {
+    root: () => ({
+      height: 'auto',
+      fontSize: '14px',
+      borderRadius: '2px',
+      fontFamily: 'Nunito',
+      fontStyle: 'normal',
+      fontWeight: 400,
+      textTransform: 'capitalize',
+      backgroundColor: theme.palette.common.white,
+      ':hover, :focus': {
+        backgroundColor: theme.palette.misc.altBackground
+      },
+      '& .MuiList-root, &.MuiMenu-list': {
+        minWidth: 168,
+        maxWidth: 200,
+        padding: 0
+      },
+      '& .MuiPaper-root': {
+        background: '#FFFFFF',
+        border: '1px solid #7C848D',
+        borderRadius: '0px 0px 4px 4px',
+        padding: '10px',
+        gap: '20px',
+        boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.2)'
+      }
+    })
+  }
 });
+exports.menuFlyoutTheme = menuFlyoutTheme;
+const menuItemTheme = theme => ({
+  styleOverrides: {
+    root: () => ({
+      whiteSpace: 'normal',
+      minWidth: 168,
+      maxWidth: 200,
+      padding: '5px'
+    })
+  }
+});
+exports.menuItemTheme = menuItemTheme;

package/dist/components/Modal/Modal.stories.js

@@ -1,100 +1,195 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Modal from '.';
-import Button from '../Button';
-import Input from '../Input';
-import { DialogActions, DialogContent, DialogContentText, useTheme } from '@mui/material';
-export default {
-    title: 'Components/Modal',
-    component: Modal,
-    argTypes: {
-        isOpen: { control: 'boolean', defaultValue: true },
-        title: { control: 'text', defaultValue: 'Modal Title' }
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Primary = exports.Disabled = exports.Destructive = void 0;
+var _ = _interopRequireDefault(require("."));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components/Modal',
+  component: _.default,
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    title: {
+      control: 'text',
+      defaultValue: 'Modal Title'
     }
+  }
 };
-export const Primary = (_a) => {
-    var args = __rest(_a, []);
-    const { palette } = useTheme();
-    return (_jsxs(Modal, Object.assign({ isOpen: true, title: "Modal Title" }, args, { children: [_jsx(DialogContent, Object.assign({ sx: {
-                    paddingBottom: '20px'
-                } }, { children: _jsx(DialogContentText, Object.assign({ id: "alert-dialog-description", sx: {
-                        fontSize: '14px',
-                        fontWeight: '400',
-                        lineHeight: '20px',
-                        color: palette.text.primary
-                    } }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat id tortor et feugiat. Nulla facilisi. Quisque a dui sit amet tellus scelerisque laoreet." })) })), _jsxs(DialogActions, Object.assign({ sx: {
-                    padding: '30px'
-                } }, { children: [_jsx(Button, Object.assign({ variant: "tertiary" }, { children: "Cancel" })), _jsx(Button, { children: "Action" })] }))] })));
+exports.default = _default;
+const Primary = ({
+  ...args
+}) => {
+  const {
+    palette
+  } = (0, _material.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    isOpen: true,
+    title: "Modal Title",
+    ...args,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, {
+      sx: {
+        paddingBottom: '20px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContentText, {
+        id: "alert-dialog-description",
+        sx: {
+          fontSize: '14px',
+          fontWeight: '400',
+          lineHeight: '20px',
+          color: palette.text.primary
+        },
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat id tortor et feugiat. Nulla facilisi. Quisque a dui sit amet tellus scelerisque laoreet."
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogActions, {
+      sx: {
+        padding: '30px'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        variant: "tertiary",
+        children: "Cancel"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        children: "Action"
+      })]
+    })]
+  });
 };
-export const Destructive = (_a) => {
-    var args = __rest(_a, []);
-    const { palette } = useTheme();
-    return (_jsxs(Modal, Object.assign({ isOpen: true, title: "Modal Title" }, args, { children: [_jsxs(DialogContent, Object.assign({ sx: {
-                    paddingBottom: '5px'
-                } }, { children: [_jsx(DialogContentText, Object.assign({ id: "alert-dialog-description", sx: {
-                            fontSize: '14px',
-                            fontWeight: '400',
-                            lineHeight: '20px',
-                            color: palette.text.primary
-                        } }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat id tortor et feugiat.." })), _jsxs(DialogContentText, Object.assign({ id: "alert-dialog-description", sx: {
-                            fontSize: '14px',
-                            fontWeight: '400',
-                            lineHeight: '20px',
-                            color: palette.text.primary,
-                            marginTop: '15px'
-                        } }, { children: ["To continue, type ", _jsx("b", { children: "DELETE" }), " in the box to confirm."] })), _jsx(Input, { value: "DELETE", sx: {
-                            '& .MuiOutlinedInput-root': {
-                                width: '157px',
-                                marginTop: '10px'
-                            },
-                            '& .MuiInputBase-root input': {
-                                fontSize: '14px',
-                                fontWeight: 700,
-                                lineHeight: '20px',
-                                color: '#5C6269'
-                            }
-                        } })] })), _jsxs(DialogActions, Object.assign({ sx: {
-                    padding: '14px 30px 20px'
-                } }, { children: [_jsx(Button, Object.assign({ variant: "tertiary" }, { children: "Cancel" })), _jsx(Button, Object.assign({ color: "error" }, { children: "Delete" }))] }))] })));
+exports.Primary = Primary;
+const Destructive = ({
+  ...args
+}) => {
+  const {
+    palette
+  } = (0, _material.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    isOpen: true,
+    title: "Modal Title",
+    ...args,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogContent, {
+      sx: {
+        paddingBottom: '5px'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContentText, {
+        id: "alert-dialog-description",
+        sx: {
+          fontSize: '14px',
+          fontWeight: '400',
+          lineHeight: '20px',
+          color: palette.text.primary
+        },
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat id tortor et feugiat.."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogContentText, {
+        id: "alert-dialog-description",
+        sx: {
+          fontSize: '14px',
+          fontWeight: '400',
+          lineHeight: '20px',
+          color: palette.text.primary,
+          marginTop: '15px'
+        },
+        children: ["To continue, type ", /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: "DELETE"
+        }), " in the box to confirm."]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+        value: "DELETE",
+        sx: {
+          '& .MuiOutlinedInput-root': {
+            width: '157px',
+            marginTop: '10px'
+          },
+          '& .MuiInputBase-root input': {
+            fontSize: '14px',
+            fontWeight: 700,
+            lineHeight: '20px',
+            color: '#5C6269'
+          }
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogActions, {
+      sx: {
+        padding: '14px 30px 20px'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        variant: "tertiary",
+        children: "Cancel"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        color: "error",
+        children: "Delete"
+      })]
+    })]
+  });
 };
-export const Disabled = (_a) => {
-    var args = __rest(_a, []);
-    const { palette } = useTheme();
-    return (_jsxs(Modal, Object.assign({ isOpen: true, title: "Modal Title" }, args, { children: [_jsxs(DialogContent, Object.assign({ sx: {
-                    paddingBottom: '5px'
-                } }, { children: [_jsx(DialogContentText, Object.assign({ id: "alert-dialog-description", sx: {
-                            fontSize: '14px',
-                            fontWeight: '400',
-                            lineHeight: '20px',
-                            color: palette.text.primary
-                        } }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat id tortor et feugiat.." })), _jsxs(DialogContentText, Object.assign({ id: "alert-dialog-description", sx: {
-                            fontSize: '14px',
-                            fontWeight: '400',
-                            lineHeight: '20px',
-                            color: palette.text.primary,
-                            marginTop: '15px'
-                        } }, { children: ["To continue, type ", _jsx("b", { children: "DELETE" }), " in the box to confirm."] })), _jsx(Input, { sx: {
-                            '& .MuiOutlinedInput-root': {
-                                width: '157px',
-                                marginTop: '10px'
-                            },
-                            '& .MuiInputBase-root input': {
-                                fontSize: '14px',
-                                fontWeight: 700,
-                                lineHeight: '20px',
-                                color: palette.neutral.main
-                            }
-                        } })] })), _jsxs(DialogActions, Object.assign({ sx: {
-                    padding: '14px 30px 20px'
-                } }, { children: [_jsx(Button, Object.assign({ variant: "tertiary" }, { children: "Cancel" })), _jsx(Button, Object.assign({ color: "error", disabled: true }, { children: "Delete" }))] }))] })));
+exports.Destructive = Destructive;
+const Disabled = ({
+  ...args
+}) => {
+  const {
+    palette
+  } = (0, _material.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    isOpen: true,
+    title: "Modal Title",
+    ...args,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogContent, {
+      sx: {
+        paddingBottom: '5px'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContentText, {
+        id: "alert-dialog-description",
+        sx: {
+          fontSize: '14px',
+          fontWeight: '400',
+          lineHeight: '20px',
+          color: palette.text.primary
+        },
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat id tortor et feugiat.."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogContentText, {
+        id: "alert-dialog-description",
+        sx: {
+          fontSize: '14px',
+          fontWeight: '400',
+          lineHeight: '20px',
+          color: palette.text.primary,
+          marginTop: '15px'
+        },
+        children: ["To continue, type ", /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: "DELETE"
+        }), " in the box to confirm."]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+        sx: {
+          '& .MuiOutlinedInput-root': {
+            width: '157px',
+            marginTop: '10px'
+          },
+          '& .MuiInputBase-root input': {
+            fontSize: '14px',
+            fontWeight: 700,
+            lineHeight: '20px',
+            color: palette.neutral.main
+          }
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogActions, {
+      sx: {
+        padding: '14px 30px 20px'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        variant: "tertiary",
+        children: "Cancel"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        color: "error",
+        disabled: true,
+        children: "Delete"
+      })]
+    })]
+  });
 };
+exports.Disabled = Disabled;