How to use the @microsoft/fast-web-utilities.classNames function in @microsoft/fast-web-utilities

protected generateTabClassNames(): TabManagedClasses {
        const { tab, tab__active }: TabsClassNameContract = this.props.managedClasses;

        return {
            managedClasses: {
                tab: classNames(tab),
                tab__active: classNames(tab__active),
            },
        };
    }

public render(): React.ReactElement {
        const {
            dialog_positioningRegion,
            dialog_contentRegion,
        }: DialogClassNameContract = this.props.managedClasses;

        return (
            <div aria-hidden="{!this.props.visible}">
                <div>
                    {this.renderModalOverlay()}
                    <div aria-label="{this.props.label}" aria-labelledby="{this.props.labelledBy}" aria-describedby="{this.props.describedBy}" style="{{" tabindex="{-1}" role="dialog">
                        {this.props.children}
                    </div>
                </div></div>

private renderLabel(): React.ReactNode {
        const { checkbox_label }: CheckboxClassNameContract = this.props.managedClasses;

        if (typeof this.props.label === "function") {
            return this.props.label(classNames(checkbox_label));
        }
    }

protected generateClassNames(): string {
        const {
            listboxItem,
            listboxItem__disabled,
            listboxItem__selected,
        }: ListboxItemClassNameContract = this.props.managedClasses;

        return super.generateClassNames(
            classNames(
                listboxItem,
                [listboxItem__disabled, this.props.disabled],
                [listboxItem__selected, this.isItemSelected()]
            )
        );
    }

private renderInput(direction: string): React.ReactNode {
        if (this.props.options && Array.isArray(this.props.options)) {
            const option: string = this.props.options.find((item: string) => {
                return item === direction;
            });

            if (typeof option !== "undefined") {
                return (
                    <span>
                        <input disabled="{this.props.disabled}" checked="{this.isChecked(direction)}" aria-label="{`${direction}" name="{this.props.dataLocation}" value="{direction}" type="{&quot;radio&quot;}" id="{this.props.dataLocation}">
                    </span>
                );
            }
        }

(text: string, index: number): React.ReactNode => {
                const invalidError: React.ReactNode = this.renderValidationError(index);

                return (
                    
                        
                            {text}
                        
                        {!!this.props.displayValidationInline ? invalidError : null}
                    
                );

private renderCircularBackground(): JSX.Element {
        return this.renderCircle(
            classNames(this.props.managedClasses.progress_indicator)
        );
    }

protected generateClassNames(): string {
        const {
            actionToggle,
            actionToggle__disabled,
            actionToggle__selected,
            actionToggle__hasGlyphAndContent,
        }: ActionToggleClassNameContract = this.props.managedClasses;

        return super.generateClassNames(
            classNames(
                actionToggle,
                this.props.managedClasses[`actionToggle__${this.props.appearance}`],
                [actionToggle__disabled, this.props.disabled],
                [actionToggle__selected, this.state.selected],
                [actionToggle__hasGlyphAndContent, this.hasGlyphAndContent()]
            )
        );
    }

protected generateClassNames(): string {
        const {
            flipper,
            flipper__next,
            flipper__previous,
        }: FlipperClassNameContract = this.props.managedClasses;
        const isNext: boolean = this.props.direction !== FlipperDirection.previous;

        return super.generateClassNames(
            classNames(flipper, [flipper__previous, !isNext], [flipper__next, isNext])
        );
    }