import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { Box } from "../box/Box.js";
import { cssUtils } from "../cssUtils.js";
import { textField } from "./textFieldStyles.js";
/**
 * **Server Component**
 *
 * This component is used to render the current option.
 *
 * @remarks \@since 6.0.0
 * @internal
 */ export function SelectedOption(props) {
    const { disableAddon, option, className, disablePadding = true, placeholder, ...remaining } = props;
    let children = option?.children || placeholder;
    // when the children are a string or number, wrap it in additional span so
    // that overflow can be ellipsis-ed
    if (typeof children === "string" || typeof children === "number") {
        children = /*#__PURE__*/ _jsx("span", {
            className: cssUtils({
                textOverflow: "ellipsis"
            }),
            children: children
        });
    }
    return /*#__PURE__*/ _jsxs(Box, {
        ...remaining,
        className: cnb("rmd-selected-option", textField(), className),
        disablePadding: disablePadding,
        children: [
            !disableAddon && option?.leftAddon,
            children
        ]
    });
}

//# sourceMappingURL=SelectedOption.js.map