@livechat/design-system-icons 1.0.0-beta.2 → 1.0.0-beta.4

package/lib/react/tabler/HourglassLowFilled.tsx

@@ -7,28 +7,12 @@ const SvgHourglassLowFilled = (props: SVGProps<SVGSVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <g clipPath="url(#hourglass-low-filled_svg__a)">
-      <path
-        d="M6.5 17h11M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1Z"
-        stroke="currentcolor"
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M6 4v2a6 6 0 1 0 12 0V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1Z"
-        stroke="currentcolor"
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path fill="currentcolor" d="M6.167 16.906h11.834V21H6.167z" />
-    </g>
-    <defs>
-      <clipPath id="hourglass-low-filled_svg__a">
-        <path fill="#fff" d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.586 2.586A2 2 0 0 1 7 2h10a2 2 0 0 1 2 2v2a7 7 0 0 1-3.394 6A6.997 6.997 0 0 1 19 18v2a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-2a7 7 0 0 1 3.394-6A6.999 6.999 0 0 1 5 6V4a2 2 0 0 1 .586-1.414Zm9.95 6.95A5 5 0 0 1 7 6V4h10v2a5 5 0 0 1-1.464 3.536Zm-7.072 4.928A5 5 0 0 1 16.583 16H7.417c.248-.567.601-1.09 1.047-1.536Z"
+      fill="currentcolor"
+    />
   </svg>
 );
 export default SvgHourglassLowFilled;

package/lib/react/tabler/Image.tsx

@@ -8,21 +8,7 @@ const SvgImage = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      d="M15 8h.01M4 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7Z"
-      stroke="currentcolor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="m4 15 4-4c.456-.439.973-.67 1.5-.67s1.044.231 1.5.67l5 5"
-      stroke="currentcolor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="m14 14 1-1c.456-.439.973-.67 1.5-.67s1.044.231 1.5.67l2 2"
+      d="m4 15 4-4c.456-.439.973-.67 1.5-.67s1.044.231 1.5.67l5 5m-2-2 1-1c.456-.439.973-.67 1.5-.67s1.044.231 1.5.67l2 2m-5-7h.01M4 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7Z"
       stroke="currentcolor"
       strokeWidth={2}
       strokeLinecap="round"

package/lib/react/tabler/ImageFilled.tsx

@@ -7,10 +7,11 @@ const SvgImageFilled = (props: SVGProps<SVGSVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
+    <path d="M15 7a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H15Z" fill="currentcolor" />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M7 5a2 2 0 0 0-2 2v5.586l2.293-2.293.014-.014C7.909 9.7 8.664 9.33 9.5 9.33c.836 0 1.591.37 2.193.95l.014.013L14 12.586l.293-.293.014-.014c.602-.58 1.357-.949 2.193-.949.836 0 1.591.37 2.193.95l.014.013.293.293V7a2 2 0 0 0-2-2H7Zm14 9.999V7a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-2.001ZM15 7a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H15Z"
+      d="M21 7a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4V7ZM7 5a2 2 0 0 0-2 2v5.586l2.293-2.293.014-.014C7.909 9.7 8.664 9.33 9.5 9.33c.836 0 1.591.37 2.193.95l.014.013L14 12.586l.293-.293.014-.014c.602-.58 1.357-.949 2.193-.949.836 0 1.591.37 2.193.95l.014.013.293.293V7a2 2 0 0 0-2-2H7Z"
       fill="currentcolor"
     />
   </svg>

package/lib/react/tabler/InternetExplorerColored.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const SvgInternetExplorerColored = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#internet_explorer-colored_svg__a)">
+      <g clipPath="url(#internet_explorer-colored_svg__b)">
+        <path
+          d="M23.944 12.582c0-1.934-.493-3.755-1.345-5.348 3.7-8.42-3.924-7.168-4.373-7.168-1.57.318-3.14.83-4.484 1.479-5.158-.063-9.642 2.73-11.1 8.534 2.69-3.072 4.597-4.324 5.718-4.78-.235.217-.47.445-.706.672-1.794 1.82-3.252 3.641-4.485 5.575-.953 1.707-2.018 3.186-2.579 5.12-3.027 11.151 6.503 6.486 7.848 5.69a10.54 10.54 0 0 0 4.821 1.126c4.71 0 8.745-3.072 10.203-7.282h-5.718c-2.69 4.324-9.081 2.39-9.306-2.275H23.91c.059-.467.09-.934.09-1.366l-.056.023Zm-2.018-10.81c.93.638 1.682 1.593.392 5.007-1.233-2.048-3.027-3.641-5.27-4.438.999-.489 3.476-1.479 4.934-.569h-.056ZM2.082 22.367c-.763-.785-.897-2.73.784-6.258a10.734 10.734 0 0 0 4.71 5.803c-1.088.603-3.925 1.934-5.494.376v.08ZM8.36 10.99c.086-2.503 2.242-4.551 4.933-4.551 2.69 0 4.821 2.048 4.933 4.551H8.36Z"
+          fill="#1EBBEE"
+        />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="internet_explorer-colored_svg__a">
+        <path fill="#fff" d="M0 0h24v24H0z" />
+      </clipPath>
+      <clipPath id="internet_explorer-colored_svg__b">
+        <path fill="#fff" d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgInternetExplorerColored;

package/lib/react/tabler/Italic.tsx

@@ -8,7 +8,7 @@ const SvgItalic = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      d="M11 5h6M7 19h6M14 5l-4 14"
+      d="m14 5-4 14m-3 0h6M11 5h6"
       stroke="currentcolor"
       strokeWidth={2}
       strokeLinecap="round"

package/lib/react/tabler/ItalicFilled.tsx

@@ -8,11 +8,8 @@ const SvgItalicFilled = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      d="M11 5h6M7 19h6M14 5l-4 14"
-      stroke="currentcolor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      d="M13.977 4H11a1 1 0 1 0 0 2h1.674L9.246 18H7a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-1.674l3.428-12H17a1 1 0 1 0 0-2h-3.023Z"
+      fill="currentcolor"
     />
   </svg>
 );

package/lib/react/tabler/JoomlaColored.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const SvgJoomlaColored = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#joomla-colored_svg__a)">
+      <g clipPath="url(#joomla-colored_svg__b)">
+        <path
+          d="M23.965 3.333a3.158 3.158 0 0 0-6.284-.446l-.032-.017c-2.583-1.165-4.758.898-4.758.898L7.136 9.551l2.274 2.19 4.632-4.55c2.163-2.164 3.34-.7 3.34-.7 1.628 1.376.056 3.004.056 3.004l2.33 2.246c1.903-2.055 2.013-3.849 1.435-5.275a3.158 3.158 0 0 0 2.762-3.133"
+          fill="#F9AE41"
+        />
+        <path
+          d="m21.232 17.857.017-.031c1.165-2.583-.898-4.759-.898-4.759l-5.783-5.755-2.19 2.274 4.55 4.632c2.164 2.163.7 3.34.7 3.34-1.376 1.629-3.004.057-3.004.057l-2.246 2.33c2.055 1.902 3.849 2.013 5.275 1.434a3.158 3.158 0 1 0 3.58-3.522Z"
+          fill="#EE4035"
+        />
+        <path
+          d="m14.617 12.47-4.632 4.551c-2.163 2.163-3.34.7-3.34.7-1.628-1.376-.056-3.004-.056-3.004l-2.33-2.246c-1.903 2.055-2.013 3.848-1.435 5.275a3.158 3.158 0 1 0 3.522 3.579l.032.017c2.583 1.165 4.758-.899 4.758-.899l5.755-5.783-2.274-2.19"
+          fill="#4F91CD"
+        />
+        <path
+          d="M7.098 9.993c-2.163-2.163-.7-3.34-.7-3.34 1.377-1.629 3.005-.057 3.005-.057l2.245-2.33C9.594 2.365 7.8 2.255 6.373 2.833a3.158 3.158 0 1 0-3.578 3.522l-.017.032c-1.165 2.583.898 4.758.898 4.758L9.46 16.9l2.19-2.274-4.55-4.632"
+          fill="#7AC043"
+        />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="joomla-colored_svg__a">
+        <path fill="#fff" d="M0 0h24v24H0z" />
+      </clipPath>
+      <clipPath id="joomla-colored_svg__b">
+        <path fill="#fff" d="M0 0h24v24.184H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgJoomlaColored;

package/lib/react/tabler/Keyboard.tsx

@@ -8,7 +8,7 @@ const SvgKeyboard = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      d="M2 8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8ZM6 14v.01M6 10v.01M10 10v.01M14 10v.01M18 10v.01M18 14v.01M10 14h4"
+      d="M10 14h4m4 0v.01M18 10v.01M6 14v.01M6 10v.01m4-.01v.01m4-.01v.01M2 8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8Z"
       stroke="currentcolor"
       strokeWidth={2}
       strokeLinecap="round"

package/lib/react/tabler/KnowledgebaseColored.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const SvgKnowledgebaseColored = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M21.918 6.25h-3.2V3c-2.875 0-5.3 1.9-6.725 3.325C10.568 4.9 8.193 3 5.318 3v3.25h-3.25c-.1 2.525-.1 7.275.075 9.3.2 2.326 2.05 4.076 4.325 4.25 1.775.126 3.675.2 5.55.2s3.775-.05 5.55-.2c2.275-.174 4.125-1.924 4.325-4.25.125-2.025.15-6.775.025-9.3Zm-3.3 9.025c-.05.676-.6 1.226-1.3 1.276a73.81 73.81 0 0 1-5.325.175c-1.8 0-3.6-.05-5.325-.175-.725-.05-1.25-.6-1.3-1.275-.15-1.9-.175-6.676-.05-9.026 2.325.025 4.65 2.525 5.35 3.5l1.325 1.825 1.325-1.825c.7-.975 3.075-3.475 5.4-3.5.1 2.35.05 7.126-.1 9.025Z"
+      fill="#9146FF"
+    />
+  </svg>
+);
+export default SvgKnowledgebaseColored;

package/lib/react/tabler/Link.tsx

@@ -8,14 +8,7 @@ const SvgLink = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.536 3.536 0 0 0-5-5l-.5.5"
-      stroke="currentcolor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M14 10a3.501 3.501 0 0 0-5 0l-4 4a3.535 3.535 0 1 0 5 5l.5-.5"
+      d="M14 10a3.501 3.501 0 0 0-5 0l-4 4a3.535 3.535 0 1 0 5 5l.5-.5M10 14a3.5 3.5 0 0 0 5 0l4-4a3.536 3.536 0 0 0-5-5l-.5.5"
       stroke="currentcolor"
       strokeWidth={2}
       strokeLinecap="round"

package/lib/react/tabler/LinkFilled.tsx

@@ -8,18 +8,12 @@ const SvgLinkFilled = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.536 3.536 0 0 0-5-5l-.5.5"
-      stroke="currentcolor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      d="M16.5 2.964a4.536 4.536 0 0 0-3.207 1.329l-.5.5a1 1 0 0 0 1.414 1.414l.5-.5a2.535 2.535 0 1 1 3.586 3.586l-4 4-.007.007a2.501 2.501 0 0 1-3.572 0 1 1 0 0 0-1.428 1.4 4.499 4.499 0 0 0 6.425.004l3.996-3.997A4.535 4.535 0 0 0 16.5 2.964Z"
+      fill="currentcolor"
     />
     <path
-      d="M14 10a3.501 3.501 0 0 0-5 0l-4 4a3.535 3.535 0 1 0 5 5l.5-.5"
-      stroke="currentcolor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      d="M11.5 7.95a4.5 4.5 0 0 0-3.21 1.346l-3.997 3.997a4.535 4.535 0 1 0 6.414 6.414l.5-.5a1 1 0 0 0-1.414-1.414l-.5.5a2.536 2.536 0 0 1-3.586-3.586l4-4 .007-.007a2.5 2.5 0 0 1 3.572 0 1 1 0 1 0 1.428-1.4A4.5 4.5 0 0 0 11.5 7.95Z"
+      fill="currentcolor"
     />
   </svg>
 );

package/lib/react/tabler/Linux.tsx

@@ -2,33 +2,15 @@ import * as React from 'react';
 import { SVGProps } from 'react';
 const SvgLinux = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    viewBox="0 0 24 24"
+    viewBox="0 0 25 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <mask
-      id="linux_svg__a"
-      style={{
-        maskType: 'alpha',
-      }}
-      maskUnits="userSpaceOnUse"
-      x={2}
-      y={3}
-      width={20}
-      height={19}
-    >
-      <path
-        d="M7 11.5 3.5 15M7 11.5V9a5 5 0 0 1 10 0v2.5m-10 0S6 13.674 6 15c0 .812.237 1.604.68 2.311M17 11.5l3.5 3.5M17 11.5s1 2.174 1 3.5c0 .812-.237 1.604-.68 2.311M10.5 8h.005M13.5 8h.005M10 11l2 1.5 2-1.5m0 8.734v1.016c0 .066.042.13.117.177A.544.544 0 0 0 14.4 21h2.2a.544.544 0 0 0 .283-.073c.075-.047.117-.11.117-.177l1-2.5c0-.331-.21-.65-.586-.884a1.902 1.902 0 0 0-.094-.055M14 19.734V18.25c0-.331.21-.65.586-.884C14.96 17.132 15.47 17 16 17c.354 0 .698.059 1 .168.113.04.221.088.32.143M14 19.734A7.189 7.189 0 0 1 12 20a7.291 7.291 0 0 1-1.836-.221L10 19.75m-3.32-2.439a1.901 1.901 0 0 0-.094.055c-.375.235-.586.553-.586.884l1 2.5c0 .066.042.13.117.177A.544.544 0 0 0 7.4 21h2.2a.544.544 0 0 0 .283-.073c.075-.047.117-.11.117-.177v-1m-3.32-2.439c.099-.055.206-.103.32-.143A2.974 2.974 0 0 1 8 17c.53 0 1.04.132 1.414.366.375.235.586.553.586.884v1.5"
-        stroke="currentcolor"
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </mask>
-    <g mask="url(#linux_svg__a)">
-      <path fill="currentcolor" d="M0 0h24v24H0z" />
-    </g>
+    <path
+      d="M20.77 17.35c-.1-.197-.198-.395-.198-.593 0-.396-.198-.692-.495-.989-.099-.099-.297-.198-.396-.198.594-1.78-.296-3.561-1.286-4.847-.79-1.187-1.978-2.077-1.879-3.66 0-1.88.198-5.342-3.264-5.045-3.562.198-2.572 3.858-2.671 5.144 0 1.088-.495 2.176-1.286 3.066a3.006 3.006 0 0 0-.495.693c-.99 1.187-1.484 2.77-1.484 4.253-.197.198-.395.396-.494.594-.1.099-.198.198-.198.297-.099.099-.297.198-.495.296-.395.1-.692.297-.89.693-.099.297-.198.692-.099 1.088.099.198.099.396 0 .692-.198.396-.198.89 0 1.385.297.396.791.495 1.484.594.495 0 1.088.198 1.583.396.494.296 1.088.494 1.681.494.297 0 .693-.099.99-.198.296-.197.494-.395.593-.692.396 0 .99-.198 1.682-.198.593 0 1.187.198 1.978.099 0 .099 0 .198.099.297.198.494.692.89 1.286.989h.198c.791-.099 1.583-.495 2.077-1.088.396-.396.89-.693 1.385-.89.594-.297.99-.495 1.088-.99.1-.692-.099-1.088-.494-1.681ZM13.944 4.69c.594.099 1.088.593.99 1.187 0 .297-.1.593-.297.89h-.1c-.197-.099-.296-.099-.395-.198.099-.099.099-.296.198-.494 0-.396-.198-.693-.396-.693-.297 0-.495.297-.495.693v.099c-.098-.1-.296-.1-.395-.198v-.1c-.1-.494.296-1.087.89-1.186Zm-.297 1.978c.1.1.297.198.396.198.099 0 .297.099.396.198.197.099.395.198.395.495 0 .296-.296.593-.89.79-.198.1-.297.1-.396.199a1.671 1.671 0 0 1-.989.296c-.297 0-.593-.197-.791-.395a1.365 1.365 0 0 0-.396-.297 1.522 1.522 0 0 1-.396-.593c0-.1.1-.198.198-.297.297-.198.396-.297.495-.396l.099-.099c.198-.297.593-.494.989-.494.297.098.594.197.89.395Zm-2.077-1.78c.396 0 .692.395.791 1.088v.198c-.099 0-.296.099-.395.197v-.197c0-.297-.198-.594-.396-.495-.198 0-.297.297-.297.594 0 .197.1.296.198.395 0 0-.099.1-.198.1-.198-.199-.396-.495-.396-.792 0-.594.297-1.088.693-1.088Zm-.99 15.926c-.692.297-1.582.198-2.176-.198-.593-.297-1.088-.396-1.78-.396-.495-.099-.99-.099-1.088-.296-.1-.198-.1-.495.099-.99a1.372 1.372 0 0 0 0-.89 1.092 1.092 0 0 1 0-.791c.099-.297.296-.396.593-.495.297-.099.495-.198.693-.396.099-.098.198-.197.296-.395.297-.396.495-.594.792-.594.593.1 1.088.99 1.484 1.88.197.297.395.692.692.989.396.495.89 1.187.89 1.583 0 .494-.197.791-.494.989Zm4.848-2.176c0 .099 0 .099-.099.197-1.187.89-2.77.99-4.056.297l-.593-.89c.89-.099.692-1.286-1.187-2.473-1.979-1.286-.594-3.66.099-4.748.098-.1.098 0-.297.791-.297.594-.89 2.078-.1 3.166 0-.792.199-1.583.495-2.375.693-1.286 1.188-2.77 1.484-4.253.1.099.1.099.198.099.099.099.198.198.297.198.198.296.593.395.89.395h.1c.395 0 .79-.099 1.087-.395.1-.1.198-.198.396-.198.297-.1.593-.297.89-.594.396 1.286.792 2.473 1.385 3.561.396.792.693 1.583.89 2.474.297 0 .693.098.99.296.791.396 1.088.693.989 1.187h-.198c0-.296-.198-.593-.89-.89-.693-.297-1.286-.297-1.484.396-.1 0-.198.099-.297.099-.791.395-.791 1.483-.89 2.572.099.395 0 .692-.1 1.088Zm4.55.593c-.593.198-1.088.594-1.484 1.088-.395.594-1.088.99-1.88.89a.95.95 0 0 1-.89-.692c-.098-.593-.098-1.187.198-1.78.1-.396.198-.693.297-1.088.1-1.188.1-1.88.594-2.177 0 .495.297.792.692.99.495 0 .99-.1 1.385-.495h.198c.297 0 .495 0 .692.198.198.197.297.494.297.692 0 .297.198.594.297.89.495.495.495.792.495.89-.1.198-.495.396-.89.594ZM11.075 7.36c-.099 0-.099 0-.099.099 0 0 0 .099.1.099.098 0 .098.098.098.098.297.396.792.594 1.385.693.495-.1.99-.198 1.484-.594l.594-.296c.098 0 .098-.1.098-.1 0-.098 0-.098-.098-.098-.198.099-.495.198-.693.296-.396.297-.89.495-1.385.495-.494 0-.89-.297-1.187-.593-.099 0-.198-.1-.297-.1Z"
+      fill="currentcolor"
+    />
   </svg>
 );
 export default SvgLinux;

package/lib/react/tabler/List.tsx

@@ -8,7 +8,7 @@ const SvgList = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      d="M9 6h11M9 12h11M9 18h11M5 6v.01M5 12v.01M5 18v.01"
+      d="M9 6h11M5 6v.01M9 12h11M5 12v.01M9 18h11M5 18v.01"
       stroke="currentcolor"
       strokeWidth={2}
       strokeLinecap="round"

package/lib/react/tabler/ListFilled.tsx

@@ -8,11 +8,8 @@ const SvgListFilled = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      d="M9 6h11M9 12h11M9 18h11M5 6v.01M5 12v.01M5 18v.01"
-      stroke="currentcolor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      d="M5 5a1 1 0 0 1 1 1v.01a1 1 0 1 1-2 0V6a1 1 0 0 1 1-1ZM8 6a1 1 0 0 1 1-1h11a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1ZM5 11a1 1 0 0 1 1 1v.01a1 1 0 1 1-2 0V12a1 1 0 0 1 1-1ZM8 12a1 1 0 0 1 1-1h11a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1ZM5 17a1 1 0 0 1 1 1v.01a1 1 0 1 1-2 0V18a1 1 0 0 1 1-1ZM8 18a1 1 0 0 1 1-1h11a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z"
+      fill="currentcolor"
     />
   </svg>
 );

package/lib/react/tabler/LivechatColored.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const SvgLivechatColored = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M17.316 5.663a76.787 76.787 0 0 0-10.615 0A1.393 1.393 0 0 0 5.393 6.93c-.172 2.142-.195 5.35-.037 7.49.052.707.673 1.314 1.512 1.314H9.5v3.246l-2.627-.002c-2.409 0-4.571-1.785-4.758-4.319-.17-2.306-.147-5.682.039-7.99.186-2.312 2.045-4.083 4.314-4.246a80.03 80.03 0 0 1 11.08 0c2.27.163 4.13 1.934 4.315 4.247.186 2.307.177 5.683.007 7.99-.187 2.533-2.344 4.325-4.753 4.325l-2.6-.001L9.5 22.229v-3.25l5.018-3.246h2.6c.839 0 1.46-.607 1.511-1.314.158-2.14.167-5.348-.005-7.49a1.393 1.393 0 0 0-1.308-1.266Z"
+      fill="#FE5000"
+    />
+  </svg>
+);
+export default SvgLivechatColored;

package/lib/react/tabler/LockBlack.tsx

@@ -8,14 +8,7 @@ const SvgLockBlack = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      d="M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6Z"
-      stroke="currentcolor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M11 16a1 1 0 1 0 2 0 1 1 0 0 0-2 0ZM8 11V7a4 4 0 0 1 8 0v4"
+      d="M8 11V7a4 4 0 0 1 8 0v4M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6Zm6 3a1 1 0 1 0 2 0 1 1 0 0 0-2 0Z"
       stroke="currentcolor"
       strokeWidth={2}
       strokeLinecap="round"

package/lib/react/tabler/LockBlackFilled.tsx

@@ -10,7 +10,7 @@ const SvgLockBlackFilled = (props: SVGProps<SVGSVGElement>) => (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M9.879 4.879A3 3 0 0 1 15 7v3H9V7a3 3 0 0 1 .879-2.121ZM7 10V7a5 5 0 1 1 10 0v3a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3Zm3.586 4.586a2 2 0 1 1 2.828 2.828 2 2 0 0 1-2.828-2.828Z"
+      d="M7 10V7a5 5 0 1 1 10 0v3a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3Zm2.879-5.121A3 3 0 0 1 15 7v3H9V7a3 3 0 0 1 .879-2.121Zm.707 9.707a2 2 0 1 1 2.828 2.828 2 2 0 0 1-2.828-2.828Z"
       fill="currentcolor"
     />
   </svg>

package/lib/react/tabler/LockOpen.tsx

@@ -8,14 +8,7 @@ const SvgLockOpen = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      d="M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6Z"
-      stroke="currentcolor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M11 16a1 1 0 1 0 2 0 1 1 0 0 0-2 0ZM8 11V6a4 4 0 0 1 8 0"
+      d="M8 11V6a4 4 0 0 1 8 0M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6Zm6 3a1 1 0 1 0 2 0 1 1 0 0 0-2 0Z"
       stroke="currentcolor"
       strokeWidth={2}
       strokeLinecap="round"

package/lib/react/tabler/Logout.tsx

@@ -7,27 +7,12 @@ const SvgLogout = (props: SVGProps<SVGSVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <mask
-      id="logout_svg__a"
-      style={{
-        maskType: 'alpha',
-      }}
-      maskUnits="userSpaceOnUse"
-      x={2}
-      y={3}
-      width={20}
-      height={18}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h7a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3H5Zm13.707 5.293a1 1 0 1 0-1.414 1.414L18.586 11H7a1 1 0 1 0 0 2h11.586l-1.293 1.293a1 1 0 0 0 1.414 1.414l3-3a1 1 0 0 0 0-1.414l-3-3Z"
-        fill="currentcolor"
-      />
-    </mask>
-    <g mask="url(#logout_svg__a)">
-      <path d="M0 0h24v24H0V0Z" fill="currentcolor" />
-    </g>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h7a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3H5Zm13.707 5.293a1 1 0 1 0-1.414 1.414L18.586 11H7a1 1 0 1 0 0 2h11.586l-1.293 1.293a1 1 0 0 0 1.414 1.414l3-3a1 1 0 0 0 0-1.414l-3-3Z"
+      fill="currentcolor"
+    />
   </svg>
 );
 export default SvgLogout;

package/lib/react/tabler/LogoutFilled.tsx

@@ -7,27 +7,12 @@ const SvgLogoutFilled = (props: SVGProps<SVGSVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <mask
-      id="logout-filled_svg__a"
-      style={{
-        maskType: 'alpha',
-      }}
-      maskUnits="userSpaceOnUse"
-      x={2}
-      y={3}
-      width={20}
-      height={18}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h7a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3H5Zm13.707 5.293a1 1 0 1 0-1.414 1.414L18.586 11H7a1 1 0 1 0 0 2h11.586l-1.293 1.293a1 1 0 0 0 1.414 1.414l3-3a1 1 0 0 0 0-1.414l-3-3Z"
-        fill="currentcolor"
-      />
-    </mask>
-    <g mask="url(#logout-filled_svg__a)">
-      <path d="M.5 0h24v24H.5V0Z" fill="currentcolor" />
-    </g>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h7a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3H5Zm13.707 5.293a1 1 0 1 0-1.414 1.414L18.586 11H7a1 1 0 1 0 0 2h11.586l-1.293 1.293a1 1 0 0 0 1.414 1.414l3-3a1 1 0 0 0 0-1.414l-3-3Z"
+      fill="currentcolor"
+    />
   </svg>
 );
 export default SvgLogoutFilled;

package/lib/react/tabler/MagentoColored.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const SvgMagentoColored = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#magento-colored_svg__a)">
+      <g clipPath="url(#magento-colored_svg__b)">
+        <path
+          d="M13.58 7.353v16.143l-1.588.97-1.588-.976V7.366L6.29 9.898v13.805l5.702 3.49 5.75-3.515V9.89L13.58 7.353Zm-1.588-8.5L0 6.117v13.807l3.115 1.835V7.952l8.88-5.4 8.888 5.392.037.02-.004 13.775L24 19.925V6.118L11.992-1.148Z"
+          fill="#EC6737"
+        />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="magento-colored_svg__a">
+        <path fill="#fff" transform="translate(0 .85)" d="M0 0h24v24H0z" />
+      </clipPath>
+      <clipPath id="magento-colored_svg__b">
+        <path
+          fill="#fff"
+          transform="translate(0 -1.15)"
+          d="M0 0h24v28.409H0z"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgMagentoColored;

package/lib/react/tabler/OktaColored.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const SvgOktaColored = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 3c-4.958 0-9 4.013-9 9s4.013 9 9 9 9-4.013 9-9-4.042-9-9-9Zm0 13.5A4.49 4.49 0 0 1 7.5 12 4.49 4.49 0 0 1 12 7.5a4.49 4.49 0 0 1 4.5 4.5 4.49 4.49 0 0 1-4.5 4.5Z"
+      fill="#007DC1"
+    />
+  </svg>
+);
+export default SvgOktaColored;

package/lib/react/tabler/OpenwidgetColored.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const SvgOpenwidgetColored = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <mask
+      id="openwidget-colored_svg__a"
+      style={{
+        maskType: 'alpha',
+      }}
+      maskUnits="userSpaceOnUse"
+      x={2}
+      y={3}
+      width={20}
+      height={18}
+    >
+      <path
+        d="M12.052 3.286c1.851 0 3.77.067 5.49.202 2.248.202 4.1 1.956 4.299 4.316l.023.407.024.517c.024.568.048 1.856.072 3.864l-.013.651a74.802 74.802 0 0 1-.106 2.867c-.199 2.36-2.05 4.113-4.3 4.316-1.563.122-3.29.19-4.983.2l-.51.002c-1.853 0-3.77-.068-5.49-.203-2.25-.202-4.102-1.955-4.3-4.315l-.023-.408-.017-.346a99.676 99.676 0 0 1-.075-2.556v-1.687l.013-.646c.024-1.055.06-1.996.102-2.663.198-2.36 2.05-4.114 4.3-4.316 1.563-.122 3.29-.19 4.983-.2l.51-.002Zm-.003 3.305-.605.002-.585.008c-1.365.024-2.72.088-4.037.191-.728.068-1.257.607-1.323 1.282l-.022.242c-.061.72-.1 1.731-.124 2.842v1.597l.015.61c.027.993.07 1.87.131 2.475.066.674.595 1.214 1.323 1.281 1.317.104 2.672.167 4.037.192l.585.007.645.003.566-.002a67.6 67.6 0 0 0 4.622-.2c.727-.067 1.257-.606 1.323-1.28l.022-.243c.075-.882.117-2.2.137-3.602l-.014-.838-.014-.61c-.028-.993-.07-1.87-.131-2.475-.066-.674-.596-1.213-1.323-1.28A67.039 67.039 0 0 0 13.24 6.6l-.585-.008-.606-.002Z"
+        fill="#fff"
+      />
+    </mask>
+    <g
+      mask="url(#openwidget-colored_svg__a)"
+      fillRule="evenodd"
+      clipRule="evenodd"
+    >
+      <path
+        d="M12.05-.43c3.296 0 6.542 1.527 8.767 3.628.044.041.007-.18.304.26l-9.071 8.499V-.431Z"
+        fill="url(#openwidget-colored_svg__b)"
+      />
+      <path
+        d="M20.817 3.198c2.338 2.334 3.548 5.538 3.629 8.603l.003.71-12.4-.554 8.768-8.76Z"
+        fill="url(#openwidget-colored_svg__c)"
+      />
+      <path
+        d="M24.45 11.957c0 3.257-1.26 6.221-3.318 8.433-.063.068-.337.26-.402.326l-8.68-8.76h12.4Z"
+        fill="url(#openwidget-colored_svg__d)"
+      />
+      <path
+        d="M20.94 20.592c-2.333 2.331-5.651 3.66-8.72 3.748-.056.002-.934 0-.99 0l.82-12.383 8.89 8.635Z"
+        fill="url(#openwidget-colored_svg__e)"
+      />
+      <path
+        d="M12.05 24.344c-3.314 0-6.444-1.417-8.672-3.536-.032-.03-.508-.562-.54-.593l9.212-8.258v12.387Z"
+        fill="url(#openwidget-colored_svg__f)"
+      />
+      <path
+        d="M3.282 20.716C.967 18.403-.242 15.239-.344 12.2c-.003-.081 0-.747 0-.828l12.393.584-8.767 8.759Z"
+        fill="url(#openwidget-colored_svg__g)"
+      />
+      <path
+        d="M-.35 11.957c0-3.284 1.28-6.27 3.368-8.487.047-.05.515-.394.563-.443l8.469 8.93H-.35Z"
+        fill="url(#openwidget-colored_svg__h)"
+      />
+      <path
+        d="M3.16 3.321C5.456 1.027 8.707-.296 11.734-.422c.105-.004.437-.007.542-.009l-.226 12.388L3.16 3.32Z"
+        fill="url(#openwidget-colored_svg__i)"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="openwidget-colored_svg__b"
+        x1={12.261}
+        y1={5.345}
+        x2={17.277}
+        y2={5.607}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#B349D9" />
+        <stop offset={1} stopColor="#F53547" />
+      </linearGradient>
+      <linearGradient
+        id="openwidget-colored_svg__c"
+        x1={18.29}
+        y1={5.293}
+        x2={18.591}
+        y2={11.501}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#F13354" />
+        <stop offset={1} stopColor="#FF4200" />
+      </linearGradient>
+      <linearGradient
+        id="openwidget-colored_svg__d"
+        x1={20.545}
+        y1={12.371}
+        x2={19.464}
+        y2={17.468}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FF4200" />
+        <stop offset={1} stopColor="#FFD000" />
+      </linearGradient>
+      <linearGradient
+        id="openwidget-colored_svg__e"
+        x1={17.347}
+        y1={17.77}
+        x2={12.495}
+        y2={17.62}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FFD000" />
+        <stop offset={1} stopColor="#72CE3A" />
+      </linearGradient>
+      <linearGradient
+        id="openwidget-colored_svg__f"
+        x1={6.547}
+        y1={18.19}
+        x2={12.01}
+        y2={18.307}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#02B296" />
+        <stop offset={1} stopColor="#72CE3A" />
+      </linearGradient>
+      <linearGradient
+        id="openwidget-colored_svg__g"
+        x1={3.611}
+        y1={12.003}
+        x2={5.12}
+        y2={17.641}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#2173DA" />
+        <stop offset={1} stopColor="#02B195" />
+      </linearGradient>
+      <linearGradient
+        id="openwidget-colored_svg__h"
+        x1={6.717}
+        y1={7.492}
+        x2={4.94}
+        y2={10.074}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#3750FF" />
+        <stop offset={1} stopColor="#2172D9" />
+      </linearGradient>
+      <linearGradient
+        id="openwidget-colored_svg__i"
+        x1={11.58}
+        y1={4.978}
+        x2={6.294}
+        y2={4.209}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#B44ADA" />
+        <stop offset={1} stopColor="#364FFE" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+export default SvgOpenwidgetColored;