@moises.ai/design-system 3.11.21 → 3.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.11.21",
+  "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.jsx

@@ -6,6 +6,7 @@ const SEGMENT_MIN = 5
 const SEGMENT_RANGE = 25
 const UNITY_GAIN_POS = 0.667
 const MAX_BOOST_DB = 6
+const FADER_KEYBOARD_STEP = 0.02
 
 function linearToMeterLevel(linear) {
   const peakDb = 20 * Math.log10(Math.max(linear, 1e-6))
@@ -101,6 +102,9 @@ export const InputLevelMeter = memo(function InputLevelMeter({
   const [peakHoldPct, setPeakHoldPct] = useState(0)
   const [peakRising, setPeakRising] = useState(false)
 
+  const [thumbFocused, setThumbFocused] = useState(false)
+  const [hoverOpen, setHoverOpen] = useState(false)
+
   useEffect(() => {
     peakHoldRef.current = 0
     setPeakHoldPct(0)
@@ -184,6 +188,49 @@ export const InputLevelMeter = memo(function InputLevelMeter({
     document.body.style.cursor = ''
   }, [])
 
+  const handleThumbKeyDown = useCallback(
+    (e) => {
+      if (!onVolumeChange) return
+      const pos = gainToFaderPosition(volume)
+      let nextPos = pos
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          e.preventDefault()
+          nextPos = Math.min(1, pos + FADER_KEYBOARD_STEP)
+          onVolumeChange([faderPositionToGain(nextPos)])
+          break
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          e.preventDefault()
+          nextPos = Math.max(0, pos - FADER_KEYBOARD_STEP)
+          onVolumeChange([faderPositionToGain(nextPos)])
+          break
+        case 'Home':
+          e.preventDefault()
+          onVolumeChange([faderPositionToGain(0)])
+          break
+        case 'End':
+          e.preventDefault()
+          onVolumeChange([faderPositionToGain(1)])
+          break
+        case 'PageUp':
+          e.preventDefault()
+          nextPos = Math.min(1, pos + FADER_KEYBOARD_STEP * 4)
+          onVolumeChange([faderPositionToGain(nextPos)])
+          break
+        case 'PageDown':
+          e.preventDefault()
+          nextPos = Math.max(0, pos - FADER_KEYBOARD_STEP * 4)
+          onVolumeChange([faderPositionToGain(nextPos)])
+          break
+        default:
+          break
+      }
+    },
+    [onVolumeChange, volume],
+  )
+
   const hasHandler = onVolumeChange && showHandler
 
   const meterClassName = [
@@ -194,6 +241,11 @@ export const InputLevelMeter = memo(function InputLevelMeter({
     .filter(Boolean)
     .join(' ')
 
+  const tooltipOpen = isPressed || thumbFocused || hoverOpen
+
+  const gainDbForAria =
+    volume <= 0 ? -96 : 20 * Math.log10(Math.max(volume, 1e-6))
+
   return (
     <div
       className={styles.container}
@@ -211,15 +263,26 @@ export const InputLevelMeter = memo(function InputLevelMeter({
         {hasHandler && (
           <Tooltip
             content={formatGainDb(volume)}
-            open={isPressed}
+            open={tooltipOpen}
+            onOpenChange={setHoverOpen}
             side="bottom"
             align="center"
-            sideOffset={8}
+            sideOffset={3}
             delayDuration={0}
           >
             <div
+              role="slider"
+              tabIndex={0}
+              aria-label="Input gain"
+              aria-valuemin={-96}
+              aria-valuemax={MAX_BOOST_DB}
+              aria-valuenow={Math.round(gainDbForAria * 10) / 10}
+              aria-valuetext={formatGainDb(volume)}
               className={`${styles.thumb} ${isPressed ? styles.pressed : hover ? styles.hovered : ''}`}
               style={{ left: `${faderPercent}%` }}
+              onFocus={() => setThumbFocused(true)}
+              onBlur={() => setThumbFocused(false)}
+              onKeyDown={handleThumbKeyDown}
             />
           </Tooltip>
         )}

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

@@ -78,6 +78,11 @@
   background: white;
 }
 
+.thumb:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+}
+
 .peakDot {
   position: absolute;
   width: 1px;
@@ -105,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/PanControl/PanControl.jsx

@@ -2,13 +2,14 @@ import styles from './PanControl.module.css'
 import classNames from 'classnames'
 import { useRef, useCallback, useMemo, useState, useEffect } from 'react'
 import { useEventListener } from '../../utils/useEventListener'
-import { Tooltip } from '../../index'
+import { Tooltip } from '../Tooltip/Tooltip'
 
 const KNOB_CENTER_X = 10
 const KNOB_CENTER_Y = 10
 const KNOB_RADIUS = 9.5
 const START_ANGLE = -Math.PI / 2
 const STEP_SIZE = 0.01
+const KEYBOARD_STEP = STEP_SIZE * 12
 
 const clampNorm = (v) => Math.max(-1, Math.min(1, v))
 const denormalize = (normalized, minValue, maxValue) =>
@@ -30,6 +31,16 @@ export const PanControl = ({
   const pendingNormRef = useRef(value)
   const rafRef = useRef(0)
 
+  const [knobFocused, setKnobFocused] = useState(false)
+  const [hoverOpen, setHoverOpen] = useState(false)
+
+  useEffect(() => {
+    if (disabled) {
+      setHoverOpen(false)
+      setKnobFocused(false)
+    }
+  }, [disabled])
+
   useEffect(() => {
     if (isDragging) {
       const style = document.createElement('style')
@@ -111,6 +122,38 @@ export const PanControl = ({
     [scheduleEmit],
   )
 
+  const handleKnobKeyDown = useCallback(
+    (e) => {
+      if (disabled) return
+      let next = value
+      switch (e.key) {
+        case 'ArrowUp':
+        case 'ArrowRight':
+          e.preventDefault()
+          next = value + KEYBOARD_STEP
+          scheduleEmit(next)
+          break
+        case 'ArrowDown':
+        case 'ArrowLeft':
+          e.preventDefault()
+          next = value - KEYBOARD_STEP
+          scheduleEmit(next)
+          break
+        case 'Home':
+          e.preventDefault()
+          scheduleEmit(-1)
+          break
+        case 'End':
+          e.preventDefault()
+          scheduleEmit(1)
+          break
+        default:
+          break
+      }
+    },
+    [disabled, value, scheduleEmit],
+  )
+
   const { arcPath, pointerRotation, arcColor, pointerColor } = useMemo(() => {
     const actual = denormalize(value, minValue, maxValue)
     const displayNorm = clampNorm(actual)
@@ -138,6 +181,12 @@ export const PanControl = ({
     return `Pan: ${Math.abs(pct) < 1 ? 0 : pct}`
   }, [value, minValue, maxValue])
 
+  const displayNorm = clampNorm(denormalize(value, minValue, maxValue))
+  const ariaPanPct = Math.round(displayNorm * 100)
+
+  const tooltipOpen =
+    !disabled && (isDragging || knobFocused || hoverOpen)
+
   return (
     <div
       ref={containerRef}
@@ -148,13 +197,24 @@ export const PanControl = ({
     >
       <Tooltip
         content={panValueText}
-        open={isDragging}
+        open={tooltipOpen}
+        onOpenChange={(next) => {
+          if (!disabled) setHoverOpen(next)
+        }}
         side="bottom"
         align="center"
-        sideOffset={10}
+        sideOffset={3}
         delayDuration={0}
       >
         <div
+          role="slider"
+          tabIndex={disabled ? -1 : 0}
+          aria-label="Pan"
+          aria-valuemin={-100}
+          aria-valuemax={100}
+          aria-valuenow={ariaPanPct}
+          aria-valuetext={panValueText}
+          aria-disabled={disabled}
           className={classNames(
             styles.pan,
             isDragging && styles.active,
@@ -164,6 +224,9 @@ export const PanControl = ({
           onPointerMove={onPointerMove}
           onPointerUp={onPointerUp}
           onPointerCancel={onPointerUp}
+          onFocus={() => setKnobFocused(true)}
+          onBlur={() => setKnobFocused(false)}
+          onKeyDown={handleKnobKeyDown}
         >
           <svg width={20} height={20} viewBox="0 0 20 20" fill="none">
             <circle cx={KNOB_CENTER_X} cy={KNOB_CENTER_Y} r={10} />

package/src/components/PanControl/PanControl.module.css

@@ -37,4 +37,9 @@
     fill: #DDEAF8;
     fill-opacity: 0.0784314;
   }
-  
+
+  .pan:focus-visible:not(.disabled) {
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: 2px;
+    border-radius: 50%;
+  }

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

@@ -2,8 +2,8 @@
   box-sizing: border-box;
   width: 20px;
   min-width: 20px;
+  height: 20px;
   min-height: 20px;
-  height: 100%;
   margin: 0;
   padding: 2px;
   border: none;
@@ -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/MinusIcon.jsx

@@ -7,7 +7,7 @@ export const MinusIcon = ({ width = 16, height = 16, className, ...props }) => (
     fill="none"
     className={className} {...props}>
     <g >
-      <path d="M3.33325 8H12.6666" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M3.33325 8H12.6666" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
     </g>
   </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'