Example from https://react-md.dev/packages/form/validation-demos#example-form

Form Example - Example Form

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>Form Example - Example Form</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

import type { ReactElement, ReactNode } from "react";
import { useCallback, useState } from "react";
import type { AppBarTitleProps } from "@react-md/app-bar";
import { AppBarTitle as RMDAppBarTitle } from "@react-md/app-bar";
import { Tooltip, useTooltip } from "@react-md/tooltip";
import { useResizeObserver } from "@react-md/utils";

import { useId } from "./IdProvider";

/**
 * This component is a wrapper for the AppBarTitle component from
 * \@react-md/app-bar that will automatically update the title to show a tooltip
 * if the title becomes truncated.
 *
 * This is pretty hacky right so it isn't part of the main lib yet, but a better
 * solution to "auto tooltip" things might be added one day.
 */
export default function AppBarTitle({
  id,
  children,
  ...props
}: AppBarTitleProps): ReactElement {
  const [tooltip, setTooltip] = useState<ReactNode>(null);
  const updateTooltip = useCallback(
    ({ width, scrollWidth }) => {
      // the `width` is a `DOMRectReadOnly` object which allows for fractional
      // values while `scrollWidth` is always `Math.ceil` so to be able to
      // compare correctly, need to also `Math.ceil` the width or use
      // `target.offsetWidth`
      const offsetWidth = Math.ceil(width);
      const isTruncated = offsetWidth < scrollWidth;
      if (isTruncated && !tooltip) {
        setTooltip(children);
      } else if (!isTruncated && tooltip) {
        setTooltip(null);
      }
    },
    [tooltip, children]
  );
  const [, refHandler] = useResizeObserver(updateTooltip, {
    disableHeight: true,
  });
  const baseId = useId(id);
  const { elementProps, tooltipProps } = useTooltip({
    baseId,
  });

  return (
    <>
      <RMDAppBarTitle
        {...props}
        {...(tooltip ? elementProps : { id: baseId })}
        ref={refHandler}
        tabIndex={tooltip ? 0 : undefined}
      >
        {children}
      </RMDAppBarTitle>
      <Tooltip {...tooltipProps}>{tooltip}</Tooltip>
    </>
  );
}


import type { ReactElement, ReactNode } from "react";
import { AppBar, AppBarAction } from "@react-md/app-bar";
import { Button } from "@react-md/button";
import type { DialogProps } from "@react-md/dialog";
import { Dialog, DialogContent } from "@react-md/dialog";
import { TextIconSpacing } from "@react-md/icon";
import { CloseSVGIcon, LaunchSVGIcon } from "@react-md/material-icons";
import { Typography } from "@react-md/typography";

import AppBarTitle from "./AppBarTitle";

type AllowedDialogProps = Omit<
  DialogProps,
  "aria-label" | "aria-labelledby" | "onRequestClose" | "title"
>;

export interface ConditionalFullPageDialogProps extends AllowedDialogProps {
  title?: ReactNode;
  children: ReactElement;
  enable: () => void;
  disable: () => void;
  disabled?: boolean;
  disableAppBar?: boolean;
  disableContent?: boolean;
  disableFocusOnMount?: boolean;
}

export default function ConditionalFullPageDialog({
  id,
  title = "Full Page Demo",
  children,
  enable,
  disable,
  visible,
  disabled = false,
  disableAppBar = false,
  disableContent = false,
  disableFocusOnMount = false,
  ...props
}: ConditionalFullPageDialogProps): ReactElement {
  if (disabled) {
    return children;
  }

  return (
    <>
      <Typography type="headline-6">
        This example requires a more screen real estate than what is available
        so you will need to open it in a full page dialog.
      </Typography>
      <Button
        id={`${id}-dialog-toggle`}
        themeType="contained"
        onClick={enable}
        theme="primary"
      >
        <TextIconSpacing icon={<LaunchSVGIcon />}>Launch</TextIconSpacing>
      </Button>
      <Dialog
        {...props}
        id={`${id}-dialog`}
        aria-labelledby={`${id}-dialog-title`}
        visible={visible}
        onRequestClose={disable}
        type="full-page"
        disableFocusContainer={disableFocusOnMount}
      >
        {!disableAppBar && (
          <AppBar>
            <AppBarTitle keyline id={`${id}-dialog-title`}>
              {title}
            </AppBarTitle>
            <AppBarAction first aria-label="Close" onClick={disable}>
              <CloseSVGIcon />
            </AppBarAction>
          </AppBar>
        )}
        {disableContent ? (
          children
        ) : (
          <DialogContent disablePadding>{children}</DialogContent>
        )}
      </Dialog>
    </>
  );
}


import type { ReactElement } from "react";
import cn from "classnames";
import type { FormTheme } from "@react-md/form";
import {
  Fieldset,
  Form,
  NativeSelect,
  Radio,
  TextField,
  useChoice,
  FormThemeProvider,
} from "@react-md/form";
import {
  EmailSVGIcon,
  LocationOnSVGIcon,
  PersonSVGIcon,
  PhoneSVGIcon,
} from "@react-md/material-icons";

import Phone from "./Phone";
import states from "./states";

import styles from "./ExampleForm.module.scss";

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

export default function Demo(): ReactElement {
  const [currentTheme, handleChange] = useChoice<FormTheme>("outline");
  const isUnstyled = currentTheme === "none";

  return (
    <FormThemeProvider theme={currentTheme}>
      <Fieldset legend="Theme options" unstyled={false}>
        {themes.map((theme) => (
          <Radio
            id={`form-theme-${theme}`}
            key={theme}
            name="theme"
            onChange={handleChange}
            value={theme}
            checked={currentTheme === theme}
            label={theme}
          />
        ))}
      </Fieldset>
      <Phone id="example-form-phone">
        <Form className={styles.form}>
          <PersonSVGIcon />
          <TextField
            id="contact-name"
            name="name"
            label={!isUnstyled && "Name"}
            placeholder="John Snow"
          />
          <PhoneSVGIcon />
          <TextField
            id="contact-phone"
            type="tel"
            name="phone"
            label={!isUnstyled && "Phone"}
            placeholder="123-4567"
            pattern="\d{3}-\d{4}"
            maxLength={8}
          />
          <LocationOnSVGIcon className={styles.icon} />
          <Fieldset legend="Full Address" legendClassName={styles.legend}>
            <TextField
              id="contact-address"
              name="address"
              label={!isUnstyled && "Address"}
              placeholder="Some place street"
            />
            <TextField
              id="contact-city"
              name="city"
              label={!isUnstyled && "City"}
              placeholder="Denver"
              className={styles.field}
            />
            <NativeSelect
              id="contact-state"
              defaultValue=""
              name="state"
              inline
              label="State"
              className={cn(styles.field, styles.inline, styles.first)}
            >
              {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
              <option value="" disabled hidden />
              {states.map(({ name, abbreviation }) => (
                <option key={abbreviation} value={abbreviation}>
                  {name}
                </option>
              ))}
            </NativeSelect>
            <TextField
              id="contact-zip"
              name="zip"
              label={!isUnstyled && "Zip"}
              placeholder="12345"
              inline
              pattern="\d{5}"
              maxLength={5}
              className={cn(styles.field, styles.inline)}
            />
          </Fieldset>
          <EmailSVGIcon />
          <TextField
            id="contact-email"
            name="email"
            label={!isUnstyled && "Email"}
            placeholder="jsnow@email.com"
          />
        </Form>
      </Phone>
    </FormThemeProvider>
  );
}


// Note: Outside of codesandbox, this can be `@use 'react-md' as *;`
@use 'react-md/dist/everything' as *;

.form {
  align-items: center;
  display: grid;
  grid-row-gap: 1rem;
  grid-template-columns: calc(#{rmd-icon-theme-var(size)} + 1rem) 1fr;
  margin: 1rem;
}

.legend {
  margin-bottom: 1rem;
}

.icon {
  align-self: flex-start;
  margin-top: 3.5rem;
}

.field {
  margin-top: 1rem;
}

.first {
  @include rmd-utils-rtl-auto(margin-right, 0.5rem);
}

.inline {
  width: calc(50% - 0.5rem);

  &:last-child {
    margin-left: 0.5rem;
  }
}


import type { ReactNode, ReactElement } from "react";
import { createContext, useContext, useMemo } from "react";
import createIdGenerator from "./createIdGenerator";

type IdGenerator = ReturnType<typeof createIdGenerator>;

const context = createContext<IdGenerator>(createIdGenerator("autoid"));
const { Provider } = context;

export function useId(id?: string): string {
  const generator = useContext(context);

  return useMemo(() => {
    if (id) {
      return id;
    }

    return generator();
  }, [id, generator]);
}

export interface IdProviderProps {
  prefix?: string;
  children: ReactNode;
}

export function IdProvider({
  children,
  prefix = "autoid",
}: IdProviderProps): ReactElement {
  const value = useMemo(() => createIdGenerator(prefix), [prefix]);

  return <Provider value={value}>{children}</Provider>;
}


import type { ReactElement } from "react";
import { useCallback } from "react";
import type { AppBarNavProps } from "@react-md/app-bar";
import { AppBarNav } from "@react-md/app-bar";
import { Button } from "@react-md/button";
import {
  KeyboardArrowLeftSVGIcon,
  CloseSVGIcon,
} from "@react-md/material-icons";

import { usePhoneContext } from "./context";

interface Props extends Omit<AppBarNavProps, "floating"> {
  floating?: boolean;
}

export default function ClosePhone({
  id,
  children,
  onClick,
  floating,
  ...props
}: Props): ReactElement {
  const { id: phoneId, closePhone } = usePhoneContext();
  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLButtonElement>) => {
      if (onClick) {
        onClick(event);
      }

      closePhone();
    },
    [onClick, closePhone]
  );

  const sharedProps = {
    ...props,
    id: id ?? `${phoneId ?? "demo"}-close`,
    onClick: handleClick,
    children: floating ? <CloseSVGIcon /> : children,
  };

  if (floating) {
    return <Button {...sharedProps} floating="bottom-right" />;
  }

  return <AppBarNav {...sharedProps} />;
}

ClosePhone.defaultProps = {
  "aria-label": "Go back",
  children: <KeyboardArrowLeftSVGIcon />,
  floating: false,
};


import type { ReactElement } from "react";
import { AppBar } from "@react-md/app-bar";

import AppBarTitle from "../AppBarTitle";

import ClosePhone from "./ClosePhone";
import { usePhoneContext } from "./context";
import OptionsAction from "./OptionsAction";
import PhoneAppBar from "./PhoneAppBar";
import SearchAction from "./SearchAction";

export default function DefaultPhoneAppBar(): ReactElement {
  const { title, id } = usePhoneContext();
  return (
    <PhoneAppBar>
      <AppBar component="div" theme="clear">
        <ClosePhone />
        <AppBarTitle id={`${id}-title`}>{title}</AppBarTitle>
        <SearchAction />
        <OptionsAction />
      </AppBar>
    </PhoneAppBar>
  );
}


import type { ReactElement } from "react";
import type { AppBarActionProps } from "@react-md/app-bar";
import { AppBarAction } from "@react-md/app-bar";
import { MoreVertSVGIcon } from "@react-md/material-icons";

import { usePhoneContext } from "./context";

export default function OptionsAction({
  children,
  ...props
}: AppBarActionProps): ReactElement {
  const { id } = usePhoneContext();
  return (
    <AppBarAction {...props} id={`${id}-options`}>
      {children}
    </AppBarAction>
  );
}

OptionsAction.defaultProps = {
  "aria-label": "Options",
  children: <MoreVertSVGIcon />,
  last: true,
};


// Note: Outside of codesandbox, this can be `@use 'react-md' as *;`
@use 'react-md/dist/everything' as *;

$phone-height: 35.5rem;
$phone-width: 20rem;

$fixed-classes: (
  rmd-app-bar--fixed: 1,
  rmd-sheet-overlay: 1,
  rmd-sheet--raised: 2,
  rmd-fab: 1,
);

.phone {
  height: 100%;
}

.fabOffset {
  :global .rmd-fab--tl,
  :global .rmd-fab--tr {
    top: $rmd-app-bar-height + $rmd-button-floating-margin + $rmd-icon-size;
  }
}

.emulated {
  @include rmd-elevation(4);
  @include rmd-theme-dark-elevation(4, true);
  @include rmd-utils-block-centered(1rem);
  @include rmd-theme(background-color, background);
  @include rmd-icon-theme-update-var(size, $rmd-icon-size);
  @include rmd-app-bar-theme-update-var(height, $rmd-app-bar-height);
  @include rmd-app-bar-theme-update-var(
    dense-height,
    $rmd-app-bar-height + $rmd-icon-size
  );
  @include rmd-app-bar-theme-update-var(
    prominent-dense-height,
    $rmd-app-bar-prominent-height + $rmd-icon-size
  );
  @include rmd-sheet-theme-update-var(
    touch-width,
    calc(100% - #{$rmd-sheet-touch-margin})
  );
  @include rmd-typography-theme-update-var(
    line-width,
    $rmd-typography-mobile-max-line-length
  );

  height: $phone-height;
  overflow: hidden;
  position: relative;
  width: $phone-width;

  @each $fixed-class, $z-index in $fixed-classes {
    :global .#{$fixed-class} {
      position: absolute;
      z-index: $z-index;
    }
  }
}

.content {
  @include rmd-utils-scroll;

  height: 100%;
}

.flexColumn {
  display: flex;
  flex-direction: column;
}


import type { ReactElement, ReactNode } from "react";
import { useMemo, useCallback } from "react";
import cn from "classnames";
import {
  APP_BAR_OFFSET_DENSE_CLASSNAME,
  APP_BAR_OFFSET_PROMINENT_DENSE_CLASSNAME,
} from "@react-md/app-bar";
import { useAppSize, useToggle, PhoneOnly } from "@react-md/utils";

import type { ConditionalFullPageDialogProps } from "../ConditionalFullPageDialog";
import ConditionalFullPageDialog from "../ConditionalFullPageDialog";

import { PhoneContext } from "./context";
import DefaultAppBar from "./DefaultAppBar";
import StatusBar from "./StatusBar";
import ClosePhone from "./ClosePhone";

import styles from "./Phone.module.scss";

export interface PhoneConfiguration {
  /**
   * An optional app bar to use within the phone. This should normally contain the `ClosePhone`
   * component so that it can be hidden on mobile devices when the full page dialog is used.
   */
  appBar?: ReactNode;

  /**
   * The title to use for the phone. This will be passed down into the phone context so it can
   * be grabbed anywhere.
   */
  title?: ReactNode;

  /**
   * A class name to apply to the fake phone's content element.
   */
  contentClassName?: string;

  /**
   * Boolean if the phone's content should gain the stacked styles which update
   * the content to be display flex and flex-direction column. THis is great
   * when creating a custom app bar that isn't fixed to the top with position
   * fixed.
   */
  contentStacked?: boolean;

  /**
   * Boolean if the phone's app bar should be prominent. This is used to add the
   * required offset class names to the content element.
   */
  prominent?: boolean;

  /**
   * Boolean if the `children` should always be forced to have the fab offset
   * class even when not being emulated
   */
  fabOffset?: boolean;
}

export interface PhoneProps
  extends PhoneConfiguration,
    Pick<
      ConditionalFullPageDialogProps,
      "disableAppBar" | "disableContent" | "disableFocusOnMount"
    > {
  /**
   * An id for the phone. This is required for accessibility and quickly linking
   * to things.
   */
  id: string;

  /**
   * The content to display. This will conditionally render in a full page
   * dialog.
   */
  children: ReactNode;

  /**
   * A class name to apply to the fake phone's container element.
   */
  className?: string;

  /**
   * An optional function to call when the dialog is closed. This is useful if
   * the demo should be reset when the full page dialog is closed.
   */
  onPhoneClose?: () => void;

  /**
   * Boolean if the `appBar` should only render a status bar.
   */
  statusBar?: boolean;
}

const DEFAULT_APP_BAR = <DefaultAppBar />;

export default function Phone({
  id,
  title = "Example",
  children,
  appBar = DEFAULT_APP_BAR,
  className,
  contentClassName,
  contentStacked: stacked = false,
  prominent,
  disableAppBar = false,
  disableContent = false,
  disableFocusOnMount = false,
  onPhoneClose,
  statusBar = false,
}: PhoneProps): ReactElement {
  const { isPhone } = useAppSize();
  const [visible, enable, disable] = useToggle(false);
  const closePhone = useCallback(() => {
    disable();
    if (onPhoneClose) {
      onPhoneClose();
    }
  }, [onPhoneClose, disable]);

  if (visible && !isPhone) {
    closePhone();
  }

  const value = useMemo(
    () => ({
      id,
      title,
      closePhone,
    }),
    [id, title, closePhone]
  );

  return (
    <PhoneContext.Provider value={value}>
      <ConditionalFullPageDialog
        id={id}
        disabled={!isPhone}
        enable={enable}
        disable={closePhone}
        visible={visible}
        disableAppBar={disableAppBar || statusBar}
        disableContent={disableContent}
        disableFocusOnMount={disableFocusOnMount}
      >
        <div
          id={`${id}-phone`}
          className={cn(
            styles.phone,
            styles.fabOffset,
            {
              [styles.emulated]: !isPhone,
            },
            className
          )}
        >
          {(statusBar && <StatusBar id={id} isPhone={isPhone} />) || appBar}
          <div
            id={`${id}-content`}
            className={cn(
              styles.content,
              {
                [styles.flexColumn]: stacked,
                [APP_BAR_OFFSET_DENSE_CLASSNAME]:
                  !statusBar && appBar && !isPhone,
                [APP_BAR_OFFSET_PROMINENT_DENSE_CLASSNAME]:
                  !statusBar && appBar && !isPhone && prominent,
              },
              contentClassName
            )}
          >
            {children}
            {statusBar && (
              <PhoneOnly>
                <ClosePhone floating />
              </PhoneOnly>
            )}
          </div>
        </div>
      </ConditionalFullPageDialog>
    </PhoneContext.Provider>
  );
}


// Note: Outside of codesandbox, this can be `@use 'react-md' as *;`
@use 'react-md/dist/everything' as *;

.container {
  flex-wrap: wrap;
}

.emulated {
  // updated the shadow to be bottom only
  box-shadow: 0 3px 2px -3px rgba($rmd-black-base, 0.2),
    0 2px 2px -2px rgba($rmd-black-base, 0.14),
    0 1px 5px -1px rgba($rmd-black-base, 0.12);
}


import type { ReactElement } from "react";
import cn from "classnames";
import type { AppBarProps } from "@react-md/app-bar";
import { AppBar } from "@react-md/app-bar";
import { useAppSize } from "@react-md/utils";

import { usePhoneContext } from "./context";
import StatusBar from "./StatusBar";

import styles from "./PhoneAppBar.module.scss";

export default function PhoneAppBar({
  className,
  children,
  height: propHeight,
  ...props
}: AppBarProps): ReactElement {
  const { id } = usePhoneContext();
  const { isPhone } = useAppSize();

  let height = propHeight ?? (isPhone ? "normal" : "dense");
  if (!isPhone && height === "prominent") {
    // I don't have automatic dense spec in css for this since it makes demos
    // difficult, so have to do it in js
    height = "prominent-dense";
  }

  return (
    <AppBar
      {...props}
      id={`${id}-app-bar`}
      className={cn(
        styles.container,
        {
          [styles.emulated]: !isPhone,
        },
        className
      )}
      height={height}
      fixed
      fixedElevation={false}
    >
      <StatusBar id={id} isPhone={isPhone} />
      {children}
    </AppBar>
  );
}

PhoneAppBar.defaultProps = {
  theme: "default",
};


import type { ReactElement } from "react";
import type { AppBarActionProps } from "@react-md/app-bar";
import { AppBarAction } from "@react-md/app-bar";
import { SearchSVGIcon } from "@react-md/material-icons";

import { usePhoneContext } from "./context";

export default function SearchAction({
  children,
  ...props
}: AppBarActionProps): ReactElement {
  const { id } = usePhoneContext();
  return (
    <AppBarAction {...props} id={`${id}-search`}>
      {children}
    </AppBarAction>
  );
}

SearchAction.defaultProps = {
  "aria-label": "Search",
  children: <SearchSVGIcon />,
  first: true,
};


// Note: Outside of codesandbox, this can be `@use 'react-md' as *;`
@use 'react-md/dist/everything' as *;

.container {
  @include rmd-app-bar-theme-update-var(dense-height, rmd-icon-theme-var(size));

  background-color: rgba($rmd-black-base, 0.12);
  width: 100%;
}

.icon {
  @include rmd-icon-dense-theme;

  margin: 0 $rmd-app-bar-lr-margin;
}

.first {
  @include rmd-utils-rtl-auto(margin-left, auto, $rmd-app-bar-lr-margin);
}


import type { ReactElement } from "react";
import cn from "classnames";
import { AppBar } from "@react-md/app-bar";
import {
  NetworkWifiSVGIcon,
  NetworkCellSVGIcon,
  BatteryFullSVGIcon,
} from "@react-md/material-icons";

import styles from "./StatusBar.module.scss";

export interface StatusBarProps {
  id: string;
  isPhone: boolean;
}

export default function StatusBar({
  id,
  isPhone,
}: StatusBarProps): ReactElement | null {
  if (isPhone) {
    return null;
  }

  return (
    <AppBar
      id={`${id}-status-bar`}
      className={styles.container}
      height="dense"
      theme="clear"
      component="div"
    >
      <NetworkWifiSVGIcon
        role="presentation"
        className={cn(styles.icon, styles.first)}
      />
      <NetworkCellSVGIcon role="presentation" className={styles.icon} />
      <BatteryFullSVGIcon role="presentation" className={styles.icon} />
    </AppBar>
  );
}


import type { ReactNode } from "react";
import { createContext, useContext } from "react";

interface PhoneContextType {
  id: string;
  title: ReactNode;
  closePhone: () => void;
}

export const PhoneContext = createContext<PhoneContextType>({
  id: "",
  title: "Example",
  closePhone: () => {
    // do nothing
  },
});

export function usePhoneContext(): PhoneContextType {
  return useContext(PhoneContext);
}


export { default } from "./Phone";
export { default as DefaultAppBar } from "./DefaultAppBar";
export { default as PhoneAppBar } from "./PhoneAppBar";
export { default as ClosePhone } from "./ClosePhone";
export { default as OptionsAction } from "./OptionsAction";
export { default as SearchAction } from "./SearchAction";
export * from "./context";


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


/**
 * An extremely simplified uuid function that is scoped with a specific prefix.
 * This will just always increment the total count at the end of the prefix.
 *
 * ```ts
 * const uuid = createIdGenerator("my-custom-prefix");
 *
 * uuid(); // my-custom-prefix-0
 * uuid(); // my-custom-prefix-1
 * uuid(); // my-custom-prefix-2
 * ```
 *
 * @param prefix - The string prefix to use
 * @returns a function to call to generate a "uuid"
 */
export default function createIdGenerator(prefix: string): () => string {
  const generator = (function* idGenerator() {
    let index = 0;
    while (true) {
      yield `${prefix}-${index}`;
      index += 1;
    }
  })();

  return (): string => generator.next().value;
}


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


export default [
  {
    name: "Alabama",
    abbreviation: "AL",
  },
  {
    name: "Alaska",
    abbreviation: "AK",
  },
  {
    name: "American Samoa",
    abbreviation: "AS",
  },
  {
    name: "Arizona",
    abbreviation: "AZ",
  },
  {
    name: "Arkansas",
    abbreviation: "AR",
  },
  {
    name: "California",
    abbreviation: "CA",
  },
  {
    name: "Colorado",
    abbreviation: "CO",
  },
  {
    name: "Connecticut",
    abbreviation: "CT",
  },
  {
    name: "Delaware",
    abbreviation: "DE",
  },
  {
    name: "District Of Columbia",
    abbreviation: "DC",
  },
  {
    name: "Federated States Of Micronesia",
    abbreviation: "FM",
  },
  {
    name: "Florida",
    abbreviation: "FL",
  },
  {
    name: "Georgia",
    abbreviation: "GA",
  },
  {
    name: "Guam",
    abbreviation: "GU",
  },
  {
    name: "Hawaii",
    abbreviation: "HI",
  },
  {
    name: "Idaho",
    abbreviation: "ID",
  },
  {
    name: "Illinois",
    abbreviation: "IL",
  },
  {
    name: "Indiana",
    abbreviation: "IN",
  },
  {
    name: "Iowa",
    abbreviation: "IA",
  },
  {
    name: "Kansas",
    abbreviation: "KS",
  },
  {
    name: "Kentucky",
    abbreviation: "KY",
  },
  {
    name: "Louisiana",
    abbreviation: "LA",
  },
  {
    name: "Maine",
    abbreviation: "ME",
  },
  {
    name: "Marshall Islands",
    abbreviation: "MH",
  },
  {
    name: "Maryland",
    abbreviation: "MD",
  },
  {
    name: "Massachusetts",
    abbreviation: "MA",
  },
  {
    name: "Michigan",
    abbreviation: "MI",
  },
  {
    name: "Minnesota",
    abbreviation: "MN",
  },
  {
    name: "Mississippi",
    abbreviation: "MS",
  },
  {
    name: "Missouri",
    abbreviation: "MO",
  },
  {
    name: "Montana",
    abbreviation: "MT",
  },
  {
    name: "Nebraska",
    abbreviation: "NE",
  },
  {
    name: "Nevada",
    abbreviation: "NV",
  },
  {
    name: "New Hampshire",
    abbreviation: "NH",
  },
  {
    name: "New Jersey",
    abbreviation: "NJ",
  },
  {
    name: "New Mexico",
    abbreviation: "NM",
  },
  {
    name: "New York",
    abbreviation: "NY",
  },
  {
    name: "North Carolina",
    abbreviation: "NC",
  },
  {
    name: "North Dakota",
    abbreviation: "ND",
  },
  {
    name: "Northern Mariana Islands",
    abbreviation: "MP",
  },
  {
    name: "Ohio",
    abbreviation: "OH",
  },
  {
    name: "Oklahoma",
    abbreviation: "OK",
  },
  {
    name: "Oregon",
    abbreviation: "OR",
  },
  {
    name: "Pennsylvania",
    abbreviation: "PA",
  },
  {
    name: "Puerto Rico",
    abbreviation: "PR",
  },
  {
    name: "Rhode Island",
    abbreviation: "RI",
  },
  {
    name: "South Carolina",
    abbreviation: "SC",
  },
  {
    name: "South Dakota",
    abbreviation: "SD",
  },
  {
    name: "Tennessee",
    abbreviation: "TN",
  },
  {
    name: "Texas",
    abbreviation: "TX",
  },
  {
    name: "Utah",
    abbreviation: "UT",
  },
  {
    name: "Vermont",
    abbreviation: "VT",
  },
  {
    name: "Virgin Islands",
    abbreviation: "VI",
  },
  {
    name: "Virginia",
    abbreviation: "VA",
  },
  {
    name: "Washington",
    abbreviation: "WA",
  },
  {
    name: "West Virginia",
    abbreviation: "WV",
  },
  {
    name: "Wisconsin",
    abbreviation: "WI",
  },
  {
    name: "Wyoming",
    abbreviation: "WY",
  },
] as const;


@use "./everything" as *;

@include react-md-utils;
