odaptos_design_system 2.0.5 → 2.0.7

package/src/DesignTokens/Icons/MediaControl/NoCameraIcon.tsx

@@ -1,54 +1,54 @@
-import React from 'react';
-import { SvgIcon, SvgIconProps } from '@mui/material';
-import { getIconSize } from '../../../utils/getIconSize';
-
-interface CustomSvgProps {
-  size?: 'sm' | 'base' | 'lg' | 'xl';
-}
-
-export default function NoCameraIcon({
-  stroke,
-  strokeWidth,
-  fill,
-  size = 'base',
-  ...rest
-}: SvgIconProps & CustomSvgProps) {
-  return (
-    <SvgIcon
-      strokeWidth={strokeWidth ?? 0.1}
-      stroke={stroke ? stroke : 'currentColor'}
-      sx={{ height: getIconSize(size), width: getIconSize(size) }}
-      {...rest}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <g clipPath="url(#clip0_296_1941)">
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M18.6457 15.7973L21.83 17.389C22.0587 17.5032 22.3128 17.557 22.5681 17.5454C22.8234 17.5338 23.0716 17.4571 23.289 17.3227C23.5064 17.1883 23.6858 17.0005 23.8102 16.7772C23.9347 16.554 24 16.3026 24 16.047V7.97458C24.0002 7.71877 23.9349 7.46716 23.8104 7.2437C23.6859 7.02024 23.5062 6.83237 23.2886 6.69797C23.0709 6.56356 22.8225 6.4871 22.5669 6.47584C22.3116 6.4646 22.0576 6.51883 21.8292 6.63337L18.4147 8.34013C18.0442 8.52532 17.8939 8.97581 18.0791 9.34632C18.2643 9.71682 18.7148 9.86704 19.0853 9.68185L22.5 7.97501V16.047L19.0853 14.3401C18.7148 14.1549 18.2643 14.3051 18.0791 14.6757C17.9925 14.8489 17.9793 15.0396 18.0276 15.2126C18.2566 15.4324 18.4637 15.6285 18.6457 15.7973ZM15.6449 18.1449L14.576 17.0759C14.1674 17.6423 13.5017 18.011 12.75 18.011H3.75C2.50736 18.011 1.5 17.0036 1.5 15.761V8.26099C1.5 7.09518 2.38663 6.13646 3.52237 6.02236L2.30114 4.80113C0.949459 5.36783 0 6.70353 0 8.26099V15.761C0 17.8321 1.67893 19.511 3.75 19.511H12.75C13.9157 19.511 14.9571 18.9791 15.6449 18.1449ZM7.45841 4.51099H12.75C14.8211 4.51099 16.5 6.18992 16.5 8.26099V13.7177C16.0334 13.255 15.5293 12.751 15 12.2188V8.26099C15 7.01835 13.9926 6.01099 12.75 6.01099H8.91209C8.4083 5.49214 7.92057 4.98881 7.45841 4.51099ZM22.5 7.97501L22.5002 7.97399L22.5014 7.97429L22.5 7.97501Z"
-            fill={fill}
-          />
-          <path d="M2 2L22 22Z" fill={fill} />
-          <path
-            d="M2 2L22 22"
-            stroke={fill}
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_296_1941">
-            <rect width="24" height="24" fill={fill} />
-          </clipPath>
-        </defs>
-      </svg>
-    </SvgIcon>
-  );
-}
+import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+import { getIconSize } from '../../../utils/getIconSize';
+
+interface CustomSvgProps {
+  size?: 'sm' | 'base' | 'lg' | 'xl';
+}
+
+export default function NoCameraIcon({
+  stroke,
+  strokeWidth,
+  fill,
+  size = 'base',
+  ...rest
+}: SvgIconProps & CustomSvgProps) {
+  return (
+    <SvgIcon
+      strokeWidth={strokeWidth ?? 0.1}
+      stroke={stroke ? stroke : 'currentColor'}
+      sx={{ height: getIconSize(size), width: getIconSize(size) }}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <g clipPath="url(#clip0_296_1941)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18.6457 15.7973L21.83 17.389C22.0587 17.5032 22.3128 17.557 22.5681 17.5454C22.8234 17.5338 23.0716 17.4571 23.289 17.3227C23.5064 17.1883 23.6858 17.0005 23.8102 16.7772C23.9347 16.554 24 16.3026 24 16.047V7.97458C24.0002 7.71877 23.9349 7.46716 23.8104 7.2437C23.6859 7.02024 23.5062 6.83237 23.2886 6.69797C23.0709 6.56356 22.8225 6.4871 22.5669 6.47584C22.3116 6.4646 22.0576 6.51883 21.8292 6.63337L18.4147 8.34013C18.0442 8.52532 17.8939 8.97581 18.0791 9.34632C18.2643 9.71682 18.7148 9.86704 19.0853 9.68185L22.5 7.97501V16.047L19.0853 14.3401C18.7148 14.1549 18.2643 14.3051 18.0791 14.6757C17.9925 14.8489 17.9793 15.0396 18.0276 15.2126C18.2566 15.4324 18.4637 15.6285 18.6457 15.7973ZM15.6449 18.1449L14.576 17.0759C14.1674 17.6423 13.5017 18.011 12.75 18.011H3.75C2.50736 18.011 1.5 17.0036 1.5 15.761V8.26099C1.5 7.09518 2.38663 6.13646 3.52237 6.02236L2.30114 4.80113C0.949459 5.36783 0 6.70353 0 8.26099V15.761C0 17.8321 1.67893 19.511 3.75 19.511H12.75C13.9157 19.511 14.9571 18.9791 15.6449 18.1449ZM7.45841 4.51099H12.75C14.8211 4.51099 16.5 6.18992 16.5 8.26099V13.7177C16.0334 13.255 15.5293 12.751 15 12.2188V8.26099C15 7.01835 13.9926 6.01099 12.75 6.01099H8.91209C8.4083 5.49214 7.92057 4.98881 7.45841 4.51099ZM22.5 7.97501L22.5002 7.97399L22.5014 7.97429L22.5 7.97501Z"
+            fill={fill}
+          />
+          <path d="M2 2L22 22Z" fill={fill} />
+          <path
+            d="M2 2L22 22"
+            stroke={fill}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_296_1941">
+            <rect width="24" height="24" fill={fill} />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/DesignTokens/Icons/MediaControl/NoMicrophoneIcon.tsx

@@ -1,46 +1,46 @@
-import React from 'react';
-import { SvgIcon, SvgIconProps } from '@mui/material';
-import { getIconSize } from '../../../utils/getIconSize';
-
-interface CustomSvgProps {
-  size?: 'sm' | 'base' | 'lg' | 'xl';
-}
-
-export default function NoMicrophoneIcon({
-  stroke,
-  strokeWidth,
-  fill,
-  size = 'base',
-  ...rest
-}: SvgIconProps & CustomSvgProps) {
-  return (
-    <SvgIcon
-      strokeWidth={strokeWidth ?? 0.1}
-      stroke={stroke ? stroke : 'currentColor'}
-      sx={{ height: getIconSize(size), width: getIconSize(size) }}
-      {...rest}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <g clipPath="url(#clip0_296_1932)">
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M6.61787 5.07627C6.63779 4.4461 6.77477 3.82379 7.02254 3.24001C7.29229 2.60201 7.68921 2.02301 8.18973 1.53501C8.69025 1.04701 9.2841 0.660006 9.93847 0.397006C10.5918 0.133006 11.2923 -0.000994444 12 5.55581e-06C12.7077 -0.000994444 13.4083 0.133006 14.0616 0.397006C14.716 0.660006 15.3098 1.04701 15.8103 1.53501C16.3109 2.02301 16.7078 2.60201 16.9775 3.24001C17.2483 3.87801 17.3868 4.56201 17.3847 5.25001V11.22C17.4728 12.5559 17.1208 13.8793 16.3893 15.0002L17.5399 16.1688C17.8996 15.7251 18.1968 15.2352 18.4227 14.712C18.7499 13.954 18.9191 13.14 18.9232 12.318V9.75001C18.9232 9.33601 19.2678 9.00001 19.6924 9.00001C20.1171 9.00001 20.4617 9.33601 20.4617 9.75001V12.32V12.323C20.4576 13.343 20.2463 14.352 19.8412 15.293C19.5342 16.0053 19.12 16.6682 18.6134 17.2591L21.7858 20.481C22.0802 20.779 22.0699 21.254 21.7632 21.541C21.4576 21.828 20.9704 21.818 20.676 21.519L6.86937 7.49678C6.842 7.47269 6.81642 7.44671 6.79284 7.41905L2.21427 2.769C1.91991 2.471 1.93017 1.996 2.23684 1.709C2.54248 1.422 3.02967 1.432 3.32403 1.731L6.61787 5.07627ZM15.282 13.8757C15.7109 13.0909 15.9102 12.1994 15.8483 11.301C15.8473 11.284 15.8462 11.267 15.8462 11.25V5.25001V5.24801C15.8473 4.75601 15.7488 4.26801 15.556 3.81301C15.3632 3.35701 15.0801 2.94401 14.7231 2.59501C14.3652 2.24701 13.9416 1.97101 13.4739 1.78301C13.0072 1.59501 12.5067 1.49901 12.0021 1.50001H11.998C11.4934 1.49901 10.9928 1.59501 10.5262 1.78301C10.0585 1.97101 9.63488 2.24701 9.27693 2.59501C8.92 2.94401 8.63692 3.35701 8.44409 3.81301C8.25127 4.26801 8.15281 4.75601 8.15384 5.24801V5.25001V6.63622L15.282 13.8757ZM14.9006 18.153C15.2893 17.987 15.7437 18.159 15.9149 18.538C16.0852 18.917 15.9088 19.36 15.5201 19.527C14.6463 19.9012 13.7169 20.134 12.7693 20.2164V23.25C12.7693 23.664 12.4246 24 12 24C11.5754 24 11.2308 23.664 11.2308 23.25V20.2287C9.31627 20.0887 7.50103 19.3054 6.10252 18C4.51378 16.517 3.59172 14.482 3.53839 12.338V12.32V9.75001C3.53839 9.33601 3.88301 9.00001 4.30763 9.00001C4.73225 9.00001 5.07687 9.33601 5.07687 9.75001V12.316C5.12405 14.058 5.87483 15.711 7.16612 16.916C8.4605 18.125 10.1928 18.784 11.9857 18.75H11.999C12.998 18.749 13.9857 18.546 14.9006 18.153ZM13.3385 16.387C13.2924 15.976 12.9118 15.679 12.4893 15.725C12.2113 15.755 10.7026 15.849 9.54154 14.915C8.74563 14.275 8.15383 13.152 8.15383 11.25C8.15383 10.836 7.80921 10.5 7.38459 10.5C6.95997 10.5 6.61535 10.836 6.61535 11.25C6.61535 13.773 7.50664 15.223 8.56204 16.072C10.1774 17.372 12.2729 17.257 12.6595 17.215C13.0811 17.17 13.3857 16.799 13.3385 16.387Z"
-            fill={fill}
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_296_1932">
-            <rect width="24" height="24" fill={fill} />
-          </clipPath>
-        </defs>
-      </svg>
-    </SvgIcon>
-  );
-}
+import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+import { getIconSize } from '../../../utils/getIconSize';
+
+interface CustomSvgProps {
+  size?: 'sm' | 'base' | 'lg' | 'xl';
+}
+
+export default function NoMicrophoneIcon({
+  stroke,
+  strokeWidth,
+  fill,
+  size = 'base',
+  ...rest
+}: SvgIconProps & CustomSvgProps) {
+  return (
+    <SvgIcon
+      strokeWidth={strokeWidth ?? 0.1}
+      stroke={stroke ? stroke : 'currentColor'}
+      sx={{ height: getIconSize(size), width: getIconSize(size) }}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <g clipPath="url(#clip0_296_1932)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.61787 5.07627C6.63779 4.4461 6.77477 3.82379 7.02254 3.24001C7.29229 2.60201 7.68921 2.02301 8.18973 1.53501C8.69025 1.04701 9.2841 0.660006 9.93847 0.397006C10.5918 0.133006 11.2923 -0.000994444 12 5.55581e-06C12.7077 -0.000994444 13.4083 0.133006 14.0616 0.397006C14.716 0.660006 15.3098 1.04701 15.8103 1.53501C16.3109 2.02301 16.7078 2.60201 16.9775 3.24001C17.2483 3.87801 17.3868 4.56201 17.3847 5.25001V11.22C17.4728 12.5559 17.1208 13.8793 16.3893 15.0002L17.5399 16.1688C17.8996 15.7251 18.1968 15.2352 18.4227 14.712C18.7499 13.954 18.9191 13.14 18.9232 12.318V9.75001C18.9232 9.33601 19.2678 9.00001 19.6924 9.00001C20.1171 9.00001 20.4617 9.33601 20.4617 9.75001V12.32V12.323C20.4576 13.343 20.2463 14.352 19.8412 15.293C19.5342 16.0053 19.12 16.6682 18.6134 17.2591L21.7858 20.481C22.0802 20.779 22.0699 21.254 21.7632 21.541C21.4576 21.828 20.9704 21.818 20.676 21.519L6.86937 7.49678C6.842 7.47269 6.81642 7.44671 6.79284 7.41905L2.21427 2.769C1.91991 2.471 1.93017 1.996 2.23684 1.709C2.54248 1.422 3.02967 1.432 3.32403 1.731L6.61787 5.07627ZM15.282 13.8757C15.7109 13.0909 15.9102 12.1994 15.8483 11.301C15.8473 11.284 15.8462 11.267 15.8462 11.25V5.25001V5.24801C15.8473 4.75601 15.7488 4.26801 15.556 3.81301C15.3632 3.35701 15.0801 2.94401 14.7231 2.59501C14.3652 2.24701 13.9416 1.97101 13.4739 1.78301C13.0072 1.59501 12.5067 1.49901 12.0021 1.50001H11.998C11.4934 1.49901 10.9928 1.59501 10.5262 1.78301C10.0585 1.97101 9.63488 2.24701 9.27693 2.59501C8.92 2.94401 8.63692 3.35701 8.44409 3.81301C8.25127 4.26801 8.15281 4.75601 8.15384 5.24801V5.25001V6.63622L15.282 13.8757ZM14.9006 18.153C15.2893 17.987 15.7437 18.159 15.9149 18.538C16.0852 18.917 15.9088 19.36 15.5201 19.527C14.6463 19.9012 13.7169 20.134 12.7693 20.2164V23.25C12.7693 23.664 12.4246 24 12 24C11.5754 24 11.2308 23.664 11.2308 23.25V20.2287C9.31627 20.0887 7.50103 19.3054 6.10252 18C4.51378 16.517 3.59172 14.482 3.53839 12.338V12.32V9.75001C3.53839 9.33601 3.88301 9.00001 4.30763 9.00001C4.73225 9.00001 5.07687 9.33601 5.07687 9.75001V12.316C5.12405 14.058 5.87483 15.711 7.16612 16.916C8.4605 18.125 10.1928 18.784 11.9857 18.75H11.999C12.998 18.749 13.9857 18.546 14.9006 18.153ZM13.3385 16.387C13.2924 15.976 12.9118 15.679 12.4893 15.725C12.2113 15.755 10.7026 15.849 9.54154 14.915C8.74563 14.275 8.15383 13.152 8.15383 11.25C8.15383 10.836 7.80921 10.5 7.38459 10.5C6.95997 10.5 6.61535 10.836 6.61535 11.25C6.61535 13.773 7.50664 15.223 8.56204 16.072C10.1774 17.372 12.2729 17.257 12.6595 17.215C13.0811 17.17 13.3857 16.799 13.3385 16.387Z"
+            fill={fill}
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_296_1932">
+            <rect width="24" height="24" fill={fill} />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/DesignTokens/Icons/MediaControl/PauseIcon.tsx

@@ -1,45 +1,45 @@
-import React from 'react';
-import { SvgIcon, SvgIconProps } from '@mui/material';
-import { getIconSize } from '../../../utils/getIconSize';
-
-interface CustomSvgProps {
-  size?: 'sm' | 'base' | 'lg' | 'xl';
-}
-
-export default function PauseIcon({
-  stroke,
-  strokeWidth,
-  fill,
-  size = 'base',
-  ...rest
-}: SvgIconProps & CustomSvgProps) {
-  return (
-    <SvgIcon
-      strokeWidth={strokeWidth ?? 0.1}
-      stroke={stroke ? stroke : 'currentColor'}
-      sx={{ height: getIconSize(size), width: getIconSize(size) }}
-      {...rest}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M6.75 4.5C6.33579 4.5 6 4.83579 6 5.25V18.75C6 19.1642 6.33579 19.5 6.75 19.5H8.25C8.66421 19.5 9 19.1642 9 18.75V5.25C9 4.83579 8.66421 4.5 8.25 4.5H6.75ZM4.5 5.25C4.5 4.00736 5.50736 3 6.75 3H8.25C9.49264 3 10.5 4.00736 10.5 5.25V18.75C10.5 19.9926 9.49264 21 8.25 21H6.75C5.50736 21 4.5 19.9926 4.5 18.75V5.25Z"
-          fill={fill}
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M15.75 4.5C15.3358 4.5 15 4.83579 15 5.25V18.75C15 19.1642 15.3358 19.5 15.75 19.5H17.25C17.6642 19.5 18 19.1642 18 18.75V5.25C18 4.83579 17.6642 4.5 17.25 4.5H15.75ZM13.5 5.25C13.5 4.00736 14.5074 3 15.75 3H17.25C18.4926 3 19.5 4.00736 19.5 5.25V18.75C19.5 19.9926 18.4926 21 17.25 21H15.75C14.5074 21 13.5 19.9926 13.5 18.75V5.25Z"
-          fill={fill}
-        />
-      </svg>
-    </SvgIcon>
-  );
-}
+import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+import { getIconSize } from '../../../utils/getIconSize';
+
+interface CustomSvgProps {
+  size?: 'sm' | 'base' | 'lg' | 'xl';
+}
+
+export default function PauseIcon({
+  stroke,
+  strokeWidth,
+  fill,
+  size = 'base',
+  ...rest
+}: SvgIconProps & CustomSvgProps) {
+  return (
+    <SvgIcon
+      strokeWidth={strokeWidth ?? 0.1}
+      stroke={stroke ? stroke : 'currentColor'}
+      sx={{ height: getIconSize(size), width: getIconSize(size) }}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.75 4.5C6.33579 4.5 6 4.83579 6 5.25V18.75C6 19.1642 6.33579 19.5 6.75 19.5H8.25C8.66421 19.5 9 19.1642 9 18.75V5.25C9 4.83579 8.66421 4.5 8.25 4.5H6.75ZM4.5 5.25C4.5 4.00736 5.50736 3 6.75 3H8.25C9.49264 3 10.5 4.00736 10.5 5.25V18.75C10.5 19.9926 9.49264 21 8.25 21H6.75C5.50736 21 4.5 19.9926 4.5 18.75V5.25Z"
+          fill={fill}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M15.75 4.5C15.3358 4.5 15 4.83579 15 5.25V18.75C15 19.1642 15.3358 19.5 15.75 19.5H17.25C17.6642 19.5 18 19.1642 18 18.75V5.25C18 4.83579 17.6642 4.5 17.25 4.5H15.75ZM13.5 5.25C13.5 4.00736 14.5074 3 15.75 3H17.25C18.4926 3 19.5 4.00736 19.5 5.25V18.75C19.5 19.9926 18.4926 21 17.25 21H15.75C14.5074 21 13.5 19.9926 13.5 18.75V5.25Z"
+          fill={fill}
+        />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/DesignTokens/Icons/MediaControl/PlayIcon.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import { SvgIcon, SvgIconProps } from '@mui/material';
-import { getIconSize } from '../../../utils/getIconSize';
-
-interface CustomSvgProps {
-  size?: 'sm' | 'base' | 'lg' | 'xl';
-}
-
-export default function PlayIcon({
-  stroke,
-  strokeWidth,
-  fill,
-  size = 'base',
-  ...rest
-}: SvgIconProps & CustomSvgProps) {
-  return (
-    <SvgIcon
-      strokeWidth={strokeWidth ?? 1.7}
-      stroke={stroke ? stroke : 'currentColor'}
-      sx={{ height: getIconSize(size), width: getIconSize(size) }}
-      {...rest}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <path
-          d="M2.338 3.255V20.745C2.33797 21.0043 2.40519 21.2593 2.53308 21.4849C2.66098 21.7105 2.84518 21.8991 3.06771 22.0322C3.29024 22.1654 3.5435 22.2386 3.80277 22.2447C4.06204 22.2508 4.31846 22.1896 4.547 22.067L20.87 13.322C21.1091 13.1938 21.309 13.0032 21.4483 12.7704C21.5877 12.5375 21.6613 12.2713 21.6613 12C21.6613 11.7287 21.5877 11.4624 21.4483 11.2296C21.309 10.9968 21.1091 10.8062 20.87 10.678L4.547 1.933C4.31846 1.81042 4.06204 1.74918 3.80277 1.75527C3.5435 1.76136 3.29024 1.83457 3.06771 1.96775C2.84518 2.10092 2.66098 2.28952 2.53308 2.51513C2.40519 2.74074 2.33797 2.99566 2.338 3.255Z"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          fill={fill}
-        />
-      </svg>
-    </SvgIcon>
-  );
-}
+import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+import { getIconSize } from '../../../utils/getIconSize';
+
+interface CustomSvgProps {
+  size?: 'sm' | 'base' | 'lg' | 'xl';
+}
+
+export default function PlayIcon({
+  stroke,
+  strokeWidth,
+  fill,
+  size = 'base',
+  ...rest
+}: SvgIconProps & CustomSvgProps) {
+  return (
+    <SvgIcon
+      strokeWidth={strokeWidth ?? 1.7}
+      stroke={stroke ? stroke : 'currentColor'}
+      sx={{ height: getIconSize(size), width: getIconSize(size) }}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M2.338 3.255V20.745C2.33797 21.0043 2.40519 21.2593 2.53308 21.4849C2.66098 21.7105 2.84518 21.8991 3.06771 22.0322C3.29024 22.1654 3.5435 22.2386 3.80277 22.2447C4.06204 22.2508 4.31846 22.1896 4.547 22.067L20.87 13.322C21.1091 13.1938 21.309 13.0032 21.4483 12.7704C21.5877 12.5375 21.6613 12.2713 21.6613 12C21.6613 11.7287 21.5877 11.4624 21.4483 11.2296C21.309 10.9968 21.1091 10.8062 20.87 10.678L4.547 1.933C4.31846 1.81042 4.06204 1.74918 3.80277 1.75527C3.5435 1.76136 3.29024 1.83457 3.06771 1.96775C2.84518 2.10092 2.66098 2.28952 2.53308 2.51513C2.40519 2.74074 2.33797 2.99566 2.338 3.255Z"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill={fill}
+        />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/DesignTokens/Icons/MediaControl/PreviousIcon.tsx

@@ -1,49 +1,49 @@
-import React from 'react';
-import { SvgIcon, SvgIconProps } from '@mui/material';
-import { getIconSize } from '../../../utils/getIconSize';
-
-interface CustomSvgProps {
-  size?: 'sm' | 'base' | 'lg' | 'xl';
-}
-
-export default function PreviousIcon({
-  stroke,
-  strokeWidth,
-  fill,
-  size = 'base',
-  ...rest
-}: SvgIconProps & CustomSvgProps) {
-  return (
-    <SvgIcon
-      strokeWidth={strokeWidth ?? 0.1}
-      stroke={stroke ? stroke : 'currentColor'}
-      sx={{ height: getIconSize(size), width: getIconSize(size) }}
-      {...rest}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <path
-          d="M23.25 3.62901V20.371C23.25 20.5077 23.2127 20.6418 23.142 20.7588C23.0714 20.8757 22.9701 20.9712 22.8491 21.0348C22.7282 21.0985 22.5921 21.1278 22.4557 21.1197C22.3193 21.1117 22.1876 21.0665 22.075 20.989L9.90001 12.618C9.79957 12.5492 9.71741 12.457 9.66063 12.3493C9.60386 12.2416 9.57419 12.1217 9.57419 12C9.57419 11.8783 9.60386 11.7584 9.66063 11.6507C9.71741 11.543 9.79957 11.4508 9.90001 11.382L22.075 3.01101C22.1876 2.93356 22.3193 2.88835 22.4557 2.88028C22.5921 2.8722 22.7282 2.90156 22.8491 2.96518C22.9701 3.0288 23.0714 3.12427 23.142 3.24126C23.2127 3.35826 23.25 3.49233 23.25 3.62901Z"
-          stroke={stroke}
-          fill={fill}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M3.75 2.25H2.25C1.42157 2.25 0.75 2.92157 0.75 3.75V20.25C0.75 21.0784 1.42157 21.75 2.25 21.75H3.75C4.57843 21.75 5.25 21.0784 5.25 20.25V3.75C5.25 2.92157 4.57843 2.25 3.75 2.25Z"
-          stroke={stroke}
-          fill={fill}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    </SvgIcon>
-  );
-}
+import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+import { getIconSize } from '../../../utils/getIconSize';
+
+interface CustomSvgProps {
+  size?: 'sm' | 'base' | 'lg' | 'xl';
+}
+
+export default function PreviousIcon({
+  stroke,
+  strokeWidth,
+  fill,
+  size = 'base',
+  ...rest
+}: SvgIconProps & CustomSvgProps) {
+  return (
+    <SvgIcon
+      strokeWidth={strokeWidth ?? 0.1}
+      stroke={stroke ? stroke : 'currentColor'}
+      sx={{ height: getIconSize(size), width: getIconSize(size) }}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M23.25 3.62901V20.371C23.25 20.5077 23.2127 20.6418 23.142 20.7588C23.0714 20.8757 22.9701 20.9712 22.8491 21.0348C22.7282 21.0985 22.5921 21.1278 22.4557 21.1197C22.3193 21.1117 22.1876 21.0665 22.075 20.989L9.90001 12.618C9.79957 12.5492 9.71741 12.457 9.66063 12.3493C9.60386 12.2416 9.57419 12.1217 9.57419 12C9.57419 11.8783 9.60386 11.7584 9.66063 11.6507C9.71741 11.543 9.79957 11.4508 9.90001 11.382L22.075 3.01101C22.1876 2.93356 22.3193 2.88835 22.4557 2.88028C22.5921 2.8722 22.7282 2.90156 22.8491 2.96518C22.9701 3.0288 23.0714 3.12427 23.142 3.24126C23.2127 3.35826 23.25 3.49233 23.25 3.62901Z"
+          stroke={stroke}
+          fill={fill}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3.75 2.25H2.25C1.42157 2.25 0.75 2.92157 0.75 3.75V20.25C0.75 21.0784 1.42157 21.75 2.25 21.75H3.75C4.57843 21.75 5.25 21.0784 5.25 20.25V3.75C5.25 2.92157 4.57843 2.25 3.75 2.25Z"
+          stroke={stroke}
+          fill={fill}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/DesignTokens/Icons/MediaControl/RecordIcon.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import { SvgIcon, SvgIconProps } from '@mui/material';
-import { getIconSize } from '../../../utils/getIconSize';
-
-interface CustomSvgProps {
-  size?: 'sm' | 'base' | 'lg' | 'xl';
-}
-
-export default function RecordIcon({
-  stroke,
-  strokeWidth,
-  fill,
-  size = 'base',
-  ...rest
-}: SvgIconProps & CustomSvgProps) {
-  return (
-    <SvgIcon
-      strokeWidth={strokeWidth ?? 0.1}
-      stroke={stroke ? stroke : 'currentColor'}
-      sx={{ height: getIconSize(size), width: getIconSize(size) }}
-      {...rest}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M12 1C9.08262 1 6.28473 2.15893 4.22183 4.22183C2.15892 6.28473 1 9.08262 1 12C1 14.9174 2.15892 17.7153 4.22183 19.7782C6.28473 21.8411 9.08262 23 12 23C14.9174 23 17.7153 21.8411 19.7782 19.7782C21.8411 17.7153 23 14.9174 23 12C23 9.08262 21.8411 6.28473 19.7782 4.22183C17.7153 2.15893 14.9174 1 12 1ZM5.30715 5.30715C7.08221 3.5321 9.48969 2.53488 12 2.53488C14.5103 2.53488 16.9178 3.5321 18.6929 5.30715C20.4679 7.08221 21.4651 9.48969 21.4651 12C21.4651 14.5103 20.4679 16.9178 18.6928 18.6929C16.9178 20.4679 14.5103 21.4651 12 21.4651C9.48969 21.4651 7.08221 20.4679 5.30715 18.6929C3.5321 16.9178 2.53488 14.5103 2.53488 12C2.53488 9.4897 3.5321 7.08221 5.30715 5.30715ZM12 3.81395C9.82892 3.81395 7.74677 4.67641 6.21159 6.21159C4.67641 7.74677 3.81395 9.82892 3.81395 12C3.81395 14.1711 4.67641 16.2532 6.21159 17.7884C7.74677 19.3236 9.82892 20.186 12 20.186C14.1711 20.186 16.2532 19.3236 17.7884 17.7884C19.3236 16.2532 20.186 14.1711 20.186 12C20.186 9.82892 19.3236 7.74677 17.7884 6.21159C16.2532 4.67641 14.1711 3.81395 12 3.81395Z"
-          fill="#F54C4C"
-          stroke="#F54C4C"
-        />
-      </svg>
-    </SvgIcon>
-  );
-}
+import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+import { getIconSize } from '../../../utils/getIconSize';
+
+interface CustomSvgProps {
+  size?: 'sm' | 'base' | 'lg' | 'xl';
+}
+
+export default function RecordIcon({
+  stroke,
+  strokeWidth,
+  fill,
+  size = 'base',
+  ...rest
+}: SvgIconProps & CustomSvgProps) {
+  return (
+    <SvgIcon
+      strokeWidth={strokeWidth ?? 0.1}
+      stroke={stroke ? stroke : 'currentColor'}
+      sx={{ height: getIconSize(size), width: getIconSize(size) }}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 1C9.08262 1 6.28473 2.15893 4.22183 4.22183C2.15892 6.28473 1 9.08262 1 12C1 14.9174 2.15892 17.7153 4.22183 19.7782C6.28473 21.8411 9.08262 23 12 23C14.9174 23 17.7153 21.8411 19.7782 19.7782C21.8411 17.7153 23 14.9174 23 12C23 9.08262 21.8411 6.28473 19.7782 4.22183C17.7153 2.15893 14.9174 1 12 1ZM5.30715 5.30715C7.08221 3.5321 9.48969 2.53488 12 2.53488C14.5103 2.53488 16.9178 3.5321 18.6929 5.30715C20.4679 7.08221 21.4651 9.48969 21.4651 12C21.4651 14.5103 20.4679 16.9178 18.6928 18.6929C16.9178 20.4679 14.5103 21.4651 12 21.4651C9.48969 21.4651 7.08221 20.4679 5.30715 18.6929C3.5321 16.9178 2.53488 14.5103 2.53488 12C2.53488 9.4897 3.5321 7.08221 5.30715 5.30715ZM12 3.81395C9.82892 3.81395 7.74677 4.67641 6.21159 6.21159C4.67641 7.74677 3.81395 9.82892 3.81395 12C3.81395 14.1711 4.67641 16.2532 6.21159 17.7884C7.74677 19.3236 9.82892 20.186 12 20.186C14.1711 20.186 16.2532 19.3236 17.7884 17.7884C19.3236 16.2532 20.186 14.1711 20.186 12C20.186 9.82892 19.3236 7.74677 17.7884 6.21159C16.2532 4.67641 14.1711 3.81395 12 3.81395Z"
+          fill="#F54C4C"
+          stroke="#F54C4C"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}