@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/components/Text/Text.tsx

@@ -1,882 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import type {ColorTypes} from '../../types/typography';
-import {TEXT_COLORS} from '../../types/typography';
-import classify from '../../utils/classify';
-import {escapeRegExp} from '../../utils/string';
-
-import css from '../../styles/typography.module.css';
-
-
-export type TextProps = {
-  color?: ColorTypes;
-  children?: React.ReactNode;
-  className?: string;
-  highlightedTextClassName?: string;
-  highlightString?: string | string[];
-  caseSensitiveHighlighting?: boolean;
-  highlightWithBackground?: boolean;
-};
-
-export type HighlightTextProps = {
-  text: string;
-  highlight: string | string[];
-  highlightClassName?: string;
-  caseSensitiveHighlighting?: boolean;
-  highlightWithBackground?: boolean;
-};
-
-const HighlightText: Flow.AbstractComponent<HighlightTextProps, HTMLSpanElement> = React.forwardRef<HTMLSpanElement, HighlightTextProps>((
-  {
-    text,
-    highlight,
-    highlightClassName,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-  }: HighlightTextProps,
-  ref,
-) => {
-  // Split text on highlight term, include term itself into parts, ignore case
-  // Convert highlight to an array if it's not already
-// @ts-ignore - TS2769 - No overload matches this call.
-  const highlightArray = [].concat(highlight).filter((item) => item !== '');
-  const highlights = highlightArray.map(escapeRegExp).join('|');
-
-  const parts = text
-    .split(
-      new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi'),
-    )
-    .filter((part) => part !== '');
-
-  return (
-    <span ref={ref}>
-      {parts.map((part, idx) => {
-        const isHighlighted = highlightArray.some((highlightTerm) =>
-          caseSensitiveHighlighting
-            ? escapeRegExp(part).includes(escapeRegExp(highlightTerm))
-            : escapeRegExp(part)
-              .toLowerCase()
-              .includes(escapeRegExp(highlightTerm).toLowerCase()),
-        );
-
-        return isHighlighted ? (
-          <span
-            // eslint-disable-next-line react/no-array-index-key
-            key={idx}
-            className={classify(
-              css.highlightText,
-              {
-                [css.bgHighlighting]: highlightWithBackground,
-              },
-              highlightClassName,
-            )}
-          >
-            {part}
-          </span>
-        ) : (
-          part
-        );
-      })}
-    </span>
-  );
-});
-
-export const JumboLarge: Flow.AbstractComponent<TextProps, HTMLSpanElement> =
-  React.forwardRef<HTMLSpanElement, TextProps>((
-    {
-      color = TEXT_COLORS.primary,
-      children,
-      className,
-      highlightedTextClassName,
-      highlightString,
-      caseSensitiveHighlighting,
-      highlightWithBackground,
-      ...props
-    }: TextProps,
-    ref,
-  ) => (<span
-    {...props}
-    className={classify(css.jumboLarge, css[color], className)}
-    ref={ref}
-  >
-    {!!highlightString?.length && typeof children === 'string' ? (
-      <HighlightText
-        text={children}
-        highlight={highlightString}
-        caseSensitiveHighlighting={caseSensitiveHighlighting}
-        highlightClassName={highlightedTextClassName}
-        highlightWithBackground={highlightWithBackground}
-      />
-    ) : (
-      children
-    )}
-  </span>));
-
-export const JumboMedium: Flow.AbstractComponent<TextProps, HTMLSpanElement> =
-  React.forwardRef<HTMLSpanElement, TextProps>((
-    {
-      color = TEXT_COLORS.primary,
-      children,
-      className,
-      highlightedTextClassName,
-      highlightString,
-      caseSensitiveHighlighting,
-      highlightWithBackground,
-      ...props
-    }: TextProps,
-    ref,
-  ) => (<span
-    {...props}
-    className={classify(css.jumboMedium, css[color], className)}
-    ref={ref}
-  >
-    {!!highlightString?.length && typeof children === 'string' ? (
-      <HighlightText
-        text={children}
-        highlight={highlightString}
-        caseSensitiveHighlighting={caseSensitiveHighlighting}
-        highlightClassName={highlightedTextClassName}
-        highlightWithBackground={highlightWithBackground}
-      />
-    ) : (
-      children
-    )}
-  </span>));
-
-export const JumboSmall: Flow.AbstractComponent<TextProps, HTMLSpanElement> =
-  React.forwardRef<HTMLSpanElement, TextProps>((
-    {
-      color = TEXT_COLORS.primary,
-      children,
-      className,
-      highlightedTextClassName,
-      highlightString,
-      caseSensitiveHighlighting,
-      highlightWithBackground,
-      ...props
-    }: TextProps,
-    ref,
-  ) => (<span
-    {...props}
-    className={classify(css.jumboSmall, css[color], className)}
-    ref={ref}
-  >
-    {!!highlightString?.length && typeof children === 'string' ? (
-      <HighlightText
-        text={children}
-        highlight={highlightString}
-        caseSensitiveHighlighting={caseSensitiveHighlighting}
-        highlightClassName={highlightedTextClassName}
-        highlightWithBackground={highlightWithBackground}
-      />
-    ) : (
-      children
-    )}
-  </span>));
-
-export const TitleMedium: Flow.AbstractComponent<TextProps, HTMLHeadingElement> = React.forwardRef<HTMLHeadingElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<h1
-  {...props}
-  className={classify(css.titleMedium, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</h1>));
-
-export const SubTitleLarge: Flow.AbstractComponent<TextProps, HTMLHeadingElement> = React.forwardRef<HTMLHeadingElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<h2
-  {...props}
-  className={classify(css.subTitleLarge, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</h2>));
-
-export const SubTitleMedium: Flow.AbstractComponent<TextProps, HTMLHeadingElement> = React.forwardRef<HTMLHeadingElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<h3
-  {...props}
-  className={classify(css.subTitleMedium, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</h3>));
-
-export const SubTitleSmall: Flow.AbstractComponent<TextProps, HTMLHeadingElement> = React.forwardRef<HTMLHeadingElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<h4
-  {...props}
-  className={classify(css.subTitleSmall, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</h4>));
-
-export const SubTitleExtraSmall: Flow.AbstractComponent<TextProps, HTMLHeadingElement> = React.forwardRef<HTMLHeadingElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<h5
-  {...props}
-  className={classify(css.subTitleExtraSmall, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</h5>));
-
-export const ButtonTextMedium: Flow.AbstractComponent<TextProps, HTMLSpanElement> = React.forwardRef<HTMLSpanElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<span
-  {...props}
-  className={classify(css.buttonTextMedium, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</span>));
-
-export const ButtonTextSmall: Flow.AbstractComponent<TextProps, HTMLSpanElement> = React.forwardRef<HTMLSpanElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<span
-  {...props}
-  className={classify(css.buttonTextSmall, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</span>));
-
-export const MenuTextMedium: Flow.AbstractComponent<TextProps, HTMLSpanElement> = React.forwardRef<HTMLSpanElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<span
-  {...props}
-  className={classify(css.menuTextMedium, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</span>));
-
-export const MenuTextSmall: Flow.AbstractComponent<TextProps, HTMLSpanElement> = React.forwardRef<HTMLSpanElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<span
-  {...props}
-  className={classify(css.menuTextSmall, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</span>));
-
-export const ButtonTextExtraSmall: Flow.AbstractComponent<TextProps, HTMLSpanElement> = React.forwardRef<HTMLSpanElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<span
-  {...props}
-  className={classify(css.buttonTextExtraSmall, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</span>));
-
-export const ButtonTextMediumUnderline: Flow.AbstractComponent<TextProps, HTMLSpanElement> = React.forwardRef<HTMLSpanElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<span
-  {...props}
-  className={classify(
-    css.buttonTextMedium,
-    css.underline,
-    css[color],
-    className,
-  )}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</span>));
-
-export const ButtonTextSmallUnderline: Flow.AbstractComponent<TextProps, HTMLSpanElement> = React.forwardRef<HTMLSpanElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<span
-  {...props}
-  className={classify(
-    css.buttonTextSmall,
-    css.underline,
-    css[color],
-    className,
-  )}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</span>));
-
-export const ButtonTextExtraSmallUnderline: Flow.AbstractComponent<TextProps, HTMLSpanElement> = React.forwardRef<HTMLSpanElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<span
-  {...props}
-  className={classify(
-    css.buttonTextExtraSmall,
-    css.underline,
-    css[color],
-    className,
-  )}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</span>));
-
-export const FormInputMedium: Flow.AbstractComponent<TextProps, HTMLParagraphElement> = React.forwardRef<HTMLParagraphElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<p
-  {...props}
-  className={classify(css.formInputMedium, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</p>));
-
-export const FormInputSmall: Flow.AbstractComponent<TextProps, HTMLParagraphElement> = React.forwardRef<HTMLParagraphElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<p
-  {...props}
-  className={classify(css.formInputSmall, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</p>));
-
-export const BodyLarge: Flow.AbstractComponent<TextProps, HTMLParagraphElement> = React.forwardRef<HTMLParagraphElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<p
-  {...props}
-  className={classify(css.bodyLarge, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</p>));
-
-export const BodyMedium: Flow.AbstractComponent<TextProps, HTMLParagraphElement> = React.forwardRef<HTMLParagraphElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<p
-  {...props}
-  className={classify(css.bodyMedium, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</p>));
-
-export const BodySmall: Flow.AbstractComponent<TextProps, HTMLParagraphElement> = React.forwardRef<HTMLParagraphElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<p
-  {...props}
-  className={classify(css.bodySmall, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</p>));
-
-export const BodyLargeBold: Flow.AbstractComponent<TextProps, HTMLParagraphElement> = React.forwardRef<HTMLParagraphElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<p
-  {...props}
-  className={classify(css.bodyLarge, css.bold, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</p>));
-
-export const BodyMediumBold: Flow.AbstractComponent<TextProps, HTMLParagraphElement> = React.forwardRef<HTMLParagraphElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<p
-  {...props}
-  className={classify(css.bodyMedium, css.bold, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</p>));
-
-export const BodySmallBold: Flow.AbstractComponent<TextProps, HTMLParagraphElement> = React.forwardRef<HTMLParagraphElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<p
-  {...props}
-  className={classify(css.bodySmall, css.bold, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</p>));
-
-export const FormLabelMedium: Flow.AbstractComponent<TextProps, HTMLSpanElement> = React.forwardRef<HTMLSpanElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<span
-  {...props}
-  className={classify(css.formLabelMedium, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</span>));
-
-export const FormLabelSmall: Flow.AbstractComponent<TextProps, HTMLSpanElement> = React.forwardRef<HTMLSpanElement, TextProps>((
-  {
-    color = TEXT_COLORS.primary,
-    children,
-    className,
-    highlightedTextClassName,
-    highlightString,
-    caseSensitiveHighlighting,
-    highlightWithBackground,
-    ...props
-  }: TextProps,
-  ref,
-) => (<span
-  {...props}
-  className={classify(css.formLabelSmall, css[color], className)}
-  ref={ref}
->
-  {!!highlightString?.length && typeof children === 'string' ? (
-    <HighlightText
-      text={children}
-      highlight={highlightString}
-      caseSensitiveHighlighting={caseSensitiveHighlighting}
-      highlightClassName={highlightedTextClassName}
-      highlightWithBackground={highlightWithBackground}
-    />
-  ) : (
-    children
-  )}
-</span>));