@veritone-ce/design-system 1.12.14 → 1.12.16

package/dist/components/Toast/Toast.stories.js

@@ -1,42 +1,108 @@
-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 { Stack } from '@mui/material';
-import Toast from '.';
-export default {
-    title: 'Components/Toast',
-    component: Toast,
-    argTypes: {
-        severity: {
-            options: ['success', 'info', 'warning', 'error'],
-            control: { type: 'radio' }
-        }
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onCloseWithLink = exports.onClose = exports.default = exports.DefaultAutoHide = void 0;
+var _material = require("@mui/material");
+var _ = _interopRequireDefault(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components/Toast',
+  component: _.default,
+  argTypes: {
+    severity: {
+      options: ['success', 'info', 'warning', 'error'],
+      control: {
+        type: 'radio'
+      }
     }
+  }
 };
+exports.default = _default;
 const handleClose = () => {
-    /**
-     * - This is a dummy function to demonstrate passing in a handleClose prop
-     * - It adds a close button
-     **/
-};
-export const DefaultAutoHide = (_a) => {
-    var args = __rest(_a, []);
-    return (_jsxs(Stack, Object.assign({ spacing: 2 }, { children: [_jsx(Toast, Object.assign({ severity: "success" }, args)), _jsx(Toast, Object.assign({ severity: "info" }, args)), _jsx(Toast, Object.assign({ severity: "warning" }, args)), _jsx(Toast, Object.assign({ severity: "error" }, args))] })));
-};
-export const onClose = (_a) => {
-    var args = __rest(_a, []);
-    return (_jsxs(Stack, Object.assign({ spacing: 2 }, { children: [_jsx(Toast, Object.assign({ severity: "success", autoHideDuration: 15000, handleClose: handleClose }, args)), _jsx(Toast, Object.assign({ severity: "info", autoHideDuration: 15000, handleClose: handleClose }, args)), _jsx(Toast, Object.assign({ severity: "warning", autoHideDuration: 15000, handleClose: handleClose }, args)), _jsx(Toast, Object.assign({ severity: "error", autoHideDuration: 15000, handleClose: handleClose }, args))] })));
+  /**
+   * - This is a dummy function to demonstrate passing in a handleClose prop
+   * - It adds a close button
+   **/
 };
-export const onCloseWithLink = (_a) => {
-    var args = __rest(_a, []);
-    return (_jsxs(Stack, Object.assign({ spacing: 2 }, { children: [_jsx(Toast, Object.assign({ severity: "success", linkText: "See Action Result", autoHideDuration: 15000, handleClose: handleClose }, args)), _jsx(Toast, Object.assign({ severity: "info", linkText: "Link", autoHideDuration: 15000, handleClose: handleClose }, args)), _jsx(Toast, Object.assign({ severity: "warning", linkText: "Action Link", autoHideDuration: 15000, handleClose: handleClose }, args)), _jsx(Toast, Object.assign({ severity: "error", linkText: "Correction Link", autoHideDuration: 15000, handleClose: handleClose }, args))] })));
+const DefaultAutoHide = ({
+  ...args
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+  spacing: 2,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    severity: "success",
+    ...args
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    severity: "info",
+    ...args
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    severity: "warning",
+    ...args
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    severity: "error",
+    ...args
+  })]
+});
+exports.DefaultAutoHide = DefaultAutoHide;
+const onClose = ({
+  ...args
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+    spacing: 2,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      severity: "success",
+      autoHideDuration: 15000,
+      handleClose: handleClose,
+      ...args
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      severity: "info",
+      autoHideDuration: 15000,
+      handleClose: handleClose,
+      ...args
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      severity: "warning",
+      autoHideDuration: 15000,
+      handleClose: handleClose,
+      ...args
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      severity: "error",
+      autoHideDuration: 15000,
+      handleClose: handleClose,
+      ...args
+    })]
+  });
 };
+exports.onClose = onClose;
+const onCloseWithLink = ({
+  ...args
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+  spacing: 2,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    severity: "success",
+    linkText: "See Action Result",
+    autoHideDuration: 15000,
+    handleClose: handleClose,
+    ...args
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    severity: "info",
+    linkText: "Link",
+    autoHideDuration: 15000,
+    handleClose: handleClose,
+    ...args
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    severity: "warning",
+    linkText: "Action Link",
+    autoHideDuration: 15000,
+    handleClose: handleClose,
+    ...args
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    severity: "error",
+    linkText: "Correction Link",
+    autoHideDuration: 15000,
+    handleClose: handleClose,
+    ...args
+  })]
+});
+exports.onCloseWithLink = onCloseWithLink;

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

@@ -1,30 +1,48 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '../../../utils/tests/helpers';
-import { screen } from '@testing-library/react';
-import Toast from '..';
+"use strict";
+
+var _helpers = require("../../../utils/tests/helpers");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require(".."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 describe('<Toast />', () => {
-    it('should render the Success Toast component', () => {
-        render(_jsx(Toast, { "data-testid": "success", severity: "success" }));
-        expect(screen.getByText('Success:')).toBeInTheDocument();
-        expect(screen.getByText('Your action was completed.')).toBeInTheDocument();
-    });
-    it('should render the Info Toast component', () => {
-        render(_jsx(Toast, { "data-testid": "info", severity: "info" }));
-        expect(screen.getByText('Info:')).toBeInTheDocument();
-        expect(screen.getByText('General information.')).toBeInTheDocument();
-    });
-    it('should render the Warning Toast component', () => {
-        render(_jsx(Toast, { "data-testid": "warning", severity: "warning" }));
-        expect(screen.getByText('Alert:')).toBeInTheDocument();
-        expect(screen.getByText('Your action is required.')).toBeInTheDocument();
-    });
-    it('should render the Error Toast component', () => {
-        render(_jsx(Toast, { "data-testid": "error", severity: "error" }));
-        expect(screen.getByText('Error:')).toBeInTheDocument();
-        expect(screen.getByText('An error has occured.')).toBeInTheDocument();
-    });
-    it('should render linkText in Toast component when provided', () => {
-        render(_jsx(Toast, { "data-testid": "link", linkText: "Click link for more information" }));
-        expect(screen.getByText('Click link for more information')).toBeInTheDocument();
-    });
-});
+  it('should render the Success Toast component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      "data-testid": "success",
+      severity: "success"
+    }));
+    expect(_react.screen.getByText('Success:')).toBeInTheDocument();
+    expect(_react.screen.getByText('Your action was completed.')).toBeInTheDocument();
+  });
+  it('should render the Info Toast component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      "data-testid": "info",
+      severity: "info"
+    }));
+    expect(_react.screen.getByText('Info:')).toBeInTheDocument();
+    expect(_react.screen.getByText('General information.')).toBeInTheDocument();
+  });
+  it('should render the Warning Toast component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      "data-testid": "warning",
+      severity: "warning"
+    }));
+    expect(_react.screen.getByText('Alert:')).toBeInTheDocument();
+    expect(_react.screen.getByText('Your action is required.')).toBeInTheDocument();
+  });
+  it('should render the Error Toast component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      "data-testid": "error",
+      severity: "error"
+    }));
+    expect(_react.screen.getByText('Error:')).toBeInTheDocument();
+    expect(_react.screen.getByText('An error has occured.')).toBeInTheDocument();
+  });
+  it('should render linkText in Toast component when provided', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      "data-testid": "link",
+      linkText: "Click link for more information"
+    }));
+    expect(_react.screen.getByText('Click link for more information')).toBeInTheDocument();
+  });
+});

package/dist/components/Toast/index.js

@@ -1,43 +1,63 @@
-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 { Box, Snackbar, Alert, Link, Typography } from '@mui/material';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
 const defaultMessageLabel = {
-    success: `Success`,
-    info: `Info`,
-    warning: `Alert`,
-    error: `Error`
+  success: `Success`,
+  info: `Info`,
+  warning: `Alert`,
+  error: `Error`
 };
 const defaultMessageText = {
-    success: `Your action was completed. `,
-    info: `General information. `,
-    warning: `Your action is required. `,
-    error: `An error has occured. `
+  success: `Your action was completed. `,
+  info: `General information. `,
+  warning: `Your action is required. `,
+  error: `An error has occured. `
 };
-const Toast = (_a) => {
-    var { severity = `success`, messageLabel, messageText, linkText = ``, handleClose, open } = _a, props = __rest(_a, ["severity", "messageLabel", "messageText", "linkText", "handleClose", "open"]);
-    return (_jsxs(Box, { children: [_jsx(Snackbar, Object.assign({}, props, { open: open })), _jsx(Alert, Object.assign({ onClose: handleClose, severity: severity }, { children: _jsxs(Box, Object.assign({ sx: {
-                        display: `flex`,
-                        alignItems: `center`
-                    } }, { children: [_jsx(Typography, Object.assign({ sx: {
-                                fontSize: `12px`,
-                                fontWeight: `bold`,
-                                marginRight: `2px`
-                            } }, { children: messageLabel
-                                ? `${messageLabel + ` `}: `
-                                : `${defaultMessageLabel[severity]}: ` })), _jsx(Typography, Object.assign({ sx: {
-                                fontSize: `12px`
-                            } }, { children: messageText
-                                ? `${messageText + ` `} `
-                                : defaultMessageText[severity] })), linkText && _jsx(Link, Object.assign({ href: "#" }, { children: linkText }))] })) }))] }));
+const Toast = ({
+  severity = `success`,
+  messageLabel,
+  messageText,
+  linkText = ``,
+  handleClose,
+  open,
+  ...props
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Snackbar, {
+      ...props,
+      open: open
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Alert, {
+      onClose: handleClose,
+      severity: severity,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          display: `flex`,
+          alignItems: `center`
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: `12px`,
+            fontWeight: `bold`,
+            marginRight: `2px`
+          },
+          children: messageLabel ? `${messageLabel + ` `}: ` : `${defaultMessageLabel[severity]}: `
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: `12px`
+          },
+          children: messageText ? `${messageText + ` `} ` : defaultMessageText[severity]
+        }), linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+          href: "#",
+          children: linkText
+        })]
+      })
+    })]
+  });
 };
-export default Toast;
+var _default = Toast;
+exports.default = _default;

package/dist/components/Typography/Typography.stories.js

@@ -1,21 +1,21 @@
-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 } from "react/jsx-runtime";
-import Typography from '.';
-export default {
-    title: 'Components/Typography',
-    component: Typography
-};
-export const Default = (_a) => {
-    var args = __rest(_a, []);
-    return _jsx(Typography, Object.assign({}, args, { children: "Typography" }));
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _ = _interopRequireDefault(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components/Typography',
+  component: _.default
 };
+exports.default = _default;
+const Default = ({
+  ...args
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+  ...args,
+  children: "Typography"
+});
+exports.Default = Default;

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

@@ -1,10 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '../../../utils/tests/helpers';
-import { screen } from '@testing-library/react';
-import Typography from '..';
+"use strict";
+
+var _helpers = require("../../../utils/tests/helpers");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require(".."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 describe('<Typography />', () => {
-    it('should render the Typography component', () => {
-        render(_jsx(Typography, Object.assign({ "data-testid": "typography" }, { children: "Typography" })));
-        expect(screen.getByTestId('typography')).toBeInTheDocument();
-    });
-});
+  it('should render the Typography component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      "data-testid": "typography",
+      children: "Typography"
+    }));
+    expect(_react.screen.getByTestId('typography')).toBeInTheDocument();
+  });
+});

package/dist/components/Typography/index.js

@@ -1,18 +1,17 @@
-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 _jsxRuntime = require("react/jsx-runtime");
+const Typography = ({
+  ...props
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+    ...props
+  });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Typography as MuiTypography } from '@mui/material';
-const Typography = (_a) => {
-    var props = __rest(_a, []);
-    return _jsx(MuiTypography, Object.assign({}, props));
-};
-export default Typography;
+var _default = Typography;
+exports.default = _default;

package/dist/components/UtilityRail/UtilityRail.stories.js

@@ -1,22 +1,23 @@
-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 } from "react/jsx-runtime";
-import { mock } from './mock';
-import UtilityRail from '.';
-export default {
-    title: 'Components/UtilityRail',
-    component: UtilityRail
-};
-export const Default = (_a) => {
-    var args = __rest(_a, []);
-    return _jsx(UtilityRail, Object.assign({ items: mock }, args));
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mock = require("./mock");
+var _ = _interopRequireDefault(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components/UtilityRail',
+  component: _.default
 };
+exports.default = _default;
+const Default = ({
+  ...args
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+  items: _mock.mock,
+  ...args
+});
+exports.Default = Default;

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

@@ -1,11 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '../../../utils/tests/helpers';
-import { screen } from '@testing-library/react';
-import UtilityRail from '..';
-import { mock } from '../mock';
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _helpers = require("../../../utils/tests/helpers");
+var _react2 = require("@testing-library/react");
+var _ = _interopRequireDefault(require(".."));
+var _mock = require("../mock");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 describe('<UtilityRail />', () => {
-    it('should render the UtilityRail component', () => {
-        render(_jsx(UtilityRail, { items: mock, "data-testid": "UtilityRail" }));
-        expect(screen.getByTestId('UtilityRail')).toBeInTheDocument();
-    });
-});
+  it('should render the UtilityRail component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      items: _mock.mock,
+      "data-testid": "UtilityRail"
+    }));
+    expect(_react2.screen.getByTestId('UtilityRail')).toBeInTheDocument();
+  });
+});

package/dist/components/UtilityRail/index.js

@@ -1,54 +1,76 @@
-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 _react = _interopRequireDefault(require("react"));
+var _styles = require("@mui/material/styles");
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const UtilityRail = ({
+  items,
+  ...props
+}) => {
+  const {
+    palette
+  } = (0, _styles.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    ...props,
+    sx: {
+      'div:last-of-type': {
+        borderLeft: `0.125rem transparent solid`
+      }
+    },
+    children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      "data-testid": `item-${index}`,
+      sx: {
+        '&::before': {
+          content: '""',
+          display: 'block',
+          height: '0.625rem',
+          width: '0.625rem',
+          marginLeft: '-0.5rem',
+          borderRadius: '50%',
+          border: `0.125rem ${palette.secondary.main} solid`,
+          backgroundColor: `${palette.common.white}`
+        },
+        borderLeft: `0.125rem ${palette.secondary.main} solid`,
+        display: 'flex'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          padding: '0 1.25rem 1.25rem'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: '0.625rem',
+            fontWeight: 400,
+            lineHeight: '1rem',
+            color: palette.text.secondary
+          },
+          children: item.subtitle
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: '0.75rem',
+            fontWeight: 400,
+            lineHeight: '1rem',
+            color: palette.text.primary
+          },
+          children: item.title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: '0.625rem',
+            fontWeight: 400,
+            lineHeight: '1rem',
+            color: palette.text.secondary
+          },
+          children: item.description
+        })]
+      })
+    }, index))
+  });
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from '@mui/material/styles';
-import { Typography, Box } from '@mui/material';
-const UtilityRail = (_a) => {
-    var { items } = _a, props = __rest(_a, ["items"]);
-    const { palette } = useTheme();
-    return (_jsx(Box, Object.assign({}, props, { sx: {
-            'div:last-of-type': {
-                borderLeft: `0.125rem transparent solid`
-            }
-        } }, { children: items.map((item, index) => (_jsx(Box, Object.assign({ "data-testid": `item-${index}`, sx: {
-                '&::before': {
-                    content: '""',
-                    display: 'block',
-                    height: '0.625rem',
-                    width: '0.625rem',
-                    marginLeft: '-0.5rem',
-                    borderRadius: '50%',
-                    border: `0.125rem ${palette.secondary.main} solid`,
-                    backgroundColor: `${palette.common.white}`
-                },
-                borderLeft: `0.125rem ${palette.secondary.main} solid`,
-                display: 'flex'
-            } }, { children: _jsxs(Box, Object.assign({ sx: {
-                    padding: '0 1.25rem 1.25rem'
-                } }, { children: [_jsx(Typography, Object.assign({ sx: {
-                            fontSize: '0.625rem',
-                            fontWeight: 400,
-                            lineHeight: '1rem',
-                            color: palette.text.secondary
-                        } }, { children: item.subtitle })), _jsx(Typography, Object.assign({ sx: {
-                            fontSize: '0.75rem',
-                            fontWeight: 400,
-                            lineHeight: '1rem',
-                            color: palette.text.primary
-                        } }, { children: item.title })), _jsx(Typography, Object.assign({ sx: {
-                            fontSize: '0.625rem',
-                            fontWeight: 400,
-                            lineHeight: '1rem',
-                            color: palette.text.secondary
-                        } }, { children: item.description }))] })) }), index))) })));
-};
-export default UtilityRail;
+var _default = UtilityRail;
+exports.default = _default;