@khanacademy/math-input 3.0.0 → 4.0.0

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

@@ -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) {
@@ -208,106 +207,97 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
         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"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="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"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                    />
-                    <path
-                        d="M20 13V27"
-                        stroke="#21242C"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="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"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                    />
-                    <path
-                        d="M24.9498 15.0507L15.0503 24.9502"
-                        stroke="#21242C"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="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
-                        fillRule="evenodd"
-                        clipRule="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
-                        fillRule="evenodd"
-                        clipRule="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
@@ -342,26 +332,24 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     />
                 </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 clipPath="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":
@@ -382,6 +370,41 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                 </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"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="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>
             );
@@ -416,30 +438,24 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     />
                 </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
+                        transform="translate(0, -8)"
                         fillRule="evenodd"
                         clipRule="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"
                         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,298 @@ 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>
+            );
 
-        default:
+        /**
+         * 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
@@ -513,5 +819,10 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     </text>
                 </svg>
             );
+        default:
+            // 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}`);
     }
 }

package/src/components/keypad/geometry-page/index.tsx

@@ -46,7 +46,7 @@ export default class GeometryPage extends React.Component<Props> {
                 />
                 {/* Row 2 */}
                 <SecondaryKeypadButton
-                    keyConfig={Keys.X}
+                    keyConfig={Keys.x}
                     onClickKey={onClickKey}
                     style={{
                         gridColumn: 5,