// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-nocheck
import type { VariantProps } from 'class-variance-authority'
import * as React from 'react'
import type { SVGProps } from 'react'
import { iconVariants } from '../../iconVariants'

type Color = VariantProps<typeof iconVariants>['color'] | undefined

export const SvgPhoneticText = ({
  color,
  className,
  ...props
}: SVGProps<SVGSVGElement> & {
  color?: Color
}) =>
  React.cloneElement(
    <svg
      width={16}
      height={16}
      viewBox="0 0 18 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M9.00008 8.00008H16.3334V5.33341C16.3334 3.86065 15.1395 2.66675 13.6667 2.66675H11.6667C10.194 2.66675 9.00008 3.86065 9.00008 5.33341V8.00008ZM9.00008 8.00008V11.3334M9.00008 8.00008V4.66675C9.00008 3.56218 8.10468 2.66675 7.00008 2.66675H3.66675C2.56218 2.66675 1.66675 3.56218 1.66675 4.66675V5.33341M9.00008 8.00008H3.66675C2.56218 8.00008 1.66675 8.89548 1.66675 10.0001V11.3334C1.66675 12.438 2.56218 13.3334 3.66675 13.3334H7.00008C8.10468 13.3334 9.00008 12.438 9.00008 11.3334M9.00008 11.3334C9.00008 12.438 9.89548 13.3334 11.0001 13.3334H14.3334C15.438 13.3334 16.3334 12.438 16.3334 11.3334V10.6667"
        stroke="currentColor"
        vectorEffect="non-scaling-stroke"
      />
    </svg>,
    {
      className: iconVariants({
        color,
        className,
      }),
      ...props,
    },
  )
