import React, { forwardRef } from "react";
import { pxToRem, styled } from "../../../theme.js";
import { fnWithProps } from "../../../types/fnWithProps.js";
import { Header } from "./Header.js";
import { Item, ListItemInnerContainerClassNameSelector } from "./Item.js";
const StyledList = styled("ul", {
    margin: `0 ${pxToRem(23)}`,
    padding: 0,
    variants: {
        inset: {
            true: {
                margin: 0,
            },
        },
    },
});
const ListBase = forwardRef((props, ref) => {
    const chld = React.Children.map(props.children, (child) => {
        if (child && typeof child === "object" && "type" in child && (child.type === Item || child.type === Header)) {
            return React.cloneElement(child, {
                inset: props.inset,
            });
        }
        return child;
    });
    return (React.createElement(StyledList, { ...props, ref: ref }, chld));
});
ListBase.displayName = "List";
const List = fnWithProps(ListBase, {
    Header,
    Item,
});
List.toString = () => StyledList.toString();
export { List, ListItemInnerContainerClassNameSelector };
//# sourceMappingURL=List.js.map