npm - @khanacademy/math-input - Versions diffs - 2.0.0 → 4.0.0 - Mend

@khanacademy/math-input 2.0.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (264) hide show

package/src/components/keypad/button-assets.tsx CHANGED Viewed

@@ -12,10 +12,9 @@ no copying and pasting is necessary.
 */
 import * as React from "react";
-// TODO: This should be an enumeration of all of the possible legal values
-type KeyId = string;
+import Key from "../../data/keys";
-type Props = {id: KeyId};
+type Props = {id: Key};
 export default function ButtonAsset({id}: Props): React.ReactElement {
     switch (id) {
@@ -181,9 +180,9 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     <path
                         d="M22 10C17 16 17 24 22 30"
                         stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                     />
                 </svg>
             );
@@ -199,115 +198,106 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     <path
                         d="M19 10C24 16 24 24 19 30"
                         stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                     />
                 </svg>
             );
         case "MINUS":
             return (
                 <svg
-                    width="40"
-                    height="40"
-                    viewBox="0 0 40 40"
-                    fill="none"
                     xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
                 >
-                    <path
-                        d="M27 20H13"
-                        stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    />
+                    <path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z" />
                 </svg>
             );
         case "PLUS":
             return (
+                // Phosphor Icons - Plus Bold
                 <svg
-                    width="40"
-                    height="40"
-                    viewBox="0 0 40 40"
-                    fill="none"
                     xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
                 >
-                    <path
-                        d="M27 20H13"
-                        stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    />
-                    <path
-                        d="M20 13V27"
-                        stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    />
+                    <path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z" />{" "}
                 </svg>
             );
         case "TIMES":
             return (
+                // Phosphor Icons - X Bold
                 <svg
-                    width="40"
-                    height="40"
-                    viewBox="0 0 40 40"
-                    fill="none"
                     xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="#000000"
+                    viewBox="0 0 256 256"
                 >
-                    <path
-                        d="M24.9498 24.9493L15.0503 15.0498"
-                        stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    />
-                    <path
-                        d="M24.9498 15.0507L15.0503 24.9502"
-                        stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    />
+                    <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" />
                 </svg>
             );
         case "BACKSPACE":
             return (
                 <svg
-                    width="40"
-                    height="40"
-                    viewBox="0 0 40 40"
-                    fill="none"
                     xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
                 >
-                    <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M10 20L16 14H28.1716V26L16 26L10 20ZM8.58579 18.5858L14.5858 12.5858C14.9609 12.2107 15.4696 12 16 12H28.1716C29.2761 12 30.1716 12.8954 30.1716 14V26C30.1716 27.1046 29.2761 28 28.1716 28H16C15.4696 28 14.9609 27.7893 14.5858 27.4142L8.58579 21.4142C7.80474 20.6332 7.80474 19.3668 8.58579 18.5858ZM22.4645 17.2929L21.1716 18.5858L19.8787 17.2929C19.4882 16.9024 18.855 16.9024 18.4645 17.2929C18.074 17.6834 18.074 18.3166 18.4645 18.7071L19.7574 20L18.4645 21.2929C18.074 21.6834 18.074 22.3166 18.4645 22.7071C18.855 23.0976 19.4882 23.0976 19.8787 22.7071L21.1716 21.4142L22.4645 22.7071C22.855 23.0976 23.4882 23.0976 23.8787 22.7071C24.2693 22.3166 24.2693 21.6834 23.8787 21.2929L22.5858 20L23.8787 18.7071C24.2693 18.3166 24.2693 17.6834 23.8787 17.2929C23.4882 16.9024 22.855 16.9024 22.4645 17.2929Z"
-                        fill="#21242C"
-                    />
+                    <path d="M216,40H68.53a16.08,16.08,0,0,0-13.72,7.77L9.14,123.88a8,8,0,0,0,0,8.24l45.67,76.11A16.08,16.08,0,0,0,68.53,216H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM61.67,204.12,68.53,200h0ZM216,200H68.53l-43.2-72,43.2-72H216ZM106.34,146.34,124.69,128l-18.35-18.34a8,8,0,0,1,11.32-11.32L136,116.69l18.34-18.35a8,8,0,0,1,11.32,11.32L147.31,128l18.35,18.34a8,8,0,0,1-11.32,11.32L136,139.31l-18.34,18.35a8,8,0,0,1-11.32-11.32Z" />
                 </svg>
             );
         case "DISMISS":
             return (
                 <svg
-                    width="40"
-                    height="40"
-                    viewBox="0 0 40 40"
-                    fill="none"
                     xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M10 12C10 10.8954 10.8954 10 12 10H28C29.1046 10 30 10.8954 30 12V21H28V12L12 12V21H10V12ZM19 14C19 13.4477 19.4477 13 20 13C20.5523 13 21 13.4477 21 14C21 14.5523 20.5523 15 20 15C19.4477 15 19 14.5523 19 14ZM17 13C16.4477 13 16 13.4477 16 14C16 14.5523 16.4477 15 17 15C17.5523 15 18 14.5523 18 14C18 13.4477 17.5523 13 17 13ZM13 14C13 13.4477 13.4477 13 14 13C14.5523 13 15 13.4477 15 14C15 14.5523 14.5523 15 14 15C13.4477 15 13 14.5523 13 14ZM20 16C19.4477 16 19 16.4477 19 17C19 17.5523 19.4477 18 20 18C20.5523 18 21 17.5523 21 17C21 16.4477 20.5523 16 20 16ZM16 17C16 16.4477 16.4477 16 17 16C17.5523 16 18 16.4477 18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17ZM14 16C13.4477 16 13 16.4477 13 17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17C15 16.4477 14.5523 16 14 16ZM22 14C22 13.4477 22.4477 13 23 13C23.5523 13 24 13.4477 24 14C24 14.5523 23.5523 15 23 15C22.4477 15 22 14.5523 22 14ZM23 16C22.4477 16 22 16.4477 22 17C22 17.5523 22.4477 18 23 18C23.5523 18 24 17.5523 24 17C24 16.4477 23.5523 16 23 16ZM25 14C25 13.4477 25.4477 13 26 13C26.5523 13 27 13.4477 27 14C27 14.5523 26.5523 15 26 15C25.4477 15 25 14.5523 25 14ZM26 16C25.4477 16 25 16.4477 25 17C25 17.5523 25.4477 18 26 18C26.5523 18 27 17.5523 27 17C27 16.4477 26.5523 16 26 16ZM16 20C16 19.4477 16.4477 19 17 19H23C23.5523 19 24 19.4477 24 20C24 20.5523 23.5523 21 23 21H17C16.4477 21 16 20.5523 16 20ZM26.7071 25.7071C27.0976 25.3166 27.0976 24.6834 26.7071 24.2929C26.3166 23.9024 25.6834 23.9024 25.2929 24.2929L20 29.5858L14.7071 24.2929C14.3166 23.9024 13.6834 23.9024 13.2929 24.2929C12.9024 24.6834 12.9024 25.3166 13.2929 25.7071L19.2929 31.7071C19.6834 32.0976 20.3166 32.0976 20.7071 31.7071L26.7071 25.7071Z"
-                        fill="#21242C"
+                        // flip to point down
+                        transform="scale(1,-1) translate(0, -260)"
+                        d="M205.66,125.66a8,8,0,0,1-11.32,0L128,59.31,61.66,125.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,125.66Z"
                     />
                 </svg>
             );
+        case "FRAC":
+            return (
+                <svg width="48" height="48" viewBox="0 0 48 48">
+                    <g fill="none" fillRule="evenodd">
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <g transform="translate(12 12)">
+                            <path fill="none" d="M0 0h24v24H0z" />
+                            <path
+                                d="M8 16.997c0-.55.453-.997.997-.997h6.006c.55 0 .997.453.997.997v6.006c0 .55-.453.997-.997.997H8.997c-.55 0-.997-.453-.997-.997v-6.006zM10 18h4v4h-4v-4z"
+                                fill="currentColor"
+                            />
+                            <rect
+                                fill="currentColor"
+                                x="2"
+                                y="11"
+                                width="20"
+                                height="2"
+                                rx="1"
+                            />
+                            <path
+                                d="M8 .997C8 .447 8.453 0 8.997 0h6.006c.55 0 .997.453.997.997v6.006c0 .55-.453.997-.997.997H8.997C8.447 8 8 7.547 8 7.003V.997zM10 2h4v4h-4V2z"
+                                fill="currentColor"
+                            />
+                        </g>
+                    </g>
+                </svg>
+            );
         case "FRAC_INCLUSIVE":
             return (
                 <svg
@@ -318,8 +308,8 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
                         d="M16 10C16 9.44772 16.4477 9 17 9H23C23.5523 9 24 9.44772 24 10V16C24 16.5523 23.5523 17 23 17H17C16.4477 17 16 16.5523 16 16V10ZM18 11H22V15H18V11ZM14 20C14 19.4477 14.4477 19 15 19H25C25.5523 19 26 19.4477 26 20C26 20.5523 25.5523 21 25 21H15C14.4477 21 14 20.5523 14 20ZM17 23C16.4477 23 16 23.4477 16 24V30C16 30.5523 16.4477 31 17 31H23C23.5523 31 24 30.5523 24 30V24C24 23.4477 23.5523 23 23 23H17ZM22 25H18V29H22V25Z"
                         fill="#21242C"
                     />
@@ -335,33 +325,31 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
                         d="M12.9571 13.2929C13.3476 13.6834 13.3476 14.3166 12.9571 14.7071C11.6871 15.9771 11 17.9485 11 20C11 22.0515 11.6871 24.0229 12.9571 25.2929C13.3476 25.6834 13.3476 26.3166 12.9571 26.7071C12.5666 27.0976 11.9334 27.0976 11.5429 26.7071C9.81292 24.9771 9 22.4485 9 20C9 17.5515 9.81292 15.0229 11.5429 13.2929C11.9334 12.9024 12.5666 12.9024 12.9571 13.2929ZM14 20C14 19.4477 14.4477 19 15 19H25C25.5523 19 26 19.4477 26 20C26 20.5523 25.5523 21 25 21H15C14.4477 21 14 20.5523 14 20ZM28.4571 13.2929C28.0666 12.9024 27.4334 12.9024 27.0429 13.2929C26.6524 13.6834 26.6524 14.3166 27.0429 14.7071C28.3129 15.9771 29 17.9485 29 20C29 22.0515 28.3129 24.0229 27.0429 25.2929C26.6524 25.6834 26.6524 26.3166 27.0429 26.7071C27.4334 27.0976 28.0666 27.0976 28.4571 26.7071C30.1871 24.9771 31 22.4485 31 20C31 17.5515 30.1871 15.0229 28.4571 13.2929Z"
                         fill="#21242C"
                     />
                 </svg>
             );
+        // TODO(ned): Per the notes in `KeyConfigs`, shouldn't this be a comma
+        // that we replace with the period icon for i18n? Duplicating for now.
         case "DECIMAL":
+        case "PERIOD":
             return (
                 <svg
-                    width="40"
-                    height="40"
-                    viewBox="0 0 40 40"
-                    fill="none"
                     xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
                 >
-                    <g clip-path="url(#clip0)">
-                        <circle cx="20" cy="20" r="1.5" fill="#21242C" />
-                    </g>
-                    <defs>
-                        <clipPath id="clip0">
-                            <path
-                                d="M18.5 18.5H21.5V21.5H18.5V18.5Z"
-                                fill="white"
-                            />
-                        </clipPath>
-                    </defs>
+                    <path
+                        d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z"
+                        // moves decimal down to baseline of number icons,
+                        // otherwise indistinguishable from cdot
+                        transform="translate(0 80)"
+                    />
                 </svg>
             );
         case "RADICAL":
@@ -374,14 +362,49 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
                         d="M9.00012 9C9.00012 8.44772 9.44784 8 10.0001 8H16.0001C16.5524 8 17.0001 8.44772 17.0001 9V15C17.0001 15.5523 16.5524 16 16.0001 16H10.0001C9.44784 16 9.00012 15.5523 9.00012 15V9ZM11.0001 10H15.0001V14H11.0001V10ZM23.0001 12C22.6598 12 22.3429 12.173 22.1589 12.4592L13.9849 25.1744L10.8322 20.4453C10.5258 19.9858 9.90493 19.8616 9.44541 20.1679C8.98588 20.4743 8.8617 21.0952 9.16806 21.5547L13.1681 27.5547C13.3552 27.8354 13.6711 28.0028 14.0084 28C14.3457 27.9972 14.6589 27.8245 14.8413 27.5408L23.5461 14H30.0001C30.5524 14 31.0001 13.5523 31.0001 13C31.0001 12.4477 30.5524 12 30.0001 12H23.0001Z"
                         fill="#21242C"
                     />
                 </svg>
             );
         case "SQRT":
+            return (
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
+                >
+                    <path d="M240,72V96a8,8,0,0,1-16,0V80H125.55L79.49,202.81a8,8,0,0,1-15,0l-48-128a8,8,0,1,1,15-5.62L72,177.22l40.51-108A8,8,0,0,1,120,64H232A8,8,0,0,1,240,72Z" />
+                </svg>
+            );
+        case "CUBE_ROOT":
+            return (
+                <svg width="48" height="48" viewBox="0 0 48 48">
+                    <g
+                        fill="none"
+                        fillRule="evenodd"
+                        transform="translate(0, -4)"
+                    >
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path
+                            d="M17.91 23.12c1.66 0 2.76-.81 2.76-1.98 0-.96-.86-1.51-1.57-1.58.79-.13 1.46-.72 1.46-1.5 0-1.1-.95-1.83-2.65-1.83-1.23 0-2.11.45-2.67 1.08l.83 1.08c.47-.42 1.05-.64 1.66-.64.64 0 1.12.19 1.12.61 0 .35-.39.52-1.08.52-.25 0-.77 0-.9-.01v1.53c.1-.01.61-.01.9-.01.91 0 1.19.18 1.19.56 0 .37-.38.65-1.12.65-.58 0-1.34-.23-1.82-.7l-.87 1.17c.52.6 1.48 1.05 2.76 1.05z"
+                            fill="currentColor"
+                        />
+                        <path
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M14 29l4 6 9-14h7"
+                        />
+                    </g>
+                </svg>
+            );
+        case "EXP":
             return (
                 <svg
                     width="40"
@@ -391,11 +414,10 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        d="M10 21L14 27L23 13H30"
-                        stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        fill="#21242C"
+                        d="M28 8C28 7.44772 28.4477 7 29 7H35C35.5523 7 36 7.44772 36 8V14C36 14.5523 35.5523 15 35 15H29C28.4477 15 28 14.5523 28 14V8ZM30 9H34V13H30V9ZM14 13C14 12.4477 14.4477 12 15 12H25C25.5523 12 26 12.4477 26 13V27C26 27.5523 25.5523 28 25 28H15C14.4477 28 14 27.5523 14 27V13ZM16 14H24V26H16V14Z"
                     />
                 </svg>
             );
@@ -409,37 +431,31 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
                         d="M33.5791 13.7461C33.4874 13.6545 33.3591 13.6086 33.1941 13.6086H31.4011C31.2397 13.6086 31.0674 13.6251 30.8841 13.6581C30.7007 13.6875 30.5156 13.7296 30.3286 13.7846L32.0226 12.0521C32.2352 11.8358 32.4369 11.6213 32.6276 11.4086C32.8182 11.196 32.9851 10.9778 33.1281 10.7541C33.2747 10.5268 33.3902 10.2885 33.4746 10.0391C33.5589 9.78981 33.6011 9.51847 33.6011 9.22514C33.6011 8.88414 33.5406 8.57247 33.4196 8.29014C33.2986 8.00781 33.1281 7.76764 32.9081 7.56964C32.6881 7.36797 32.4222 7.21214 32.1106 7.10214C31.8026 6.98847 31.4597 6.93164 31.0821 6.93164C30.7227 6.93164 30.3872 6.98114 30.0756 7.08014C29.7639 7.17547 29.4871 7.32031 29.2451 7.51464C29.0031 7.70897 28.8014 7.95281 28.6401 8.24614C28.4787 8.53947 28.3687 8.88047 28.3101 9.26914L29.1131 9.41214C29.3184 9.44514 29.4761 9.43231 29.5861 9.37364C29.6997 9.31131 29.7896 9.18847 29.8556 9.00514C29.8886 8.88781 29.9399 8.77964 30.0096 8.68064C30.0792 8.58164 30.1617 8.49547 30.2571 8.42214C30.3561 8.34881 30.4661 8.29197 30.5871 8.25164C30.7117 8.20764 30.8474 8.18564 30.9941 8.18564C31.3277 8.18564 31.5862 8.27914 31.7696 8.46614C31.9529 8.64947 32.0446 8.91897 32.0446 9.27464C32.0446 9.47631 32.0189 9.66881 31.9676 9.85214C31.9162 10.0355 31.8392 10.217 31.7366 10.3966C31.6339 10.5726 31.5056 10.7541 31.3516 10.9411C31.1976 11.1245 31.0197 11.317 30.8181 11.5186L28.4531 13.8891C28.3577 13.9808 28.2899 14.0835 28.2496 14.1971C28.2092 14.3071 28.1891 14.4098 28.1891 14.5051V15.0001H33.7221V14.1091C33.7221 13.9588 33.6744 13.8378 33.5791 13.7461ZM14 13.0001C14 12.4479 14.4477 12.0001 15 12.0001H25C25.5523 12.0001 26 12.4479 26 13.0001V27.0001C26 27.5524 25.5523 28.0001 25 28.0001H15C14.4477 28.0001 14 27.5524 14 27.0001V13.0001ZM16 14.0001H24V26.0001H16V14.0001Z"
                         fill="#21242C"
                     />
                 </svg>
             );
-        case "EXP":
+        case "EXP_3":
             return (
                 <svg
-                    width="40"
-                    height="40"
+                    width="42"
+                    height="42"
                     viewBox="0 0 40 40"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M28 8C28 7.44772 28.4477 7 29 7H35C35.5523 7 36 7.44772 36 8V14C36 14.5523 35.5523 15 35 15H29C28.4477 15 28 14.5523 28 14V8ZM30 9H34V13H30V9ZM14 13C14 12.4477 14.4477 12 15 12H25C25.5523 12 26 12.4477 26 13V27C26 27.5523 25.5523 28 25 28H15C14.4477 28 14 27.5523 14 27V13ZM16 14H24V26H16V14Z"
+                        transform="translate(0, -8)"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
                         fill="#21242C"
+                        d="M14 21c0-.552.456-1 1.002-1h9.996A1 1 0 0 1 26 21v14c0 .552-.456 1-1.002 1h-9.996A1 1 0 0 1 14 35V21zm2 1h8v12h-8V22zM30.92 23.12c1.66 0 2.76-.81 2.76-1.98 0-.96-.86-1.51-1.57-1.58.79-.13 1.46-.72 1.46-1.5 0-1.1-.95-1.83-2.65-1.83-1.23 0-2.11.45-2.67 1.08l.83 1.08c.47-.42 1.05-.64 1.66-.64.64 0 1.12.19 1.12.61 0 .35-.39.52-1.08.52-.25 0-.77 0-.9-.01v1.53c.1-.01.61-.01.9-.01.91 0 1.19.18 1.19.56 0 .37-.38.65-1.12.65-.58 0-1.34-.23-1.82-.7l-.87 1.17c.52.6 1.48 1.05 2.76 1.05z"
                     />
                 </svg>
             );
-        case "PI":
-            //TODO(NickR): use correct font, size, and color for this. It's not an SVG asset
-            return <span>pi</span>;
-        case "X":
-            //TODO(NickR): use correct font, size, and color for this. It's not an SVG asset
-            return <span>x</span>;
         case "TAN":
             return (
                 <svg
@@ -485,8 +501,328 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     />
                 </svg>
             );
+        case "DIVIDE":
+            return (
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
+                >
+                    <path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM128,80a16,16,0,1,0-16-16A16,16,0,0,0,128,80Zm0,96a16,16,0,1,0,16,16A16,16,0,0,0,128,176Z" />
+                </svg>
+            );
+        case "EQUAL":
+            return (
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
+                >
+                    <path d="M224,160a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,160ZM40,104H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Z" />
+                </svg>
+            );
+        case "GT":
+            return (
+                <svg width="44" height="44" viewBox="0 0 48 48">
+                    <g fill="none" fillRule="evenodd">
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path fill="none" d="M12 12h24v24H12z" />
+                        <path
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M16 30l16-6-16-6"
+                        />
+                    </g>
+                </svg>
+            );
+        case "LT":
+            return (
+                <svg width="44" height="44" viewBox="0 0 48 48">
+                    <g fill="none" fillRule="evenodd">
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path fill="none" d="M12 12h24v24H12z" />
+                        <path
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M32 30l-16-6 16-6"
+                        />
+                    </g>
+                </svg>
+            );
+        case "GEQ":
+            return (
+                <svg width="44" height="44" viewBox="0 0 48 48">
+                    <g fill="none" fillRule="evenodd">
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path fill="none" d="M12 12h24v24H12z" />
+                        <path
+                            d="M16 33h16M16 30l16-6-16-6"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        />
+                    </g>
+                </svg>
+            );
+        case "LEQ":
+            return (
+                <svg width="44" height="44" viewBox="0 0 48 48">
+                    <g fill="none" fillRule="evenodd">
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path fill="none" d="M12 12h24v24H12z" />
+                        <path
+                            d="M16 33h16M32 30l-16-6 16-6"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        />
+                    </g>
+                </svg>
+            );
+        case "NEQ":
+            return (
+                <svg width="44" height="44" viewBox="0 0 48 48">
+                    <g fill="none" fillRule="evenodd">
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path fill="none" d="M12 12h24v24H12z" />
+                        <path
+                            d="M19 33l10-18M16 21h17M16 27h17"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        />
+                    </g>
+                </svg>
+            );
+        case "LN":
+            return (
+                <svg width="48" height="48" viewBox="0 0 48 48">
+                    <g fill="none" fillRule="evenodd">
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path
+                            d="M20.836 29v-9.338h-1.778V29h1.778zm8.106 0v-4.774c0-1.316-.714-2.156-2.198-2.156-1.106 0-1.932.532-2.366 1.05v-.882H22.6V29h1.778v-4.55c.294-.406.84-.798 1.54-.798.756 0 1.246.322 1.246 1.26V29h1.778z"
+                            fill="currentColor"
+                        />
+                    </g>
+                </svg>
+            );
+        case "LOG":
+            return (
+                <svg width="48" height="48" viewBox="0 0 48 48">
+                    <g fill="none" fillRule="evenodd">
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path
+                            d="M16.776 29v-9.338h-1.778V29h1.778zm4.9.168c2.24 0 3.584-1.624 3.584-3.556 0-1.918-1.344-3.542-3.584-3.542-2.226 0-3.57 1.624-3.57 3.542 0 1.932 1.344 3.556 3.57 3.556zm0-1.582c-1.106 0-1.722-.91-1.722-1.974 0-1.05.616-1.96 1.722-1.96 1.106 0 1.736.91 1.736 1.96 0 1.064-.63 1.974-1.736 1.974zm7.672 4.158c1.666 0 3.654-.63 3.654-3.206v-6.3H31.21v.868c-.546-.686-1.274-1.036-2.086-1.036-1.708 0-2.982 1.232-2.982 3.444 0 2.254 1.288 3.444 2.982 3.444.826 0 1.554-.392 2.086-1.064v.686c0 1.33-1.008 1.708-1.862 1.708-.854 0-1.568-.238-2.114-.84l-.798 1.288c.854.742 1.75 1.008 2.912 1.008zm.336-4.368c-1.008 0-1.708-.7-1.708-1.862 0-1.162.7-1.862 1.708-1.862.588 0 1.232.322 1.526.77v2.184c-.294.434-.938.77-1.526.77z"
+                            fill="currentColor"
+                        />
+                    </g>
+                </svg>
+            );
+        case "LOG_N":
+            return (
+                <svg width="48" height="48" viewBox="0 0 48 48">
+                    <g fill="none" fillRule="evenodd">
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path
+                            d="M30 28.997c0-.55.453-.997.997-.997h6.006c.55 0 .997.453.997.997v6.006c0 .55-.453.997-.997.997h-6.006c-.55 0-.997-.453-.997-.997v-6.006zM32 30h4v4h-4v-4zM12.776 29v-9.338h-1.778V29h1.778zm4.9.168c2.24 0 3.584-1.624 3.584-3.556 0-1.918-1.344-3.542-3.584-3.542-2.226 0-3.57 1.624-3.57 3.542 0 1.932 1.344 3.556 3.57 3.556zm0-1.582c-1.106 0-1.722-.91-1.722-1.974 0-1.05.616-1.96 1.722-1.96 1.106 0 1.736.91 1.736 1.96 0 1.064-.63 1.974-1.736 1.974zm7.672 4.158c1.666 0 3.654-.63 3.654-3.206v-6.3H27.21v.868c-.546-.686-1.274-1.036-2.086-1.036-1.708 0-2.982 1.232-2.982 3.444 0 2.254 1.288 3.444 2.982 3.444.826 0 1.554-.392 2.086-1.064v.686c0 1.33-1.008 1.708-1.862 1.708-.854 0-1.568-.238-2.114-.84l-.798 1.288c.854.742 1.75 1.008 2.912 1.008zm.336-4.368c-1.008 0-1.708-.7-1.708-1.862 0-1.162.7-1.862 1.708-1.862.588 0 1.232.322 1.526.77v2.184c-.294.434-.938.77-1.526.77z"
+                            fill="currentColor"
+                        />
+                    </g>
+                </svg>
+            );
+        case "PERCENT":
+            return (
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
+                >
+                    <path d="M205.66,61.64l-144,144a8,8,0,0,1-11.32-11.32l144-144a8,8,0,0,1,11.32,11.31ZM50.54,101.44a36,36,0,0,1,50.92-50.91h0a36,36,0,0,1-50.92,50.91ZM56,76A20,20,0,1,0,90.14,61.84h0A20,20,0,0,0,56,76ZM216,180a36,36,0,1,1-10.54-25.46h0A35.76,35.76,0,0,1,216,180Zm-16,0a20,20,0,1,0-5.86,14.14A19.87,19.87,0,0,0,200,180Z" />
+                </svg>
+            );
+        case "CDOT":
+            return (
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
+                >
+                    <path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z" />
+                </svg>
+            );
+        case "PI":
+            return (
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
+                >
+                    <path d="M232,172a36,36,0,0,1-72,0V72H96V200a8,8,0,0,1-16,0V72H72a40,40,0,0,0-40,40,8,8,0,0,1-16,0A56.06,56.06,0,0,1,72,56H224a8,8,0,0,1,0,16H176V172a20,20,0,0,0,40,0,8,8,0,0,1,16,0Z" />
+                </svg>
+            );
+        case "x":
+            // MATHEMATICAL ITALIC SMALL CHI
+            // https://en.wikipedia.org/wiki/Chi_(letter)#Mathematical_chi
+            return (
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
+                >
+                    <text
+                        fontSize="200px"
+                        x="50%"
+                        y="50%"
+                        dominantBaseline="middle"
+                        textAnchor="middle"
+                    >
+                        𝜒
+                    </text>
+                </svg>
+            );
+        case "X":
+            // MATHEMATICAL ITALIC CAPITAL CHI
+            // https://en.wikipedia.org/wiki/Chi_(letter)#Mathematical_chi
+            return (
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    fill="currentColor"
+                    viewBox="0 0 256 256"
+                >
+                    <text
+                        fontSize="200px"
+                        x="50%"
+                        y="50%"
+                        dominantBaseline="middle"
+                        textAnchor="middle"
+                    >
+                        𝛸
+                    </text>
+                </svg>
+            );
+        /**
+         * ANYTHING BELOW IS NOT YET HANDLED
+         */
+        case "MANY":
+        case "FRAC_EXCLUSIVE":
+        case "THETA":
+        case "NOOP":
+        case "UP":
+        case "DOWN":
+        case "LEFT":
+        case "RIGHT":
+        case "JUMP_OUT_PARENTHESES":
+        case "JUMP_OUT_EXPONENT":
+        case "JUMP_OUT_BASE":
+        case "JUMP_INTO_NUMERATOR":
+        case "JUMP_OUT_NUMERATOR":
+        case "JUMP_OUT_DENOMINATOR":
+        case "PHI":
+        case "NTHROOT3":
+        case "POW":
+        case "LOG_B":
+        case "a":
+        case "b":
+        case "c":
+        case "d":
+        case "e":
+        case "f":
+        case "g":
+        case "h":
+        case "i":
+        case "j":
+        case "k":
+        case "l":
+        case "m":
+        case "n":
+        case "o":
+        case "p":
+        case "q":
+        case "r":
+        case "s":
+        case "t":
+        case "u":
+        case "v":
+        case "w":
+        case "y":
+        case "z":
+        case "A":
+        case "B":
+        case "C":
+        case "D":
+        case "E":
+        case "F":
+        case "G":
+        case "H":
+        case "I":
+        case "J":
+        case "K":
+        case "L":
+        case "M":
+        case "N":
+        case "O":
+        case "P":
+        case "Q":
+        case "R":
+        case "S":
+        case "T":
+        case "U":
+        case "V":
+        case "W":
+        case "Y":
+        case "Z":
+            // placeholder
+            return (
+                <svg
+                    width="40"
+                    height="40"
+                    viewBox="0 0 40 40"
+                    fill="black"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <text
+                        y="20"
+                        textLength="100%"
+                        lengthAdjust="spacingAndGlyphs"
+                    >
+                        {id}
+                    </text>
+                    <text
+                        y="35"
+                        textLength="100%"
+                        lengthAdjust="spacingAndGlyphs"
+                        fill="red"
+                    >
+                        placeholder
+                    </text>
+                </svg>
+            );
         default:
-            throw new Error(`Invalid asset ${id}`);
+            // this line forces an exhaustive check of all keys;
+            // if a key is not handled, the compiler will complain.
+            const unhandledKey: never = id;
+            throw new Error(`Unhandled key: ${unhandledKey}`);
     }
 }