import { r as registerInstance, h, H as Host } from './index-B2f84Zog.js';

const pdsContainerCss = ":host{display:block;margin-inline:auto;max-width:var(--pine-container-max-width, none);width:100%}:host(.pds-container--sm){--pine-container-max-width:340px}:host(.pds-container--md){--pine-container-max-width:520px}:host(.pds-container--lg){--pine-container-max-width:700px}:host(.pds-container--xl){--pine-container-max-width:1064px}:host(.pds-container--full){--pine-container-max-width:1440px}";

const NAMED_SIZES = new Set(['sm', 'md', 'lg', 'xl', 'full']);
const PdsContainer = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Sets the semantic HTML tag rendered as the inner container element.
         * @default 'div'
         */
        this.tag = 'div';
        /**
         * If `true`, the container is centered horizontally using `margin-inline: auto`.
         * @default true
         */
        this.centered = true;
    }
    render() {
        const Tag = this.tag;
        const isNamed = this.size !== undefined && NAMED_SIZES.has(this.size);
        const customSize = this.size !== undefined && !isNamed ? this.size : undefined;
        const hostStyle = {};
        if (customSize)
            hostStyle['--pine-container-max-width'] = customSize;
        if (!this.centered)
            hostStyle['margin-inline'] = '0';
        return (h(Host, { key: 'b8055b9add2e9abfeaf61f233a0f22e559829eb2', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, h(Tag, { key: '8aac62d1a6639063d10b8c51539ca0bc3ca0bae4', part: "container" }, h("slot", { key: '747e55553b7660159ee9d0192ccb8ed29a99f0b0' }))));
    }
};
PdsContainer.style = pdsContainerCss;

export { PdsContainer as pds_container };
//# sourceMappingURL=pds-container.entry.js.map
