design-react-kit 4.0.1 → 5.0.0-0

package/src/Icon/assets/ItHelp.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M12.8 22h-1.4v-2.1h1.4zm-.1-4.9h-1.2a9.7 9.7 0 01-.1-1.7 2.7 2.7 0 01.3-1.2 5.6 5.6 0 01.7-1.3l2.3-2.1a9.6 9.6 0 001.8-2.1 4.5 4.5 0 00.5-2.3 3 3 0 00-1.1-2.6 6.2 6.2 0 00-3.4-.7 22.9 22.9 0 00-3.6.5l-1 .3-.2-1.2h.1a18.1 18.1 0 014.7-.8 7.4 7.4 0 014.3 1 4.2 4.2 0 011.4 3.5 5 5 0 01-.5 2.7 8.6 8.6 0 01-1.9 2.2 19.7 19.7 0 00-1.8 1.6 6.2 6.2 0 00-.9 1.2 2.3 2.3 0 00-.4 1.4z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M12.8 22h-1.4v-2.1h1.4V22zm-.1-4.9h-1.2c-.1-.6-.1-1.1-.1-1.7 0-.4.1-.8.3-1.2.2-.5.4-.9.7-1.3l2.3-2.1c.7-.6 1.3-1.3 1.8-2.1.4-.7.5-1.5.5-2.3.1-1-.3-2-1.1-2.6-1-.6-2.2-.8-3.4-.7-1.2.1-2.4.2-3.6.5l-1 .3-.2-1.2h.1c1.5-.5 3.1-.7 4.7-.8 1.5-.1 3 .2 4.3 1 1 .9 1.5 2.2 1.4 3.5.1.9-.1 1.9-.5 2.7-.5.8-1.1 1.6-1.9 2.2-.6.5-1.2 1-1.8 1.6l-.9 1.2c-.3.4-.4.9-.4 1.4v1.6z' />
     </svg>
   );
 };

package/src/Icon/assets/ItHelpCircle.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 19a9 9 0 119-9 9 9 0 01-9 9zm-1.2-4.5H12v1.8h-1.2zm4.5-8a4.2 4.2 0 01-.3 1.8 5.4 5.4 0 01-1.3 1.4L12.3 13a2.8 2.8 0 00-.4 1.2v.6H11a3 3 0 01-.2-1 2.1 2.1 0 01.5-1.2 9 9 0 011.4-1.4 6.4 6.4 0 001.2-1.3 2.6 2.6 0 00.3-1.4 1.7 1.7 0 00-.6-1.4 3.5 3.5 0 00-2-.4L9.3 7h-.5v-.8a10.2 10.2 0 013-.5 4.9 4.9 0 012.7.6 2.7 2.7 0 01.8 2.2z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 19c-5 0-9-4-9-9s4-9 9-9 9 4 9 9-4 9-9 9zm-1.2-4.5H12v1.8h-1.2v-1.8zm4.5-8c0 .6-.1 1.2-.3 1.8-.3.5-.8 1-1.3 1.4L12.3 13c-.2.4-.4.8-.4 1.2v.6H11c-.1-.3-.2-.7-.2-1 0-.4.2-.9.5-1.2.4-.5.9-1 1.4-1.4.5-.4.9-.8 1.2-1.3.2-.4.3-.9.3-1.4 0-.5-.2-1.1-.6-1.4-.6-.3-1.3-.5-2-.4L9.3 7h-.5v-.8c1-.3 2-.5 3-.5.9-.1 1.9.1 2.7.6.6.6.9 1.4.8 2.2z' />
     </svg>
   );
 };

package/src/Icon/assets/ItHorn.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M5 9a3 3 0 000 6h.5L7 19.3A2.5 2.5 0 009.3 21h.2a1.4 1.4 0 001.2-.6 1.4 1.4 0 00.2-1.4l-1.3-4h1.8l8.6 3.8V4.7L11.4 9zm5 10.3a.7.7 0 01-.1.5l-.4.2h-.2a1.5 1.5 0 01-1.4-1l-1.3-4h1.9zM5 14a2 2 0 010-4h6v4zm14 3.2l-7-3V9.8l7-3.5zM22 9v6h-1V9z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M5 9c-1.7 0-3 1.3-3 3s1.3 3 3 3h.5L7 19.3c.3 1 1.3 1.7 2.3 1.7h.2c.5 0 .9-.2 1.2-.6.3-.4.4-.9.2-1.4l-1.3-4h1.8l8.6 3.8V4.7L11.4 9H5zm5 10.3c0 .2 0 .4-.1.5l-.4.2h-.2c-.6 0-1.2-.4-1.4-1l-1.3-4h1.9l1.5 4.3zM5 14c-1.1 0-2-.9-2-2s.9-2 2-2h6v4H5zm14 3.2-7-3V9.8l7-3.5v10.9zM22 9v6h-1V9h1z' />
     </svg>
   );
 };

package/src/Icon/assets/ItInbox.tsx

@@ -1,12 +1,26 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
       <path d='M4 2v14h3.7l1 2h6.6l1-2H20V2H4zm15 13h-3.3l-1 2H9.3l-1-2H5V3h14v12z' />
       <path d='M19 17h1v5H4v-5h1v4h14zM7 5h10v1H7zM7 8h10v1H7zM7 11h10v1H7z' />
-      <g>
-        <path fill='none' d='M0 0h24v24H0z' />
-      </g>
     </svg>
   );
 };

package/src/Icon/assets/ItInfoCircle.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 19a9 9 0 119-9 9 9 0 01-9 9zm-.7-15h1.5v2h-1.5zm0 3h1.5v9h-1.5z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 19c-5 0-9-4-9-9s4-9 9-9 9 4 9 9-4 9-9 9zm-.7-15h1.5v2h-1.5V6zm0 3h1.5v9h-1.5V9z' />
     </svg>
   );
 };

package/src/Icon/assets/ItInstagram.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
-      <path fill='none' d='M0 0h24v24H0z' />
-      <path d='M12 4.62l-.01.08H8.35a5.12 5.12 0 00-1.67.31c-.38.15-.72.382-1 .68-.298.28-.53.62-.68 1a5.12 5.12 0 00-.3 1.68v7.28c.01.57.114 1.134.31 1.67.15.38.382.72.68 1 .28.298.62.53 1 .68.536.196 1.1.3 1.67.31.95.05 1.24.05 3.64.05 2.4 0 2.64-.05 3.64-.05a5.12 5.12 0 001.67-.31A3.08 3.08 0 0019 17.31a5.12 5.12 0 00.3-1.68c.05-.95.05-1.24.05-3.64 0-2.4-.05-2.64-.05-3.64a5.12 5.12 0 00-.31-1.67 2.77 2.77 0 00-.68-1 2.77 2.77 0 00-1-.68 5.12 5.12 0 00-1.67-.38H12zM12 3v.05h3.71a6.9 6.9 0 012.19.42 4.64 4.64 0 012.68 2.63A6.9 6.9 0 0121 8.29c0 .96.05 1.27.05 3.71S21 14.71 21 15.71a6.9 6.9 0 01-.47 2.24 4.64 4.64 0 01-2.63 2.63 6.9 6.9 0 01-2.19.42c-.96.05-1.27.05-3.71.05S9.29 21 8.29 21a6.9 6.9 0 01-2.19-.47 4.64 4.64 0 01-2.63-2.63 6.9 6.9 0 01-.42-2.19V12 8.29a6.9 6.9 0 01.42-2.19A4.64 4.64 0 016.1 3.42 6.9 6.9 0 018.29 3H12zm0 4.38a4.62 4.62 0 110 9.24 4.62 4.62 0 010-9.24zM12 15a3 3 0 100-6 3 3 0 000 6zm4.8-6.72a1.08 1.08 0 110-2.16 1.08 1.08 0 010 2.16z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M12 4.6c-2.4.1-2.6.1-3.6.1-.6 0-1.2.1-1.7.3-.4.2-.7.4-1 .7-.3.3-.5.6-.7 1-.2.5-.3 1.1-.3 1.7v7.2c0 .6.1 1.1.3 1.7.2.4.4.7.7 1 .3.3.6.5 1 .7.5.2 1.1.3 1.7.3 1 .1 1.2.1 3.6.1s2.6-.1 3.6-.1c.6 0 1.1-.1 1.7-.3.8-.3 1.4-.9 1.7-1.7.2-.5.3-1.1.3-1.7.1-.9.1-1.2.1-3.6s-.1-2.6-.1-3.6c0-.6-.1-1.1-.3-1.7-.2-.4-.4-.7-.7-1-.3-.3-.6-.5-1-.7-.5-.2-1.1-.3-1.7-.4H12zM12 3h3.7c.7 0 1.5.2 2.2.4 1.2.5 2.2 1.4 2.7 2.6.2.8.4 1.5.4 2.3v7.4c0 .8-.2 1.5-.5 2.2-.5 1.2-1.4 2.2-2.6 2.6-.7.3-1.4.4-2.2.4H8.3c-.8 0-1.5-.2-2.2-.5-1.2-.5-2.2-1.4-2.6-2.6-.3-.7-.4-1.4-.4-2.2V8.2c0-.7.2-1.5.4-2.2.5-1.2 1.4-2.2 2.6-2.7.7-.1 1.4-.3 2.2-.3H12zm0 4.4c1.2 0 2.4.5 3.3 1.4s1.4 2 1.4 3.3c0 2.6-2.1 4.6-4.6 4.6S7.4 14.6 7.4 12s2-4.6 4.6-4.6zm0 7.6c.8 0 1.6-.3 2.1-.9.6-.6.9-1.3.9-2.1 0-1.7-1.3-3-3-3s-3 1.3-3 3 1.3 3 3 3zm4.8-6.7c-.6 0-1.1-.5-1.1-1.1s.5-1.1 1.1-1.1c.6 0 1.1.5 1.1 1.1s-.5 1.1-1.1 1.1z' />
     </svg>
   );
 };

package/src/Icon/assets/ItKey.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M18 10a2 2 0 102 2 2 2 0 00-2-2zm0 3a1 1 0 111-1 .9.9 0 01-1 1zm-1-6a5.1 5.1 0 00-4.6 3H3.3l-2 2 3 3H7v-1h.3l1 1H11v-1h1.4a5.1 5.1 0 004.6 3 5 5 0 000-10zm0 9a4.1 4.1 0 01-3.8-2.7V13H10v1H8.7l-1-1H6v1H4.7l-2-2 1-1h9.4v-.3A4.1 4.1 0 0117 8a4 4 0 010 8z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M18 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 3c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1c.1.5-.3.9-.8 1H18zm-1-6c-2 0-3.8 1.2-4.6 3H3.3l-2 2 3 3H7v-1h.3l1 1H11v-1h1.4c.8 1.8 2.6 3 4.6 3 2.8 0 5-2.2 5-5s-2.2-5-5-5zm0 9c-1.7 0-3.2-1.1-3.8-2.7V13H10v1H8.7l-1-1H6v1H4.7l-2-2 1-1h9.4v-.3C13.7 9.1 15.3 8 17 8c2.2 0 4 1.8 4 4s-1.8 4-4 4z' />
     </svg>
   );
 };

package/src/Icon/assets/ItLessCircle.tsx

@@ -1,12 +1,26 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M12 3a9 9 0 016.36 15.36A9 9 0 015.64 5.62 8.93 8.93 0 0112 3m0-1a10 10 0 107.07 2.93A9.93 9.93 0 0012 2z' />
-      <rect x={7} y={11.25} width={10} height={1.5} rx={0.75} />
-      <g>
-        <path fill='none' d='M0 0h24v24H0z' />
-      </g>
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M12 3c5 0 9 4 9 9 0 2.4-.9 4.7-2.6 6.4-3.5 3.5-9.2 3.5-12.7 0s-3.5-9.2 0-12.7C7.3 3.9 9.6 3 12 3m0-1C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10c0-2.7-1.1-5.2-2.9-7.1C17.2 3 14.7 2 12 2z' />
+      <path d='M7.8 11.3h8.5c.4 0 .8.3.8.8 0 .4-.3.8-.8.8H7.8c-.5-.1-.8-.5-.8-.9s.3-.7.8-.7z' />
     </svg>
   );
 };

package/src/Icon/assets/ItLink.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M13.4 13.4l-.7-.7a2.9 2.9 0 00.9-2.1 2.7 2.7 0 00-.9-2.1L9.2 4.9a3.2 3.2 0 00-4.3 0 3.2 3.2 0 000 4.3L7.8 12l-.7.7-2.9-2.8a4.2 4.2 0 010-5.7 4.2 4.2 0 015.7 0l3.5 3.6a3.6 3.6 0 011.2 2.8 3.6 3.6 0 01-1.2 2.8zm6.4 6.4a4.2 4.2 0 000-5.7l-2.9-2.8-.7.7 2.9 2.8a3.2 3.2 0 010 4.3 3.2 3.2 0 01-4.3 0l-3.5-3.6a2.7 2.7 0 01-.9-2.1 2.9 2.9 0 01.9-2.1l-.7-.7a3.6 3.6 0 00-1.2 2.8 3.6 3.6 0 001.2 2.8l3.5 3.6a3.8 3.8 0 002.8 1.1 3.9 3.9 0 002.9-1.1zm-6.7-6.7' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z' />
     </svg>
   );
 };

package/src/Icon/assets/ItLinkedin.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
-      <path fill='none' d='M0 0h24v24H0z' />
-      <path d='M16.53 8.68A3.94 3.94 0 0013 10.62V9H9.37v12h3.73v-5.95c0-1.57.29-3.09 2.24-3.09 1.95 0 1.93 1.8 1.93 3.19V21H21v-6.6c0-3.23-.69-5.72-4.47-5.72zM5.16 3a2.17 2.17 0 102.16 2.18A2.16 2.16 0 005.16 3zM3.29 9v12H7V9H3.29zm13.24-.3A3.94 3.94 0 0013 10.62V9H9.37v12h3.73v-5.95c0-1.57.29-3.09 2.24-3.09 1.95 0 1.93 1.8 1.93 3.19V21H21v-6.6c0-3.23-.69-5.72-4.47-5.72v.02zM3.29 21H7V9H3.29v12zM5.16 3a2.17 2.17 0 102.16 2.18A2.16 2.16 0 005.16 3z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M16.5 8.7c-1.4 0-2.8.7-3.5 1.9V9H9.4v12h3.7v-5.9c0-1.6.3-3.1 2.2-3.1s1.9 1.8 1.9 3.2V21H21v-6.6c0-3.2-.7-5.7-4.5-5.7zM5.2 3C4 3 3 4 3 5.2c0 1.2 1 2.2 2.2 2.2s2.2-1 2.2-2.2c0-.6-.2-1.1-.6-1.5-.5-.5-1.1-.7-1.6-.7zM3.3 9v12H7V9H3.3zm13.2-.3c-1.4-.1-2.8.7-3.5 1.9V9H9.4v12h3.7v-5.9c0-1.6.3-3.1 2.2-3.1s1.9 1.8 1.9 3.2V21H21v-6.6c0-3.2-.7-5.7-4.5-5.7zM3.3 21H7V9H3.3v12zM5.2 3C4 3 3 4 3 5.2c0 1.2 1 2.2 2.2 2.2s2.2-1 2.2-2.2c0-.6-.2-1.1-.6-1.5-.5-.5-1.1-.7-1.6-.7z' />
     </svg>
   );
 };

package/src/Icon/assets/ItLinkedinSquare.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
-      <path fill='none' d='M0 0h24v24H0z' />
-      <path d='M19.67 3H4.33A1.32 1.32 0 003 4.3v15.4A1.32 1.32 0 004.33 21h15.34A1.32 1.32 0 0021 19.7V4.3A1.32 1.32 0 0019.67 3zM8.34 18.34H5.67V9.75h2.67v8.59zM7 8.57A1.55 1.55 0 118.55 7 1.54 1.54 0 017 8.57zm11.34 9.77h-2.67v-4.18c0-1 0-2.28-1.39-2.28s-1.6 1.09-1.6 2.21v4.25H10V9.75h2.56v1.17a2.83 2.83 0 012.53-1.39c2.7 0 3.2 1.78 3.2 4.1l.05 4.71z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M19.7 3H4.3C3.6 3 3 3.6 3 4.3v15.4c0 .7.6 1.3 1.3 1.3h15.3c.7 0 1.3-.6 1.3-1.3V4.3c.1-.7-.5-1.3-1.2-1.3zM8.3 18.3H5.7V9.8h2.7v8.5zM7 8.6c-.9 0-1.5-.7-1.5-1.6 0-.9.7-1.5 1.5-1.6s1.5.7 1.6 1.6c0 .4-.2.8-.4 1.1-.4.3-.8.5-1.2.5zm11.3 9.7h-2.7v-4.2c0-1 0-2.3-1.4-2.3s-1.6 1.1-1.6 2.2v4.3H10V9.8h2.6V11c.5-.9 1.5-1.4 2.5-1.4 2.7 0 3.2 1.8 3.2 4.1v4.6z' />
     </svg>
   );
 };

package/src/Icon/assets/ItList.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M4 12a.9.9 0 01-1 1 1 1 0 010-2 .9.9 0 011 1zM3 4.5a.9.9 0 00-1 1 .9.9 0 001 1 .9.9 0 001-1 .9.9 0 00-1-1zm0 13a1 1 0 000 2 1 1 0 000-2zM6 5v1h16V5zm0 7.5h16v-1H6zM6 19h16v-1H6z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M4 12c.1.5-.3.9-.8 1H3c-.6 0-1-.4-1-1s.4-1 1-1c.5-.1.9.3 1 .8v.2zM3 4.5c-.5-.1-.9.3-1 .8v.2c-.1.5.3.9.8 1H3c.5.1.9-.3 1-.8v-.2c.1-.5-.3-.9-.8-1H3zm0 13c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1zM6 5v1h16V5H6zm0 7.5h16v-1H6v1zM6 19h16v-1H6v1z' />
     </svg>
   );
 };

package/src/Icon/assets/ItLock.tsx

@@ -1,12 +1,26 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M18.5 8.5H17V8A5 5 0 007 8v.5H5.5A1.5 1.5 0 004 10v8.5A1.5 1.5 0 005.5 20h13a1.5 1.5 0 001.5-1.5V10a1.5 1.5 0 00-1.5-1.5zM8 8a4 4 0 018 0v.5H8zm11 10.5a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5V10a.5.5 0 01.5-.5h13a.5.5 0 01.5.5z' />
-      <path d='M12 13.25a1 1 0 11-1 1 1 1 0 011-1m0-1a2 2 0 102 2 2 2 0 00-2-2z' />
-      <g>
-        <path fill='none' d='M0 0h24v24H0z' />
-      </g>
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M18.5 8.5H17V8c0-2.8-2.2-5-5-5S7 5.2 7 8v.5H5.5C4.7 8.5 4 9.2 4 10v8.5c0 .8.7 1.5 1.5 1.5h13c.8 0 1.5-.7 1.5-1.5V10c0-.8-.7-1.5-1.5-1.5zM8 8c0-2.2 1.8-4 4-4s4 1.8 4 4v.5H8V8zm11 10.5c0 .3-.2.5-.5.5h-13c-.3 0-.5-.2-.5-.5V10c0-.3.2-.5.5-.5h13c.3 0 .5.2.5.5v8.5z' />
+      <path d='M12 13.3c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1m0-1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z' />
     </svg>
   );
 };

package/src/Icon/assets/ItLocked.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M16.5 12H16V7a4 4 0 00-8 0v5h-.5a1.1 1.1 0 00-1.1 1.1v6.8A1.1 1.1 0 007.5 21h9a1.1 1.1 0 001.1-1.1v-6.8a1.1 1.1 0 00-1.1-1.1zM9 7a3 3 0 016 0v5H9zm7.6 12.9a.1.1 0 01-.1.1h-9a.1.1 0 01-.1-.1v-6.8h9.2zM13 15.5a.8.8 0 01-.5.8v1.5h-1v-1.5a.8.8 0 01-.5-.8 1 1 0 012 0z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M16.5 12H16V7c0-2.2-1.8-4-4-4S8 4.8 8 7v5h-.5c-.6 0-1.1.5-1.1 1.1v6.8c0 .6.5 1.1 1.1 1.1h9c.6 0 1.1-.5 1.1-1.1v-6.8c0-.6-.5-1.1-1.1-1.1zM9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v5H9V7zm7.6 12.9c0 .1 0 .1-.1.1h-9c-.1 0-.1 0-.1-.1v-6.8h9.2v6.8zM13 15.5c0 .3-.2.7-.5.8v1.5h-1v-1.5c-.3-.1-.5-.5-.5-.8 0-.6.4-1 1-1s1 .4 1 1z' />
     </svg>
   );
 };

package/src/Icon/assets/ItLogout.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <g clipPath='url(#a)'>
+        <path
+          clipRule='evenodd'
+          d='M16.7 7.7 21 12l-4.3 4.3-.7-.7 3-3.1H9.8v-1h9.3L16 8.4l.7-.7ZM4.5 20H12v1H4.5A1.5 1.5 0 0 1 3 19.5v-15A1.5 1.5 0 0 1 4.5 3H12v1H4.5a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5Z'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path d='M0 0h24v24H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/Icon/assets/ItMail.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M20.5 5h-17A1.5 1.5 0 002 6.5v11A1.5 1.5 0 003.5 19h17a1.5 1.5 0 001.5-1.5v-11A1.5 1.5 0 0020.5 5zm-.3 1l-7.1 7.2a1.6 1.6 0 01-2.2 0L3.8 6zM3 17.3V6.6L8.3 12zm.7.7L9 12.7l1.2 1.2a2.7 2.7 0 003.6 0l1.2-1.2 5.3 5.3zm12-6L21 6.6v10.7z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M20.5 5h-17C2.7 5 2 5.7 2 6.5v11c0 .8.7 1.5 1.5 1.5h17c.8 0 1.5-.7 1.5-1.5v-11c0-.8-.7-1.5-1.5-1.5zm-.3 1-7.1 7.2c-.6.6-1.6.6-2.2 0L3.8 6h16.4zM3 17.3V6.6L8.3 12 3 17.3zm.7.7L9 12.7l1.2 1.2c1 .9 2.6.9 3.6 0l1.2-1.2 5.3 5.3H3.7zm12-6L21 6.6v10.7L15.7 12z' />
     </svg>
   );
 };

package/src/Icon/assets/ItMailOpen.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path
+        clipRule='evenodd'
+        d='M21 19.858V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-.142l9-5.4 9 5.4Zm0-1.166v-7.759l-6.466 3.88L21 18.692Zm0-8.925v-1.53a1 1 0 0 0-.553-.895l-8-4a1 1 0 0 0-.894 0l-8 4A1 1 0 0 0 3 8.236v1.53l7.437 4.463L12 13.292l1.562.937L21 9.767ZM3 10.933v7.759l6.466-3.88L3 10.934ZM2 8.236a2 2 0 0 1 1.106-1.789l8-4a2 2 0 0 1 1.788 0l8 4A2 2 0 0 1 22 8.237V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.236Z'
+      />
+    </svg>
+  );
+};

package/src/Icon/assets/ItMapMarker.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M12 22L6.3 11.6c-1.7-3.1-.6-7 2.6-8.8s7.1-.6 8.8 2.5c.5 1 .8 2 .8 3.1s-.3 2.2-.8 3.1L12 22zm0-19C9 3 6.5 5.5 6.5 8.5c0 .9.2 1.9.7 2.7L12 20l4.8-8.8c1.5-2.6.5-6-2.1-7.5-.8-.5-1.8-.7-2.7-.7z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M12 22 6.3 11.6c-1.7-3.1-.6-7 2.6-8.8s7.1-.6 8.8 2.5c.5 1 .8 2 .8 3.1s-.3 2.2-.8 3.1L12 22zm0-19C9 3 6.5 5.5 6.5 8.5c0 .9.2 1.9.7 2.7L12 20l4.8-8.8c1.5-2.6.5-6-2.1-7.5-.8-.5-1.8-.7-2.7-.7z' />
     </svg>
   );
 };

package/src/Icon/assets/ItMapMarkerCircle.tsx

@@ -1,12 +1,26 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
       <path d='M17.7 5.3C16 2.2 12 1.1 8.9 2.8s-4.3 5.7-2.5 8.8L12 22l5.7-10.4c.5-1 .8-2 .8-3.1s-.3-2.2-.8-3.2zm-.9 5.8L12 19.9l-4.8-8.8c-.5-.8-.7-1.7-.7-2.7C6.5 5.4 9 3 12 3s5.5 2.5 5.5 5.5c0 .9-.2 1.8-.7 2.6z' />
       <path d='M12 5c-1.9 0-3.5 1.6-3.5 3.5S10.1 12 12 12s3.5-1.6 3.5-3.5S13.9 5 12 5zm0 6c-1.4 0-2.5-1.1-2.5-2.5S10.6 6 12 6s2.5 1.1 2.5 2.5S13.4 11 12 11z' />
-      <g>
-        <path fill='none' d='M0 0h24v24H0z' />
-      </g>
     </svg>
   );
 };

package/src/Icon/assets/ItMapMarkerMinus.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
       <path d='M17.7 5.3C16 2.2 12 1.1 8.9 2.8s-4.3 5.7-2.5 8.8L12 22l5.7-10.4c.5-1 .8-2 .8-3.1s-.3-2.2-.8-3.2zm-.9 5.8L12 19.9l-4.8-8.8c-.5-.8-.7-1.7-.7-2.7C6.5 5.4 9 3 12 3s5.5 2.5 5.5 5.5c0 .9-.2 1.8-.7 2.6z' />
-      <path fill='none' d='M0 0h24v24H0z' />
     </svg>
   );
 };