import * as React from 'react'

export function ErrorIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="red">
      <rect width="13.9361" height="2.9863" transform="matrix(0.704896 0.709311 -0.704896 0.709311 4.10498 2)"></rect>
      <rect width="2.9863" height="13.9361" transform="matrix(0.704896 0.709311 -0.704896 0.709311 11.8938 2)"></rect>
    </svg>
  )
}

export function SuccessIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="green" xmlns="http://www.w3.org/2000/svg">
      <rect
        width="7.4659"
        height="3.26633"
        transform="matrix(0.69978 0.714359 -0.69978 0.714359 2.28577 6.99997)"
      ></rect>
      <rect width="3.26633" height="14.9318" transform="matrix(0.69978 0.714359 -0.69978 0.714359 13.7142 2)"></rect>
    </svg>
  )
}

export function ColorIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M14 16C14 17.77 13.23 19.37 12 20.46C10.9053 21.4541 9.47871 22.0033 8 22C4.69 22 2 19.31 2 16C2 13.24 3.88 10.9 6.42 10.21C6.76425 11.0756 7.30469 11.8494 7.9988 12.4706C8.6929 13.0918 9.52171 13.5435 10.42 13.79C10.92 13.93 11.45 14 12 14C12.55 14 13.08 13.93 13.58 13.79C13.85 14.47 14 15.22 14 16Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M18 8C18.0016 9.3166 17.5695 10.5971 16.7706 11.6436C15.9717 12.6901 14.8504 13.4444 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C9.14956 13.4444 8.02827 12.6901 7.22937 11.6436C6.43047 10.5971 5.99843 9.3166 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M22 16C22 19.31 19.31 22 16 22C14.5213 22.0033 13.0947 21.4541 12 20.46C13.23 19.37 14 17.77 14 16C14 15.22 13.85 14.47 13.58 13.79C15.41 13.29 16.89 11.95 17.58 10.21C20.12 10.9 22 13.24 22 16Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

export function TextStylesIcon() {
  return (
    <svg width="48" height="1em" viewBox="0 0 48 30">
      <path
        d="M0 29.16H4.56L6.96 22.36H19.88L22.28 29.16H26.84L16.48 0H10.36L0 29.16ZM8 18.96L11.28 9.96L13.32 4H13.56L15.6 9.96L18.8 18.96H8Z"
        fill="currentColor"
      />
      <path
        d="M35.7959 29.52C39.3559 29.52 41.9959 27.68 42.9959 24.96H43.2359V29.16H47.3559V8H43.3959L43.2359 12.16H42.9959C41.9959 9.44 39.3559 7.64 35.7959 7.64C30.6359 7.64 27.1559 11.48 27.1559 18.56C27.1559 25.64 30.6359 29.52 35.7959 29.52ZM37.2359 26.12C33.7159 26.12 31.3959 23.52 31.3959 18.56C31.3959 13.56 33.7159 11 37.2359 11C41.1559 11 43.1959 14.12 43.1959 17.36V19.76C43.1959 23.04 41.1559 26.12 37.2359 26.12Z"
        fill="currentColor"
      />
    </svg>
  )
}

export function LayerStylesIcon() {
  return (
    <svg width="1em" height="1em" viewBox="0 0 24 24">
      <title>paint-brush</title>
      <g
        strokeLinecap="square"
        strokeLinejoin="miter"
        strokeWidth="2"
        fill="none"
        stroke="currentColor"
        strokeMiterlimit="10"
      >
        <polyline
          points="15.021,18.879 22.092,11.808 19.971,9.686 17.142,9.686 17.142,6.858 12.192,1.908 5.121,8.979 "
          strokeLinecap="butt"
          stroke="currentColor"
        />
        <path d="M4.414,9.686 c-1.202,1.202-1.202,3.041,0,4.243l1.414,1.414l-4.172,4.172c-0.707,0.707-0.849,1.838-0.283,2.687 c0.778,1.061,2.192,1.061,3.041,0.212l4.243-4.243l1.414,1.414c1.202,1.202,3.041,1.202,4.243,0l0.707-0.707L5.121,8.979 L4.414,9.686z"></path>
      </g>
    </svg>
  )
}

export function TypographyIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M2.67 7.17V5.35C2.67 4.2 3.6 3.28 4.74 3.28H19.26C20.41 3.28 21.33 4.21 21.33 5.35V7.17M12 20.72V4.11M8.06 20.72H15.94"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

export function SpacingIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M3 22H21M3 2H21M12 6V18M14.83 7.72L12 4.89L9.17 7.72M14.83 15.89L12 18.72L9.17 15.89"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}
export function FontWeightIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M4.88 4.5C4.88 3.4 5.78 2.5 6.88 2.5H12C14.62 2.5 16.75 4.63 16.75 7.25C16.75 9.87 14.62 12 12 12H4.88V4.5ZM4.88 12H14.38C17 12 19.13 14.13 19.13 16.75C19.13 19.37 17 21.5 14.38 21.5H6.88C5.78 21.5 4.88 20.6 4.88 19.5V12V12Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}
export function SizesIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M11.47 6H16.47M11.47 18H15.47M11.47 13.95L16.47 14M11.47 10H14.47M8.44 7H2.53M21.47 19V5C21.47 3 20.47 2 18.47 2H14.47C12.47 2 11.47 3 11.47 5V19C11.47 21 12.47 22 14.47 22H18.47C20.47 22 21.47 21 21.47 19ZM5.49 2C3.86 2 2.53 3.33 2.53 4.95V17.91C2.53 18.36 2.72 19.04 2.95 19.43L3.77 20.79C4.71 22.36 6.26 22.36 7.2 20.79L8.02 19.43C8.25 19.04 8.44 18.36 8.44 17.91V4.95C8.44 3.33 7.11 2 5.49 2Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  )
}

export function LetterSpacingIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M7 10.74V13.94M12 9V15.68M17 10.74V13.94M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}
export function FontSizesIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M1.99001 5.93001V4.42001C1.99001 3.40001 2.82001 2.57001 3.84001 2.57001H16.76C17.78 2.57001 18.61 3.40001 18.61 4.42001V5.93001M10.3 18.1V3.32001M6.90001 18.1H12.48M13.68 10.34H20.69C21.42 10.34 22.01 10.93 22.01 11.66V12.46M16.08 21.43V10.87M13.94 21.43H18.22"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}
export function LineHeightIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M6 6.25V8.25M10 6.25V8.25M6 16V18M10 16V18M14 7.25H18M14 17H18M2 12H22M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}
export function ColorContrastIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M10 4.5V18C10 19.08 9.56 20.07 8.86 20.79L8.82 20.83C8.73 20.92 8.63 21.01 8.54 21.08C8.24 21.34 7.9 21.54 7.55 21.68C7.44 21.73 7.33 21.77 7.22 21.81C6.83 21.94 6.41 22 6 22C5.73 22 5.46 21.97 5.2 21.92C5.07 21.89 4.94 21.86 4.81 21.82C4.65 21.77 4.5 21.72 4.35 21.65C4.35 21.64 4.35 21.64 4.34 21.65C4.06 21.51 3.79 21.35 3.54 21.16L3.53 21.15C3.4 21.05 3.28 20.95 3.17 20.83C3.06 20.71 2.95 20.59 2.84 20.46C2.65 20.21 2.49 19.94 2.35 19.66C2.36 19.65 2.36 19.65 2.35 19.65C2.35 19.65 2.35 19.64 2.34 19.63C2.28 19.49 2.23 19.34 2.18 19.19C2.14199 19.0612 2.10863 18.9312 2.08 18.8C2.03 18.54 2 18.27 2 18V4.5C2 3 3 2 4.5 2H7.5C9 2 10 3 10 4.5Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M22 16.5V19.5C22 21 21 22 19.5 22H6C6.41 22 6.83 21.94 7.22 21.81C7.33 21.77 7.44 21.73 7.55 21.68C7.9 21.54 8.24 21.34 8.54 21.08C8.63 21.01 8.73 20.92 8.82 20.83L8.86 20.79L15.66 14H19.5C21 14 22 15 22 16.5V16.5ZM4.81 21.82C4.21 21.64 3.64 21.31 3.17 20.83C2.69 20.36 2.36 19.79 2.18 19.19C2.37413 19.8078 2.71464 20.3695 3.17254 20.8275C3.63045 21.2854 4.1922 21.6259 4.81 21.82V21.82Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M18.37 11.29L15.66 14L8.86 20.79C9.56 20.07 10 19.08 10 18V8.34001L12.71 5.63001C13.77 4.57001 15.19 4.57001 16.25 5.63001L18.37 7.75001C19.43 8.81001 19.43 10.23 18.37 11.29ZM6 19C6.26522 19 6.51957 18.8947 6.70711 18.7071C6.89464 18.5196 7 18.2652 7 18C7 17.7348 6.89464 17.4804 6.70711 17.2929C6.51957 17.1054 6.26522 17 6 17C5.73478 17 5.48043 17.1054 5.29289 17.2929C5.10536 17.4804 5 17.7348 5 18C5 18.2652 5.10536 18.5196 5.29289 18.7071C5.48043 18.8947 5.73478 19 6 19Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

export function ChevronUpIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      width="12"
      height="12"
    >
      <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
    </svg>
  )
}

export function ChevronDownIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      width="12"
      height="12"
    >
      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
    </svg>
  )
}

export function XMarkIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      width="12"
      height="12"
      {...props}
    >
      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
    </svg>
  )
}
