@chakra-ui/react/dist/esm/theme/recipes/list.js

Responsive and accessible React UI components built with React and Emotion

"use strict";
import { listAnatomy } from '../../anatomy.js';
import { defineSlotRecipe } from '../../styled-system/config.js';

const listSlotRecipe = defineSlotRecipe({
  className: "chakra-list",
  slots: listAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "var(--list-gap)",
      "& :where(ul, ol)": {
        marginTop: "var(--list-gap)"
      }
    },
    item: {
      whiteSpace: "normal",
      display: "list-item"
    },
    indicator: {
      marginEnd: "2",
      minHeight: "1lh",
      flexShrink: 0,
      display: "inline-block",
      verticalAlign: "middle"
    }
  },
  variants: {
    variant: {
      marker: {
        root: {
          listStyle: "revert"
        },
        item: {
          _marker: {
            color: "fg.subtle"
          }
        }
      },
      plain: {
        item: {
          alignItems: "flex-start",
          display: "inline-flex"
        }
      }
    },
    align: {
      center: {
        item: { alignItems: "center" }
      },
      start: {
        item: { alignItems: "flex-start" }
      },
      end: {
        item: { alignItems: "flex-end" }
      }
    }
  },
  defaultVariants: {
    variant: "marker"
  }
});

export { listSlotRecipe };