@octopusdeploy/design-system-components/dist/src/components/List/ListItem.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListItem = ListItem;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const material_1 = require("@mui/material");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
function ListItem({ children, isSelected }) {
    return (0, jsx_runtime_1.jsx)(material_1.ListItem, { className: (0, css_1.cx)(listItemStyles, { [selectedListItemStyles]: isSelected }), children: children });
}
const listItemClasses = {
    root: "MuiListItem-root",
};
const listItemStyles = (0, css_1.css)({
    [`&.${listItemClasses.root}`]: {
        color: design_system_tokens_1.themeTokens.color.text.primary,
        display: "block",
        padding: "0",
        "&:hover": {
            backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.hover,
        },
        //Some consumers like expanders can shift their content, which can hide dividers i.e. audit page.
        overflow: "hidden",
    },
    [`&.${listItemClasses.root} + &.${listItemClasses.root}`]: {
        borderTop: `solid 1px ${design_system_tokens_1.themeTokens.color.border.primary}`,
    },
});
const selectedListItemStyles = (0, css_1.css)({
    [`&.${listItemClasses.root}`]: {
        backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.hover,
    },
});