import React from 'react';
import { st, classes } from './ToggleButton.st.css.js';
import { useFocusRing } from '../../providers/useFocusRing/useFocusRing';
import Text from '../../Text';
const addPrefix = (icon, size) => {
    const dimension = size === 'small' || size === 'tiny' ? '18' : '24';
    return (icon &&
        React.cloneElement(icon, {
            width: dimension,
            height: dimension,
            className: st(classes.prefix, { size }),
        }));
};
const ToggleButton = ({ children, prefixIcon, selected, size, dataHook, focusableOnFocus, focusableOnBlur, disabled, className, role, 'aria-checked': ariaChecked, ...rest }) => {
    const { focusProps } = useFocusRing();
    return (React.createElement("button", { ...rest, role: role, className: st(classes.root, { selected, size, disabled }, className), "data-hook": dataHook, "data-selected": selected, "aria-checked": ariaChecked, disabled: disabled, type: "button", ...focusProps },
        addPrefix(prefixIcon, size),
        React.createElement(Text, { className: st(classes.label), ellipsis: true, size: size, weight: "thin", disabled: disabled, skin: disabled ? 'disabled' : 'standard' }, children)));
};
ToggleButton.displayName = 'SegmentedToggle.Button';
export default ToggleButton;
//# sourceMappingURL=ToggleButton.js.map