@khanacademy/math-input 0.4.1 → 0.5.2

package/src/components/iconography/left.js

@@ -0,0 +1,16 @@
+/**
+ * An component that renders the LEFT iconograpy in SVG.
+ */
+import * as React from "react";
+
+import Arrow from "./arrow.js";
+
+const Left = () => {
+    return (
+        <svg width="48" height="48" viewBox="0 0 48 48">
+            <Arrow />
+        </svg>
+    );
+};
+
+export default Left;

package/src/components/iconography/leq.js

@@ -0,0 +1,33 @@
+/**
+ * An autogenerated component that renders the LEQ iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Leq extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" 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={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Leq;

package/src/components/iconography/ln.js

@@ -0,0 +1,29 @@
+/**
+ * An autogenerated component that renders the LN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Ln extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        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={this.props.color}
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Ln;

package/src/components/iconography/log-n.js

@@ -0,0 +1,29 @@
+/**
+ * An autogenerated component that renders the LOG_N iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class LogN extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        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={this.props.color}
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default LogN;

package/src/components/iconography/log.js

@@ -0,0 +1,29 @@
+/**
+ * An autogenerated component that renders the LOG iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Log extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        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={this.props.color}
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Log;

package/src/components/iconography/lt.js

@@ -0,0 +1,33 @@
+/**
+ * An autogenerated component that renders the LT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Lt extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" viewBox="0 0 48 48">
+                <g fill="none" fillRule="evenodd">
+                    <path fill="none" d="M0 0h48v48H0z" />
+                    <path fill="none" d="M12 12h24v24H12z" />
+                    <path
+                        stroke={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M32 30l-16-6 16-6"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Lt;

package/src/components/iconography/minus.js

@@ -0,0 +1,32 @@
+/**
+ * An autogenerated component that renders the MINUS iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Minus extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" viewBox="0 0 48 48">
+                <g fill="none" fillRule="evenodd">
+                    <path fill="none" d="M0 0h48v48H0z" />
+                    <path
+                        d="M19 24h10"
+                        stroke={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Minus;

package/src/components/iconography/neq.js

@@ -0,0 +1,33 @@
+/**
+ * An autogenerated component that renders the NEQ iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Neq extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" 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={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Neq;

package/src/components/iconography/parens.js

@@ -0,0 +1,33 @@
+/**
+ * An autogenerated component that renders the PARENS iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Parens extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" 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 14c-4 6-4 14 0 20M29 14c4 6 4 14 0 20"
+                        stroke={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Parens;

package/src/components/iconography/percent.js

@@ -0,0 +1,49 @@
+/**
+ * An autogenerated component that renders the PERCENT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Percent extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        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="M16 4L8 20"
+                            stroke={this.props.color}
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        />
+                        <circle
+                            stroke={this.props.color}
+                            strokeWidth="2"
+                            cx="7"
+                            cy="7"
+                            r="3"
+                        />
+                        <circle
+                            stroke={this.props.color}
+                            strokeWidth="2"
+                            cx="17"
+                            cy="17"
+                            r="3"
+                        />
+                    </g>
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Percent;

package/src/components/iconography/period.js

@@ -0,0 +1,26 @@
+/**
+ * An autogenerated component that renders the PERIOD iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Period extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" viewBox="0 0 48 48">
+                <g fill="none" fillRule="evenodd">
+                    <path fill="none" d="M0 0h48v48H0z" />
+                    <circle fill={this.props.color} cx="24" cy="30" r="2" />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Period;

package/src/components/iconography/plus.js

@@ -0,0 +1,32 @@
+/**
+ * An autogenerated component that renders the PLUS iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Plus extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" viewBox="0 0 48 48">
+                <g fill="none" fillRule="evenodd">
+                    <path fill="none" d="M0 0h48v48H0z" />
+                    <path
+                        d="M19 24h10M24 29V19"
+                        stroke={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Plus;

package/src/components/iconography/radical.js

@@ -0,0 +1,36 @@
+/**
+ * An autogenerated component that renders the RADICAL iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Radical extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" viewBox="0 0 48 48">
+                <g fill="none" fillRule="evenodd">
+                    <path fill="none" d="M0 0h48v48H0z" />
+                    <path
+                        d="M13 16.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.006zM15 18h4v4h-4v-4z"
+                        fill={this.props.color}
+                    />
+                    <path
+                        stroke={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M14 29l4 6 9-14h7"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Radical;

package/src/components/iconography/right-paren.js

@@ -0,0 +1,33 @@
+/**
+ * An autogenerated component that renders the RIGHT_PAREN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class RightParen extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" viewBox="0 0 48 48">
+                <g fill="none" fillRule="evenodd">
+                    <path fill="none" d="M0 0h48v48H0z" />
+                    <path fill="none" d="M12 12h24v24H12z" />
+                    <path
+                        d="M23 14c4 6 4 14 0 20"
+                        stroke={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default RightParen;

package/src/components/iconography/right.js

@@ -0,0 +1,16 @@
+/**
+ * A component that renders the RIGHT iconograpy in SVG.
+ */
+import * as React from "react";
+
+import Arrow from "./arrow.js";
+
+const Right = () => {
+    return (
+        <svg width="48" height="48" viewBox="0 0 48 48">
+            <Arrow transform="rotate(180 24 24)" />
+        </svg>
+    );
+};
+
+export default Right;

package/src/components/iconography/sin.js

@@ -0,0 +1,30 @@
+/**
+ * An autogenerated component that renders the SIN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Sin extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" viewBox="0 0 48 48">
+                <g fill="none" fillRule="evenodd">
+                    <path fill="none" d="M0 0h48v48H0z" />
+                    <path fill="none" d="M12 12h24v24H12z" />
+                    <path
+                        d="M18.655 29.168c1.876 0 2.926-.938 2.926-2.17 0-2.73-4.004-1.89-4.004-2.898 0-.378.42-.672 1.064-.672.826 0 1.596.35 2.002.784l.714-1.218c-.672-.532-1.582-.924-2.73-.924-1.778 0-2.772.994-2.772 2.128 0 2.66 4.018 1.75 4.018 2.87 0 .42-.364.728-1.134.728-.84 0-1.848-.462-2.338-.924l-.77 1.246c.714.658 1.848 1.05 3.024 1.05zm5.124-7.658c.588 0 1.064-.476 1.064-1.064 0-.588-.476-1.05-1.064-1.05a1.06 1.06 0 0 0-1.064 1.05c0 .588.49 1.064 1.064 1.064zm.896 7.49v-6.762h-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-.882h-1.778V29h1.778v-4.55c.294-.406.84-.798 1.54-.798.756 0 1.246.322 1.246 1.26V29h1.778z"
+                        fill={this.props.color}
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Sin;

package/src/components/iconography/sqrt.js

@@ -0,0 +1,32 @@
+/**
+ * An autogenerated component that renders the SQRT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Sqrt extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" viewBox="0 0 48 48">
+                <g fill="none" fillRule="evenodd">
+                    <path fill="none" d="M0 0h48v48H0z" />
+                    <path
+                        stroke={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M14 29l4 6 9-14h7"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Sqrt;

package/src/components/iconography/tan.js

@@ -0,0 +1,30 @@
+/**
+ * An autogenerated component that renders the TAN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Tan extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" 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.93 29.168c.742 0 1.218-.196 1.484-.434l-.378-1.344c-.098.098-.35.196-.616.196-.392 0-.616-.322-.616-.742v-3.052h1.372v-1.554h-1.372V20.39h-1.792v1.848h-1.12v1.554h1.12v3.528c0 1.204.672 1.848 1.918 1.848zM25.232 29v-4.368c0-1.946-1.414-2.562-2.954-2.562-1.064 0-2.128.336-2.954 1.064l.672 1.19c.574-.532 1.246-.798 1.974-.798.896 0 1.484.448 1.484 1.134v.91c-.448-.532-1.246-.826-2.142-.826-1.078 0-2.352.602-2.352 2.184 0 1.512 1.274 2.24 2.352 2.24.882 0 1.68-.322 2.142-.868v.7h1.778zm-3.206-1.036c-.7 0-1.274-.364-1.274-.994 0-.658.574-1.022 1.274-1.022.574 0 1.134.196 1.428.588v.84c-.294.392-.854.588-1.428.588zM33.338 29v-4.774c0-1.316-.714-2.156-2.198-2.156-1.106 0-1.932.532-2.366 1.05v-.882h-1.778V29h1.778v-4.55c.294-.406.84-.798 1.54-.798.756 0 1.246.322 1.246 1.26V29h1.778z"
+                        fill={this.props.color}
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Tan;

package/src/components/iconography/times.js

@@ -0,0 +1,33 @@
+/**
+ * An autogenerated component that renders the TIMES iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Times extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return (
+            <svg width="48" height="48" viewBox="0 0 48 48">
+                <g fill="none" fillRule="evenodd">
+                    <path fill="none" d="M0 0h48v48H0z" />
+                    <path fill="none" d="M12 12h24v24H12z" />
+                    <path
+                        d="M20 20l8 8M28 20l-8 8"
+                        stroke={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Times;

package/src/components/iconography/up.js

@@ -0,0 +1,16 @@
+/**
+ * A component that renders the UP iconograpy in SVG.
+ */
+import * as React from "react";
+
+import Arrow from "./arrow.js";
+
+const Up = () => {
+    return (
+        <svg width="48" height="48" viewBox="0 0 48 48">
+            <Arrow transform="rotate(90 24 24)" />
+        </svg>
+    );
+};
+
+export default Up;