import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';

import './List.css';const list = "_list_g31eo_1";
const item = "_item_g31eo_22";
const unordered = "_unordered_g31eo_36";
const ordered = "_ordered_g31eo_40";
const small = "_small_g31eo_44";
const large = "_large_g31eo_48";
const styles = {
	list: list,
	item: item,
	unordered: unordered,
	ordered: ordered,
	small: small,
	large: large
};

const ListItem = forwardRef(
  (props, ref) => {
    const { className, children, ...rest } = props;
    return /* @__PURE__ */ jsx(
      "li",
      {
        ref,
        className: cx(styles["item"], className),
        "data-anv": "list-item",
        ...rest,
        children
      }
    );
  }
);
ListItem.displayName = "ListItem";

const List = Object.assign(
  forwardRef(
    function ListInner(props, ref) {
      const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
      const {
        className,
        children,
        variant = "unordered",
        size = "medium",
        style,
        ...rest
      } = componentProps;
      const listClasses = cx(styles["list"], className, {
        [styles["unordered"]]: variant === "unordered",
        [styles["ordered"]]: variant === "ordered",
        [styles["small"]]: size === "small",
        [styles["large"]]: size === "large"
      });
      const styleCombined = {
        ...style,
        ...layoutStyles
      };
      if (variant === "ordered") {
        return /* @__PURE__ */ jsx(
          "ol",
          {
            ref,
            className: listClasses,
            style: styleCombined,
            "data-anv": "list",
            ...rest,
            children
          }
        );
      }
      return /* @__PURE__ */ jsx(
        "ul",
        {
          ref,
          className: listClasses,
          style: styleCombined,
          "data-anv": "list",
          ...rest,
          children
        }
      );
    }
  ),
  {
    /**
     * ListItem component for individual items within a List.
     *
     * Features:
     * - Renders as a semantic list item (li)
     * - Supports layout and styling via standard HTML attributes
     *
     * @example
     * <List.Item>Item content</List.Item>
     */
    Item: ListItem
  }
);
List.displayName = "List";

export { List as L };
//# sourceMappingURL=List-BXyHWQ9e.js.map
