@moises.ai/design-system 3.12.0 → 3.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.12.0",
+  "version": "3.12.1",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/colors/custom-styles.css

@@ -101,6 +101,8 @@
   --Colors-Neutral-Neutral-Alpha-3: var(--colors-neutral-neutral-alpha-3);
   --Colors-Neutral-Neutral-Alpha-4: var(--colors-neutral-neutral-alpha-4);
   --Colors-Neutral-Neutral-Alpha-5: var(--colors-neutral-neutral-alpha-5);
+  --Colors-Neutral-Neutral-Alpha-7: var(--neutral-alpha-7);
+  --Colors-Neutral-Neutral-Alpha-8: var(--neutral-alpha-8);
   --Colors-Neutral-Neutral-Alpha-10: var(--colors-neutral-neutral-alpha-10);
   --Colors-Neutral-Neutral-1: var(--colors-neutral-neutral-1);
 

package/src/components/InputLevelMeter/InputLevelMeter.module.css

@@ -110,18 +110,37 @@
 }
 
 .zeroDbDot {
+  --zero-db-center-y: calc(2px + 3px + 1px + 3px + 2px + 4px);
+
   position: absolute;
   left: 66.7%;
-  top: 12px;
+  top: calc(var(--zero-db-center-y) - 1px);
   width: 2px;
   height: 2px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.12);
+  box-sizing: border-box;
+  border-radius: 9999px;
+  aspect-ratio: 1;
+  background: var(
+    --Colors-Neutral-Neutral-Alpha-7,
+    rgba(217, 237, 255, 0.25)
+  );
   pointer-events: none;
   transform: translateX(-50%);
+  transform-origin: center center;
+  backface-visibility: hidden;
+  transition:
+    width 0.1s ease,
+    height 0.1s ease,
+    top 0.1s ease,
+    background-color 0.1s ease;
 }
 
 .zeroDbDot.pressed {
   width: 3px;
   height: 3px;
+  top: calc(var(--zero-db-center-y) - 1.5px);
+  background: var(
+    --Colors-Neutral-Neutral-Alpha-8,
+    rgba(217, 237, 255, 0.36)
+  );
 }

package/src/components/TrackControlButton/TrackControlButton.module.css

@@ -38,15 +38,18 @@
   opacity: 0.5;
 }
 
-/* Auto Mute inativo — Figma */
 .button.autoMute:not(.active) {
   background: var(--Colors-Neutral-Neutral-Alpha-2, rgba(216, 244, 246, 0.04));
-  color: var(--colors-semantic-warning-alpha-9);
+  color: var(--warning-alpha-12);
 }
 
 .button.autoMute:not(.active):hover:not(:disabled) {
   background: var(--Colors-Neutral-Neutral-Alpha-3, rgba(221, 234, 248, 0.08));
-  color: var(--colors-semantic-warning-alpha-9);
+  color: color-mix(in srgb, var(--warning-alpha-12) 88%, var(--colors-semantic-warning-alpha-9));
+}
+
+.button.autoMute:not(.active):active:not(:disabled) {
+  background: var(--Colors-Neutral-Neutral-Alpha-4, rgba(211, 237, 248, 0.11));
 }
 
 .button.active.record {
@@ -59,18 +62,35 @@
   color: var(--colors-neutral-neutral-1);
 }
 
-.button.active.mute,
-.button.active.autoMute {
+.button.active.mute {
   background-color: var(--colors-semantic-warning-alpha-9);
   color: var(--colors-neutral-neutral-1);
 }
 
-.button.active.mute:hover:not(:disabled),
-.button.active.autoMute:hover:not(:disabled) {
+.button.active.mute:hover:not(:disabled) {
   background-color: var(--colors-semantic-warning-alpha-9);
   color: var(--colors-neutral-neutral-1);
 }
 
+.button.active.mute:active:not(:disabled) {
+  filter: brightness(0.92);
+}
+
+.button.active.autoMute {
+  background-color: var(--warning-alpha-12);
+  color: var(--colors-neutral-neutral-1);
+}
+
+.button.active.autoMute:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--warning-alpha-12) 78%, var(--colors-semantic-warning-alpha-9));
+  color: var(--colors-neutral-neutral-1);
+}
+
+.button.active.autoMute:active:not(:disabled) {
+  background-color: color-mix(in srgb, var(--warning-alpha-12) 62%, var(--colors-semantic-warning-alpha-9));
+  color: var(--colors-neutral-neutral-1);
+}
+
 .button.active.solo {
   background-color: var(--colors-accent-accent-10);
   color: var(--colors-neutral-neutral-1);

package/src/components/TrackControlsToggle/TrackControlsToggle.jsx

@@ -3,6 +3,10 @@ import { TrackControlButton } from '../TrackControlButton/TrackControlButton'
 /**
  * @deprecated Use `TrackControlButton` with `variant={type}` and `isActive={selected}`.
  * Maintained for backward compatibility.
+ *
+ * @param {Object} props
+ * @param {'record' | 'mute' | 'autoMute' | 'solo'} props.type
+ * @param {boolean} [props.selected]
  */
 export const TrackControlsToggle = ({
   type,

package/src/components/TrackControlsToggle/TrackControlsToggle.stories.jsx

@@ -98,6 +98,28 @@ export const MuteSelected = {
   },
 }
 
+export const AutoMuteSelected = {
+  args: {
+    type: 'autoMute',
+    selected: true,
+    tooltipContent: {
+      text: 'Muted by solo',
+      shortcut: 'M',
+    },
+  },
+}
+
+export const AutoMuteInactive = {
+  args: {
+    type: 'autoMute',
+    selected: false,
+    tooltipContent: {
+      text: 'Muted by solo (inactive)',
+      shortcut: 'M',
+    },
+  },
+}
+
 export const AllStates = {
   parameters: {
     docs: {

package/src/icons/ArrowEnterIcon.jsx

@@ -0,0 +1,13 @@
+export const ArrowEnterIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path
+      d="M9.14096 7.0576L2.89832 13.3002M2.89832 13.3002L9.14096 19.5429M2.89832 13.3002L17.1017 13.3003C19.3109 13.3003 21.1018 11.5094 21.1017 9.30025L21.1017 4.45715"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+ArrowEnterIcon.displayName = 'ArrowEnterIcon'

package/src/icons/CloudUploadErrorIcon.jsx

@@ -0,0 +1,10 @@
+export const CloudUploadErrorIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg"
+    width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path
+      d="M9.32809 14.6719L7.99997 16M12 17V21M19.5 19C19.5 19 21.8452 17.6832 22.5798 15.9986C23.0239 14.9804 23.1162 13.8432 22.8422 12.7667C22.5682 11.6902 21.9434 10.7355 21.0666 10.0535C20.1898 9.3714 19.1108 9.00075 18 9.00001H16.74C16.4373 7.82926 15.8731 6.74235 15.0899 5.82101C14.3067 4.89967 13.3248 4.16786 12.2181 3.68062C11.1113 3.19338 9.90851 2.96337 8.70008 3.0079C7.49164 3.05242 6 3.50003 5 4.50003M2.99996 16.3C2.1992 15.3939 1.61428 14.318 1.28917 13.1533C0.964065 11.9885 0.90723 10.7653 1.12294 9.57541C1.28765 8.66685 1.608 7.79584 2.06783 7.00003M2.99997 3L21 21"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+CloudUploadErrorIcon.displayName = 'CloudUploadErrorIcon'

package/src/icons/CommandIcon.jsx

@@ -0,0 +1,10 @@
+export const CommandIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path
+      d="M9 9V6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9H9ZM9 9V15M9 9H15M15 9V6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.65685 19.6569 9 18 9H15ZM15 9V15M9 15V18C9 19.6569 7.65685 21 6 21C4.34315 21 3 19.6569 3 18C3 16.3431 4.34315 15 6 15H9ZM9 15H15M15 15V18C15 19.6569 16.3431 21 18 21C19.6569 21 21 19.6569 21 18C21 16.3431 19.6569 15 18 15H15Z"
+      stroke="currentColor"
+      strokeWidth="1.5" />
+  </svg>
+)
+
+CommandIcon.displayName = 'CommandIcon'

package/src/icons/FunctionIcon.jsx

@@ -0,0 +1,7 @@
+export const FunctionIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M5.57248 20.4999V10.0602M5.57248 10.0602V5.66871C5.57248 4.47097 6.54345 3.5 7.7412 3.5C8.38723 3.5 9.02759 3.62052 9.62941 3.85538L10 4M5.57248 10.0602H2.51178M5.57248 10.0602H10M14.1424 20.4999V15.125M14.1424 15.125C14.1424 12.0523 15.219 11.3223 16.1875 10.8125C18.4852 9.60317 21.4881 9.84375 21.4881 14.2188V20.4999M14.1424 15.125V10.0602" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+FunctionIcon.displayName = 'FunctionIcon'

package/src/icons/MagicWandIcon.jsx

@@ -1,69 +1,11 @@
-export const MagicWandIcon = ({ width, height, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    className={className}
-    {...props}
-  >
+export const MagicWandIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
     <path
-      d="M1.33301 14.667L10.333 5.66699"
+      d="M19.3777 13.5788V16.3419M19.3777 16.3419V19.1051M19.3777 16.3419H22.1277M19.3777 16.3419H16.6277M14.2666 5.421L17.4999 8.66974M9.49993 5.42105C7.37965 5.42028 5.65952 3.69608 5.64637 1.56422C5.63324 3.69364 3.91687 5.41636 1.79993 5.42106C3.92455 5.42578 5.64553 7.16097 5.6463 9.30106C5.64707 7.15854 7.37197 5.42183 9.49993 5.42105ZM2.13661 19.1051L4.31785 21.2967C4.74742 21.7284 5.44391 21.7284 5.87348 21.2967L21.5589 5.53624C21.9885 5.10461 21.9885 4.40479 21.5589 3.97316L19.3777 1.78149C18.9481 1.34986 18.2517 1.34986 17.8221 1.78149L2.13661 17.542C1.70704 17.9736 1.70703 18.6734 2.13661 19.1051Z"
       stroke="currentColor"
-      strokeWidth="1.13"
+      strokeWidth="1.5"
       strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M8.33301 7.66699L10.333 5.66699"
-      stroke="currentColor"
-      strokeWidth="1.13"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M11.667 1.33301V4.33301"
-      stroke="currentColor"
-      strokeWidth="1.13"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M13.167 2.83301H10.167"
-      stroke="currentColor"
-      strokeWidth="1.13"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M5.33301 2.33301V4.33301"
-      stroke="currentColor"
-      strokeWidth="1.13"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M6.33301 3.33301H4.33301"
-      stroke="currentColor"
-      strokeWidth="1.13"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M13.333 9.33301V11.333"
-      stroke="currentColor"
-      strokeWidth="1.13"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M14.333 10.333H12.333"
-      stroke="currentColor"
-      strokeWidth="1.13"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
+      strokeLinejoin="round" />
   </svg>
 )
 

package/src/icons/NoSendIcon.jsx

@@ -0,0 +1,8 @@
+export const NoSendIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M22 3L22.6568 3.36207C22.7849 3.12973 22.7807 2.84702 22.6458 2.61859C22.5109 2.39016 22.2653 2.25 22 2.25V3ZM14.2811 18.5562C14.481 18.1934 14.3491 17.7373 13.9863 17.5373C13.6236 17.3373 13.1674 17.4693 12.9675 17.832L14.2811 18.5562ZM12.0775 21L11.3659 21.2367C11.4599 21.5194 11.7124 21.7197 12.0091 21.7469C12.3058 21.7741 12.5905 21.623 12.7343 21.3621L12.0775 21ZM10.5858 14.1386C10.4551 13.7455 10.0305 13.5329 9.63745 13.6636C9.24441 13.7943 9.03175 14.2189 9.16248 14.612L10.5858 14.1386ZM2.03033 0.96967C1.73744 0.676777 1.26256 0.676777 0.96967 0.96967C0.676777 1.26256 0.676777 1.73744 0.96967 2.03033L2.03033 0.96967ZM19.9697 21.0303C20.2626 21.3232 20.7374 21.3232 21.0303 21.0303C21.3232 20.7374 21.3232 20.2626 21.0303 19.9697L19.9697 21.0303ZM2.875 3V3.75H22V3V2.25H2.875V3ZM22 3L21.613 2.35755L9.79164 9.47811L10.1786 10.1206L10.5656 10.763L22.387 3.64245L22 3ZM13.6243 18.1941L12.9675 17.832L11.4207 20.6379L12.0775 21L12.7343 21.3621L14.2811 18.5562L13.6243 18.1941ZM12.0775 21L12.7892 20.7633L10.5858 14.1386L9.87415 14.3753L9.16248 14.612L11.3659 21.2367L12.0775 21ZM1.5 1.5L0.96967 2.03033L19.9697 21.0303L20.5 20.5L21.0303 19.9697L2.03033 0.96967L1.5 1.5ZM22 3L21.3432 2.63793L14.6747 14.735L15.3315 15.0971L15.9883 15.4591L22.6568 3.36207L22 3Z"
+      fill="currentColor" />
+  </svg>
+)
+
+NoSendIcon.displayName = 'NoSendIcon'

package/src/icons/NoSmartphoneIcon.jsx

@@ -0,0 +1,7 @@
+export const NoSmartphoneIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M17.5 23.75C17.9142 23.75 18.25 23.4142 18.25 23C18.25 22.5858 17.9142 22.25 17.5 22.25V23.75ZM4.25 4.85742C4.25 5.27164 4.58579 5.60742 5 5.60742C5.41421 5.60742 5.75 5.27164 5.75 4.85742H4.25ZM5.75 9.85742C5.75 9.44321 5.41421 9.10742 5 9.10742C4.58579 9.10742 4.25 9.44321 4.25 9.85742H5.75ZM18.25 18.8574C18.25 19.2716 18.5858 19.6074 19 19.6074C19.4142 19.6074 19.75 19.2716 19.75 18.8574H18.25ZM14.25 2.25V3C14.6642 3 15 2.66421 15 2.25H14.25ZM9.75 2.25H9C9 2.66421 9.33579 3 9.75 3V2.25ZM2.03033 0.887752C1.73744 0.594859 1.26256 0.594859 0.96967 0.887752C0.676777 1.18065 0.676777 1.65552 0.96967 1.94841L2.03033 0.887752ZM21.909 22.8878C22.2019 23.1806 22.6768 23.1806 22.9697 22.8878C23.2626 22.5949 23.2626 22.12 22.9697 21.8271L21.909 22.8878ZM7 23.75H17.5V22.25H7V23.75ZM4.25 21C4.25 22.5188 5.48122 23.75 7 23.75V22.25C6.30964 22.25 5.75 21.6904 5.75 21H4.25ZM7 0.25C5.48122 0.25 4.25 1.48122 4.25 3H5.75C5.75 2.30964 6.30964 1.75 7 1.75V0.25ZM17 1.75C17.6904 1.75 18.25 2.30964 18.25 3H19.75C19.75 1.48122 18.5188 0.25 17 0.25V1.75ZM4.25 3V4.85742H5.75V3H4.25ZM4.25 9.85742V21H5.75V9.85742H4.25ZM19.75 18.8574V3H18.25V18.8574H19.75ZM14.25 1.5H9.75V3H14.25V1.5ZM0.96967 1.94841L21.909 22.8878L22.9697 21.8271L2.03033 0.887752L0.96967 1.94841ZM17 0.25H14.25V1.75H17V0.25ZM15 2.25V1H13.5V2.25H15ZM14.25 0.25H9.75V1.75H14.25V0.25ZM9.75 0.25H7V1.75H9.75V0.25ZM10.5 2.25V1H9V2.25H10.5Z" fill="white" />
+  </svg>
+)
+
+NoSmartphoneIcon.displayName = 'NoSmartphoneIcon'

package/src/icons/OptionIcon.jsx

@@ -0,0 +1,7 @@
+export const OptionIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M1.99994 5.22729H8.08822L15.9077 18.771L22 18.7728M16 5.22732H22" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+OptionIcon.displayName = 'OptionIcon'

package/src/icons/QrCodeIcon.jsx

@@ -0,0 +1,9 @@
+export const QrCodeIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path
+      d="M14.75 14H14V14.75M16.75 16H16V16.75M18.75 18H18V18.75M18.75 14H18V14.75M14.75 18H14V18.75M8 2H2V8M22 8V2L16 2M16 22H22V16M2 16L2 22H8M6 6H10V10H6V6ZM14 6H18V10H14V6ZM6 14H10V18H6V14Z"
+      stroke="currentColor" strokeWidth="1.5" />
+  </svg>
+)
+
+QrCodeIcon.displayName = 'QrCodeIcon'

package/src/icons/SendIcon.jsx

@@ -0,0 +1,16 @@
+export const SendIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className} {...props}>
+    <path
+      d="M22 3L12.0775 21L8.74605 10.9835L2 3H22ZM22 3L8.74008 10.9871"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinejoin="round" />
+  </svg>
+)
+
+SendIcon.displayName = 'SendIcon'

package/src/icons/Settings2Icon.jsx

@@ -0,0 +1,14 @@
+export const Settings2Icon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path
+      d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
+      stroke="currentColor"
+      strokeWidth="1.5" />
+    <path
+      d="M10.9214 23C10.5939 23 10.3197 22.911 10.099 22.733C9.88544 22.555 9.73948 22.2951 9.66117 21.9534L9.1699 19.8175L8.42233 19.5505L6.56408 20.7146C6.27929 20.9068 5.9945 20.9851 5.70971 20.9495C5.43204 20.921 5.17573 20.7893 4.94078 20.5544L3.43495 19.0592C3.19288 18.8243 3.05761 18.5644 3.02913 18.2796C3.00065 17.9948 3.07896 17.71 3.26408 17.4252L4.43884 15.567L4.16117 14.8408L2.0466 14.3388C1.70485 14.2605 1.44498 14.1146 1.26699 13.901C1.089 13.6803 1 13.4061 1 13.0786V10.932C1 10.6045 1.089 10.334 1.26699 10.1204C1.44498 9.89968 1.70485 9.75016 2.0466 9.67184L4.16117 9.1699L4.43884 8.43301L3.26408 6.58544C3.07896 6.29353 3.00065 6.00874 3.02913 5.73107C3.05761 5.44628 3.19288 5.18641 3.43495 4.95146L4.94078 3.44563C5.17573 3.21068 5.43204 3.07896 5.70971 3.05049C5.98738 3.02201 6.27217 3.10032 6.56408 3.28544L8.42233 4.46019L9.1699 4.18252L9.66117 2.0466C9.73948 1.70485 9.88544 1.44498 10.099 1.26699C10.3197 1.089 10.5939 1 10.9214 1H13.0786C13.4133 1 13.6874 1.089 13.901 1.26699C14.1146 1.44498 14.2605 1.70485 14.3388 2.0466L14.8301 4.18252L15.567 4.46019L17.4359 3.28544C17.7207 3.10032 18.0019 3.02201 18.2796 3.05049C18.5573 3.07896 18.8136 3.21068 19.0485 3.44563L20.565 4.95146C20.8 5.18641 20.9317 5.44628 20.9602 5.73107C20.9958 6.00874 20.921 6.29353 20.7359 6.58544L19.5505 8.43301L19.8282 9.1699L21.9534 9.67184C22.2951 9.75016 22.555 9.89968 22.733 10.1204C22.911 10.334 23 10.6045 23 10.932V13.0786C23 13.4061 22.911 13.6803 22.733 13.901C22.555 14.1146 22.2951 14.2605 21.9534 14.3388L19.8282 14.8408L19.5505 15.567L20.7252 17.4252C20.9104 17.71 20.9851 17.9948 20.9495 18.2796C20.921 18.5644 20.7893 18.8243 20.5544 19.0592L19.0485 20.5544C18.8136 20.7893 18.5537 20.921 18.2689 20.9495C17.9913 20.9851 17.71 20.9068 17.4252 20.7146L15.567 19.5505L14.8301 19.8175L14.3388 21.9534C14.2605 22.2951 14.1146 22.555 13.901 22.733C13.6874 22.911 13.4133 23 13.0786 23H10.9214Z"
+      stroke="currentColor"
+      strokeWidth="1.5" />
+  </svg>
+)
+
+Settings2Icon.displayName = 'Settings2Icon'

package/src/icons/ShapesIcon.jsx

@@ -0,0 +1,9 @@
+export const ShapesIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path
+      d="M16.4982 8.20641H17.2482V8.17012L17.2447 8.134L16.4982 8.20641ZM11 9.75H20V8.25H11V9.75ZM20 9.75C20.6904 9.75 21.25 10.3096 21.25 11H22.75C22.75 9.48122 21.5188 8.25 20 8.25V9.75ZM21.25 11V20H22.75V11H21.25ZM21.25 20C21.25 20.6904 20.6904 21.25 20 21.25V22.75C21.5188 22.75 22.75 21.5188 22.75 20H21.25ZM20 21.25H11V22.75H20V21.25ZM11 21.25C10.3096 21.25 9.75 20.6904 9.75 20H8.25C8.25 21.5188 9.48122 22.75 11 22.75V21.25ZM9.75 20V11H8.25V20H9.75ZM9.75 11C9.75 10.3096 10.3096 9.75 11 9.75V8.25C9.48122 8.25 8.25 9.48122 8.25 11H9.75ZM2.24817 8.93961C2.24817 5.20725 5.27739 2.18018 9.01586 2.18018V0.680176C4.45052 0.680176 0.748169 4.37727 0.748169 8.93961H2.24817ZM9.01586 2.18018C12.5309 2.18018 15.4197 4.85685 15.7517 8.27882L17.2447 8.134C16.8387 3.94945 13.3094 0.680176 9.01586 0.680176V2.18018ZM8.53162 15.682C5.01961 15.4344 2.24817 12.5094 2.24817 8.93961H0.748169C0.748169 13.3038 4.13557 16.8758 8.42614 17.1783L8.53162 15.682ZM15.7482 8.20641V8.93018H17.2482V8.20641H15.7482Z"
+      fill="currentColor" />
+  </svg>
+)
+
+ShapesIcon.displayName = 'ShapesIcon'

package/src/icons/Share2Icon.jsx

@@ -11,19 +11,12 @@ export const Share2Icon = ({
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g clipPath="url(#clip0_6624_4145)">
-      <path
-        d="M10.1875 2.89583L8.00001 0.708328M8.00001 0.708328L5.81251 2.89583M8.00001 0.708328V10.1875M10.9167 5.08333C12.5275 5.08333 13.8333 6.38916 13.8333 7.99999V12.2917C13.8333 13.9485 12.4902 15.2917 10.8333 15.2917H5.16656C3.50968 15.2917 2.16653 13.9485 2.16656 12.2916L2.16663 7.99999C2.16666 6.38915 3.47251 5.08333 5.08335 5.08333"
-        stroke="#B0B4BA"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_6624_4145">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
+    <path
+      d="M10.1875 2.89583L8.00001 0.708328M8.00001 0.708328L5.81251 2.89583M8.00001 0.708328V10.1875M10.9167 5.08333C12.5275 5.08333 13.8333 6.38916 13.8333 7.99999V12.2917C13.8333 13.9485 12.4902 15.2917 10.8333 15.2917H5.16656C3.50968 15.2917 2.16653 13.9485 2.16656 12.2916L2.16663 7.99999C2.16666 6.38915 3.47251 5.08333 5.08335 5.08333"
+      stroke="#B0B4BA"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   </svg>
 )
 

package/src/icons/ShareAndroidIcon.jsx

@@ -0,0 +1,11 @@
+export const ShareAndroidIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path
+      d="M8.5 10.2846L15.5 6.16355M15.5 17.8365L8.5 13.7154M9 12C9 13.6569 7.65685 15 6 15C4.34315 15 3 13.6569 3 12C3 10.3431 4.34315 9 6 9C7.65685 9 9 10.3431 9 12ZM21 5C21 6.65685 19.6569 8 18 8C16.3431 8 15 6.65685 15 5C15 3.34315 16.3431 2 18 2C19.6569 2 21 3.34315 21 5ZM21 19C21 20.6569 19.6569 22 18 22C16.3431 22 15 20.6569 15 19C15 17.3431 16.3431 16 18 16C19.6569 16 21 17.3431 21 19Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinejoin="round" />
+  </svg>
+)
+
+ShareAndroidIcon.displayName = 'ShareAndroidIcon'

package/src/icons/ShareIosIcon.jsx

@@ -0,0 +1,13 @@
+export const ShareIosIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg"
+    width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path
+      d="M15.2815 4.34375L12.0003 1.0625M12.0003 1.0625L8.71902 4.34375M12.0003 1.0625V15.2812M16.3753 7.625H17.7503C19.4071 7.625 20.7503 8.96814 20.7503 10.625V19.9375C20.7503 21.5944 19.4071 22.9375 17.7503 22.9375H6.25005C4.59318 22.9375 3.25002 21.5943 3.25005 19.9374L3.25021 10.6249C3.25024 8.96811 4.59338 7.625 6.25021 7.625H7.62527"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round" />
+  </svg>
+)
+
+ShareIosIcon.displayName = 'ShareIosIcon'

package/src/icons/ShareWebIcon.jsx

@@ -0,0 +1,11 @@
+export const ShareWebIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M20.0355 4.38236L23.2782 7.625L20.0355 10.8676M22 7.625H18C14.134 7.625 11 10.759 11 14.625V15.5027M13.5 4H6.5C4.01472 4 2 6.01472 2 8.5V17.5C2 19.9853 4.01472 22 6.5 22H15.5C17.9853 22 20 19.9853 20 17.5V16.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round" />
+  </svg>
+)
+
+ShareWebIcon.displayName = 'ShareWebIcon'

package/src/icons/ShieldIcon.jsx

@@ -0,0 +1,7 @@
+export const ShieldIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+ShieldIcon.displayName = 'ShieldIcon'

package/src/icons/ShoppingBagIcon.jsx

@@ -0,0 +1,9 @@
+export const ShoppingBagIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path
+      d="M3 6L6 2H18L21 6M3 6V20C3 20.5304 3.21071 21.0391 3.58579 21.4142C3.96086 21.7893 4.46957 22 5 22H19C19.5304 22 20.0391 21.7893 20.4142 21.4142C20.7893 21.0391 21 20.5304 21 20V6M3 6H21M16 10C16 11.0609 15.5786 12.0783 14.8284 12.8284C14.0783 13.5786 13.0609 14 12 14C10.9391 14 9.92172 13.5786 9.17157 12.8284C8.42143 12.0783 8 11.0609 8 10"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+ShoppingBagIcon.displayName = 'ShoppingBagIcon'

package/src/icons/SkillsIcon.jsx

@@ -0,0 +1,8 @@
+export const SkillsIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M16.0001 1.47432C16.0122 3.42313 17.5954 4.99929 19.5469 5C17.5883 5.00071 16.0007 6.5883 16 8.54687C15.9993 6.59053 14.4153 5.00432 12.4598 5.00001M16.0001 1.47432C15.988 3.42091 14.4082 4.99571 12.4598 5.00001M16.0001 1.47432L16 1.45182L16 1.46773M12.4598 5.00001H12.4519L12.4575 5M19.8979 11C20.5017 11 20.9921 10.5145 21 9.91263M19.8979 11H21M19.8979 11C20.5066 11 21 11.4935 21 12.1022C21 11.4935 21.4934 11 22.1021 11C21.4984 11 21.0079 10.5145 21 9.91263M21 9.91263L21.0001 9.89785L21 9.90831M2 20.5C2 21.8807 5.80558 23 10.5 23C15.1944 23 19 21.8807 19 20.5C19 19.1193 15.1944 18 10.5 18C5.80558 18 2 19.1193 2 20.5ZM2 20.5V1L18.7422 19.8906"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+SkillsIcon.displayName = 'SkillsIcon'

package/src/icons/SmartphoneIcon.jsx

@@ -0,0 +1,8 @@
+export const SmartphoneIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M9.75 2.25H9C9 2.66421 9.33579 3 9.75 3V2.25ZM14.25 2.25V3C14.6642 3 15 2.66421 15 2.25H14.25ZM18.25 3V21H19.75V3H18.25ZM17 22.25H7V23.75H17V22.25ZM5.75 21V3H4.25V21H5.75ZM7 22.25C6.30964 22.25 5.75 21.6904 5.75 21H4.25C4.25 22.5188 5.48122 23.75 7 23.75V22.25ZM18.25 21C18.25 21.6904 17.6904 22.25 17 22.25V23.75C18.5188 23.75 19.75 22.5188 19.75 21H18.25ZM17 1.75C17.6904 1.75 18.25 2.30964 18.25 3H19.75C19.75 1.48122 18.5188 0.25 17 0.25V1.75ZM7 0.25C5.48122 0.25 4.25 1.48122 4.25 3H5.75C5.75 2.30964 6.30964 1.75 7 1.75V0.25ZM9.75 3H14.25V1.5H9.75V3ZM14.25 1.75H17V0.25H14.25V1.75ZM15 2.25V1H13.5V2.25H15ZM7 1.75H9.75V0.25H7V1.75ZM9.75 1.75H14.25V0.25H9.75V1.75ZM10.5 2.25V1H9V2.25H10.5Z"
+      fill="currentColor" />
+  </svg>
+)
+
+SmartphoneIcon.displayName = 'SmartphoneIcon'

package/src/icons/SparklesIcon.jsx

@@ -0,0 +1,11 @@
+export const SparklesIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg"
+    width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M10.1648 5.65189C10.1927 10.1575 13.844 13.8015 18.3447 13.8032C13.8277 13.8048 10.1663 17.4753 10.1646 22.0034C10.163 17.4804 6.50991 13.8131 2 13.8032C6.49362 13.7932 10.1369 10.1523 10.1648 5.65189Z"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M18.996 2C19.0062 3.65328 20.346 4.99041 21.9975 4.99101C20.34 4.99162 18.9965 6.33845 18.9959 8C18.9953 6.34034 17.6549 4.99468 16 4.99102C17.6489 4.98737 18.9858 3.65139 18.996 2Z"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+SparklesIcon.displayName = 'SparklesIcon'

package/src/icons/SunIcon.jsx

@@ -0,0 +1,8 @@
+export const SunIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+SunIcon.displayName = 'SunIcon'

package/src/icons/TextFileIcon.jsx

@@ -0,0 +1,8 @@
+export const TextFileIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M13.9556 1.71875H5.95557C5.42513 1.71875 4.91643 1.92946 4.54135 2.30454C4.16628 2.67961 3.95557 3.18832 3.95557 3.71875V19.7188C3.95557 20.2492 4.16628 20.7579 4.54135 21.133C4.91643 21.508 5.42513 21.7188 5.95557 21.7188H17.9556C18.486 21.7188 18.9947 21.508 19.3698 21.133C19.7449 20.7579 19.9556 20.2492 19.9556 19.7188V7.71875M13.9556 1.71875L19.9556 7.71875M13.9556 1.71875V7.71875H19.9556M7.5 12.5H13.9556M7.5 17H16.5"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+TextFileIcon.displayName = 'TextFileIcon'

package/src/icons/TicketIcon.jsx

@@ -0,0 +1,8 @@
+export const TicketIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M9.87863 5.63623L18.3639 14.1215M16.9849 3.55013C16.3418 4.52082 16.448 5.84165 17.3033 6.69689C18.1584 7.55209 19.4787 7.65755 20.4493 7.01454L22.9601 9.52532L9.52508 22.9603L7.01429 20.4496C7.6573 19.4789 7.55184 18.1587 6.69665 17.3035C5.84141 16.4483 4.52057 16.342 3.54989 16.9852L1.03979 14.4751L14.4748 1.04004L16.9849 3.55013Z"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+TicketIcon.displayName = 'TicketIcon'

package/src/icons/TimeControlIcon.jsx

@@ -0,0 +1,8 @@
+export const TimeControlIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M2.20093 19.9429L5.36102 16.7829C6.11116 16.0327 7.12858 15.6113 8.18945 15.6113H14.5267C15.3403 15.6113 15.9999 16.2709 15.9999 17.0845C15.9999 17.8982 15.3403 18.5578 14.5267 18.5578H10.9999M6.37212 23.0014H14.0106C14.3378 23.0014 14.6646 22.8764 14.9142 22.6269L21.3127 16.2285C22.0378 15.5034 22.0378 14.3279 21.3128 13.6028C20.5877 12.8778 19.4122 12.8778 18.6871 13.6028L16.208 16.082M11.9999 3V6.5L13.9999 8M17.4999 6.5C17.4999 9.53757 15.0375 12 11.9999 12C8.96237 12 6.49994 9.53757 6.49994 6.5C6.49994 3.46243 8.96237 1 11.9999 1C15.0375 1 17.4999 3.46243 17.4999 6.5Z"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+TimeControlIcon.displayName = 'TimeControlIcon'

package/src/icons/TouchIdPersonalIcon.jsx

@@ -0,0 +1,8 @@
+export const TouchIdPersonalIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M12 12.4998C12.7143 16.0508 16 18.9998 19.6531 18.2234M16.1006 21.3089C12.5 20.4004 10.2012 17.3017 9.42203 15.5486C7.84908 12.0095 9.14375 9.29991 11.3514 8.96409C12.678 8.76229 14.4831 9.16954 15.5 11.9004C16.5119 14.618 18.334 15.1903 19.5 14.9004C21.61 14.3759 22.7218 12.3192 21.4571 8.96409C20.3466 6.01815 17.0706 2.363 11.3514 2.47211C9.92192 2.49938 8.53714 2.86404 7.2859 3.50647M18.9029 11.8282C17.7646 6.80919 14 5.2312 10.8517 5.7181C8.58721 6.06831 5.30358 8.08789 5.30358 12.3763C5.30358 14.0794 5.77664 15.1868 6.7506 17.1626C7.72456 19.1383 6.94539 19.9824 6.24971 20.3071C5.55402 20.6317 4.52518 20.2858 3.85655 19.4166C2.74346 17.9696 2.26758 16.3866 2.02985 15.1833C1.3372 11.6775 2.20947 8.55848 3.95953 6.28723"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+TouchIdPersonalIcon.displayName = 'TouchIdPersonalIcon'

package/src/icons/TrophyIcon.jsx

@@ -0,0 +1,8 @@
+export const TrophyIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M12 17C9.68 17 8.53517 14.9154 7.81824 13.2426L6.40404 9.94275C6.13746 9.32074 6 8.65105 6 7.97431V2H18V7.97431C18 8.65105 17.8625 9.32074 17.596 9.94275L16.1818 13.2426C15.4648 14.9154 14.32 17 12 17ZM12 17V22M3 4.75H1V5.97279C1 9.54123 3.36339 12.6782 6.7934 13.6625L7.94 14M21 4.75H22.9975V5.97279C22.9975 9.54123 20.6341 12.6782 17.2041 13.6625L16.06 14M18 22H6.26001"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+TrophyIcon.displayName = 'TrophyIcon'

package/src/icons/UpgradeUpIcon.jsx

@@ -0,0 +1,9 @@
+export const UpgradeUpIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M17 18H7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M17 7L12 2L7 7M12 3V14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M17 23H7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+UpgradeUpIcon.displayName = 'UpgradeUpIcon'

package/src/icons/UserErrorIcon.jsx

@@ -0,0 +1,8 @@
+export const UserErrorIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M20 20V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H15M4 21V19C4 17.9391 4.42143 16.9217 5.17157 16.1716C5.92172 15.4214 6.93913 15 8 15H9.5M8.09211 7.85742C8.03179 7.5812 8 7.29431 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7C16 9.20914 14.2091 11 12 11C11.6547 11 11.3196 10.9562 11 10.874M3 3L21 21"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+UserErrorIcon.displayName = 'UserErrorIcon'

package/src/icons/UserIcon.jsx

@@ -1,22 +1,8 @@
 export const UserIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...props}
-  >
-    <g>
-      <path
-        d="M11.334 14.6663V13.4071C11.334 12.7391 11.0706 12.0985 10.6018 11.6262C10.1329 11.1539 9.49703 10.8886 8.83398 10.8886H3.83398C3.17094 10.8886 2.53506 11.1539 2.06622 11.6262C1.59738 12.0985 1.33398 12.7391 1.33398 13.4071V14.6663M13.1561 1.33301C14.1237 2.39398 14.6673 3.83279 14.6673 5.33301C14.6673 6.83323 14.1237 8.27203 13.1561 9.33301M11.334 3.33018C11.8178 3.86067 12.0896 4.58007 12.0896 5.33018C12.0896 6.08029 11.8178 6.79969 11.334 7.33018M8.83398 5.85153C8.83398 7.24247 7.7147 8.37004 6.33398 8.37004C4.95327 8.37004 3.83398 7.24247 3.83398 5.85153C3.83398 4.46059 4.95327 3.33301 6.33398 3.33301C7.7147 3.33301 8.83398 4.46059 8.83398 5.85153Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </g>
-</svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
 )
 
 UserIcon.displayName = 'UserIcon'

package/src/icons/UserVoiceIcon.jsx

@@ -0,0 +1,10 @@
+export const UserVoiceIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path
+      d="M17 22.0002V20.1113C17 19.1094 16.6049 18.1485 15.9016 17.44C15.1984 16.7316 14.2446 16.3335 13.25 16.3335H5.75C4.75544 16.3335 3.80161 16.7316 3.09835 17.44C2.39509 18.1485 2 19.1094 2 20.1113V22.0002M19.7331 2.78202C21.1846 4.37349 22 6.53169 22 8.78202C22 11.0324 21.1846 13.1906 19.7331 14.782M17 5.77778C17.7257 6.57351 18.1334 7.65261 18.1334 8.77778C18.1334 9.90294 17.7257 10.982 17 11.7778M13.25 8.77799C13.25 10.8644 11.5711 12.5558 9.5 12.5558C7.42893 12.5558 5.75 10.8644 5.75 8.77799C5.75 6.69158 7.42893 5.00021 9.5 5.00021C11.5711 5.00021 13.25 6.69158 13.25 8.77799Z"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+UserVoiceIcon.displayName = 'UserVoiceIcon'