@livechat/design-system-icons 1.0.0-alpha.2 → 1.0.0-alpha.20

package/lib/react/material/Chat.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgChat = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2ZM7 9h10c.55 0 1 .45 1 1s-.45 1-1 1H7c-.55 0-1-.45-1-1s.45-1 1-1Zm6 5H7c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1Zm4-6H7c-.55 0-1-.45-1-1s.45-1 1-1h10c.55 0 1 .45 1 1s-.45 1-1 1Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgChat;

package/lib/react/material/ChatMissed.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgChatMissed = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M18.89 7.7 12 14.59 6.41 9H10c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1s1-.45 1-1v-3.59l6.29 6.29c.39.39 1.02.39 1.41 0l7.59-7.59a.996.996 0 0 0 0-1.41c-.38-.38-1.02-.38-1.4 0Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgChatMissed;

package/lib/react/material/ChatTakeover.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgChatTakeover = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.42 17.42A6.938 6.938 0 0 0 19 13c0-2.18-1.01-4.14-2.58-5.42l1.42-1.42a8.978 8.978 0 0 1 1 12.68l-1.42-1.42ZM12 1l4 4-4 4V6c-3.86 0-7 3.14-7 7 0 1.68.59 3.21 1.58 4.42l-1.42 1.42A8.974 8.974 0 0 1 3 13a9 9 0 0 1 9-9V1ZM8 14c0-2.21 1.79-4 4-4s4 1.79 4 4-1.79 4-4 4-4-1.79-4-4Zm5.12-1.5c0-.61-.5-1.12-1.12-1.12-.62 0-1.12.51-1.12 1.12 0 .61.51 1.12 1.12 1.12.61 0 1.12-.51 1.12-1.12Zm-3.36 3.08c.5.71 1.31 1.17 2.24 1.17.93 0 1.74-.46 2.24-1.17-.05-.72-1.51-1.08-2.24-1.08-.73 0-2.19.36-2.24 1.08Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgChatTakeover;

package/lib/react/material/Chats.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgChats = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M20 6h-1v8c0 .55-.45 1-1 1H6v1c0 1.1.9 2 2 2h10l4 4V8c0-1.1-.9-2-2-2Zm-3 5V4c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v13l4-4h9c1.1 0 2-.9 2-2Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgChats;

package/lib/react/material/Check.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgCheck = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="m9 16.2-3.5-3.5a.984.984 0 0 0-1.4 0 .984.984 0 0 0 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7a.984.984 0 0 0 0-1.4.984.984 0 0 0-1.4 0L9 16.2Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgCheck;

package/lib/react/material/CheckBox.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgCheckBox = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm-8.29 13.29a.996.996 0 0 1-1.41 0L5.71 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.58 7.59Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgCheckBox;

package/lib/react/material/CheckCircleSolid.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgCheckCircleSolid = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm3.88-11.71L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgCheckCircleSolid;

package/lib/react/material/ChevronDown.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgChevronDown = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M15.88 9.29 12 13.17 8.12 9.29a.996.996 0 1 0-1.41 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 0 0 0-1.41c-.39-.38-1.03-.39-1.42 0Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgChevronDown;

package/lib/react/material/ChevronLeft.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgChevronLeft = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59a.996.996 0 1 0 1.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgChevronLeft;

package/lib/react/material/ChevronRight.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgChevronRight = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgChevronRight;

package/lib/react/material/ChevronUp.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgChevronUp = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M11.29 8.71 6.7 13.3a.996.996 0 1 0 1.41 1.41L12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgChevronUp;

package/lib/react/material/Chrome.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgChrome = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M22.39 6A12 12 0 0 0 1.606 6l.72 12.96L22.39 6Z"
+      fill="url(#chrome_svg__a)"
+    />
+    <path
+      d="M6.804 15 1.608 6A12 12 0 0 0 12 24l11.76-12-16.956 3Z"
+      fill="url(#chrome_svg__b)"
+    />
+    <path
+      d="M17.196 15 12 24A12 12 0 0 0 22.39 6H12l5.196 9Z"
+      fill="url(#chrome_svg__c)"
+    />
+    <path d="M12 18a6 6 0 1 0 0-12.002A6 6 0 0 0 12 18Z" fill="#fff" />
+    <path
+      d="M12 16.752a4.753 4.753 0 1 0 0-9.505 4.753 4.753 0 0 0 0 9.505Z"
+      fill="#1A73E8"
+    />
+    <defs>
+      <linearGradient
+        id="chrome_svg__a"
+        x1={1.608}
+        y1={7.5}
+        x2={22.39}
+        y2={7.5}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#D93025" />
+        <stop offset={1} stopColor="#EA4335" />
+      </linearGradient>
+      <linearGradient
+        id="chrome_svg__b"
+        x1={13.298}
+        y1={23.249}
+        x2={2.906}
+        y2={5.249}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#1E8E3E" />
+        <stop offset={1} stopColor="#34A853" />
+      </linearGradient>
+      <linearGradient
+        id="chrome_svg__c"
+        x1={10.248}
+        y1={24}
+        x2={20.64}
+        y2={6.031}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FCC934" />
+        <stop offset={1} stopColor="#FBBC04" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export default SvgChrome;

package/lib/react/material/Close.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgClose = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgClose;

package/lib/react/material/CloseCircle.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgCloseCircle = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M13.89 8.7 12 10.59 10.11 8.7a.996.996 0 1 0-1.41 1.41L10.59 12 8.7 13.89a.996.996 0 1 0 1.41 1.41L12 13.41l1.89 1.89a.996.996 0 1 0 1.41-1.41L13.41 12l1.89-1.89a.996.996 0 0 0 0-1.41c-.39-.38-1.03-.38-1.41 0ZM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgCloseCircle;

package/lib/react/material/Code.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgCode = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2Zm0 16H5V7h14v12Zm-3-7H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1Zm-4 4H8c-.55 0-1-.45-1-1s.45-1 1-1h4c.55 0 1 .45 1 1s-.45 1-1 1Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgCode;

package/lib/react/material/CodeBlack.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgCodeBlack = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M8.7 15.9 4.8 12l3.9-3.9a.984.984 0 0 0 0-1.4.984.984 0 0 0-1.4 0l-4.59 4.59a.996.996 0 0 0 0 1.41l4.59 4.6c.39.39 1.01.39 1.4 0a.984.984 0 0 0 0-1.4Zm6.6 0 3.9-3.9-3.9-3.9a.984.984 0 0 1 0-1.4.984.984 0 0 1 1.4 0l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.6a.984.984 0 0 1-1.4 0 .984.984 0 0 1 0-1.4Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgCodeBlack;

package/lib/react/material/Columns.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgColumns = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2ZM8 18H4V6h4v12Zm6 0h-4V6h4v12Zm6 0h-4V6h4v12Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgColumns;

package/lib/react/material/Contact.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgContact = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M22 3H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h20c1.1 0 1.99-.9 1.99-2L24 5c0-1.1-.9-2-2-2ZM11 9c0-1.66-1.34-3-3-3S5 7.34 5 9s1.34 3 3 3 3-1.34 3-3Zm3 9v-1c0-2-4-3.1-6-3.1S2 15 2 17v1h12Zm7-10h-6c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1Zm-6 4h6c.55 0 1-.45 1-1s-.45-1-1-1h-6c-.55 0-1 .45-1 1s.45 1 1 1Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgContact;

package/lib/react/material/ContentCopy.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgContentCopy = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 17 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 18H2V5c0-.55-.45-1-1-1s-1 .45-1 1v13c0 1.1.9 2 2 2h10c.55 0 1-.45 1-1s-.45-1-1-1Zm5-4V2c0-1.1-.9-2-2-2H6C4.9 0 4 .9 4 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2Zm-2 0H6V2h9v12Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgContentCopy;

package/lib/react/material/CreditCardOutline.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgCreditCardOutline = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2Zm-1 14H5c-.55 0-1-.45-1-1v-5h16v5c0 .55-.45 1-1 1Zm1-10H4V6h16v2Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgCreditCardOutline;

package/lib/react/material/DayMode.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDayMode = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5ZM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1Zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1ZM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1Zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1ZM5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .38-.39.39-1.03 0-1.41L5.99 4.58Zm12.37 12.37a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06Zm1.06-10.96a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06a.996.996 0 0 0 0 1.41c.39.38 1.03.39 1.41 0l1.06-1.06ZM7.05 18.36a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06a.996.996 0 0 0 0 1.41c.39.38 1.03.39 1.41 0l1.06-1.06Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgDayMode;

package/lib/react/material/Delete.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDelete = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10ZM9 9h6c.55 0 1 .45 1 1v8c0 .55-.45 1-1 1H9c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1Zm6.5-5-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgDelete;

package/lib/react/material/Description.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDescription = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M8 16h8v2H8v-2Zm0-4h8v2H8v-2Zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6Zm4 18H6V4h7v5h5v11Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgDescription;

package/lib/react/material/Device.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDevice = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4ZM4 6h16v10H4V6Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgDevice;

package/lib/react/material/DeviceMobile.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDeviceMobile = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0.5 24 23"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16 1H8a2.5 2.5 0 0 0-2.5 2.5v17A2.5 2.5 0 0 0 8 23h8a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 16 1Zm-4 21c-.83 0-1.5-.67-1.5-1.5S11.17 19 12 19s1.5.67 1.5 1.5S12.83 22 12 22Zm4.5-4h-9V4h9v14Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgDeviceMobile;

package/lib/react/material/Devices.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDevices = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M4 7c0-.55.45-1 1-1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-1.1 0-2 .9-2 2v11h-.5c-.83 0-1.5.67-1.5 1.5S.67 20 1.5 20H14v-3H4V7Zm19 1h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1Zm-1 9h-4v-7h4v7Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgDevices;

package/lib/react/material/DoubleArrowLeft.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDoubleArrowLeft = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M18.29 17.29a.996.996 0 0 0 0-1.41L14.42 12l3.88-3.88a.996.996 0 1 0-1.41-1.41L12.3 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.38.38 1.01.38 1.4-.01Z"
+      fill="currentcolor"
+    />
+    <path
+      d="M11.7 17.29a.996.996 0 0 0 0-1.41L7.83 12l3.88-3.88a.996.996 0 1 0-1.41-1.41L5.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.38.38 1.01.38 1.4-.01Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgDoubleArrowLeft;

package/lib/react/material/DoubleArrowRight.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDoubleArrowRight = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M5.7 6.71a.996.996 0 0 0 0 1.41L9.58 12 5.7 15.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L7.12 6.71c-.39-.39-1.03-.39-1.42 0Z"
+      fill="currentcolor"
+    />
+    <path
+      d="M12.29 6.71a.996.996 0 0 0 0 1.41L16.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L13.7 6.7c-.38-.38-1.02-.38-1.41.01Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgDoubleArrowRight;

package/lib/react/material/DragIndicator.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDragIndicator = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2Zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgDragIndicator;

package/lib/react/material/DropDown.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDropDown = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M15.88 9.29 12 13.17 8.12 9.29a.996.996 0 1 0-1.41 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 0 0 0-1.41c-.39-.38-1.03-.39-1.42 0Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgDropDown;