"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListItem = exports.List = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const List_css_1 = __importDefault(require("./List.css"));
function List({ spacing = 'base', marker = 'bullet', children, }) {
    const className = css_utilities_1.classNames(List_css_1.default.List, spacing && List_css_1.default[css_utilities_1.variationName('spacing', spacing)], marker && List_css_1.default[css_utilities_1.variationName('marker', marker)]);
    const isOrderedList = marker === 'number';
    /*
    VoiceOver and Safari (Webkit) (macOS and iOS) remove list element
    semantics when list-style: none is used.
    https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
    */
    const role = marker === 'none' ? 'list' : undefined;
    const Element = isOrderedList ? 'ol' : 'ul';
    return (
    /* Needed to properly reset margins on ul / ol elements and not interfere
     * with layout components that use `*` selector to create gaps between children. */
    /* eslint-disable-next-line @shopify/jsx-prefer-fragment-wrappers */
    <div>
      <Element className={className} role={role}>
        {children}
      </Element>
    </div>);
}
exports.List = List;
function ListItem({ children }) {
    return <li className={List_css_1.default.ListItem}>{children}</li>;
}
exports.ListItem = ListItem;