@moises.ai/design-system 3.4.5 → 3.5.0

package/src/icons/CropIcon.jsx

@@ -0,0 +1,27 @@
+export const CropIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <g clipPath="url(#clip0_19372_28441)">
+      <path
+        d="M4.08602 0.666016L3.99935 10.666C3.99935 11.0196 4.13982 11.3588 4.38987 11.6088C4.63992 11.8589 4.97906 11.9993 5.33268 11.9993H15.3327M0.666016 4.08602L10.666 3.99935C11.0196 3.99935 11.3588 4.13982 11.6088 4.38987C11.8589 4.63992 11.9993 4.97906 11.9993 5.33268V15.3327"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_19372_28441">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+CropIcon.displayName = 'CropIcon'

package/src/icons/CrownIcon.jsx

@@ -0,0 +1,21 @@
+export const CrownIcon = ({ 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="M4.02691 16.5391L2 9.55957L5.55306 11.6447C6.3077 12.0875 7.27631 11.8714 7.77115 11.1498L12 4.98291L16.2289 11.1498C16.7237 11.8714 17.6923 12.0875 18.4469 11.6447L22 9.55957L19.9721 16.5427C19.67 17.9238 16.2161 19.013 11.9999 19.013C7.77997 19.013 4.32381 17.9219 4.02691 16.5391Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+CrownIcon.displayName = 'CrownIcon'

package/src/icons/CueBackIcon.jsx

@@ -0,0 +1,25 @@
+export const CueBackIcon = ({
+  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
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.4804 3.91973C12.7733 4.21262 12.7733 4.6875 12.4804 4.98039L5.51073 11.9501L12.4804 18.9197C12.7733 19.2126 12.7733 19.6875 12.4804 19.9804C12.1875 20.2733 11.7126 20.2733 11.4197 19.9804L3.91974 12.4804C3.62685 12.1875 3.62685 11.7126 3.91974 11.4197L11.4197 3.91973C11.7126 3.62684 12.1875 3.62684 12.4804 3.91973ZM19.9804 3.91973C20.2733 4.21262 20.2733 4.6875 19.9804 4.98039L13.0107 11.9501L19.9804 18.9197C20.2733 19.2126 20.2733 19.6875 19.9804 19.9804C19.6875 20.2733 19.2126 20.2733 18.9197 19.9804L11.4197 12.4804C11.1269 12.1875 11.1269 11.7126 11.4197 11.4197L18.9197 3.91973C19.2126 3.62684 19.6875 3.62684 19.9804 3.91973Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+CueBackIcon.displayName = 'CueBackIcon'

package/src/icons/CueIcon.jsx

@@ -0,0 +1,20 @@
+export const CueIcon = ({ 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
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.91974 3.91973C4.21264 3.62684 4.68751 3.62684 4.9804 3.91973L12.4804 11.4197C12.7733 11.7126 12.7733 12.1875 12.4804 12.4804L4.9804 19.9804C4.68751 20.2733 4.21264 20.2733 3.91974 19.9804C3.62685 19.6875 3.62685 19.2126 3.91974 18.9197L10.8894 11.9501L3.91974 4.98039C3.62685 4.6875 3.62685 4.21262 3.91974 3.91973ZM11.4197 3.91973C11.7126 3.62684 12.1875 3.62684 12.4804 3.91973L19.9804 11.4197C20.2733 11.7126 20.2733 12.1875 19.9804 12.4804L12.4804 19.9804C12.1875 20.2733 11.7126 20.2733 11.4197 19.9804C11.1269 19.6875 11.1269 19.2126 11.4197 18.9197L18.3894 11.9501L11.4197 4.98039C11.1269 4.6875 11.1269 4.21262 11.4197 3.91973Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+CueIcon.displayName = 'CueIcon'

package/src/icons/CymbalsIcon.jsx

@@ -0,0 +1,26 @@
+export const CymbalsIcon = ({
+  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 22.4952V18.5312M12 6.98657V1.5M9.40695 6.52942C8.62766 6.77381 8.10044 7.20112 8.01283 7.75139C7.92522 8.30166 8.29104 8.87192 8.95505 9.34687C9.61753 9.82336 10.5797 10.2061 11.6803 10.3829C12.7808 10.5596 13.8137 10.4966 14.593 10.2507C15.3723 10.0063 15.8995 9.57897 15.9872 9.0287V9.03023C16.0748 8.47996 15.709 7.90971 15.0449 7.43322M22.9647 11.1459C22.7238 12.6592 21.2739 13.8342 19.1309 14.5063C16.9878 15.1826 14.1473 15.3559 11.1208 14.8698C8.0943 14.3837 5.44824 13.3312 3.62643 12.0209C1.80039 10.7148 0.794374 9.14656 1.03531 7.63332C1.27625 6.12007 2.72609 4.94498 4.86915 4.2729C7.01221 3.60081 9.85271 3.42328 12.8792 3.90938C15.9057 4.39548 18.5518 5.44799 20.3736 6.75834C22.1996 8.06869 23.2056 9.63689 22.9647 11.1501V11.1459Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+CymbalsIcon.displayName = 'CymbalsIcon'

package/src/icons/DatabaseIcon.jsx

@@ -0,0 +1,26 @@
+export const DatabaseIcon = ({
+  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="M21 5C21 6.65685 16.9706 8 12 8C7.02944 8 3 6.65685 3 5M21 5C21 3.34315 16.9706 2 12 2C7.02944 2 3 3.34315 3 5M21 5V19C21 20.66 17 22 12 22C7 22 3 20.66 3 19V5M21 12C21 13.66 17 15 12 15C7 15 3 13.66 3 12"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+DatabaseIcon.displayName = 'DatabaseIcon'

package/src/icons/DelayIcon.jsx

@@ -0,0 +1,20 @@
+export const DelayIcon = ({ 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 21H23M4.86204 12.1265L7.12652 4.57826C7.9817 1.72766 12.0183 1.72766 12.8735 4.57826L14.7172 10.7241C15.4786 13.262 17.8145 15 20.4642 15H23C21.2194 15 19.6496 13.832 19.138 12.1265L16.8735 4.57826C16.0183 1.72766 11.9817 1.72766 11.1265 4.57826L9.28277 10.7241C8.5214 13.262 6.18547 15 3.53582 15H1C2.78061 15 4.35039 13.832 4.86204 12.1265Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+DelayIcon.displayName = 'DelayIcon'

package/src/icons/DenoiserIcon.jsx

@@ -0,0 +1,23 @@
+export const DenoiserIcon = ({
+  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.10388 18.6798C5.10388 18.2656 4.76809 17.9298 4.35388 17.9298C3.93966 17.9298 3.60388 18.2656 3.60388 18.6798H5.10388ZM12.3539 18.6798H13.1039V18.6798L12.3539 18.6798ZM12.3539 17.6989H11.6039V17.6989L12.3539 17.6989ZM13.3961 15.3908L12.9002 14.8282L13.3961 15.3908ZM14.9085 14.0047L15.4303 14.5435L14.9085 14.0047ZM2.6808 9.14136C2.6808 9.55557 3.01659 9.89136 3.4308 9.89136C3.84501 9.89136 4.1808 9.55557 4.1808 9.14136H2.6808ZM18.5354 13.3482C18.3113 13.6966 18.4121 14.1607 18.7604 14.3848C19.1088 14.6088 19.5728 14.5081 19.7969 14.1597L18.5354 13.3482ZM16.8683 0.669283C16.52 0.445193 16.0559 0.545934 15.8318 0.894297C15.6077 1.24266 15.7085 1.70672 16.0568 1.93081L16.8683 0.669283ZM3.60388 18.6798C3.60388 21.3032 5.73053 23.4298 8.35388 23.4298V21.9298C6.55895 21.9298 5.10388 20.4747 5.10388 18.6798H3.60388ZM8.35388 23.4298C10.9772 23.4298 13.1039 21.3032 13.1039 18.6798H11.6039C11.6039 20.4747 10.1488 21.9298 8.35388 21.9298V23.4298ZM13.1039 18.6798L13.1039 17.6989L11.6039 17.6989L11.6039 18.6798L13.1039 18.6798ZM13.1039 17.6989C13.1039 17.0309 13.391 16.3951 13.8921 15.9534L12.9002 14.8282C12.076 15.5547 11.6039 16.6003 11.6039 17.6989H13.1039ZM13.8921 15.9534C14.5 15.4175 15.0133 14.9473 15.4303 14.5435L14.3868 13.466C13.992 13.8483 13.4972 14.3019 12.9002 14.8282L13.8921 15.9534ZM15.4303 14.5435C16.8829 13.1369 17.7193 11.2044 17.7193 9.14136H16.2193C16.2193 10.7938 15.5508 12.3388 14.3868 13.466L15.4303 14.5435ZM17.7193 9.14136C17.7193 4.9886 14.3528 1.62213 10.2 1.62213V3.12213C13.5244 3.12213 16.2193 5.81703 16.2193 9.14136H17.7193ZM10.2 1.62213C6.04728 1.62213 2.6808 4.9886 2.6808 9.14136H4.1808C4.1808 5.81703 6.8757 3.12213 10.2 3.12213V1.62213ZM19.7969 14.1597C22.7135 9.62575 21.4023 3.58586 16.8683 0.669283L16.0568 1.93081C19.8941 4.39921 21.0038 9.51097 18.5354 13.3482L19.7969 14.1597ZM9.96905 9.33028V10.8303C10.7975 10.8303 11.469 10.1587 11.469 9.33028H9.96905ZM9.96905 9.33028H8.46905C8.46905 10.1587 9.14062 10.8303 9.96905 10.8303V9.33028ZM9.96905 9.33028V9.33028V7.83028C9.14062 7.83028 8.46905 8.50185 8.46905 9.33028H9.96905ZM9.96905 9.33028V9.33028H11.469C11.469 8.50185 10.7975 7.83028 9.96905 7.83028V9.33028ZM10.3893 9.33028C10.3893 9.56229 10.2012 9.75036 9.96923 9.75036V11.2504C11.0297 11.2504 11.8893 10.3907 11.8893 9.33028H10.3893ZM9.96923 9.75036C9.73723 9.75036 9.54915 9.56229 9.54915 9.33028H8.04915C8.04915 10.3907 8.9088 11.2504 9.96923 11.2504V9.75036ZM9.54915 9.33028C9.54915 9.09827 9.73723 8.91019 9.96923 8.91019V7.41019C8.9088 7.41019 8.04915 8.26985 8.04915 9.33028H9.54915ZM9.96923 8.91019C10.2012 8.91019 10.3893 9.09827 10.3893 9.33028H11.8893C11.8893 8.26985 11.0297 7.41019 9.96923 7.41019V8.91019Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+DenoiserIcon.displayName = 'DenoiserIcon'

package/src/icons/DevicesIcon.jsx

@@ -0,0 +1,26 @@
+export const DevicesIcon = ({
+  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.5981 17.0944H12.6302M12.6302 17.0944H8.8542M12.6302 17.0944V21.7963M8.8542 17.0944H2.24613C1.72477 17.0944 1.30212 16.6733 1.30212 16.154V5.80966C1.30212 5.29029 1.72477 4.86926 2.24613 4.86926H19.2383C19.7597 4.86926 20.1823 5.29029 20.1823 5.80966V11.8693M8.8542 17.0944V21.7963M12.6302 21.7963H14.0936M12.6302 21.7963H8.8542M8.8542 21.7963H7.17191M17.7143 11.8693H22.2858C22.6802 11.8693 23 12.2356 23 12.6874V21.0511C23 21.5029 22.6802 21.8693 22.2858 21.8693H17.7143C17.3198 21.8693 17 21.5029 17 21.0511V12.6874C17 12.2356 17.3198 11.8693 17.7143 11.8693Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+DevicesIcon.displayName = 'DevicesIcon'

package/src/icons/DialogueIcon.jsx

@@ -0,0 +1,33 @@
+export const DialogueIcon = ({
+  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}
+  >
+    <g clipPath="url(#clip0_5688_325)">
+      <path
+        d="M7 16.5V17C7 17.5304 7.21071 18.0391 7.58579 18.4142C7.96086 18.7893 8.46957 19 9 19H19L23 23V9C23 8.46957 22.7893 7.96086 22.4142 7.58579C22.0391 7.21071 21.5304 7 21 7H20.5M17 11C17 11.5304 16.7893 12.0391 16.4142 12.4142C16.0391 12.7893 15.5304 13 15 13H5L1 17V3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1H15C15.5304 1 16.0391 1.21071 16.4142 1.58579C16.7893 1.96086 17 2.46957 17 3V11Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5688_325">
+        <rect width="24" height="24" fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+DialogueIcon.displayName = 'DialogueIcon'

package/src/icons/DojoIcon.jsx

@@ -0,0 +1,21 @@
+export const DojoIcon = ({ 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.4381 5.63713C21.0426 7.44534 17.5206 8.87134 12.0005 8.87134C6.4756 8.87134 2.95061 7.44287 1.56189 5.63245M19.0006 2.16891C18.0647 3.38164 15.7026 4.33803 12.0003 4.33803C8.29491 4.33803 5.93077 3.37999 4.99939 2.16577M5.00061 12.1469V21.8344M19.0006 12.1469V21.8344"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+DojoIcon.displayName = 'DojoIcon'

package/src/icons/DotsVertical2Icon.jsx

@@ -0,0 +1,43 @@
+export const DotsVertical2Icon = ({
+  width = 3,
+  height = 11,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 3 11"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M2.18285 1.34142C2.18285 1.80613 1.80613 2.18285 1.34142 2.18285C0.876718 2.18285 0.5 1.80613 0.5 1.34142C0.5 0.876718 0.876718 0.5 1.34142 0.5C1.80613 0.5 2.18285 0.876718 2.18285 1.34142Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M1.84133 1.34142C1.84133 1.61757 1.61747 1.84142 1.34133 1.84142C1.06519 1.84142 0.841328 1.61757 0.841328 1.34142C0.841328 1.06528 1.06519 0.841423 1.34133 0.841423C1.61747 0.841423 1.84133 1.06528 1.84133 1.34142Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M2.18285 5.30221C2.18285 5.76691 1.80613 6.14363 1.34142 6.14363C0.876718 6.14363 0.5 5.76691 0.5 5.30221C0.5 4.8375 0.876718 4.46079 1.34142 4.46079C1.80613 4.46079 2.18285 4.8375 2.18285 5.30221Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M1.84133 5.30221C1.84133 5.57835 1.61747 5.80221 1.34133 5.80221C1.06519 5.80221 0.841328 5.57835 0.841328 5.30221C0.841328 5.02607 1.06519 4.80221 1.34133 4.80221C1.61747 4.80221 1.84133 5.02607 1.84133 5.30221Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M2.18285 9.26299C2.18285 9.7277 1.80613 10.1044 1.34142 10.1044C0.876718 10.1044 0.5 9.7277 0.5 9.26299C0.5 8.79829 0.876718 8.42157 1.34142 8.42157C1.80613 8.42157 2.18285 8.79829 2.18285 9.26299Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M1.84133 9.26299C1.84133 9.53914 1.61747 9.76299 1.34133 9.76299C1.06519 9.76299 0.841328 9.53914 0.841328 9.26299C0.841328 8.98685 1.06519 8.76299 1.34133 8.76299C1.61747 8.76299 1.84133 8.98685 1.84133 9.26299Z"
+      stroke="currentColor"
+    />
+  </svg>
+)
+
+DotsVertical2Icon.displayName = 'DotsVertical2Icon'

package/src/icons/DotsVerticalIcon.jsx

@@ -0,0 +1,47 @@
+export const DotsVerticalIcon = ({ width, height, className, ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill="none"
+      className={className}
+      {...props}
+    >
+      <g clipPath="url(#clip0_4414_845)">
+        <path
+          d="M8.84142 4.03922C8.84142 4.50392 8.4647 4.88064 7.99999 4.88064C7.53529 4.88064 7.15857 4.50392 7.15857 4.03922C7.15857 3.57451 7.53529 3.19779 7.99999 3.19779C8.4647 3.19779 8.84142 3.57451 8.84142 4.03922Z"
+          stroke="currentColor"
+        />
+        <path
+          d="M8.4999 4.03921C8.4999 4.31536 8.27604 4.53921 7.9999 4.53921C7.72375 4.53921 7.4999 4.31536 7.4999 4.03921C7.4999 3.76307 7.72375 3.53921 7.9999 3.53921C8.27604 3.53921 8.4999 3.76307 8.4999 4.03921Z"
+          stroke="currentColor"
+        />
+        <path
+          d="M8.84142 8C8.84142 8.46471 8.4647 8.84142 7.99999 8.84142C7.53529 8.84142 7.15857 8.46471 7.15857 8C7.15857 7.53529 7.53529 7.15858 7.99999 7.15858C8.4647 7.15858 8.84142 7.53529 8.84142 8Z"
+          stroke="currentColor"
+        />
+        <path
+          d="M8.4999 8C8.4999 8.27614 8.27604 8.5 7.9999 8.5C7.72375 8.5 7.4999 8.27614 7.4999 8C7.4999 7.72386 7.72375 7.5 7.9999 7.5C8.27604 7.5 8.4999 7.72386 8.4999 8Z"
+          stroke="currentColor"
+        />
+        <path
+          d="M8.84142 11.9608C8.84142 12.4255 8.4647 12.8022 7.99999 12.8022C7.53529 12.8022 7.15857 12.4255 7.15857 11.9608C7.15857 11.4961 7.53529 11.1194 7.99999 11.1194C8.4647 11.1194 8.84142 11.4961 8.84142 11.9608Z"
+          stroke="currentColor"
+        />
+        <path
+          d="M8.4999 11.9608C8.4999 12.2369 8.27604 12.4608 7.9999 12.4608C7.72375 12.4608 7.4999 12.2369 7.4999 11.9608C7.4999 11.6846 7.72375 11.4608 7.9999 11.4608C8.27604 11.4608 8.4999 11.6846 8.4999 11.9608Z"
+          stroke="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4414_845">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+DotsVerticalIcon.displayName = 'DotsVerticalIcon'

package/src/icons/DownloadApp2Icon.jsx

@@ -0,0 +1,26 @@
+export const DownloadApp2Icon = ({
+  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 13L12 17M12 17L16 13M12 17V7M7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2H7C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+DownloadApp2Icon.displayName = 'DownloadApp2Icon'

package/src/icons/DownloadAppIcon.jsx

@@ -0,0 +1,23 @@
+export const DownloadAppIcon = ({
+  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.53033 12.4697C9.23744 12.1768 8.76256 12.1768 8.46967 12.4697C8.17678 12.7626 8.17678 13.2374 8.46967 13.5303L9.53033 12.4697ZM12 16L11.4697 16.5303C11.7626 16.8232 12.2374 16.8232 12.5303 16.5303L12 16ZM15.5303 13.5303C15.8232 13.2374 15.8232 12.7626 15.5303 12.4697C15.2374 12.1768 14.7626 12.1768 14.4697 12.4697L15.5303 13.5303ZM12.75 8C12.75 7.58579 12.4142 7.25 12 7.25C11.5858 7.25 11.25 7.58579 11.25 8H12.75ZM11.25 15C11.25 15.4142 11.5858 15.75 12 15.75C12.4142 15.75 12.75 15.4142 12.75 15H11.25ZM9.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.25ZM8.46967 13.5303L11.4697 16.5303L12.5303 15.4697L9.53033 12.4697L8.46967 13.5303ZM12.5303 16.5303L15.5303 13.5303L14.4697 12.4697L11.4697 15.4697L12.5303 16.5303ZM11.25 8V15H12.75V8H11.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.75ZM9 1V2.25H10.5V1H9Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+DownloadAppIcon.displayName = 'DownloadAppIcon'

package/src/icons/Drums2Icon.jsx

@@ -0,0 +1,25 @@
+export const Drums2Icon = ({
+  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.3281 10.357L0.750061 21.5926M16.3725 8.24342L13.5788 22.7408M22 10.5C22 15.7467 17.7468 20 12.5 20C7.25334 20 3.00005 15.7467 3.00005 10.5C3.00005 5.25329 7.25334 1 12.5 1C17.7468 1 22 5.25329 22 10.5ZM10.8603 9.73287C11.205 10.0267 11.2462 10.5444 10.9523 10.8892C10.6585 11.2339 10.1408 11.2751 9.79603 10.9813C9.45129 10.6874 9.41007 10.1697 9.70395 9.82495C9.99782 9.48021 10.5155 9.43899 10.8603 9.73287ZM16.5277 7.43803C16.9725 7.52375 17.2636 7.95383 17.1779 8.39865C17.0922 8.84346 16.6621 9.13457 16.2173 9.04885C15.7725 8.96313 15.4814 8.53305 15.5671 8.08824C15.6528 7.64342 16.0829 7.35232 16.5277 7.43803Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+Drums2Icon.displayName = 'Drums2Icon'

package/src/icons/DrumsIcon.jsx

@@ -0,0 +1,18 @@
+export const DrumsIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 26 24"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M13.75 12.8236C13.75 12.4094 13.4142 12.0736 13 12.0736C12.5858 12.0736 12.25 12.4094 12.25 12.8236H13.75ZM21.2795 11.8824C21.2795 11.4682 20.9437 11.1324 20.5295 11.1324C20.1152 11.1324 19.7795 11.4682 19.7795 11.8824H21.2795ZM6.22048 11.8824C6.22048 11.4682 5.8847 11.1324 5.47048 11.1324C5.05627 11.1324 4.72048 11.4682 4.72048 11.8824H6.22048ZM25.0444 10.5C25.0444 10.0857 24.7086 9.74995 24.2944 9.74995C23.8802 9.74995 23.5444 10.0857 23.5444 10.5H25.0444ZM2.45605 10.5C2.45605 10.0857 2.12027 9.74995 1.70605 9.74995C1.29184 9.74995 0.956055 10.0857 0.956055 10.5H2.45605ZM24.3824 2.64522C24.7387 2.43405 24.8564 1.97399 24.6452 1.61765C24.4341 1.2613 23.974 1.14361 23.6176 1.35478L24.3824 2.64522ZM9.32342 9.82541C8.96708 10.0366 8.84939 10.4966 9.06055 10.853C9.27172 11.2093 9.73178 11.327 10.0881 11.1158L9.32342 9.82541ZM12.25 12.8236V21.7648H13.75V12.8236H12.25ZM19.7795 11.8824V20.8236H21.2795V11.8824H19.7795ZM4.72048 11.8824V20.8236H6.22048V11.8824H4.72048ZM23.5444 10.4707C23.5444 10.6622 23.4286 10.964 22.9426 11.347C22.465 11.7234 21.7275 12.0951 20.7492 12.4212C18.8006 13.0708 16.0608 13.4854 13.0002 13.4854V14.9854C16.1772 14.9854 19.0845 14.5572 21.2236 13.8442C22.2892 13.489 23.2056 13.0495 23.8711 12.5251C24.5281 12.0073 25.0444 11.3188 25.0444 10.4707H23.5444ZM13.0002 13.4854C9.9396 13.4854 7.19986 13.0708 5.25121 12.4212C4.27297 12.0951 3.53542 11.7234 3.05784 11.347C2.5718 10.964 2.45605 10.6622 2.45605 10.4707H0.956055C0.956055 11.3188 1.47238 12.0073 2.12938 12.5251C2.79483 13.0495 3.71127 13.489 4.77687 13.8442C6.9159 14.5572 9.82325 14.9854 13.0002 14.9854V13.4854ZM2.45605 10.4707C2.45605 10.2792 2.5718 9.97735 3.05784 9.59431C3.53542 9.21794 4.27297 8.84619 5.25121 8.52011C7.19986 7.87056 9.9396 7.45593 13.0002 7.45593V5.95593C9.82325 5.95593 6.9159 6.38407 4.77687 7.09708C3.71127 7.45228 2.79483 7.89176 2.12938 8.4162C1.47238 8.93397 0.956055 9.62256 0.956055 10.4707H2.45605ZM13.0002 7.45593C16.0608 7.45593 18.8006 7.87056 20.7492 8.52011C21.7275 8.84619 22.465 9.21794 22.9426 9.59431C23.4286 9.97735 23.5444 10.2792 23.5444 10.4707H25.0444C25.0444 9.62256 24.5281 8.93397 23.8711 8.4162C23.2056 7.89176 22.2892 7.45228 21.2236 7.09708C19.0845 6.38407 16.1772 5.95593 13.0002 5.95593V7.45593ZM23.5444 17.7647C23.5444 17.9562 23.4286 18.258 22.9426 18.6411C22.465 19.0174 21.7275 19.3892 20.7492 19.7153C18.8006 20.3648 16.0608 20.7794 13.0002 20.7794V22.2794C16.1772 22.2794 19.0845 21.8513 21.2236 21.1383C22.2892 20.7831 23.2056 20.3436 23.8711 19.8192C24.5281 19.3014 25.0444 18.6128 25.0444 17.7647H23.5444ZM13.0002 20.7794C9.9396 20.7794 7.19986 20.3648 5.25121 19.7153C4.27297 19.3892 3.53542 19.0174 3.05784 18.6411C2.5718 18.258 2.45605 17.9562 2.45605 17.7647H0.956055C0.956055 18.6128 1.47238 19.3014 2.12938 19.8192C2.79483 20.3436 3.71127 20.7831 4.77687 21.1383C6.9159 21.8513 9.82325 22.2794 13.0002 22.2794V20.7794ZM25.0444 17.7647V10.5H23.5444V17.7647H25.0444ZM2.45605 17.7647V10.5H0.956055V17.7647H2.45605ZM23.6176 1.35478L9.32342 9.82541L10.0881 11.1158L24.3824 2.64522L23.6176 1.35478Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+DrumsIcon.displayName = 'DrumsIcon'

package/src/icons/EditIcon.jsx

@@ -0,0 +1,20 @@
+export const EditIcon = ({ 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="M11.5 3.99998H6.5C4.01472 3.99998 2 6.0147 2 8.49998V17.5C2 19.9853 4.01472 22 6.5 22H15.5C17.9853 22 20 19.9853 20 17.5V13.5M18.5 2.49998C18.8978 2.10216 19.4374 1.87866 20 1.87866C20.5626 1.87866 21.1022 2.10216 21.5 2.49998C21.8978 2.89781 22.1213 3.43737 22.1213 3.99998C22.1213 4.56259 21.8978 5.10216 21.5 5.49998L12 15L8 16L9 12L18.5 2.49998Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+EditIcon.displayName = 'EditIcon'

package/src/icons/EffectsIcon.jsx

@@ -0,0 +1,25 @@
+export const EffectsIcon = ({
+  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.2486 3.59735C14.6392 3.74079 14.7468 4.37013 15.2486 4.47777C15.7504 4.58541 16.1629 3.8175 15.748 3.29925C15.1614 2.56662 12.7979 2.44024 11.3223 4.64333C10.1661 6.36945 9.79213 8.62073 8.77094 12.3934C7.73858 16.2074 7.33043 18.0246 6.10679 19.7354C4.88315 21.4461 3.00037 21.547 2.72512 20.7092C2.44841 19.867 3.60635 19.7354 3.60667 20.196M7.06739 8.39558H12.4102M15.2989 9.78433L17.7995 12.8456M17.7995 12.8456L20.5477 16.2101M17.7995 12.8456L20.2887 9.78433M17.7995 12.8456L15.0636 16.2101"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+EffectsIcon.displayName = 'EffectsIcon'

package/src/icons/ElectricGuitarIcon.jsx

@@ -0,0 +1,54 @@
+export const ElectricGuitarIcon = ({
+  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="M4.96815 2.98026C4.85773 2.99071 4.78159 3.09639 4.80545 3.20471C5.8508 7.95033 6.18035 12.8592 5.76884 17.7011L5.74214 18.0153C5.73195 18.1352 5.78143 18.2524 5.87445 18.3288C7.27021 19.474 8.0793 21.1945 8.0793 22.9999H15.9241C15.9241 21.1945 16.7331 19.474 18.1289 18.3288C18.2219 18.2524 18.2714 18.1352 18.2612 18.0153L18.2345 17.7011C17.823 12.8592 18.1525 7.95033 19.1979 3.20471C19.2218 3.09639 19.1456 2.99071 19.0352 2.98026L17.7975 2.86305C17.3655 2.82214 16.9593 2.63862 16.643 2.34142C15.5467 1.3112 13.9185 1.08785 12.5853 1.78483L12.0017 2.08992L11.4181 1.78483C10.0849 1.08785 8.45661 1.3112 7.36032 2.34142C7.04406 2.63862 6.6379 2.82214 6.20584 2.86305L4.96815 2.98026Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M22.624 6.55481C22.624 6.96902 22.2882 7.30481 21.874 7.30481C21.4598 7.30481 21.124 6.96902 21.124 6.55481C21.124 6.1406 21.4598 5.80481 21.874 5.80481C22.2882 5.80481 22.624 6.1406 22.624 6.55481Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M22.3706 11.2933C22.3706 11.7075 22.0348 12.0433 21.6206 12.0433C21.2064 12.0433 20.8706 11.7075 20.8706 11.2933C20.8706 10.8791 21.2064 10.5433 21.6206 10.5433C22.0348 10.5433 22.3706 10.8791 22.3706 11.2933Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M22.1172 16.0319C22.1172 16.4461 21.7814 16.7819 21.3672 16.7819C20.953 16.7819 20.6172 16.4461 20.6172 16.0319C20.6172 15.6176 20.953 15.2819 21.3672 15.2819C21.7814 15.2819 22.1172 15.6176 22.1172 16.0319Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M1.37939 6.55481C1.37939 6.96902 1.71518 7.30481 2.12939 7.30481C2.54361 7.30481 2.87939 6.96902 2.87939 6.55481C2.87939 6.1406 2.54361 5.80481 2.12939 5.80481C1.71518 5.80481 1.37939 6.1406 1.37939 6.55481Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M1.63281 11.2933C1.63281 11.7075 1.9686 12.0433 2.38281 12.0433C2.79703 12.0433 3.13281 11.7075 3.13281 11.2933C3.13281 10.8791 2.79703 10.5433 2.38281 10.5433C1.9686 10.5433 1.63281 10.8791 1.63281 11.2933Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M1.88623 16.0319C1.88623 16.4461 2.22202 16.7819 2.63623 16.7819C3.05044 16.7819 3.38623 16.4461 3.38623 16.0319C3.38623 15.6176 3.05044 15.2819 2.63623 15.2819C2.22202 15.2819 1.88623 15.6176 1.88623 16.0319Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+  </svg>
+)
+
+ElectricGuitarIcon.displayName = 'ElectricGuitarIcon'

package/src/icons/EqIcon.jsx

@@ -0,0 +1,20 @@
+export const EqIcon = ({ 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 22H5M1 18H5M1 14H5M1 10H5M19 22H23M19 18H23M10 18H14M10 10H14M10 6H14M10 2H14M10 22H14M10 14H14"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+EqIcon.displayName = 'EqIcon'

package/src/icons/FeaturesIcon.jsx

@@ -0,0 +1,24 @@
+export const FeaturesIcon = ({
+  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 10L15.5 15.5M9.5 15.5L15.5 9.5M4 10H9C9.55228 10 10 9.55228 10 9V4C10 3.44772 9.55228 3 9 3H4C3.44772 3 3 3.44772 3 4V9C3 9.55228 3.44772 10 4 10ZM4 22H9C9.55228 22 10 21.5523 10 21V16C10 15.4477 9.55228 15 9 15H4C3.44772 15 3 15.4477 3 16V21C3 21.5523 3.44772 22 4 22ZM16 10H21C21.5523 10 22 9.55228 22 9V4C22 3.44772 21.5523 3 21 3H16C15.4477 3 15 3.44772 15 4V9C15 9.55228 15.4477 10 16 10ZM16 22H21C21.5523 22 22 21.5523 22 21V16C22 15.4477 21.5523 15 21 15H16C15.4477 15 15 15.4477 15 16V21C15 21.5523 15.4477 22 16 22Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+  </svg>
+)
+
+FeaturesIcon.displayName = 'FeaturesIcon'

package/src/icons/FileIcon.jsx

@@ -0,0 +1,21 @@
+export const FileIcon = ({ 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.71899H5.95557C5.42513 1.71899 4.91643 1.92971 4.54135 2.30478C4.16628 2.67985 3.95557 3.18856 3.95557 3.71899V19.719C3.95557 20.2494 4.16628 20.7581 4.54135 21.1332C4.91643 21.5083 5.42513 21.719 5.95557 21.719H17.9556C18.486 21.719 18.9947 21.5083 19.3698 21.1332C19.7449 20.7581 19.9556 20.2494 19.9556 19.719V7.71899M13.9556 1.71899L19.9556 7.71899M13.9556 1.71899V7.71899H19.9556"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+FileIcon.displayName = 'FileIcon'