// block category icon.
export const CategoryIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none">
		<path
			fill="#1E67D8"
			d="M15.266 1.485H8.873a.737.737 0 0 0-.733.733v3.284a.737.737 0 0 0 .733.734h.56v1.292a.238.238 0 0 0 .139.21c.035 0 .07.035.105.035a.182.182 0 0 0 .14-.07l1.711-1.467h3.738A.737.737 0 0 0 16 5.502V2.218a.761.761 0 0 0-.734-.733Zm-4.576 2.27-.35.35.07.454a.13.13 0 0 1-.034.105h-.105l-.42-.21-.384.175h-.105a.13.13 0 0 1-.035-.105l.07-.454-.35-.35a.13.13 0 0 1-.034-.104c.035 0 .07-.035.105-.035l.489-.07.21-.42c0-.034.034-.034.07-.034a.122.122 0 0 1 .07.035l.209.419.489.07a.077.077 0 0 1 .07.07.13.13 0 0 1-.035.104Zm2.166 0-.35.35.07.454a.13.13 0 0 1-.035.105h-.104l-.42-.21-.384.175h-.105a.129.129 0 0 1-.035-.105l.07-.454-.35-.35a.13.13 0 0 1-.034-.104.077.077 0 0 1 .07-.07l.489-.07.21-.42c0-.034.034-.034.07-.034a.122.122 0 0 1 .07.035l.209.419.524.105a.077.077 0 0 1 .07.07.128.128 0 0 1-.035.104Zm2.166 0-.35.35.07.454a.131.131 0 0 1-.035.105h-.105l-.419-.21-.384.175h-.105a.129.129 0 0 1-.035-.105l.07-.454-.35-.35a.129.129 0 0 1-.034-.104.077.077 0 0 1 .07-.07l.489-.07.21-.42c0-.034.034-.034.07-.034a.122.122 0 0 1 .07.035l.209.419.524.105a.077.077 0 0 1 .07.07.131.131 0 0 1-.035.104ZM5.1 3.755c-1.572 0-2.445.804-2.41 2.376.035 2.131.943 3.424 2.41 3.424 0 0 2.41.104 2.41-3.424 0-1.572-.803-2.376-2.41-2.376ZM9.362 11.162l-2.41-.944-.559-.489a.38.38 0 0 0-.524.035l-.769.769-.803-.769a.42.42 0 0 0-.524-.035l-.524.49-2.41.978c-.77.314-.77 3.074-.839 3.318h10.236c-.07-.28-.07-3.039-.874-3.353Z"
		/>
	</svg>
);
export const ProCategoryIcon = () => (
	<svg width={18} height={18} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M0 9a9 9 0 1 1 18 0A9 9 0 0 1 0 9" fill="#4ab866" fillOpacity={0.1} />
		<path d="M9 .5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Z" stroke="#4ab866" strokeOpacity={0.6} />
		<g clipPath="url(#ProCategoryIcona)" fill="#4ab866">
			<path
				d="M10.386 7.761a.84.84 0 0 0 .557.428.78.78 0 0 0 .69-.196l1.46-1.34-.473 3.768H5.39l-.475-3.767 1.462 1.34c.19.174.443.246.69.195a.84.84 0 0 0 .557-.428l1.38-2.533z"
				stroke="#4ab866"
				strokeWidth={0.847}
			/>
			<path d="M12.577 13.282H5.432c-.23 0-.416-.228-.416-.508v-1.117h7.977v1.117c0 .28-.186.508-.416.508" />
		</g>
		<defs>
			<clipPath id="ProCategoryIcona">
				<path fill="#fff" d="M4 4h10v10H4z" />
			</clipPath>
		</defs>
	</svg>
);
//component Reset Icon.
export const ResetIcon = () => (
	<svg width={14} height={14} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
		<g clipPath="url(#ResetIcona)">
			<path
				d="M2.266 4.116A5.543 5.543 0 0 1 12.491 7.75a5.542 5.542 0 0 1-10.825.759m.357-6.016.023 1.873 1.802-.152"
				stroke="#949494"
				fill="#fff"
				strokeWidth={1.75}
				strokeLinecap="round"
				strokeLinejoin="round"
			/>
		</g>
		<defs>
			<clipPath id="ResetIcona">
				<path fill="#fff" d="M0 0h14v14H0z" />
			</clipPath>
		</defs>
	</svg>
);

export const BorderIcon = ({ color = "#2F2F2F" }) => (
	<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M11.8337 1.25H5.47697C5.21957 0.521755 4.52505 0 3.70866 0C2.89227 0 2.19775 0.521755 1.94035 1.25H0.166992V2.5H1.94035C2.19775 3.22825 2.89227 3.75 3.70866 3.75C4.52505 3.75 5.21957 3.22825 5.47697 2.5H11.8337V1.25Z"
			fill={color}
		/>
		<path
			d="M11.8337 7.5H10.0603C9.8029 6.77175 9.10838 6.25 8.29199 6.25C7.47561 6.25 6.78108 6.77175 6.52368 7.5H0.166992V8.75H6.52368C6.78108 9.47824 7.47561 10 8.29199 10C9.10838 10 9.8029 9.47824 10.0603 8.75H11.8337V7.5Z"
			fill={color}
		/>
	</svg>
);
// alignment icons.
export const AlignLeft = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none">
		<path fill="#2F2F2F" stroke="#757575" d="M8.4 14.8v.5H.5v-.5h7.9ZM.5 1.2V.7h7.9v.5H.5Zm15 7H.5v-.5h15v.5Z" />
	</svg>
);
export const AlignCenter = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none">
		<path
			fill="#2F2F2F"
			stroke="#757575"
			d="M12.4 1.2v.5H3.6v-.5h8.8ZM15.5 8H.5v-.5h15v.5ZM3.6 14.8v.5h8.8v-.5H3.6Z"
		/>
	</svg>
);
export const AlignRight = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={80} height={24} fill="none">
		<path
			fill="#2F2F2F"
			stroke="#757575"
			d="M47.5 18.8v.5h-7.9v-.5h7.9Zm0-13.6h-7.9v-.5h7.9v.5Zm0 6.6v.5h-15v-.5h15Z"
		/>
	</svg>
);

// pagination style icons.
export const Dots = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={44} height={24} fill="none" viewBox="0 0 44 24">
		<path fill="#58707F" d="M4 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
		<path
			fill="#BBC2C7"
			d="M16 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM28 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM40 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
		/>
	</svg>
);
export const DynamicDots = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={58} height={24} fill="none" viewBox="0 0 58 24">
		<path fill="#BBC2C7" d="M3 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM14.5 16.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z" />
		<path fill="#58707F" d="M29 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" />
		<path fill="#BBC2C7" d="M43.5 16.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM55 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
	</svg>
);
export const Strokes = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={54} height={24} fill="none" viewBox="0 0 54 24">
		<circle cx={2.5} cy={12} r={2.5} fill="#BBC2C7" />
		<rect width={18} height={5} x={9} y={9.5} fill="#58707F" rx={2.5} />
		<circle cx={33.5} cy={12} r={2.5} fill="#BBC2C7" />
		<circle cx={42.5} cy={12} r={2.5} fill="#BBC2C7" />
		<circle cx={51.5} cy={12} r={2.5} fill="#BBC2C7" />
	</svg>
);
export const Scrollbar = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={62} height={24} fill="none" viewBox="0 0 62 24">
		<path fill="#BBC2C7" d="M60 10H2a2 2 0 1 0 0 4h58a2 2 0 1 0 0-4Z" />
		<path fill="#58707F" d="M28 10H14a2 2 0 1 0 0 4h14a2 2 0 1 0 0-4Z" />
	</svg>
);
export const Stepper = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={84} height={24} fill="none" viewBox="0 0 84 24">
		<rect width={18} height={4} y={10} fill="#BBC2C7" rx={2} />
		<rect width={18} height={4} x={22} y={10} fill="#58707F" rx={2} />
		<rect width={18} height={4} x={44} y={10} fill="#BBC2C7" rx={2} />
		<rect width={18} height={4} x={66} y={10} fill="#BBC2C7" rx={2} />
	</svg>
);
export const Fraction = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={20} height={24} fill="none" viewBox="0 0 20 24">
		<circle cx={10} cy={12} r={10} fill="#58707F" />
		<path
			fill="#fff"
			d="M6.664 8.98v5.687H5.347v-4.203l-1.297.379v-1l2.493-.864h.12Zm4.144 0-1.945 6.175h-.938L9.871 8.98h.937Zm3.36-.083h.21v1.036h-.07c-.252 0-.49.035-.71.105-.22.07-.412.177-.579.32-.164.141-.293.32-.387.536a1.95 1.95 0 0 0-.136.761v.996c0 .183.015.341.046.477a.949.949 0 0 0 .141.336c.063.088.14.155.23.2a.751.751 0 0 0 .325.066.578.578 0 0 0 .281-.07.674.674 0 0 0 .223-.2.93.93 0 0 0 .148-.3c.034-.115.051-.24.051-.376 0-.146-.018-.277-.055-.394a.849.849 0 0 0-.156-.297.68.68 0 0 0-.539-.254.77.77 0 0 0-.426.113.732.732 0 0 0-.348.63l-.316-.321a1.214 1.214 0 0 1 .09-.485 1.47 1.47 0 0 1 .781-.813 1.63 1.63 0 0 1 .68-.132c.26 0 .49.05.687.149.2.098.369.236.504.414.138.177.242.384.313.62.07.238.105.494.105.77 0 .279-.05.538-.148.777a1.857 1.857 0 0 1-1.04 1.036c-.241.099-.508.148-.8.148-.3 0-.577-.05-.832-.152a1.96 1.96 0 0 1-.664-.45 2.123 2.123 0 0 1-.441-.722 2.787 2.787 0 0 1-.157-.965v-.48c0-.487.08-.921.239-1.301.161-.38.38-.702.656-.965.278-.266.597-.467.957-.606.36-.138.738-.207 1.136-.207Z"
		/>
	</svg>
);
export const Numbers = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={66} height={24} fill="none" viewBox="0 0 66 24">
		<rect width={10} height={10} y={7} fill="#58707F" rx={5} />
		<path fill="#fff" d="M6.306 9.156v5.687H4.99V10.64l-1.297.38v-1l2.492-.864h.121Z" />
		<rect width={10} height={10} x={14} y={7} fill="#58707F" rx={5} />
		<path
			fill="#fff"
			d="M21.041 13.868v1.016h-3.969v-.859l1.828-1.922c.161-.185.292-.35.391-.496.087-.125.16-.26.215-.402a.899.899 0 0 0 .07-.324c0-.164-.025-.3-.074-.41a.548.548 0 0 0-.21-.254.636.636 0 0 0-.34-.086.563.563 0 0 0-.356.117.777.777 0 0 0-.238.32c-.056.146-.084.301-.082.457h-1.32a1.861 1.861 0 0 1 .254-.957 1.9 1.9 0 0 1 .715-.69 2.09 2.09 0 0 1 1.06-.263c.418 0 .77.065 1.054.195.268.116.493.314.641.566.146.245.22.54.22.887 0 .198-.032.388-.095.57a2.444 2.444 0 0 1-.269.543c-.117.177-.26.36-.43.547l-.57.598-.734.848h2.242-.003Z"
		/>
		<rect width={10} height={10} x={28} y={7} fill="#58707F" rx={5} />
		<path
			fill="#fff"
			d="M32.298 11.451h.64a.83.83 0 0 0 .403-.086.563.563 0 0 0 .238-.25.89.89 0 0 0 .078-.387.68.68 0 0 0-.074-.316.53.53 0 0 0-.22-.23.72.72 0 0 0-.378-.09.74.74 0 0 0-.305.066.64.64 0 0 0-.246.18.428.428 0 0 0-.094.285h-1.32c0-.323.089-.599.266-.828.177-.229.415-.409.707-.53.292-.123.61-.188.949-.188.404 0 .758.063 1.063.188.305.125.542.305.71.547.17.242.259.537.259.891 0 .192-.047.382-.137.551a1.43 1.43 0 0 1-.383.453c-.164.13-.357.233-.578.31a2.255 2.255 0 0 1-.72.108h-.858v-.674Zm0 .98v-.656h.859c.262-.002.523.03.777.098.217.055.422.15.605.281.166.121.3.28.39.465.095.196.142.412.138.63 0 .265-.053.502-.16.71a1.515 1.515 0 0 1-.45.527c-.203.149-.432.26-.675.328a3.076 3.076 0 0 1-.84.11c-.237 0-.474-.032-.711-.095a2.103 2.103 0 0 1-.648-.297 1.552 1.552 0 0 1-.473-.516c-.12-.209-.176-.462-.176-.754h1.32c0 .12.033.23.098.328.07.098.162.178.27.231a.79.79 0 0 0 .363.086.858.858 0 0 0 .41-.09.652.652 0 0 0 .352-.598.923.923 0 0 0-.098-.46.566.566 0 0 0-.277-.25 1.093 1.093 0 0 0-.434-.079h-.641v.001Z"
		/>
		<rect width={10} height={10} x={42} y={7} fill="#58707F" rx={5} />
		<path
			fill="#fff"
			d="M49.086 12.621v1.016h-4.094l-.078-.805L47.2 9.156h1.04l-1.13 1.848-.937 1.617h2.914Zm-.574-3.465v5.688h-1.316V9.157h1.316Z"
		/>
		<rect width={10} height={10} x={56} y={7} fill="#58707F" rx={5} />
		<path
			fill="#fff"
			d="m60.172 12.27-1.047-.247.344-2.906h3.324v1.023h-2.25l-.129 1.13a1.96 1.96 0 0 1 .316-.13 1.57 1.57 0 0 1 .5-.078c.255-.005.508.04.746.13.22.082.404.206.555.37.151.164.264.361.34.598.076.237.117.508.117.813 0 .245-.04.482-.12.711a1.73 1.73 0 0 1-.976 1.043c-.248.107-.54.156-.88.156-.253 0-.499-.039-.738-.117a2.18 2.18 0 0 1-.648-.336 1.64 1.64 0 0 1-.453-.535 1.48 1.48 0 0 1-.16-.707h1.324c.008.138.04.258.098.36a.637.637 0 0 0 .231.237.69.69 0 0 0 .34.082c.13 0 .238-.026.324-.078a.553.553 0 0 0 .203-.215c.05-.09.085-.195.106-.312a2.17 2.17 0 0 0 .031-.379 1.42 1.42 0 0 0-.047-.379.733.733 0 0 0-.14-.285.61.61 0 0 0-.255-.184.961.961 0 0 0-.367-.062c-.19 0-.34.033-.449.098a.786.786 0 0 0-.238.2l-.002-.002Z"
		/>
	</svg>
);

// popover toggle icon.
export const PopOverToggleIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none">
		<rect width={22.4} height={22.4} x={0.8} y={0.8} fill="#fff" rx={3.2} />
		<rect width={22.4} height={22.4} x={0.8} y={0.8} stroke="#2F2F2F" strokeWidth={1.6} rx={3.2} />
		<path
			fill="#2F2F2F"
			d="M19.584 7.938a.813.813 0 0 0-.813-.813H11.32a2.439 2.439 0 0 0-4.598 0H5.23a.813.813 0 0 0 0 1.625h1.493a2.439 2.439 0 0 0 4.598 0h7.451a.813.813 0 0 0 .813-.813ZM19.584 16.063a.813.813 0 0 0-.813-.813h-1.493a2.439 2.439 0 0 0-4.597 0H5.229a.813.813 0 0 0 0 1.625h7.452a2.439 2.439 0 0 0 4.597 0h1.493a.813.813 0 0 0 .813-.813Z"
		/>
	</svg>
);
