import { jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { getIcon } from "../icon/iconConfig.js";
import { FORM_CONFIG } from "./formConfig.js";
import { inputToggle } from "./inputToggleStyles.js";
/**
 * **Server Component**
 *
 * @remarks
 * \@since 2.8.0
 * \@since 6.0.0 Updated to use different icons for each checked state instead
 * of a css overlay hack.
 * @internal
 */ export const InputToggleIcon = /*#__PURE__*/ forwardRef(function InputToggleIcon(props, ref) {
    const { type, size = "normal", icon: propIcon, error, checked, children, disabled, indeterminate, className, disableEm = false, checkedIcon: propCheckedIcon, indeterminateIcon: propIndeterminateIcon, ...remaining } = props;
    const uncheckedIcon = getIcon(type, propIcon);
    const checkedIcon = getIcon(`${type}Checked`, propCheckedIcon);
    const indeterminateIcon = getIcon("checkboxIndeterminate", propIndeterminateIcon);
    let icon;
    let active = false;
    const uncontrolled = typeof checked !== "boolean";
    if (!uncontrolled || !FORM_CONFIG.uncontrolledToggles) {
        active = !!checked && !error;
        icon = checked ? indeterminate ? indeterminateIcon : checkedIcon : uncheckedIcon;
    } else {
        icon = /*#__PURE__*/ _jsxs(_Fragment, {
            children: [
                uncheckedIcon,
                indeterminate ? indeterminateIcon : checkedIcon
            ]
        });
    }
    return /*#__PURE__*/ _jsxs("span", {
        ...remaining,
        ref: ref,
        className: cnb(inputToggle({
            em: !disableEm,
            size,
            type,
            error,
            active,
            disabled,
            uncontrolled,
            className
        })),
        children: [
            children,
            icon
        ]
    });
});

//# sourceMappingURL=InputToggleIcon.js.map