@veritone-ce/design-system 1.12.33 → 1.12.35

package/dist/assets/theme.d.ts

@@ -0,0 +1,62 @@
+import { PaletteColorOptions, SimplePaletteColorOptions, useTheme as muiUseTheme } from '@mui/material';
+import { Theme as MuiTheme, ThemeOptions } from '@mui/material/styles';
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        primary: true;
+        secondary: true;
+        tertiary: true;
+    }
+}
+type Colors = typeof colors;
+declare module '@mui/material/styles' {
+    type ButtonPaletteColorOptions = SimplePaletteColorOptions & {
+        hover: string;
+    };
+    type MiscPaletteColorOptions = Colors['misc'];
+    type TextPaletteColorOptions = Colors['text'];
+    interface TypeText extends TextPaletteColorOptions {
+    }
+    interface PaletteOptions {
+        neutral?: PaletteColorOptions;
+        button?: ButtonPaletteColorOptions;
+        misc?: MiscPaletteColorOptions;
+    }
+    interface Palette {
+        neutral: Pick<Palette['primary'], 'main'>;
+        button: ButtonPaletteColorOptions;
+        misc: MiscPaletteColorOptions;
+    }
+}
+export declare const colors: {
+    brand: {
+        pink: string;
+        blueOne: string;
+        blueTwo: string;
+        warning: string;
+        success: string;
+        error: string;
+        white: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        disabled: string;
+    };
+    button: {
+        primary: string;
+        hover: string;
+    };
+    misc: {
+        background: string;
+        altBackground: string;
+        rowHoverGreyOne: string;
+        rowOn: string;
+        rowOnHoverGreyTwo: string;
+    };
+};
+export type Theme = MuiTheme;
+export declare const useTheme: typeof muiUseTheme;
+export declare let defaultTheme: MuiTheme;
+export declare const createDesignSystemTheme: (newTheme?: ThemeOptions) => Theme;
+export {};

package/dist/assets/theme.js

@@ -0,0 +1,357 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTheme = exports.defaultTheme = exports.createDesignSystemTheme = exports.colors = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _stepper = _interopRequireDefault(require("../components/Stepper/stepper.theme"));
+var _checkbox = _interopRequireDefault(require("../components/Checkbox/checkbox.theme"));
+var _RadioButton = _interopRequireDefault(require("../components/RadioButton/RadioButton.theme"));
+var _button = _interopRequireDefault(require("../components/Button/button.theme"));
+var _statusChip = _interopRequireDefault(require("../components/StatusChip/statusChip.theme"));
+var _select = _interopRequireDefault(require("../components/Select/select.theme"));
+var _tabs = _interopRequireDefault(require("../components/Tabs/tabs.theme"));
+var _input = _interopRequireDefault(require("../components/Input/input.theme"));
+var _menuFlyout = require("../components/MenuFlyout/menuFlyout.theme");
+var _modal = _interopRequireDefault(require("../components/Modal/modal.theme"));
+var _linearProgress = _interopRequireDefault(require("../components/LinearProgress/linearProgress.theme"));
+var _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
+var _Cancel = _interopRequireDefault(require("@mui/icons-material/Cancel"));
+var _deepmerge = _interopRequireDefault(require("deepmerge"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var InformationIcon = function InformationIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm1.674-4.444.14-.575c-.072.034-.189.073-.35.118a1.655 1.655 0 0 1-.436.067c-.272 0-.464-.045-.575-.134-.11-.09-.166-.258-.166-.505 0-.098.017-.243.051-.435.034-.191.073-.362.115-.511l.524-1.86c.051-.17.087-.358.106-.563.019-.204.028-.347.028-.428 0-.392-.137-.71-.412-.956-.275-.244-.666-.367-1.173-.367-.281 0-.58.05-.895.15-.315.1-.645.22-.99.361l-.141.576c.102-.039.225-.08.368-.122.142-.043.282-.064.418-.064.277 0 .465.047.563.14.098.095.147.26.147.5 0 .131-.016.277-.048.437-.032.16-.072.33-.119.508l-.524 1.867a5.499 5.499 0 0 0-.102.527 3.366 3.366 0 0 0-.032.457c0 .384.142.7.425.95.284.249.681.373 1.192.373.333 0 .625-.043.876-.13.252-.088.588-.215 1.01-.38Zm-.093-7.552a1.09 1.09 0 0 0 .368-.828 1.1 1.1 0 0 0-.368-.83A1.247 1.247 0 0 0 12.696 7c-.345 0-.641.115-.889.345-.247.23-.37.507-.37.831 0 .324.123.6.37.828.248.228.544.342.889.342s.64-.114.885-.342Z",
+      fill: "#214167"
+    })
+  }));
+};
+InformationIcon.defaultProps = {
+  width: "22",
+  height: "22",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var WarningIcon = function WarningIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M17.075 17.075A9.976 9.976 0 0 0 20 10a9.976 9.976 0 0 0-2.925-7.075A9.976 9.976 0 0 0 10 0a9.976 9.976 0 0 0-7.075 2.925A9.976 9.976 0 0 0 0 10a9.976 9.976 0 0 0 2.925 7.075A9.976 9.976 0 0 0 10 20a9.976 9.976 0 0 0 7.075-2.925Zm-5.722-3.218A1.35 1.35 0 0 0 10 12.505c-.75 0-1.371.603-1.371 1.352 0 .75.621 1.372 1.371 1.372s1.353-.622 1.353-1.372ZM10 11.134c-.494 0-.86-.403-.914-.915l-.457-4.076C8.556 5.43 9.305 4.77 10 4.77s1.444.659 1.353 1.372l-.439 4.076c-.055.512-.42.915-.914.915Z",
+      fill: "#FFBB0A"
+    })
+  }));
+};
+WarningIcon.defaultProps = {
+  width: "22",
+  height: "22",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var colors = {
+  brand: {
+    pink: '#D43060',
+    blueOne: '#214167',
+    blueTwo: '#335B89',
+    warning: '#FFBB0A',
+    success: '#28BA3F',
+    error: '#EB0000',
+    white: "#FFFFFF"
+  },
+  text: {
+    primary: "#2A323C",
+    secondary: "#5C6269",
+    tertiary: "#465364",
+    disabled: "#7C848D"
+  },
+  button: {
+    primary: "#1871E8",
+    hover: "#1259B9"
+  },
+  misc: {
+    background: "#E4ECF3",
+    altBackground: "#E0E8F0",
+    rowHoverGreyOne: "#FAFAFA",
+    rowOn: "#F2F7FE",
+    rowOnHoverGreyTwo: "#EAF1FA"
+  }
+};
+
+// create theme in steps https://mui.com/material-ui/customization/theming/#api
+exports.colors = colors;
+var useTheme = _material.useTheme;
+exports.useTheme = useTheme;
+var defaultTheme = (0, _material.createTheme)({
+  typography: {
+    fontFamily: 'Nunito Sans, Helvetica, sans-serif',
+    h2: {
+      fontWeight: '700'
+    },
+    body1: {
+      fontSize: '14px',
+      fontWeight: '400',
+      color: colors.text.primary
+    },
+    body2: {
+      fontSize: '18px',
+      fontWeight: '400'
+    },
+    subtitle1: {
+      fontSize: '16px'
+    }
+  },
+  palette: {
+    common: {
+      white: colors.brand.white
+    },
+    action: {
+      disabledBackground: colors.misc.rowHoverGreyOne,
+      disabled: colors.text.disabled
+    },
+    primary: {
+      main: colors.brand.blueOne
+    },
+    secondary: {
+      main: colors.brand.blueTwo,
+      contrastText: colors.brand.white
+    },
+    neutral: {
+      main: colors.text.secondary
+    },
+    button: {
+      main: colors.button.primary,
+      hover: colors.button.hover
+    },
+    success: {
+      main: colors.brand.success
+    },
+    warning: {
+      main: colors.brand.warning
+    },
+    error: {
+      main: colors.brand.error
+    },
+    divider: colors.brand.blueOne,
+    text: colors.text,
+    misc: colors.misc
+  },
+  spacing: 10
+});
+exports.defaultTheme = defaultTheme;
+exports.defaultTheme = defaultTheme = (0, _material.createTheme)(defaultTheme, {
+  components: _objectSpread(_objectSpread({
+    MuiButton: (0, _button["default"])(defaultTheme)
+  }, (0, _stepper["default"])(defaultTheme)), {}, {
+    MuiSelect: (0, _select["default"])(defaultTheme),
+    MuiTextField: (0, _input["default"])(defaultTheme),
+    MuiDialog: (0, _modal["default"])(defaultTheme),
+    MuiCheckbox: (0, _checkbox["default"])(defaultTheme),
+    MuiRadio: (0, _RadioButton["default"])(defaultTheme),
+    MuiTabs: (0, _tabs["default"])(defaultTheme),
+    MuiChip: (0, _statusChip["default"])(defaultTheme),
+    MuiMenu: (0, _menuFlyout.menuFlyoutTheme)(defaultTheme),
+    MuiMenuItem: (0, _menuFlyout.menuItemTheme)(defaultTheme),
+    MuiLinearProgress: (0, _linearProgress["default"])(defaultTheme),
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: defaultTheme.palette.text.secondary,
+          fontSize: "14px",
+          lineHeight: "21px",
+          fontWeight: "600"
+        }
+      }
+    },
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: {
+          '& .MuiFormControlLabel-label': {
+            color: defaultTheme.palette.text.secondary
+          },
+          '& .MuiFormControlLabel-label.Mui-disabled': {
+            color: defaultTheme.palette.text.disabled
+          }
+        }
+      }
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          position: 'relative',
+          marginLeft: 0,
+          '&.Mui-error': {
+            paddingLeft: "17px",
+            '&::before': {
+              content: "\"\"",
+              height: "12px",
+              width: '12px',
+              position: 'absolute',
+              left: 0,
+              top: "50%",
+              transform: "translate(0, -50%)",
+              backgroundColor: defaultTheme.palette.error.main,
+              borderRadius: "100%"
+            }
+          }
+        }
+      }
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: "24px",
+          lineHeight: "34px",
+          paddingTop: defaultTheme.spacing(3),
+          paddingLeft: defaultTheme.spacing(3),
+          paddingRight: defaultTheme.spacing(3),
+          paddingBottom: defaultTheme.spacing(1)
+        }
+      }
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          paddingTop: 0,
+          paddingLeft: defaultTheme.spacing(3),
+          paddingRight: defaultTheme.spacing(3),
+          paddingBottom: defaultTheme.spacing(1)
+        }
+      }
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          padding: defaultTheme.spacing(3)
+        }
+      }
+    },
+    MuiLink: {
+      defaultProps: {
+        underline: "none",
+        color: colors.button.primary
+      }
+    },
+    MuiSnackbar: {
+      defaultProps: {
+        autoHideDuration: 3000,
+        anchorOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        }
+      },
+      styleOverrides: {
+        root: {
+          width: "100%",
+          maxWidth: "415px",
+          position: "absolute"
+        }
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        variant: "outlined",
+        iconMapping: {
+          success: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircle["default"], {}),
+          info: /*#__PURE__*/(0, _jsxRuntime.jsx)(InformationIcon, {}),
+          warning: /*#__PURE__*/(0, _jsxRuntime.jsx)(WarningIcon, {}),
+          error: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cancel["default"], {})
+        }
+      },
+      styleOverrides: {
+        root: {
+          width: "415px",
+          backgroundColor: "white",
+          position: "relative",
+          overflow: "hidden",
+          border: "1px solid #7C848D",
+          '&:after': {
+            content: '""',
+            position: "absolute",
+            width: "4px",
+            left: 0,
+            top: 0,
+            bottom: 0
+          },
+          '&.MuiAlert-outlinedSuccess:after': {
+            backgroundColor: defaultTheme.palette.success.main
+          },
+          '&.MuiAlert-outlinedInfo:after': {
+            backgroundColor: defaultTheme.palette.secondary.main
+          },
+          '&.MuiAlert-outlinedWarning:after': {
+            backgroundColor: defaultTheme.palette.warning.main
+          },
+          '&.MuiAlert-outlinedError:after': {
+            backgroundColor: defaultTheme.palette.error.main
+          },
+          '& .MuiAlert-icon': {
+            opacity: 1,
+            fontSize: 20
+          },
+          '& .MuiAlert-message': {
+            fontSize: "12px",
+            lineHeight: "22px",
+            color: colors.text.primary
+          },
+          '& .MuiIconButton-root': {
+            color: colors.text.tertiary
+          }
+        }
+      }
+    },
+    MuiCircularProgress: {
+      styleOverrides: {
+        root: {
+          color: defaultTheme.palette.button.main
+        }
+      }
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: defaultTheme.spacing(2),
+          paddingTop: defaultTheme.spacing(1)
+        }
+      }
+    },
+    MuiDataGrid: {
+      styleOverrides: {
+        root: {
+          '& .MuiDataGrid-columnHeader:focus': {
+            outline: 0
+          },
+          '& .MuiDataGrid-cell:focus': {
+            outline: 0
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          '&.MuiMenu-paper': {
+            // border: '1px solid ' + theme.palette.text.disabled,
+            // boxShadow: 'none'
+          }
+        }
+      }
+    }
+  })
+});
+var createDesignSystemTheme = function createDesignSystemTheme() {
+  var newTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _material.createTheme)((0, _deepmerge["default"])(defaultTheme, newTheme || {}));
+};
+exports.createDesignSystemTheme = createDesignSystemTheme;

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { AlertColor } from '@mui/material/Alert/Alert';
+import { SxProps, Theme } from '@mui/material/styles';
+export type AlertProps = {
+    'data-testid'?: string;
+    label?: React.ReactNode;
+    text?: string;
+    /**
+     * - Use can pass messageLabel or messageText
+     * - If these props are not passed in, the default label and text will be set based on severity
+     **/
+    link?: {
+        href: string;
+        content: React.ReactNode;
+    };
+    severity?: AlertColor;
+    onClose?(): void;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+declare const Alert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export default Alert;

package/dist/components/Alert/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _material = require("@mui/material");
+var _react = _interopRequireDefault(require("react"));
+var _Link = _interopRequireDefault(require("../Link"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var defaultMessageLabel = {
+  success: "Success",
+  info: "Info",
+  warning: "Alert",
+  error: "Error"
+};
+var defaultMessageText = {
+  success: "Your action was completed. ",
+  info: "General information. ",
+  warning: "Your action is required. ",
+  error: "An error has occured. "
+};
+var Alert = function Alert(props) {
+  var _props$severity;
+  var severity = (_props$severity = props.severity) !== null && _props$severity !== void 0 ? _props$severity : 'success';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Alert, {
+    "data-testid": props['data-testid'],
+    onClose: props.onClose,
+    severity: severity,
+    sx: props.sx,
+    className: props.className,
+    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: props.label ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [props.label, ': ']
+        }) : "".concat(defaultMessageLabel[severity], ": ")
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontSize: "12px"
+        },
+        children: props.text ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [props.text, " "]
+        }) : defaultMessageText[severity]
+      }), props.link && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link["default"], {
+        href: props.link.href,
+        children: props.link.content
+      })]
+    })
+  });
+};
+var _default = Alert;
+exports["default"] = _default;

package/dist/components/AudioSlider/index.d.ts

@@ -0,0 +1,12 @@
+export type AudioSliderProps = {
+    'data-testid'?: string;
+    value: number;
+    onChange?(event: Event, value: number): void;
+    label?: string;
+    max?: number;
+    disabled?: boolean;
+    step?: number;
+    className?: string;
+};
+declare const AudioSlider: (props: AudioSliderProps) => import("react/jsx-runtime").JSX.Element;
+export default AudioSlider;

package/dist/components/AudioSlider/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _Slider = _interopRequireDefault(require("@mui/material/Slider"));
+var _styles = require("@mui/material/styles");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var MuiSlider = (0, _styles.styled)(_Slider["default"])({
+  color: '#1871E8',
+  height: 6,
+  '& .MuiSlider-track': {
+    border: 'none',
+    height: '6px'
+  },
+  '& .MuiSlider-thumb': {
+    height: 18,
+    width: 14,
+    backgroundColor: '#2A323C',
+    borderRadius: 2,
+    position: 'relative',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      width: 1,
+      height: 12,
+      backgroundColor: '#FFFFFF',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    },
+    '&:hover': {
+      outline: 'none'
+    },
+    '&:active': {
+      outline: 'none'
+    },
+    '&:focus': {
+      outline: 'none'
+    }
+  },
+  '& .MuiSlider-rail': {
+    height: '6px',
+    backgroundColor: '#9FA2A4'
+  },
+  '& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover': {
+    boxShadow: 'none'
+  }
+});
+var AudioSlider = function AudioSlider(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+    sx: {
+      width: 320
+    },
+    className: props.className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MuiSlider, {
+      "data-testid": props['data-testid'],
+      "aria-label": "audio-slider",
+      value: props.value,
+      max: props.max,
+      step: props.step,
+      onChange: props.onChange && function (event, value) {
+        props.onChange(event, value);
+      },
+      disabled: props.disabled
+    })
+  });
+};
+var _default = AudioSlider;
+exports["default"] = _default;

package/dist/components/Breadcrumbs/breadcrumbs.theme.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '../../assets/theme';
+declare const breadcrumbs: (theme: Theme) => {
+    styleOverrides: {
+        root: () => {
+            '& .MuiBreadcrumbs-separator': {
+                color: string;
+            };
+        };
+    };
+};
+export default breadcrumbs;

package/dist/components/Breadcrumbs/breadcrumbs.theme.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var breadcrumbs = function breadcrumbs(theme) {
+  return {
+    styleOverrides: {
+      root: function root() {
+        return {
+          '& .MuiBreadcrumbs-separator': {
+            color: theme.palette.text.disabled
+          }
+        };
+      }
+    }
+  };
+};
+var _default = breadcrumbs;
+exports["default"] = _default;

package/dist/components/Breadcrumbs/index.d.ts

@@ -0,0 +1,25 @@
+import { SxProps, Theme } from '@mui/material';
+import React from 'react';
+export type BreadcrumbsProps = {
+    'data-testid'?: string;
+    links: {
+        to: string;
+        label: React.ReactNode;
+    }[];
+    LinkComponent?: BreadcrumbsLinkComponent;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+export type BreadcrumbsLinkComponentProps = {
+    to: string;
+    children?: React.ReactNode;
+};
+export type BreadcrumbsLinkComponent = React.ComponentType<BreadcrumbsLinkComponentProps>;
+/**
+ * - This is the breadcrumbs component that is used in the header
+ * - It takes in an array of links and renders them as breadcrumbs
+ * - The last link is not clickable
+ * - The last link is styled differently
+ **/
+declare const Breadcrumbs: (props: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
+export default Breadcrumbs;