How to use the @rmwc/base.classNames function in @rmwc/base

strategyToUse === 'custom'
        ? render || providerRender
        : rendererFromMap || null;

    if (!renderToUse) {
      console.error(
        `Icon: rendering not implemented for ${String(strategyToUse)}.`
      );
      return null;
    }

    const rendered = renderToUse({
      ...rest,
      ...optionsRest,
      content: contentToUse,
      className: classNames(
        'rmwc-icon',
        basenameToUse,
        rest.className,
        optionsRest.className,
        iconClassName,
        {
          [`rmwc-icon--size-${size || ''}`]: !!size
        }
      )
    });

    // Unwrap double layered icons...
    if (
      rendered.props.children &&
      rendered.props.children.type &&
      ['Avatar', 'Icon'].includes(rendered.props.children.type.displayName)

// This flag really determines a lot
    // is surfaceIsRoot is true, then the surface props are spread
    // to the underlying component, otherwise the only place they
    // can be picked up is by the context consumer
    const surfaceIsRoot = !surface || !unbounded;

    const unboundedProp = unbounded
      ? { 'data-mdc-ripple-is-unbounded': true }
      : {};

    const rippleSurfaceProps = surfaceIsRoot
      ? this.surface.props({ style: child.props.style })
      : {};

    let finalClassNames = classNames(
      className,
      rippleSurfaceProps.className,
      child.props.className,
      {
        'mdc-ripple-surface':
          typeof surface === 'boolean' ? surface : surface === undefined,
        'mdc-ripple-surface--primary': primary,
        'mdc-ripple-surface--accent': accent
      }
    );

    // Fixes a ripple artifact issue
    // that is caused when clicking a button disables it
    // https://codesandbox.io/s/842vo56019
    if (rest.disabled) {
      finalClassNames = finalClassNames.replace(

}
      )
    });

    // Unwrap double layered icons...
    if (
      rendered.props.children &&
      rendered.props.children.type &&
      ['Avatar', 'Icon'].includes(rendered.props.children.type.displayName)
    ) {
      return React.cloneElement(rendered.props.children, {
        ...rendered.props.children.props,
        ...rendered.props,
        // prevents an infinite loop
        children: rendered.props.children.props.children,
        className: classNames(
          rendered.props.className,
          rendered.props.children.props.className
        )
      });
    }

    return rendered;
  }
);

const renderUrl = ({ content, ...rest }: { content: string }) => (
  
);

render() {
    const { icon, transition } = this.props;
    const Tag = !!icon ? Icon : 'span';

    return (
      <span>
        
      </span>
    );
  }

} = {
    ...providerContext.tooltip,
    ...rest
  };

  return (
    
      {children}
    
  );
});

({ className, ...rest }: { className?: string }) => (
    <div>
  )
);</div>

children,
      handle,
      onOpen,
      onClose,
      open: openProp,
      startOpen,
      ...rest
    } = this.props;
    const { open, childrenStyle } = this.state;

    return (
       (this.root = el)}
        className={classNames('rmwc-collapsible-list', {
          ['rmwc-collapsible-list--open']: open
        })}
      >
        <div>
          {React.cloneElement(handle, {
            ...handle.props,
            onClick: this.handleClick,
            onKeyDown: this.handleKeydown
          })}
        </div>
        <div style="{childrenStyle}">
          <div> (this.childContainer = el)}
          &gt;
            {children}</div></div>

render: (props, ref, Tag) => {
    if (!!props.icon) {
      return ;
    }

    if (React.isValidElement(props.children)) {
      const { children, ...rest } = props;
      return React.cloneElement(props.children, {
        ...rest,
        ...props.children.props,
        className: classNames(props.className, props.children.props.className)
      });
    }

    return ;
  }
});