@moises.ai/design-system 3.4.5 → 3.5.0

package/src/icons/NoWoodwindBrassIcon.jsx

@@ -0,0 +1,23 @@
+export const NoWoodwindBrassIcon = ({
+  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.608 1L14.1384 0.46967C13.8579 0.1892 13.4075 0.175605 13.1107 0.438646C12.8138 0.701688 12.773 1.15041 13.0177 1.46261L13.608 1ZM23.1398 10.5318L22.6772 11.1221C22.9894 11.3668 23.4381 11.3261 23.7012 11.0292C23.9642 10.7323 23.9506 10.2819 23.6702 10.0015L23.1398 10.5318ZM11.114 21.0416L11.6443 21.5719L11.6443 21.5719L11.114 21.0416ZM15.1203 17.0352L15.6506 17.5656L15.1203 17.0352ZM11.114 13.0289L11.6443 13.5592L11.6443 13.5592L11.114 13.0289ZM1.96228 19.5097C1.66939 19.2168 1.19452 19.2168 0.901624 19.5097C0.608731 19.8026 0.608731 20.2774 0.901624 20.5703L1.96228 19.5097ZM3.57251 23.2412C3.86541 23.5341 4.34028 23.5341 4.63317 23.2412C4.92607 22.9483 4.92607 22.4734 4.63317 22.1806L3.57251 23.2412ZM8.58038 9.66079C8.28749 9.95369 8.28749 10.4286 8.58038 10.7215C8.87327 11.0143 9.34815 11.0143 9.64104 10.7215L8.58038 9.66079ZM10.1418 10.2207C10.4347 9.92777 10.4347 9.45289 10.1418 9.16C9.84894 8.86711 9.37406 8.86711 9.08117 9.16L10.1418 10.2207ZM3.23859 15.0026C2.9457 15.2955 2.9457 15.7703 3.23859 16.0632C3.53148 16.3561 4.00636 16.3561 4.29925 16.0632L3.23859 15.0026ZM4.80004 15.5624C5.09294 15.2696 5.09294 14.7947 4.80004 14.5018C4.50715 14.2089 4.03228 14.2089 3.73938 14.5018L4.80004 15.5624ZM12.0303 21.1858C12.3232 20.8929 12.3232 20.4181 12.0303 20.1252C11.7374 19.8323 11.2626 19.8323 10.9697 20.1252L12.0303 21.1858ZM8.03033 17.1731C8.32322 16.8802 8.32322 16.4053 8.03033 16.1124C7.73744 15.8196 7.26256 15.8196 6.96967 16.1124L8.03033 17.1731ZM9.73423 13.3479C9.44133 13.6408 9.44132 14.1157 9.73421 14.4086C10.0271 14.7015 10.502 14.7015 10.7949 14.4086L9.73423 13.3479ZM13.6802 17.4146C13.3873 17.7075 13.3873 18.1824 13.6802 18.4753C13.9731 18.7682 14.448 18.7682 14.7409 18.4753L13.6802 17.4146ZM1.46783 4.40717C1.17494 4.11428 0.700063 4.11428 0.40717 4.40717C0.114277 4.70006 0.114277 5.17494 0.40717 5.46783L1.46783 4.40717ZM18.5322 23.5928C18.8251 23.8857 19.2999 23.8857 19.5928 23.5928C19.8857 23.2999 19.8857 22.8251 19.5928 22.5322L18.5322 23.5928ZM15.8488 14.2799L16.5721 14.0814L15.8488 14.2799ZM16.4427 13.6894C16.2712 13.3124 15.8265 13.1458 15.4494 13.3173C15.0724 13.4888 14.9058 13.9335 15.0773 14.3106L16.4427 13.6894ZM13.0777 1.53033L22.6095 11.0621L23.6702 10.0015L14.1384 0.46967L13.0777 1.53033ZM23.6024 9.94147C23.0625 9.51832 22.2636 9.28214 21.4043 9.17102C20.5206 9.05677 19.475 9.06249 18.3576 9.20015C16.1255 9.47511 13.5304 10.2862 11.2804 11.8202L12.1253 13.0596C14.146 11.682 16.5046 10.9397 18.541 10.6889C19.5577 10.5636 20.475 10.5634 21.2119 10.6586C21.9731 10.7571 22.4524 10.946 22.6772 11.1221L23.6024 9.94147ZM12.3226 12.8624C13.8567 10.6122 14.667 8.01621 14.9412 5.78344C15.0785 4.66562 15.0838 3.61965 14.9692 2.73581C14.8578 1.87626 14.6215 1.0773 14.1984 0.537391L13.0177 1.46261C13.1939 1.68748 13.383 2.16707 13.4817 2.9286C13.5772 3.66584 13.5773 4.5835 13.4524 5.60062C13.2022 7.63773 12.4607 9.99695 11.0832 12.0174L12.3226 12.8624ZM7.63794 20.5112C6.82452 19.6978 6.82452 18.379 7.63794 17.5656L6.57728 16.5049C5.17807 17.9041 5.17807 20.1727 6.57728 21.5719L7.63794 20.5112ZM10.5836 20.5112C9.7702 21.3247 8.45137 21.3247 7.63794 20.5112L6.57728 21.5719C7.9765 22.9711 10.2451 22.9711 11.6443 21.5719L10.5836 20.5112ZM0.901624 20.5703L3.57251 23.2412L4.63317 22.1806L1.96228 19.5097L0.901624 20.5703ZM9.64104 10.7215L10.1418 10.2207L9.08117 9.16L8.58038 9.66079L9.64104 10.7215ZM4.29925 16.0632L4.80004 15.5624L3.73938 14.5018L3.23859 15.0026L4.29925 16.0632ZM10.9697 20.1252L10.5836 20.5112L11.6443 21.5719L12.0303 21.1858L10.9697 20.1252ZM6.96967 16.1124L2.23705 20.8451L3.29771 21.9057L8.03033 17.1731L6.96967 16.1124ZM11.1725 11.9096L10.5836 12.4986L11.6443 13.5592L12.2332 12.9702L11.1725 11.9096ZM10.5836 12.4986L9.73423 13.3479L10.7949 14.4086L11.6443 13.5592L10.5836 12.4986ZM14.59 16.5049L13.6802 17.4146L14.7409 18.4753L15.6506 17.5656L14.59 16.5049ZM0.40717 5.46783L18.5322 23.5928L19.5928 22.5322L1.46783 4.40717L0.40717 5.46783ZM15.1256 14.4783C15.3178 15.1789 15.138 15.9568 14.59 16.5049L15.6506 17.5656C16.5952 16.621 16.9011 15.2806 16.5721 14.0814L15.1256 14.4783ZM15.76 14C15.0773 14.3106 15.0772 14.3104 15.0772 14.3102C15.0772 14.3102 15.0771 14.31 15.077 14.3099C15.0769 14.3097 15.0768 14.3095 15.0768 14.3093C15.0766 14.3089 15.0764 14.3085 15.0762 14.3081C15.0758 14.3073 15.0755 14.3065 15.0751 14.3057C15.0745 14.3042 15.0738 14.3028 15.0733 14.3015C15.0721 14.2988 15.0711 14.2965 15.0703 14.2945C15.0687 14.2907 15.0677 14.2883 15.0675 14.2876C15.0669 14.2863 15.0689 14.2913 15.0733 14.304C15.0821 14.3296 15.0997 14.3841 15.1256 14.4783L16.5721 14.0814C16.5395 13.9626 16.5127 13.8771 16.4917 13.8161C16.4812 13.7855 16.4719 13.7604 16.4639 13.7399C16.4598 13.7296 16.4561 13.7204 16.4526 13.712C16.4508 13.7079 16.4491 13.7039 16.4475 13.7001C16.4466 13.6983 16.4458 13.6964 16.445 13.6947C16.4446 13.6938 16.4442 13.6929 16.4438 13.692C16.4436 13.6916 16.4435 13.6911 16.4433 13.6907C16.4432 13.6905 16.4431 13.6903 16.443 13.6901C16.4429 13.69 16.4428 13.6898 16.4428 13.6898C16.4428 13.6896 16.4427 13.6894 15.76 14Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+NoWoodwindBrassIcon.displayName = 'NoWoodwindBrassIcon'

package/src/icons/NotificationsIcon.jsx

@@ -0,0 +1,26 @@
+export const NotificationsIcon = ({
+  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.73 21C13.5542 21.3031 13.3018 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+NotificationsIcon.displayName = 'NotificationsIcon'

package/src/icons/OffloadDeviceIcon.jsx

@@ -0,0 +1,23 @@
+export const OffloadDeviceIcon = ({
+  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.75 2.25H8C8 2.66421 8.33579 3 8.75 3V2.25ZM13.25 2.25V3C13.6642 3 14 2.66421 14 2.25H13.25ZM17.25 7C17.25 7.41421 17.5858 7.75 18 7.75C18.4142 7.75 18.75 7.41421 18.75 7H17.25ZM18.75 15C18.75 14.5858 18.4142 14.25 18 14.25C17.5858 14.25 17.25 14.5858 17.25 15H18.75ZM19.5 3.48817C19.0858 3.48817 18.75 3.82396 18.75 4.23817C18.75 4.65238 19.0858 4.98817 19.5 4.98817V3.48817ZM21.2499 2.5L21.9999 2.49021C21.9945 2.07985 21.6603 1.75 21.2499 1.75C20.8395 1.75 20.5053 2.07985 20.5 2.49021L21.2499 2.5ZM20.4999 6C20.4999 6.41421 20.8357 6.75 21.2499 6.75C21.6641 6.75 21.9999 6.41421 21.9999 6H20.4999ZM23 4.98821C23.4142 4.98821 23.75 4.65242 23.75 4.23821C23.75 3.824 23.4142 3.48821 23 3.48821V4.98821ZM19 10.9884L19.0003 11.7384C19.4144 11.7382 19.75 11.4025 19.75 10.9884C19.75 10.5743 19.4144 10.2385 19.0003 10.2384L19 10.9884ZM14.4958 6.5L15.2458 6.49535C15.2433 6.08296 14.9082 5.75 14.4958 5.75C14.0834 5.75 13.7484 6.08296 13.7459 6.49535L14.4958 6.5ZM14.4958 15.5037L13.7458 15.504C13.7459 15.9181 14.0816 16.2537 14.4958 16.2537C14.9099 16.2537 15.2456 15.9181 15.2458 15.504L14.4958 15.5037ZM10 10.9884L9.99834 10.2384C9.58478 10.2393 9.25 10.5748 9.25 10.9884C9.25 11.402 9.58478 11.7375 9.99834 11.7384L10 10.9884ZM16 22.25H6V23.75H16V22.25ZM4.75 21V3H3.25V21H4.75ZM6 22.25C5.30964 22.25 4.75 21.6904 4.75 21H3.25C3.25 22.5188 4.48122 23.75 6 23.75V22.25ZM17.25 21C17.25 21.6904 16.6904 22.25 16 22.25V23.75C17.5188 23.75 18.75 22.5188 18.75 21H17.25ZM16 1.75C16.6904 1.75 17.25 2.30964 17.25 3H18.75C18.75 1.48122 17.5188 0.25 16 0.25V1.75ZM6 0.25C4.48122 0.25 3.25 1.48122 3.25 3H4.75C4.75 2.30964 5.30964 1.75 6 1.75V0.25ZM8.75 3H13.25V1.5H8.75V3ZM13.25 1.75H16V0.25H13.25V1.75ZM14 2.25V1H12.5V2.25H14ZM6 1.75H8.75V0.25H6V1.75ZM8.75 1.75H13.25V0.25H8.75V1.75ZM9.5 2.25V1H8V2.25H9.5ZM17.25 3V7H18.75V3H17.25ZM18.75 21V15H17.25V21H18.75ZM19.5 4.98817C20.8743 4.98817 21.982 3.87709 21.9999 2.50979L20.5 2.49021C20.4927 3.04715 20.0432 3.48817 19.5 3.48817V4.98817ZM19.5 4.98817C20.0475 4.98817 20.4999 5.43637 20.4999 6H21.9999C21.9999 4.61761 20.8856 3.48817 19.5 3.48817V4.98817ZM23 3.48821C21.6145 3.48821 20.4999 4.6175 20.4999 6H21.9999C21.9999 5.43648 22.4524 4.98821 23 4.98821V3.48821ZM20.5 2.50979C20.5178 3.87716 21.6258 4.98821 23 4.98821V3.48821C22.4568 3.48821 22.0071 3.04709 21.9999 2.49021L20.5 2.50979ZM19.0003 10.2384C16.9363 10.2376 15.2587 8.56599 15.2458 6.49535L13.7459 6.50465C13.7638 9.39591 16.1072 11.7373 18.9997 11.7384L19.0003 10.2384ZM15.2458 15.504C15.2465 13.4229 16.9288 11.7391 19.0003 11.7384L18.9997 10.2384C16.0968 10.2394 13.7468 12.5979 13.7458 15.5035L15.2458 15.504ZM9.99834 11.7384C12.0665 11.743 13.745 13.4253 13.7458 15.504L15.2458 15.5035C15.2447 12.6011 12.9001 10.2448 10.0017 10.2384L9.99834 11.7384ZM13.7459 6.49535C13.733 8.56358 12.0591 10.2338 9.99834 10.2384L10.0017 11.7384C12.8896 11.732 15.2279 9.39265 15.2458 6.50465L13.7459 6.49535Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+OffloadDeviceIcon.displayName = 'OffloadDeviceIcon'

package/src/icons/PauseFilledIcon.jsx

@@ -0,0 +1,27 @@
+export const PauseFilledIcon = ({
+  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 3.25C8.9665 3.25 9.75 4.0335 9.75 5L9.75 19C9.75 19.9665 8.9665 20.75 8 20.75C7.0335 20.75 6.25 19.9665 6.25 19L6.25 5C6.25 4.0335 7.0335 3.25 8 3.25Z"
+      fill="currentColor"
+    />
+    <path
+      d="M16 3.25C16.9665 3.25 17.75 4.0335 17.75 5V19C17.75 19.9665 16.9665 20.75 16 20.75C15.0335 20.75 14.25 19.9665 14.25 19L14.25 5C14.25 4.0335 15.0335 3.25 16 3.25Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+PauseFilledIcon.displayName = 'PauseFilledIcon'

package/src/icons/PauseIcon.jsx

@@ -0,0 +1,22 @@
+export const PauseIcon = ({ width, height, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 20 20"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M6.66683 2.70833C7.47224 2.70833 8.12516 3.36125 8.12516 4.16666L8.12516 15.8333C8.12516 16.6387 7.47225 17.2917 6.66683 17.2917C5.86141 17.2917 5.2085 16.6387 5.2085 15.8333L5.2085 4.16666C5.2085 3.36125 5.86141 2.70833 6.66683 2.70833Z"
+      fill="currentColor"
+    />
+    <path
+      d="M13.3335 2.70833C14.1389 2.70833 14.7918 3.36125 14.7918 4.16666V15.8333C14.7918 16.6387 14.1389 17.2917 13.3335 17.2917C12.5281 17.2917 11.8752 16.6387 11.8752 15.8333L11.8752 4.16666C11.8752 3.36125 12.5281 2.70833 13.3335 2.70833Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+PauseIcon.displayName = 'PauseIcon'

package/src/icons/PianoIcon.jsx

@@ -0,0 +1,25 @@
+export const PianoIcon = ({ 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_2034_833)">
+      <path
+        d="M3.6875 15.8182C3.6875 15.4385 3.3797 15.1307 3 15.1307C2.6203 15.1307 2.3125 15.4385 2.3125 15.8182H3.6875ZM6.8125 19.5C6.8125 19.8797 7.1203 20.1875 7.5 20.1875C7.8797 20.1875 8.1875 19.8797 8.1875 19.5H6.8125ZM11.3125 19.6364C11.3125 20.0161 11.6203 20.3239 12 20.3239C12.3797 20.3239 12.6875 20.0161 12.6875 19.6364H11.3125ZM15.8125 19.6364C15.8125 20.0161 16.1203 20.3239 16.5 20.3239C16.8797 20.3239 17.1875 20.0161 17.1875 19.6364H15.8125ZM23 15.8182V16.5057C23.3797 16.5057 23.6875 16.1979 23.6875 15.8182H23ZM1 15.8182H0.312501C0.312501 16.1979 0.620305 16.5057 1 16.5057L1 15.8182ZM14.2535 4.84091L14.8918 4.58551L14.2535 4.84091ZM2.3125 15.8182V21.5455H3.6875V15.8182H2.3125ZM4 23.1875H20.25V21.8125H4V23.1875ZM21.6875 21.5455V15.8182H20.3125V21.5455H21.6875ZM20.25 23.1875C20.7252 23.1875 21.1201 22.9735 21.373 22.6218C21.6066 22.297 21.6875 21.9028 21.6875 21.5455H20.3125C20.3125 21.7153 20.2715 21.7984 20.2567 21.819C20.2522 21.8253 20.2552 21.8193 20.2667 21.8134C20.2784 21.8074 20.2774 21.8125 20.25 21.8125V23.1875ZM2.3125 21.5455C2.3125 22.5017 3.1654 23.1875 4 23.1875V21.8125C3.93616 21.8125 3.8491 21.7824 3.77703 21.7158C3.70741 21.6514 3.6875 21.5875 3.6875 21.5455H2.3125ZM6.8125 15.8182V19.5H8.1875V15.8182H6.8125ZM11.3125 15.8182V19.6364H12.6875V15.8182H11.3125ZM15.8125 15.8182V19.6364H17.1875V15.8182H15.8125ZM22.3125 11.0455V15.8182H23.6875V11.0455H22.3125ZM1.6875 15.8182V6.27273H0.312501V15.8182H1.6875ZM5.58333 2.1875H9.44097V0.812501H5.58333V2.1875ZM17.691 7.91477H19.3333V6.53977H17.691V7.91477ZM9.44097 2.1875C11.2517 2.1875 12.9052 3.32202 13.6152 5.09631L14.8918 4.58551C13.9827 2.31361 11.8397 0.812501 9.44097 0.812501V2.1875ZM23.6875 11.0455C23.6875 8.58354 21.764 6.53977 19.3333 6.53977V7.91477C20.9527 7.91477 22.3125 9.28992 22.3125 11.0455H23.6875ZM13.6152 5.09631C14.2929 6.79018 15.8936 7.91477 17.691 7.91477V6.53977C16.4816 6.53977 15.3704 5.78177 14.8918 4.58551L13.6152 5.09631ZM1.6875 6.27273C1.6875 3.99002 3.4577 2.1875 5.58333 2.1875V0.812501C2.64636 0.812501 0.312501 3.28363 0.312501 6.27273H1.6875ZM23 15.1307H12V16.5057H23V15.1307ZM12 15.1307H1V16.5057H12V15.1307Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2034_833">
+        <rect width="24" height="24" fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+PianoIcon.displayName = 'PianoIcon'

package/src/icons/PinIcon.jsx

@@ -0,0 +1,20 @@
+export const PinIcon = ({ width = 14, height = 21, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 14 21"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M6.625 12.9375L6.625 20.75M11.625 0.75H1.625M3.75 0.75H9.5V9.4375L12.5 12.9375H0.75L3.75 9.4375V0.75Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+PinIcon.displayName = 'PinIcon'

package/src/icons/Pip2Icon.jsx

@@ -0,0 +1,18 @@
+export const Pip2Icon = ({ 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 18.75C9.41421 18.75 9.75 18.4142 9.75 18C9.75 17.5858 9.41421 17.25 9 17.25V18.75ZM20.25 10C20.25 10.4142 20.5858 10.75 21 10.75C21.4142 10.75 21.75 10.4142 21.75 10H20.25ZM5.66866 10.9908C5.25444 10.9908 4.91866 11.3266 4.91866 11.7408C4.91866 12.155 5.25444 12.4908 5.66866 12.4908V10.9908ZM10.7397 11.7408V12.4908C11.1539 12.4908 11.4897 12.155 11.4897 11.7408H10.7397ZM11.4897 6.66975C11.4897 6.25553 11.1539 5.91975 10.7397 5.91975C10.3255 5.91975 9.98973 6.25553 9.98973 6.66975H11.4897ZM5.78477 5.7252C5.49188 5.43231 5.01701 5.43231 4.72411 5.7252C4.43122 6.0181 4.43122 6.49297 4.72411 6.78586L5.78477 5.7252ZM3 2.75H19V1.25H3V2.75ZM1.75 16V4H0.25V16H1.75ZM9 17.25H3V18.75H9V17.25ZM20.25 4V10H21.75V4H20.25ZM0.25 16C0.25 17.5188 1.48122 18.75 3 18.75V17.25C2.30964 17.25 1.75 16.6904 1.75 16H0.25ZM19 2.75C19.6904 2.75 20.25 3.30964 20.25 4H21.75C21.75 2.48122 20.5188 1.25 19 1.25V2.75ZM3 1.25C1.48122 1.25 0.25 2.48122 0.25 4H1.75C1.75 3.30964 2.30964 2.75 3 2.75V1.25ZM5.66866 12.4908H10.7397V10.9908H5.66866V12.4908ZM11.4897 11.7408V6.66975H9.98973V11.7408H11.4897ZM11.2701 11.2105L5.78477 5.7252L4.72411 6.78586L10.2094 12.2711L11.2701 11.2105ZM15 14.75H21V13.25H15V14.75ZM22.25 16V20H23.75V16H22.25ZM21 21.25H15V22.75H21V21.25ZM13.75 20V16H12.25V20H13.75ZM15 21.25C14.3096 21.25 13.75 20.6904 13.75 20H12.25C12.25 21.5188 13.4812 22.75 15 22.75V21.25ZM22.25 20C22.25 20.6904 21.6904 21.25 21 21.25V22.75C22.5188 22.75 23.75 21.5188 23.75 20H22.25ZM21 14.75C21.6904 14.75 22.25 15.3096 22.25 16H23.75C23.75 14.4812 22.5188 13.25 21 13.25V14.75ZM15 13.25C13.4812 13.25 12.25 14.4812 12.25 16H13.75C13.75 15.3096 14.3096 14.75 15 14.75V13.25Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+Pip2Icon.displayName = 'Pip2Icon'

package/src/icons/PipIcon.jsx

@@ -0,0 +1,21 @@
+export const PipIcon = ({ 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 18H3C1.89543 18 1 17.1046 1 16V4C1 2.89543 1.89543 2 3 2H19C20.1046 2 21 2.89543 21 4V10M15 22H21C22.1046 22 23 21.1046 23 20V16C23 14.8954 22.1046 14 21 14H15C13.8954 14 13 14.8954 13 16V20C13 21.1046 13.8954 22 15 22Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+PipIcon.displayName = 'PipIcon'

package/src/icons/PitchCorrectionIcon.jsx

@@ -0,0 +1,25 @@
+export const PitchCorrectionIcon = ({
+  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 22H2.58374C5.85497 22 8.79664 20.0084 10.0115 16.9711L13.9884 7.02888C15.2034 3.99161 18.145 2 21.4163 2H22M3 17H21C21.5523 17 22 16.5523 22 16V8C22 7.44772 21.5523 7 21 7H3C2.44772 7 2 7.44772 2 8V16C2 16.5523 2.44772 17 3 17Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+PitchCorrectionIcon.displayName = 'PitchCorrectionIcon'

package/src/icons/PitchIcon.jsx

@@ -0,0 +1,21 @@
+export const PitchIcon = ({ 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 15H22M2 15H7.42551M2 22H22M2 8H22M14.5755 11.9221V15.377C14.5755 16.2848 13.9641 17.0787 13.0865 17.3107L9.93651 18.1431C8.66785 18.4784 7.42551 17.5217 7.42551 16.2095V15.3517C7.42551 14.444 8.03687 13.6501 8.91451 13.4181L14.5755 11.9221ZM14.5755 11.9221V2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+PitchIcon.displayName = 'PitchIcon'

package/src/icons/PlayAllIcon.jsx

@@ -0,0 +1,25 @@
+export const PlayAllIcon = ({
+  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 3H17M3 9H17M3 15H9.68421M14 13.2415V20.7585C14 20.9441 14.2012 21.0601 14.3621 20.9673L20.8793 17.2088C21.0402 17.116 21.0402 16.884 20.8793 16.7912L14.3621 13.0327C14.2011 12.9399 14 13.0559 14 13.2415Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+PlayAllIcon.displayName = 'PlayAllIcon'

package/src/icons/PlayBackSpeedIcon.jsx

@@ -0,0 +1,37 @@
+export const PlayBackSpeedIcon = ({
+  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_2763_64)">
+      <path
+        d="M15.0873 11.6522C15.3527 11.8068 15.3527 12.1932 15.0873 12.3478L10.3108 15.1299C10.0454 15.2845 9.71375 15.0913 9.71375 14.7822V9.21784C9.71375 8.90871 10.0454 8.71551 10.3108 8.87007L15.0873 11.6522Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15 1.41408C19.617 2.71993 23 6.9649 23 12C23 17.0033 19.6596 21.2265 15.0873 22.5609M10.897 1.05463C8.9179 1.25167 7.09321 1.97328 5.56397 3.07841M2.87439 5.8561C1.86624 7.35058 1.21553 9.10609 1.04486 11M1.41408 15C1.83193 16.4774 2.55071 17.8284 3.50002 18.9826M6.50002 21.5284C7.84576 22.3069 9.37173 22.8084 11 22.9552M9.71373 9.21786V14.7822C9.71373 15.0913 10.0454 15.2845 10.3108 15.1299L15.0873 12.3478C15.3526 12.1932 15.3526 11.8068 15.0873 11.6522L10.3108 8.87009C10.0454 8.71552 9.71373 8.90873 9.71373 9.21786Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2763_64">
+        <rect width="24" height="24" fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+PlayBackSpeedIcon.displayName = 'PlayBackSpeedIcon'

package/src/icons/PlayCircleIcon.jsx

@@ -0,0 +1,44 @@
+export const PlayCircleIcon = ({
+  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_2034_845)">
+      <path
+        d="M15.0873 11.6522C15.3527 11.8068 15.3527 12.1932 15.0873 12.3478L10.3108 15.1299C10.0454 15.2845 9.71375 15.0913 9.71375 14.7822V9.21784C9.71375 8.90871 10.0454 8.71551 10.3108 8.87007L15.0873 11.6522Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.0873 11.6522C15.3526 11.8068 15.3526 12.1932 15.0873 12.3478L10.3108 15.1299C10.0454 15.2845 9.71372 15.0913 9.71372 14.7822V9.21784C9.71372 8.90872 10.0454 8.71551 10.3108 8.87007L15.0873 11.6522Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2034_845">
+        <rect width="24" height="24" fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+PlayCircleIcon.displayName = 'PlayCircleIcon'

package/src/icons/PlayIcon.jsx

@@ -0,0 +1,20 @@
+export const PlayIcon = ({ width, height, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 20 20"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M17.1436 8.90462C17.953 9.34981 18.004 10.468 17.2959 10.9974L17.1436 11.0951L5.60254 17.4427C4.7695 17.9009 3.75007 17.2987 3.75 16.348L3.75 3.65169C3.75029 2.76065 4.64608 2.17508 5.44434 2.48275L5.60254 2.55697L17.1436 8.90462Z"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="0.833333"
+    />
+  </svg>
+)
+
+PlayIcon.displayName = 'PlayIcon'

package/src/icons/PlayOnRepeatIcon.jsx

@@ -0,0 +1,26 @@
+export const PlayOnRepeatIcon = ({
+  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.75 6H17C20.3137 6 23 8.68629 23 12C23 15.3137 20.3137 18 17 18H11.75M7.08974 18H7C3.68629 18 1 15.3137 1 12C1 8.68629 3.68629 6 7 6H12.5M9 2L13 6L9 10M15 22L11 18L15 14"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+PlayOnRepeatIcon.displayName = 'PlayOnRepeatIcon'

package/src/icons/PlusIcon.jsx

@@ -0,0 +1,21 @@
+export const PlusIcon = ({ 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 3V21M3 12H21"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+PlusIcon.displayName = 'PlusIcon'

package/src/icons/PreferencesIcon.jsx

@@ -0,0 +1,25 @@
+export const PreferencesIcon = ({
+  width = 16,
+  height = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 18 18"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M11.4375 14.25H1.5M16.5 14.25H13.7812M4.24219 9H1.5M16.5 9H6.58594M8.60156 3.75L1.5 3.75M16.5 3.75L10.875 3.75M10.875 2.25V5.25M6.58502 7.5V10.5M13.7775 12.75V15.75"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+PreferencesIcon.displayName = 'PreferencesIcon'

package/src/icons/PreviousIcon.jsx

@@ -0,0 +1,25 @@
+export const PreviousIcon = ({
+  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="M6 5.75006L6 18.2501M18.75 5.42263L18.75 18.5775C18.75 18.9023 18.4052 19.1053 18.1293 18.9429L6.9569 12.3655C6.68103 12.2031 6.68104 11.7971 6.9569 11.6346L18.1293 5.05722C18.4052 4.89481 18.75 5.09782 18.75 5.42263Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+PreviousIcon.displayName = 'PreviousIcon'

package/src/icons/PriceTagIcon.jsx

@@ -0,0 +1,26 @@
+export const PriceTagIcon = ({
+  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="M7.75 7.75H7.76M21.34 14.16L14.17 21.33C13.9843 21.516 13.7637 21.6635 13.5209 21.7641C13.2781 21.8648 13.0178 21.9166 12.755 21.9166C12.4922 21.9166 12.2319 21.8648 11.9891 21.7641C11.7463 21.6635 11.5257 21.516 11.34 21.33L2.75 12.75V2.75H12.75L21.34 11.34C21.7125 11.7147 21.9216 12.2216 21.9216 12.75C21.9216 13.2784 21.7125 13.7853 21.34 14.16Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+PriceTagIcon.displayName = 'PriceTagIcon'

package/src/icons/ProducerIcon.jsx

@@ -0,0 +1,69 @@
+export const ProducerIcon = ({
+  width = 58,
+  height = 12,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 58 12"
+    fill="none"
+    {...props}
+    className={className}
+  >
+    <path
+      d="M2.97232 6.20185H12.1672C12.9696 6.20185 13.5312 6.10021 13.8522 5.89695C14.1838 5.68299 14.3496 5.34601 14.3496 4.88599V4.86995C14.3496 4.40993 14.1838 4.07295 13.8522 3.85899C13.5312 3.64503 12.9696 3.53805 12.1672 3.53805H2.84394L3.93513 2.4629V11.8022H0.822021V0.697733H12.1672C14.0394 0.697733 15.3873 1.06681 16.2111 1.80497C17.0455 2.54314 17.4627 3.56479 17.4627 4.86995V4.88599C17.4627 6.18045 17.0455 7.19676 16.2111 7.93492C15.3873 8.67308 14.0394 9.04216 12.1672 9.04216H2.97232V6.20185Z"
+      fill="url(#paint0_linear_29160_243039)"
+    />
+    <path
+      d="M29.7095 6.84372H33.0151L36.3369 11.8022H32.8065L29.7095 6.84372ZM21.365 5.96114H30.8809C31.6297 5.96114 32.1593 5.86486 32.4695 5.67229C32.7905 5.47973 32.9509 5.15879 32.9509 4.70948V4.69343C32.9509 4.25481 32.7905 3.94457 32.4695 3.76271C32.1593 3.57014 31.6297 3.47386 30.8809 3.47386H21.6699L22.5365 2.59128V11.8022H19.4233V0.697733H30.8809C32.7209 0.697733 34.0421 1.05612 34.8445 1.77288C35.6575 2.48965 36.0641 3.46316 36.0641 4.69343V4.70948C36.0641 5.49043 35.8982 6.16975 35.5666 6.74744C35.235 7.32513 34.684 7.7798 33.9138 8.11144C33.1542 8.44307 32.1432 8.60889 30.8809 8.60889H21.365V5.96114Z"
+      fill="url(#paint1_linear_29160_243039)"
+    />
+    <path
+      d="M50.9036 0.633545C52.2195 0.633545 53.3481 0.858203 54.2895 1.30752C55.231 1.74614 55.9477 2.38801 56.4398 3.23315C56.9319 4.0676 57.178 5.07321 57.178 6.24999V6.26603C57.178 7.43211 56.9319 8.43772 56.4398 9.28286C55.9477 10.1173 55.231 10.7592 54.2895 11.2085C53.3481 11.6471 52.2195 11.8664 50.9036 11.8664H43.9232C42.6073 11.8664 41.4787 11.6471 40.5373 11.2085C39.5959 10.7592 38.8791 10.1173 38.387 9.28286C37.8949 8.43772 37.6488 7.43211 37.6488 6.26603V6.24999C37.6488 5.07321 37.8949 4.0676 38.387 3.23315C38.8791 2.38801 39.5959 1.74614 40.5373 1.30752C41.4787 0.858203 42.6073 0.633545 43.9232 0.633545H50.9036ZM50.9036 9.02611C51.6204 9.02611 52.2088 8.91913 52.6688 8.70517C53.1395 8.48052 53.4872 8.16492 53.7118 7.7584C53.9472 7.34118 54.0649 6.84372 54.0649 6.26603V6.24999C54.0649 5.6616 53.9472 5.16414 53.7118 4.75762C53.4872 4.3404 53.1395 4.02481 52.6688 3.81085C52.2088 3.58619 51.6204 3.47386 50.9036 3.47386H43.9232C43.2171 3.47386 42.6287 3.58619 42.158 3.81085C41.6873 4.02481 41.3343 4.3404 41.0989 4.75762C40.8743 5.16414 40.7619 5.6616 40.7619 6.24999V6.26603C40.7619 6.84372 40.8743 7.34118 41.0989 7.7584C41.3343 8.16492 41.6873 8.48052 42.158 8.70517C42.6287 8.91913 43.2171 9.02611 43.9232 9.02611H50.9036Z"
+      fill="url(#paint2_linear_29160_243039)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_29160_243039"
+        x1="0.838854"
+        y1="6.24994"
+        x2="161.384"
+        y2="22.8988"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" />
+        <stop offset="0.511763" stopColor="#9E9E9E" />
+        <stop offset="0.621875" stopColor="white" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_29160_243039"
+        x1="0.838854"
+        y1="6.24994"
+        x2="161.384"
+        y2="22.8988"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" />
+        <stop offset="0.511763" stopColor="#9E9E9E" />
+        <stop offset="0.621875" stopColor="white" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_29160_243039"
+        x1="0.838854"
+        y1="6.24994"
+        x2="161.384"
+        y2="22.8988"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" />
+        <stop offset="0.511763" stopColor="#9E9E9E" />
+        <stop offset="0.621875" stopColor="white" />
+      </linearGradient>
+    </defs>
+  </svg>
+)
+
+ProducerIcon.displayName = 'ProducerIcon'

package/src/icons/PuzzlePiece2Icon.jsx

@@ -0,0 +1,26 @@
+export const PuzzlePiece2Icon = ({
+  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.0522 6.95231C14.4882 6.46521 14.7533 5.82197 14.7533 5.11681C14.7533 3.59621 13.5206 2.36353 12 2.36353C10.4794 2.36353 9.2467 3.59621 9.2467 5.11681C9.2467 5.82197 9.5118 6.46521 9.94776 6.95231H4.65796L4.65796 12.2421C5.14506 11.8062 5.78828 11.5411 6.49341 11.5411C8.014 11.5411 9.24669 12.7738 9.24669 14.2944C9.24669 15.815 8.014 17.0477 6.49341 17.0477C5.78828 17.0477 5.14506 16.7826 4.65796 16.3467L4.65796 21.6365H15.3421C17.5513 21.6365 19.3421 19.8456 19.3421 17.6365V6.95231H14.0522Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+PuzzlePiece2Icon.displayName = 'PuzzlePiece2Icon'