@khanacademy/math-input 0.4.1 → 0.5.2

package/src/components/iconography/cube-root.js

@@ -0,0 +1,36 @@
+/**
+ * An autogenerated component that renders the CUBE_ROOT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class CubeRoot 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="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={this.props.color}
+                    />
+                    <path
+                        stroke={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M14 29l4 6 9-14h7"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default CubeRoot;

package/src/components/iconography/dismiss.js

@@ -0,0 +1,25 @@
+/**
+ * An autogenerated component that renders the DISMISS iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import * as React from "react";
+
+const Dismiss = () => {
+    return (
+        <svg width="48" height="48" viewBox="0 0 48 48">
+            <g fill="none" fillRule="evenodd">
+                <path fill="none" d="M0 0h48v48H0z" />
+                <path
+                    d="M18 21l6 6 6-6"
+                    strokeLinecap="round"
+                    strokeWidth="2"
+                    stroke="#71B307"
+                    strokeLinejoin="round"
+                />
+            </g>
+        </svg>
+    );
+};
+
+export default Dismiss;

package/src/components/iconography/divide.js

@@ -0,0 +1,34 @@
+/**
+ * An autogenerated component that renders the DIVIDE iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Divide 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"
+                    />
+                    <circle fill={this.props.color} cx="24" cy="19.5" r="1.5" />
+                    <circle fill={this.props.color} cx="24" cy="28.5" r="1.5" />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Divide;

package/src/components/iconography/down.js

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

package/src/components/iconography/equal.js

@@ -0,0 +1,33 @@
+/**
+ * An autogenerated component that renders the EQUAL iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Equal 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 21h17M16 27h17"
+                        stroke={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Equal;

package/src/components/iconography/exp-2.js

@@ -0,0 +1,29 @@
+/**
+ * An autogenerated component that renders the EXP_2 iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Exp2 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="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-8V22zM33.67 23v-1.5h-2.44c1.66-1.16 2.39-2.03 2.39-3.05 0-1.34-1.13-2.22-2.7-2.22-.93 0-1.99.33-2.7 1.11l.95 1.14c.48-.45 1.04-.73 1.78-.73.49 0 .92.24.92.7 0 .66-.54 1.12-3.43 3.21V23h5.23z"
+                        fill={this.props.color}
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Exp2;

package/src/components/iconography/exp-3.js

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

package/src/components/iconography/exp.js

@@ -0,0 +1,29 @@
+/**
+ * An autogenerated component that renders the EXP iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Exp 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="M28 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.006zM30 18h4v4h-4v-4zM14 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-8V22z"
+                        fill={this.props.color}
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Exp;

package/src/components/iconography/frac.js

@@ -0,0 +1,44 @@
+/**
+ * An autogenerated component that renders the FRAC iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class FracInclusive 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="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={this.props.color}
+                        />
+                        <rect
+                            fill={this.props.color}
+                            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={this.props.color}
+                        />
+                    </g>
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default FracInclusive;

package/src/components/iconography/geq.js

@@ -0,0 +1,33 @@
+/**
+ * An autogenerated component that renders the GEQ iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Geq 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 33h16M16 30l16-6-16-6"
+                        stroke={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Geq;

package/src/components/iconography/gt.js

@@ -0,0 +1,33 @@
+/**
+ * An autogenerated component that renders the GT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class Gt 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="M16 30l16-6-16-6"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default Gt;

package/src/components/iconography/index.js

@@ -0,0 +1,45 @@
+/**
+ * A directory of autogenerated icon components.
+ */
+
+export {default as COS} from "./cos.js";
+export {default as LOG} from "./log.js";
+export {default as EQUAL} from "./equal.js";
+export {default as BACKSPACE} from "./backspace.js";
+export {default as SQRT} from "./sqrt.js";
+export {default as EXP} from "./exp.js";
+export {default as NEQ} from "./neq.js";
+export {default as GEQ} from "./geq.js";
+export {default as LN} from "./ln.js";
+export {default as DISMISS} from "./dismiss.js";
+export {default as SIN} from "./sin.js";
+export {default as LT} from "./lt.js";
+export {default as CUBE_ROOT} from "./cube-root.js";
+export {default as PLUS} from "./plus.js";
+export {default as TAN} from "./tan.js";
+export {default as LEFT} from "./left.js";
+export {default as UP} from "./up.js";
+export {default as DOWN} from "./down.js";
+export {default as LEFT_PAREN} from "./left-paren.js";
+export {default as RIGHT_PAREN} from "./right-paren.js";
+export {default as GT} from "./gt.js";
+export {default as DIVIDE} from "./divide.js";
+export {default as PERIOD} from "./period.js";
+export {default as PERCENT} from "./percent.js";
+export {default as TIMES} from "./times.js";
+export {default as EXP_3} from "./exp-3.js";
+export {default as EXP_2} from "./exp-2.js";
+export {default as RIGHT} from "./right.js";
+export {default as CDOT} from "./cdot.js";
+export {default as LOG_N} from "./log-n.js";
+export {default as LEQ} from "./leq.js";
+export {default as MINUS} from "./minus.js";
+export {default as NEGATIVE} from "./minus.js";
+export {default as RADICAL} from "./radical.js";
+export {default as FRAC} from "./frac.js";
+export {default as JUMP_OUT_PARENTHESES} from "./jump-out-parentheses.js";
+export {default as JUMP_OUT_EXPONENT} from "./jump-out-exponent.js";
+export {default as JUMP_OUT_BASE} from "./jump-out-base.js";
+export {default as JUMP_INTO_NUMERATOR} from "./jump-into-numerator.js";
+export {default as JUMP_OUT_NUMERATOR} from "./jump-out-numerator.js";
+export {default as JUMP_OUT_DENOMINATOR} from "./jump-out-denominator.js";

package/src/components/iconography/jump-into-numerator.js

@@ -0,0 +1,41 @@
+/**
+ * An autogenerated component that renders the JUMP_INTO_NUMERATOR iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import * as React from "react";
+
+const JumpIntoNumerator = () => {
+    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="M13 16v16M17 22l6-6M23 20v-4h-4"
+                    stroke="#78C008"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    d="M26 27.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.006zM28 29h4v4h-4v-4z"
+                    fill="#888D93"
+                />
+                <path
+                    d="M35 24H25"
+                    stroke="#888D93"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    d="M26 13.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.006zM28 15h4v4h-4v-4z"
+                    fill="#78C008"
+                />
+            </g>
+        </svg>
+    );
+};
+
+export default JumpIntoNumerator;

package/src/components/iconography/jump-out-base.js

@@ -0,0 +1,30 @@
+/**
+ * An autogenerated component that renders the JUMP_OUT_BASE iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import * as React from "react";
+
+const JumpOutBase = () => {
+    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="M12 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.006zM14 30h4v4h-4v-4z"
+                    fill="#888D93"
+                />
+                <path
+                    d="M35 13v16M23 29l8-8M27 21h4v4"
+                    stroke="#78C008"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+            </g>
+        </svg>
+    );
+};
+
+export default JumpOutBase;

package/src/components/iconography/jump-out-denominator.js

@@ -0,0 +1,41 @@
+/**
+ * An autogenerated component that renders the JUMP_OUT_DENOMINATOR iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import * as React from "react";
+
+const JumpOutDenominator = () => {
+    return (
+        <svg width="48" height="48" viewBox="0 0 48 48">
+            <g fill="none" fillRule="evenodd">
+                <path d="M0 0h48v48H0z" />
+                <path d="M12 12h24v24H12z" />
+                <path
+                    d="M35 16v16m-4-4v-4h-4m-2 6l6-6"
+                    stroke="#78C008"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    d="M14 27.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.006zM16 29h4v4h-4v-4z"
+                    fill="#888D93"
+                />
+                <path
+                    d="M23 24H13"
+                    stroke="#888D93"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    d="M14 13.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.006zM16 15h4v4h-4v-4z"
+                    fill="#888D93"
+                />
+            </g>
+        </svg>
+    );
+};
+
+export default JumpOutDenominator;

package/src/components/iconography/jump-out-exponent.js

@@ -0,0 +1,30 @@
+/**
+ * An autogenerated component that renders the JUMP_OUT_EXPONENT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import * as React from "react";
+
+const JumpOutExponent = () => {
+    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="M35 19v16M23 19l8 8M31 23v4h-4"
+                    stroke="#78C008"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    d="M12 12.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.006zM14 14h4v4h-4v-4z"
+                    fill="#888D93"
+                />
+            </g>
+        </svg>
+    );
+};
+
+export default JumpOutExponent;

package/src/components/iconography/jump-out-numerator.js

@@ -0,0 +1,41 @@
+/**
+ * An autogenerated component that renders the JUMP_OUT_NUMERATOR iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import * as React from "react";
+
+const JumpOutNumerator = () => {
+    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="#78C008"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M33 29l-3 3-3-3M30 18v14"
+                />
+                <path
+                    d="M16 27.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.006zM18 29h4v4h-4v-4z"
+                    fill="#78C008"
+                />
+                <path
+                    d="M25 24H15"
+                    stroke="#888D93"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    d="M16 13.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.006zM18 15h4v4h-4v-4z"
+                    fill="#888D93"
+                />
+            </g>
+        </svg>
+    );
+};
+
+export default JumpOutNumerator;

package/src/components/iconography/jump-out-parentheses.js

@@ -0,0 +1,33 @@
+/**
+ * An autogenerated component that renders the JUMP_OUT_PARENTHESES iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import * as React from "react";
+
+const JumpOutParentheses = () => {
+    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="M24 18c3 3 3 9 0 12M18 18c-3 3-3 9 0 12"
+                    stroke="#888D93"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    stroke="#78C008"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M32 27l3-3-3-3M22 24h12"
+                />
+            </g>
+        </svg>
+    );
+};
+
+export default JumpOutParentheses;

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

@@ -0,0 +1,33 @@
+/**
+ * An autogenerated component that renders the LEFT_PAREN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class LeftParen 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="M26 14c-4 6-4 14 0 20"
+                        stroke={this.props.color}
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </g>
+            </svg>
+        );
+    }
+}
+
+export default LeftParen;