/* eslint-disable react/jsx-sort-props */
import * as React from 'react';
import * as vars from '../../styles/variables';
import AccessibleSVG, { SVGProps } from '../../components/accessible-svg/AccessibleSVG';

/**
 * This is an auto-generated component and should not be edited
 * manually in contributor pull requests.
 *
 * If you have problems with this component:
 * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
 *
 * If there are missing features in this component:
 * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
 */

const CircleCloseButton24 = (props: SVGProps) => (
    <AccessibleSVG width={24} height={24} viewBox="0 0 24 24" {...props}>
        <g fill={vars.bdlGray} fillRule="evenodd">
            <rect width={24} height={24} fillOpacity={0.08} rx={12} />
            <path
                fillRule="nonzero"
                d="M16.67 16.667c.434-.435.44-1.169.017-1.598l-3.075-3.067 3.075-3.073c.423-.423.417-1.158-.018-1.598-.44-.435-1.176-.441-1.599-.018l-3.074 3.073L8.92 7.307c-.4-.4-1.164-.417-1.6.018-.434.44-.417 1.198-.017 1.598l3.08 3.079-3.08 3.073c-.4.405-.417 1.163.018 1.598.435.435 1.2.417 1.599.018l3.075-3.073 3.074 3.067c.423.423 1.164.423 1.6-.018z"
            />
        </g>
    </AccessibleSVG>
);

export default CircleCloseButton24;