How to use the @react-md/utils.bem function in @react-md/utils

export interface IconRotatorProps extends IconRotatorBaseProps {
  /**
   * The icon that should be rotated. If this is a valid React Element, the class names will be
   * cloned into that icon, otherwise the icon will be wrapped in a span with the correct class
   * names applied.
   */
  children: ReactNode;
}

type WithRef = WithForwardedRef;
type DefaultProps = Required<
  Pick
>;
type WithDefaultProps = IconRotatorProps & DefaultProps & WithRef;

const block = bem("rmd-icon-rotator");

/**
 * The `IconRotator` is a simple component that is used to rotate an icon from a one degrees
 * to another.
 */
const IconRotator: FC = providedProps => {
  const {
    style,
    className: propClassName,
    animate,
    rotated,
    children,
    forceIconWrap,
    forwardedRef,
    ...props
  } = providedProps as WithDefaultProps;

/**
   * Any `<svg>` children to render to create your icon. This can not be used with the `use` prop.
   */
  children?: ReactNode;
}

type WithRef = WithForwardedRef;
type DefaultProps = Required&lt;
  Pick&lt;
    SVGIconProps,
    "focusable" | "xmlns" | "viewBox" | "dense" | "aria-hidden"
  &gt;
&gt;;
type WithDefaultProps = SVGIconProps &amp; DefaultProps &amp; WithRef;

const block = bem("rmd-icon");

/**
 * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a sprite map
 * as an icon.
 */
const SVGIcon: FC&gt; = providedProps =&gt; {
  const {
    className,
    use,
    children: propChildren,
    dense,
    forwardedRef,
    ...props
  } = providedProps as WithDefaultProps;
  let children = propChildren;</svg>

import "./SandboxModal.scss";
import CodePreview from "./CodePreview";
import SandboxFileTree from "./SandboxFileTree";
import SandboxNavigation from "./SandboxNavigation";

interface SandboxModalProps {
  pkg: string;
  name: string;
  from: string;
  fileName: string;
  sandbox: IFiles | null;
  onFileChange: (fileName: string) => void;
  onRequestClose: () => void;
}

const block = bem("sandbox-modal");

const SandboxModal: FC = ({
  pkg,
  name,
  from,
  fileName,
  sandbox,
  onFileChange,
  onRequestClose,
}) => {
  const pkgName = toTitle(pkg, " ", true);
  const title = `react-md - ${pkgName} - ${name} Sandbox`;
  const rendered = useRef(false);
  useEffect(() => {
    rendered.current = true;
  }, []);

type DefaultProps = Required<
  Pick<
    MenuProps,
    | "role"
    | "horizontal"
    | "tabIndex"
    | "mountOnEnter"
    | "unmountOnExit"
    | "defaultFocus"
    | "disableCloseOnScroll"
    | "disableCloseOnResize"
  >
>;
type WithDefaultProps = MenuProps & DefaultProps & WithRef;

const block = bem("rmd-menu");
const VERTICAL_ANCHOR: PositionAnchor = {
  x: "inner-right",
  y: "top",
};

const HORIZONTAL_ANCHOR: PositionAnchor = {
  x: "center",
  y: "center",
};

/**
 * The `Menu` component is a fully controlled component that will animate
 * in and out based on the `visible` prop as well as handle keyboard focus,
 * closing when needed, etc.
 */
const Menu: FC = providedProps => {

useChoice,
} from "@react-md/form";
import {
  EmailSVGIcon,
  LocationOnSVGIcon,
  PersonSVGIcon,
  PhoneSVGIcon,
} from "@react-md/material-icons";
import { bem } from "@react-md/utils";

import Phone from "components/Phone";
import states from "constants/states";

import "./ExampleForm.scss";

const block = bem("example-form");

const themes: TextFieldTheme[] = ["none", "underline", "filled", "outline"];

const ExampleForm: FC = () => {
  const [currentTheme, handleChange] = useChoice("outline");
  const isUnstyled = currentTheme === "none";

  return (
    
      <fieldset>
        {themes.map(theme =&gt; (
          </fieldset>

import "./SandboxModal.scss";
import CodePreview from "./CodePreview";
import SandboxFileTree from "./SandboxFileTree";
import SandboxNavigation from "./SandboxNavigation";

interface SandboxModalProps {
  pkg: string;
  name: string;
  from: string;
  fileName: string;
  sandbox: IFiles | null;
  onFileChange: (fileName: string) => void;
  onRequestClose: () => void;
}

const block = bem("sandbox-modal");

const SandboxModal: FC = ({
  pkg,
  name,
  from,
  fileName,
  sandbox,
  onFileChange,
  onRequestClose,
}) => {
  const pkgName = toTitle(pkg, " ", true);
  const title = `react-md - ${pkgName} - ${name} Sandbox`;
  const rendered = useRef(false);
  useEffect(() => {
    rendered.current = true;
  }, []);

/**
   * Boolean if the `forceSize` prop should also force the `font-size` instead of only `width` and
   * `height`.
   */
  forceFontSize?: boolean;
}

type DefaultProps = Required<
  Pick<
    FontIconProps,
    "aria-hidden" | "dense" | "iconClassName" | "forceSize" | "forceFontSize"
  >
>;
type WithDefaultProps = FontIconProps & DefaultProps & WithForwardedRef;

const block = bem("rmd-icon");

/**
 * The `FontIcon` component is used for rendering a font-icon library's
 * icon. The default is to use the `material-icons` library, but others
 * can be used as well.
 *
 * If you are using another font icon library that does not always create icons with
 * a perfect 1:1 scale (such as font awesome), it is recommended to use the `forceSize`
 * and `forceFontSize` props to fix the sizing issues.
 */
const FontIcon: FC = providedProps => {
  const {
    className,
    iconClassName,
    dense,
    forceSize,

* can be omitted.
   *
   * In addition, if you are using dynamically rendered tab panels, this value should only
   * be provided when the tab becomes active as the `id` will not exist in the DOM until
   * then and will be invalid.
   */
  panelId?: string;
}

type WithRef = WithForwardedRef;
type DefaultProps = Required<
  Pick
>;
type WithDefaultProps = TabProps & DefaultProps & WithRef;

const block = bem("rmd-tab");

/**
 * The `Tab` is a low-level component that just renders an accessible tab widget along with some
 * general styles and an optional icon.
 */
const Tab: FC = providedProps => {
  const {
    className: propClassName,
    contentStyle,
    contentClassName,
    forwardedRef,
    icon,
    stacked,
    iconAfter,
    children,
    active,

import React, { FC } from "react";
import cn from "classnames";
import { TextIconSpacing } from "@react-md/icon";
import { HomeSVGIcon } from "@react-md/material-icons";
import { MediaContainer } from "@react-md/media";
import { Text, TextContainer } from "@react-md/typography";
import { bem } from "@react-md/utils";

import LinkButton from "components/LinkButton";

import "./NotFoundPage.scss";
import { Component as NotFoundSVG } from "./404.svg";

const block = bem("not-found");

interface Props {
  className?: string;
}

const NotFoundPage: FC = ({ className }) => {
  return (

/**
   * An optional color to apply to the avatar. This will apply a className of
   * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map
   * are supported by default. It is recommended to create custom colors using
   * the `rmd-avatar-theme-update-var` mixin with custom class names if the
   * default colors aren't extensive enough.
   */
  color?: string;
}

type WithRef = WithForwardedRef;
type DefaultProps = Required>;
type AvatarWithDefaultProps = AvatarProps & DefaultProps & WithRef;

const block = bem("rmd-avatar");

/**
 * An `Avatar` is generally used to represent objects or people within your app.
 * The avatar can consist of an image, an icon, or some text to display. When
 * the avatar is not an image, different themes can be applied to make the avatar
 * more unique.
 */
const Avatar: FC = providedProps => {
  const {
    className,
    children,
    src,
    alt,
    forwardedRef,
    color,
    ...props