import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';

const normalizeSize = size => {
  return typeof size === 'string' ? size : typeof size === 'number' ? `${size}px` : '30px';
};

const Sized = ({
  size,
  children
}) => {
  size = normalizeSize(size);
  const style = {
    height: size,
    width: size,
    display: 'inline-block',
    position: 'relative'
  };
  return /*#__PURE__*/React.createElement("div", {
    style: style
  }, children);
};

Sized.propTypes = {
  size: PropTypes.number,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};

const IconRoot = ({
  size,
  children
}) => /*#__PURE__*/React.createElement(Sized, {
  size: size
}, /*#__PURE__*/React.createElement("svg", {
  preserveAspectRatio: "xMinYMin meet",
  version: "1.1",
  x: "0px",
  y: "0px",
  viewBox: "0 0 44 40",
  style: {
    enableBackground: 'new 0 0 44 40'
  }
}, ' ', children));
IconRoot.propTypes = {
  size: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
const getStyles = (name, fg, bg) => ({
  bg: {
    fill: `var(--icons-${name}-bg, ${bg})`
  },
  fg: {
    fill: `var(--icons-${name}-fg, ${fg})`
  }
});
({
  className: PropTypes.string
});
const SquareFeedbackBox = ({
  className
}) => /*#__PURE__*/React.createElement("polygon", {
  transform: "translate(2, 0)",
  className: className,
  points: "34.1,28.6 34.1,2.2 2,2.2 2,34.3 40.1,34.3"
});
SquareFeedbackBox.propTypes = {
  className: PropTypes.string
};
const RoundFeedbackBox = ({
  className
}) => /*#__PURE__*/React.createElement("path", {
  transform: "translate(1, 0)",
  className: className,
  d: "M31.2,29.1v-0.3c2.2-2.8,3.6-6.3,3.6-10.1c0-8.9-7.2-16.1-16.1-16.1c-8.8,0.1-16,7.3-16,16.2 s7.2,16.1,16.1,16.1h18.5L31.2,29.1z"
});
RoundFeedbackBox.propTypes = {
  className: PropTypes.string
};
const Circle$1 = ({
  className
}) => /*#__PURE__*/React.createElement("circle", {
  transform: "translate(-3, 0)",
  className: className,
  cx: "23",
  cy: "20.4",
  r: "16"
});
Circle$1.propTypes = {
  className: PropTypes.string
};
const Square = ({
  className
}) => /*#__PURE__*/React.createElement("rect", {
  x: "3.6",
  y: "4.1",
  className: className,
  width: "32",
  height: "32"
});
Square.propTypes = {
  className: PropTypes.string
};

var IconBase = ((Action, Emoji) => {
  class IconBase extends React.Component {
    constructor(props) {
      super(props);
      const {
        classes,
        size
      } = this.props;
      this.icons = {
        feedback: {
          round: {
            check: /*#__PURE__*/React.createElement(IconRoot, {
              size: size
            }, /*#__PURE__*/React.createElement(RoundFeedbackBox, {
              className: classes.bg
            }), /*#__PURE__*/React.createElement(Action, {
              className: classes.fg
            })),
            emoji: /*#__PURE__*/React.createElement(IconRoot, {
              size: size
            }, /*#__PURE__*/React.createElement(RoundFeedbackBox, {
              className: classes.bg
            }), /*#__PURE__*/React.createElement(Emoji, {
              className: classes.fg
            })),
            open: {
              check: /*#__PURE__*/React.createElement(IconRoot, {
                size: size
              }, /*#__PURE__*/React.createElement(Action, {
                className: classes.bg
              })),
              emoji: /*#__PURE__*/React.createElement(IconRoot, {
                size: size
              }, /*#__PURE__*/React.createElement(Emoji, {
                className: classes.bg
              }))
            }
          },
          square: {
            check: /*#__PURE__*/React.createElement(IconRoot, {
              size: size
            }, /*#__PURE__*/React.createElement(SquareFeedbackBox, {
              className: classes.bg
            }), /*#__PURE__*/React.createElement(Action, {
              className: classes.fg
            })),
            emoji: /*#__PURE__*/React.createElement(IconRoot, {
              size: size
            }, /*#__PURE__*/React.createElement(SquareFeedbackBox, {
              className: classes.bg
            }), /*#__PURE__*/React.createElement(Emoji, {
              className: classes.fg
            })),
            open: {
              check: /*#__PURE__*/React.createElement(IconRoot, {
                size: size
              }, /*#__PURE__*/React.createElement(Action, {
                className: classes.bg
              })),
              emoji: /*#__PURE__*/React.createElement(IconRoot, {
                size: size
              }, /*#__PURE__*/React.createElement(Emoji, {
                className: classes.bg
              }))
            }
          }
        },
        round: {
          check: /*#__PURE__*/React.createElement(IconRoot, {
            size: size
          }, /*#__PURE__*/React.createElement(Circle$1, {
            className: classes.bg
          }), /*#__PURE__*/React.createElement(Action, {
            className: classes.fg
          })),
          emoji: /*#__PURE__*/React.createElement(IconRoot, {
            size: size
          }, /*#__PURE__*/React.createElement(Circle$1, {
            className: classes.bg
          }), /*#__PURE__*/React.createElement(Emoji, {
            className: classes.fg
          })),
          open: {
            check: /*#__PURE__*/React.createElement(IconRoot, {
              size: size
            }, /*#__PURE__*/React.createElement(Action, {
              className: classes.bg
            })),
            emoji: /*#__PURE__*/React.createElement(IconRoot, {
              size: size
            }, /*#__PURE__*/React.createElement(Emoji, {
              className: classes.bg
            }))
          }
        },
        square: {
          check: /*#__PURE__*/React.createElement(IconRoot, {
            size: size
          }, /*#__PURE__*/React.createElement(Square, {
            className: classes.bg
          }), /*#__PURE__*/React.createElement(Action, {
            className: classes.fg
          })),
          emoji: /*#__PURE__*/React.createElement(IconRoot, {
            size: size
          }, /*#__PURE__*/React.createElement(Square, {
            className: classes.bg
          }), /*#__PURE__*/React.createElement(Emoji, {
            className: classes.fg
          })),
          open: {
            check: /*#__PURE__*/React.createElement(IconRoot, {
              size: size
            }, /*#__PURE__*/React.createElement(Action, {
              className: classes.bg
            })),
            emoji: /*#__PURE__*/React.createElement(IconRoot, {
              size: size
            }, /*#__PURE__*/React.createElement(Emoji, {
              className: classes.bg
            }))
          }
        }
      };
    }

    render() {
      if (this.props.category === undefined) {
        if (this.props.open === true) {
          return this.icons[this.props.shape].open[this.props.iconSet];
        } else {
          return this.icons[this.props.shape][this.props.iconSet];
        }
      } else {
        if (this.props.open === true) {
          return this.icons.feedback[this.props.shape].open[this.props.iconSet];
        } else {
          return this.icons.feedback[this.props.shape][this.props.iconSet];
        }
      }
    }

  }

  IconBase.propTypes = {
    classes: PropTypes.object.isRequired,
    size: PropTypes.number
  };
  IconBase.propTypes = {
    iconSet: PropTypes.oneOf(['emoji', 'check']),
    shape: PropTypes.oneOf(['round', 'square']),
    category: PropTypes.oneOf(['feedback', undefined]),
    open: PropTypes.bool
  };
  IconBase.defaultProps = {
    iconSet: 'check',
    shape: 'round',
    category: undefined,
    open: false
  };
  return IconBase;
});

const styles$6 = getStyles('correct', '#f8ffe2', '#4aaf46');

const Emoji$3 = ({
  className
}) => /*#__PURE__*/React.createElement("g", {
  transform: 'translate(1, 0)'
}, /*#__PURE__*/React.createElement("path", {
  className: className,
  d: "M24.7,22.1c-1.5,1.7-3.6,2.7-5.8,2.7s-4.5-1.1-5.8-2.7l-2.8,1.6c2,2.7,5.2,4.2,8.7,4.2 c3.4,0,6.6-1.6,8.7-4.2L24.7,22.1z"
}), /*#__PURE__*/React.createElement("rect", {
  x: "21.1",
  y: "13.1",
  className: className,
  width: "3.7",
  height: "4.7"
}), /*#__PURE__*/React.createElement("rect", {
  x: "12.7",
  y: "13.1",
  className: className,
  width: "3.7",
  height: "4.7"
}));

Emoji$3.propTypes = {
  className: PropTypes.string
};
Emoji$3.defaultProps = {
  x: 0
};

const Check$1 = ({
  className,
  x,
  y
}) => /*#__PURE__*/React.createElement("polygon", {
  transform: `translate(${x}, ${y})`,
  className: className,
  points: "19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
});

Check$1.propTypes = {
  x: PropTypes.number,
  y: PropTypes.number,
  className: PropTypes.string
};
Check$1.defaultProps = {
  x: 0,
  y: 0
};
const Correct = IconBase(Check$1, Emoji$3);
Correct.propTypes = {
  iconSet: PropTypes.oneOf(['emoji', 'check']),
  shape: PropTypes.oneOf(['round', 'square']),
  category: PropTypes.oneOf(['feedback', undefined]),
  open: PropTypes.bool
};
Correct.defaultProps = {
  iconSet: 'check',
  shape: 'round',
  category: undefined,
  open: false
};
var correctIcon = withStyles(styles$6)(Correct);

const OpenIcon = ({
  bg,
  fg
}) => /*#__PURE__*/React.createElement("svg", {
  preserveAspectRatio: "xMinYMin meet",
  version: "1.1",
  id: "Layer_1",
  x: "0px",
  y: "0px",
  viewBox: "-283 359 34 35",
  style: {
    enableBackground: 'new -283 359 34 35'
  }
}, /*#__PURE__*/React.createElement("circle", {
  className: bg,
  cx: "-266",
  cy: "375.9",
  r: "14"
}), /*#__PURE__*/React.createElement("path", {
  className: bg,
  d: "M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z"
}), /*#__PURE__*/React.createElement("polygon", {
  className: fg,
  points: "-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6         "
}));

OpenIcon.propTypes = {
  bg: PropTypes.string,
  fg: PropTypes.string
};

const CloseIcon = ({
  bg,
  fg,
  border
}) => /*#__PURE__*/React.createElement("svg", {
  preserveAspectRatio: "xMinYMin meet",
  version: "1.1",
  x: "0px",
  y: "0px",
  viewBox: "-129.5 127 34 35",
  style: {
    enableBackground: 'new -129.5 127 34 35'
  }
}, /*#__PURE__*/React.createElement("path", {
  style: {
    fill: '#D0CAC5',
    stroke: '#E6E3E0',
    strokeWidth: 0.75,
    strokeMiterlimit: 10
  },
  d: "M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5 C-97.4,153.5-104.3,160.4-112.9,160.4z"
}), /*#__PURE__*/React.createElement("path", {
  style: {
    fill: '#B3ABA4',
    stroke: '#CDC7C2',
    strokeWidth: 0.5,
    strokeMiterlimit: 10
  },
  d: "M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z"
}), /*#__PURE__*/React.createElement("circle", {
  className: bg,
  cx: "-114.2",
  cy: "143.5",
  r: "14"
}), /*#__PURE__*/React.createElement("path", {
  className: border,
  d: "M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z"
}), /*#__PURE__*/React.createElement("polygon", {
  className: fg,
  points: "-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2"
}));

CloseIcon.propTypes = {
  bg: PropTypes.string,
  fg: PropTypes.string,
  border: PropTypes.string
};
const styles$5 = {
  root: {
    width: props => props.size || '25px',
    height: props => props.size || '25px'
  },
  hideIconBg: {
    fill: '#bce2ff'
  },
  hideIconFg: {
    fill: '#1a9cff'
  },
  showIconBg: {
    fill: 'white'
  },
  showIconFg: {
    fill: '#1a9cff'
  },
  showIconBorder: {
    fill: '#bce2ff'
  }
};

const CorrectResponse = ({
  open,
  classes,
  className
}) => /*#__PURE__*/React.createElement("div", {
  className: classNames(className, classes.root)
}, open ? /*#__PURE__*/React.createElement(OpenIcon, {
  bg: classes.hideIconBg,
  fg: classes.hideIconFg
}) : /*#__PURE__*/React.createElement(CloseIcon, {
  bg: classes.showIconBg,
  border: classes.showIconBorder,
  fg: classes.showIconFg
}));

CorrectResponse.propTypes = {
  classes: PropTypes.object.isRequired,
  open: PropTypes.bool,
  size: PropTypes.string,
  className: PropTypes.string
};
CorrectResponse.defaultProps = {
  open: false
};
var correctResponseIcon = withStyles(styles$5)(CorrectResponse);

const Ex = ({
  className
}) => /*#__PURE__*/React.createElement("g", {
  transform: 'translate(0.5, 0.5)'
}, /*#__PURE__*/React.createElement("rect", {
  x: "11",
  y: "17.3",
  transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)",
  className: className,
  width: "16.6",
  height: "3.7"
}), /*#__PURE__*/React.createElement("rect", {
  x: "17.4",
  y: "10.7",
  transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)",
  className: className,
  width: "3.7",
  height: "16.6"
}));

Ex.propTypes = {
  className: PropTypes.string
};

const Emoji$2 = ({
  className
}) => /*#__PURE__*/React.createElement("g", {
  transform: 'translate(1,0)'
}, /*#__PURE__*/React.createElement("rect", {
  x: "21",
  y: "12.9",
  className: className,
  width: "3.7",
  height: "4.7"
}), /*#__PURE__*/React.createElement("rect", {
  x: "12.7",
  y: "12.9",
  className: className,
  width: "3.7",
  height: "4.7"
}), /*#__PURE__*/React.createElement("rect", {
  x: "12.2",
  y: "22.5",
  className: className,
  width: "13",
  height: "3.3"
}));

Emoji$2.propTypes = {
  className: PropTypes.string
};
const styles$4 = getStyles('incorrect', '#fbf2e3', '#fcb733');
const Incorrect = IconBase(Ex, Emoji$2);
var incorrectIcon = withStyles(styles$4)(Incorrect);
Incorrect.propTypes = {
  iconSet: PropTypes.oneOf(['emoji', 'check']),
  shape: PropTypes.oneOf(['round', 'square']),
  category: PropTypes.oneOf(['feedback', undefined]),
  open: PropTypes.bool
};
Incorrect.defaultProps = {
  iconSet: 'check',
  shape: 'round',
  category: undefined,
  open: false
};

const Lines = () => {
  const style = {
    fill: 'none',
    stroke: '#BCE2FF',
    strokeWidth: 2,
    strokeMiterlimit: 10
  };
  return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
    style: style,
    x1: "-98",
    y1: "142",
    x2: "-114.6",
    y2: "142"
  }), /*#__PURE__*/React.createElement("line", {
    style: style,
    x1: "-98",
    y1: "146.3",
    x2: "-114.6",
    y2: "146.3"
  }), /*#__PURE__*/React.createElement("line", {
    style: style,
    x1: "-104",
    y1: "150.7",
    x2: "-114.6",
    y2: "150.7"
  }));
};

const Root$1 = ({
  children,
  size
}) => /*#__PURE__*/React.createElement(Sized, {
  size: size
}, /*#__PURE__*/React.createElement("svg", {
  version: "1.1",
  viewBox: "-128 129 31 31",
  style: {
    enableBackground: 'new -128 129 31 31'
  }
}, children));

Root$1.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
  size: PropTypes.number
};

const GreyInfo = () => {
  return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("rect", {
    x: "-123.9",
    y: "135.3",
    style: {
      fill: '#D0CAC5',
      stroke: '#E6E3E0',
      strokeWidth: 0.75,
      strokeLinejoin: 'round',
      strokeMiterlimit: 10
    },
    width: "4.1",
    height: "4.1"
  }), /*#__PURE__*/React.createElement("polygon", {
    style: {
      fill: '#D0CAC5',
      stroke: '#E6E3E0',
      strokeWidth: 0.75,
      strokeLinejoin: 'round',
      strokeMiterlimit: 10
    },
    points: "-119.8,150.4 -119.8,142.2 -125,142.2 -125,144.9 -122.6,144.9 -122.6,150.4 -125.6,150.4  -125.6,153.2 -116.8,153.2 -116.8,150.4        "
  }), /*#__PURE__*/React.createElement("rect", {
    x: "-124.7",
    y: "134.7",
    style: {
      fill: '#B3ABA4',
      stroke: '#CDC7C2',
      strokeWidth: 0.5,
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      strokeMiterlimit: 10
    },
    width: "4.1",
    height: "4.1"
  }), /*#__PURE__*/React.createElement("polygon", {
    style: {
      fill: '#B3ABA4',
      stroke: '#CDC7C2',
      strokeWidth: 0.5,
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      strokeMiterlimit: 10
    },
    points: "-120.6,149.8 -120.6,141.5 -125.8,141.5 -125.8,144.3 -123.3,144.3 -123.3,149.8 -126.4,149.8  -126.4,152.5 -117.6,152.5 -117.6,149.8        "
  }), /*#__PURE__*/React.createElement("rect", {
    x: "-125.5",
    y: "134",
    style: {
      fill: '#7FABC6'
    },
    width: "4.1",
    height: "4.1"
  }), /*#__PURE__*/React.createElement("polygon", {
    style: {
      fill: '#7FABC6'
    },
    points: "-121.4,149.1 -121.4,140.9 -126.5,140.9 -126.5,143.6 -124.1,143.6 -124.1,149.1 -127.1,149.1  -127.1,151.9 -118.4,151.9 -118.4,149.1        "
  }));
};

const BlueInfo = () => /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("rect", {
  x: "-123.9",
  y: "135.3",
  style: {
    fill: '#D0CAC5',
    stroke: '#E6E3E0',
    strokeWidth: 0.75,
    strokeLinejoin: 'round',
    strokeMiterlimit: 10
  },
  width: "4.1",
  height: "4.1"
}), /*#__PURE__*/React.createElement("polygon", {
  style: {
    fill: '#D0CAC5',
    stroke: '#E6E3E0',
    strokeWidth: 0.75,
    strokeLinejoin: 'round',
    strokeMiterlimit: 10
  },
  points: "-119.8,150.4 -119.8,142.2 -125,142.2 -125,144.9 -122.6,144.9 -122.6,150.4 -125.6,150.4  -125.6,153.2 -116.8,153.2 -116.8,150.4        "
}), /*#__PURE__*/React.createElement("rect", {
  x: "-124.7",
  y: "134.7",
  style: {
    fill: '#B3ABA4',
    stroke: '#CDC7C2',
    strokeWidth: 0.5,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    strokeMiterlimit: 10
  },
  width: "4.1",
  height: "4.1"
}), /*#__PURE__*/React.createElement("polygon", {
  style: {
    fill: '#B3ABA4',
    stroke: '#CDC7C2',
    strokeWidth: 0.5,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    strokeMiterlimit: 10
  },
  points: "-120.6,149.8 -120.6,141.5 -125.8,141.5 -125.8,144.3 -123.3,144.3 -123.3,149.8 -126.4,149.8  -126.4,152.5 -117.6,152.5 -117.6,149.8        "
}), /*#__PURE__*/React.createElement("rect", {
  x: "-125.5",
  y: "134",
  style: {
    fill: '#1A9CFF'
  },
  width: "4.1",
  height: "4.1"
}), /*#__PURE__*/React.createElement("polygon", {
  style: {
    fill: '#1A9CFF'
  },
  points: "-121.4,149.1 -121.4,140.9 -126.5,140.9 -126.5,143.6 -124.1,143.6 -124.1,149.1 -127.1,149.1  -127.1,151.9 -118.4,151.9 -118.4,149.1        "
}));

class Instructions extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    if (this.props.open === true) {
      return /*#__PURE__*/React.createElement(Root$1, null, /*#__PURE__*/React.createElement(GreyInfo, null), /*#__PURE__*/React.createElement(Lines, null));
    } else {
      return /*#__PURE__*/React.createElement(Root$1, null, /*#__PURE__*/React.createElement(BlueInfo, null), /*#__PURE__*/React.createElement(Lines, null));
    }
  }

}
Instructions.propTypes = {
  open: PropTypes.bool
};
Instructions.defaultProps = {
  open: false
};

const Glint = ({
  fill
}) => /*#__PURE__*/React.createElement("path", {
  fill: fill,
  d: "M-130.4,142.1c0-2.1,1.7-3.9,3.9-3.9c0.3,0,0.5,0,0.8,0.1c-0.6-0.8-1.5-1.3-2.6-1.3c-1.8,0-3.3,1.5-3.3,3.3c0,1.1,0.5,2,1.3,2.6C-130.4,142.6-130.4,142.4-130.4,142.1z"
});

Glint.propTypes = {
  fill: PropTypes.string
};
class LearnMore extends React.Component {
  render() {
    const {
      classes,
      size
    } = this.props;

    if (this.props.open === true) {
      return /*#__PURE__*/React.createElement(Sized, {
        size: size
      }, /*#__PURE__*/React.createElement("svg", {
        preserveAspectRatio: "xMinYMin meet",
        viewBox: "-135 129 16 32"
      }, /*#__PURE__*/React.createElement("path", {
        className: classes.hideBg,
        d: "M-122,141.1c0-3.7-3.3-6.6-7.1-5.8c-2.4,0.5-4.3,2.4-4.7,4.8c-0.4,2.3,0.6,4.4,2.2,5.7c0.4,0.3,0.6,0.8,0.6,1.3v1.9h6.1v-1.9c0-0.5,0.2-1,0.6-1.3C-122.8,144.7-122,143-122,141.1z"
      }), /*#__PURE__*/React.createElement("path", {
        className: classes.hideBg,
        d: "M-125.7,153h-4.5c-0.4,0-0.8-0.4-0.8-0.8v-1.6h6.1v1.6C-124.9,152.7-125.2,153-125.7,153z"
      }), /*#__PURE__*/React.createElement(Glint, {
        fill: classes.hideFg.fill
      })));
    } else {
      return /*#__PURE__*/React.createElement(Sized, {
        size: size
      }, /*#__PURE__*/React.createElement("svg", {
        preserveAspectRatio: "xMinYMin meet",
        viewBox: "-135 129 16 31"
      }, /*#__PURE__*/React.createElement("path", {
        fill: "#D0CAC5",
        stroke: "#E6E3E0",
        className: "st0",
        d: "M-120.7,142.4c0-3.7-3.3-6.6-7.1-5.8c-2.4,0.5-4.3,2.4-4.7,4.8c-0.4,2.3,0.6,4.4,2.2,5.7c0.4,0.3,0.6,0.8,0.6,1.3v1.9h6.1v-1.9c0-0.5,0.2-1,0.6-1.3C-121.6,146-120.7,144.3-120.7,142.4z"
      }), /*#__PURE__*/React.createElement("path", {
        fill: "#D0CAC5",
        stroke: "#E6E3E0",
        className: "st0",
        d: "M-124.4,154.3h-4.5c-0.4,0-0.8-0.4-0.8-0.8v-1.6h6.1v1.6C-123.6,153.9-123.9,154.3-124.4,154.3z"
      }), /*#__PURE__*/React.createElement("path", {
        fill: "#B3ABA4",
        stroke: "#CDC7C2",
        className: "st1",
        d: "M-121.3,141.8c0-3.7-3.3-6.6-7.1-5.8c-2.4,0.5-4.3,2.4-4.7,4.8c-0.4,2.3,0.6,4.4,2.2,5.7c0.4,0.3,0.6,0.8,0.6,1.3v1.9h6.1v-1.9c0-0.5,0.2-1,0.6-1.3C-122.2,145.3-121.3,143.7-121.3,141.8z"
      }), ",", /*#__PURE__*/React.createElement("path", {
        fill: "#B3ABA4",
        stroke: "#CDC7C2",
        className: "st1",
        d: "M-125,153.7h-4.5c-0.4,0-0.8-0.4-0.8-0.8v-1.6h6.1v1.6C-124.2,153.3-124.6,153.7-125,153.7z"
      }), /*#__PURE__*/React.createElement("path", {
        className: classes.showBg,
        d: "M-122,141.1c0-3.7-3.3-6.6-7.1-5.8c-2.4,0.5-4.3,2.4-4.7,4.8c-0.4,2.3,0.6,4.4,2.2,5.7c0.4,0.3,0.6,0.8,0.6,1.3v1.9h6.1v-1.9c0-0.5,0.2-1,0.6-1.3C-122.8,144.7-122,143-122,141.1z"
      }), /*#__PURE__*/React.createElement("path", {
        className: classes.showBg,
        d: "M-125.7,153h-4.5c-0.4,0-0.8-0.4-0.8-0.8v-1.6h6.1v1.6C-124.9,152.7-125.2,153-125.7,153z"
      }), /*#__PURE__*/React.createElement(Glint, {
        fill: classes.hideFg.fill
      })));
    }
  }

}
LearnMore.propTypes = {
  classes: PropTypes.object.isRequired,
  size: PropTypes.number
};
const styles$3 = {
  showBg: {
    fill: '#1a9cff'
  },
  hideFg: {
    fill: '#1a9cff'
  },
  hideBg: {
    fill: '#bce2ff'
  }
};
LearnMore.propTypes = {
  open: PropTypes.bool
};
LearnMore.defaultProps = {
  open: false
};
var learnMoreIcon = withStyles(styles$3)(LearnMore);

const Exclamation = ({
  className
}) => /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("rect", {
  x: "19.3",
  y: "10.3",
  className: className,
  width: "4.5",
  height: "12.7"
}), /*#__PURE__*/React.createElement("rect", {
  x: "19.3",
  y: "26.2",
  className: className,
  width: "4.5",
  height: "4.5"
}));

const Octagon = ({
  className
}) => /*#__PURE__*/React.createElement("polygon", {
  className: className,
  points: "14.8,4.5 5.6,13.8 5.6,27 14.8,36.5 28.1,36.5 37.6,27 37.6,13.8 28.1,4.5"
});

const Emoji$1 = ({
  className
}) => /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("rect", {
  x: "23.8",
  y: "15",
  className: className,
  width: "3.5",
  height: "4.4"
}), /*#__PURE__*/React.createElement("rect", {
  x: "16",
  y: "15",
  className: className,
  width: "3.5",
  height: "4.4"
}), /*#__PURE__*/React.createElement("path", {
  className: className,
  d: "M24.2,27.1h-5.1c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h5.1c0.8,0,1.5,0.7,1.5,1.5v0 C25.7,26.4,25,27.1,24.2,27.1z"
}));

Emoji$1.propTypes = Octagon.propTypes = Exclamation.propTypes = {
  className: PropTypes.string
};
const styles$2 = getStyles('nothing-submitted', 'white', '#464146');
class NothingSubmitted extends React.Component {
  constructor(props) {
    super(props);
    const {
      classes
    } = this.props;
    this.icons = {
      check: /*#__PURE__*/React.createElement(IconRoot, null, /*#__PURE__*/React.createElement(Octagon, {
        className: classes.bg
      }), /*#__PURE__*/React.createElement(Exclamation, {
        className: classes.fg
      })),
      emoji: /*#__PURE__*/React.createElement(IconRoot, null, /*#__PURE__*/React.createElement(Octagon, {
        className: classes.bg
      }), /*#__PURE__*/React.createElement(Emoji$1, {
        className: classes.fg
      })),
      feedback: {
        check: /*#__PURE__*/React.createElement(IconRoot, null, /*#__PURE__*/React.createElement(Octagon, {
          className: classes.bg
        }), /*#__PURE__*/React.createElement(Emoji$1, {
          className: classes.fg
        })),
        emoji: /*#__PURE__*/React.createElement(IconRoot, null, /*#__PURE__*/React.createElement(Octagon, {
          className: classes.bg
        }), /*#__PURE__*/React.createElement(Emoji$1, {
          className: classes.fg
        })),
        square: {
          check: /*#__PURE__*/React.createElement(IconRoot, null, /*#__PURE__*/React.createElement(Octagon, {
            className: classes.bg
          }), /*#__PURE__*/React.createElement(Exclamation, {
            className: classes.fg
          })),
          emoji: /*#__PURE__*/React.createElement(IconRoot, null, /*#__PURE__*/React.createElement(Octagon, {
            className: classes.bg
          }), /*#__PURE__*/React.createElement(Emoji$1, {
            className: classes.fg
          })),
          open: {
            check: /*#__PURE__*/React.createElement(IconRoot, null, /*#__PURE__*/React.createElement(Exclamation, {
              className: classes.bg
            })),
            emoji: /*#__PURE__*/React.createElement(IconRoot, null, /*#__PURE__*/React.createElement(Emoji$1, {
              className: classes.bg
            }))
          }
        }
      }
    };
  }

  render() {
    if (this.props.category === undefined) {
      return this.icons[this.props.iconSet];
    } else {
      if (this.props.shape === undefined) {
        return this.icons.feedback[this.props.iconSet];
      } else {
        if (this.props.open === true) {
          return this.icons.feedback.square.open[this.props.iconSet];
        } else {
          return this.icons.feedback.square[this.props.iconSet];
        }
      }
    }
  }

}
NothingSubmitted.propTypes = {
  classes: PropTypes.object.isRequired
};
NothingSubmitted.propTypes = {
  iconSet: PropTypes.oneOf(['emoji', 'check', undefined]),
  shape: PropTypes.oneOf(['square', undefined]),
  category: PropTypes.oneOf(['feedback', undefined]),
  open: PropTypes.bool
};
NothingSubmitted.defaultProps = {
  iconSet: 'check',
  shape: undefined,
  category: undefined,
  open: false
};
var nothingSubmittedIcon = withStyles(styles$2)(NothingSubmitted);

const styles$1 = getStyles('partially-correct', '#4aaf46', '#c1e1ac');

const Check = ({
  className
}) => /*#__PURE__*/React.createElement("g", {
  transform: 'translate(0, 0)'
}, /*#__PURE__*/React.createElement("polygon", {
  className: className,
  points: "27.5,13.4 23.9,11.4 15.9,25.8 19.1,28.6"
}), /*#__PURE__*/React.createElement("polygon", {
  className: className,
  points: "16.2,20.6 14.4,19.2 11.8,22.3 14.1,24.3"
}));

const Emoji = ({
  className
}) => /*#__PURE__*/React.createElement("g", {
  transform: 'translate(2, 0)'
}, /*#__PURE__*/React.createElement("rect", {
  x: "20.6",
  y: "11.8",
  className: className,
  width: "4",
  height: "5"
}), /*#__PURE__*/React.createElement("rect", {
  x: "11.5",
  y: "11.8",
  className: className,
  width: "4",
  height: "5"
}), /*#__PURE__*/React.createElement("rect", {
  x: "10.9",
  y: "22.9",
  transform: "matrix(0.9794 -0.2019 0.2019 0.9794 -4.6237 4.1559)",
  className: className,
  width: "14.3",
  height: "3.7"
}));

Emoji.propTypes = Check.propTypes = {
  className: PropTypes.string
};
const PartiallyCorrect = IconBase(Check, Emoji);
PartiallyCorrect.propTypes = {
  iconSet: PropTypes.oneOf(['emoji', 'check']),
  shape: PropTypes.oneOf(['round', 'square']),
  category: PropTypes.oneOf(['feedback', undefined]),
  open: PropTypes.bool
};
PartiallyCorrect.defaultProps = {
  iconSet: 'check',
  shape: 'round',
  category: undefined,
  open: false
};
var partiallyCorrectIcon = withStyles(styles$1)(PartiallyCorrect);

const Info = ({
  fg
}) => /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("rect", {
  x: "-115",
  y: "136.7",
  className: fg,
  width: "3",
  height: "3"
}), /*#__PURE__*/React.createElement("polygon", {
  className: fg,
  points: "-112,147.7 -112,141.7 -115.8,141.7 -115.8,143.7 -114,143.7 -114,147.7 -116.2,147.7 -116.2,149.7 -109.8,149.7 -109.8,147.7"
}));

Info.propTypes = {
  fg: PropTypes.string
};

const Border = ({
  className
}) => /*#__PURE__*/React.createElement("path", {
  className: className,
  d: "M-113,158.5c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105,158.5-113,158.5zM-113,130.5c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-105.6,130.5-113,130.5z"
});

Border.propTypes = {
  className: PropTypes.string
};

const Circle = () => /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
  style: {
    fill: '#D0CAC5',
    stroke: '#E6E3E0',
    strokeWidth: 0.75,
    strokeMiterlimit: 10
  },
  d: "M-111.7,160.9c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5C-96.2,154-103.1,160.9-111.7,160.9z"
}), /*#__PURE__*/React.createElement("path", {
  style: {
    fill: '#B3ABA4',
    stroke: '#CDC7C2',
    strokeWidth: 0.5,
    strokeMiterlimit: 10
  },
  d: "M-112,159.5c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-104,159.5-112,159.5z"
}), /*#__PURE__*/React.createElement("circle", {
  style: {
    fill: '#FFFFFF'
  },
  cx: "-113",
  cy: "144",
  r: "14"
}));

const Root = ({
  children,
  size
}) => {
  size = normalizeSize(size);
  const style = {
    height: size,
    width: size,
    display: 'inline-block',
    position: 'relative'
  };
  return /*#__PURE__*/React.createElement("div", {
    style: style
  }, /*#__PURE__*/React.createElement("svg", {
    preserveAspectRatio: "xMinYMin meet",
    viewBox: "-129 128 34 34"
  }, children));
};

Root.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
  size: PropTypes.number
};
const styles = {
  fg: {
    fill: '#1a9cff'
  },
  bg: {
    fill: '#bce2ff'
  },
  border: {
    fill: '#bbe3fd'
  },
  whiteBorder: {
    fill: 'white'
  }
};
class ShowRationale extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {
      classes
    } = this.props;
    const info = /*#__PURE__*/React.createElement(Info, {
      fg: classes.fg
    });
    const icons = {
      check: /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(Circle, null), info, /*#__PURE__*/React.createElement(Border, {
        className: classes.border
      })),
      emoji: /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(Circle, null), info, /*#__PURE__*/React.createElement(Border, {
        className: classes.border
      })),
      open: {
        check: /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement("circle", {
          style: {
            fill: '#FFFFFF'
          },
          cx: "-113",
          cy: "144",
          r: "14"
        }), /*#__PURE__*/React.createElement(Info, {
          fg: classes.bg,
          border: classes.whiteBorder
        })),
        emoji: /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement("circle", {
          style: {
            fill: '#FFFFFF'
          },
          cx: "-113",
          cy: "144",
          r: "14"
        }), /*#__PURE__*/React.createElement(Info, {
          fg: classes.bg,
          border: classes.border
        }))
      }
    };

    if (this.props.open === true) {
      return icons.open[this.props.iconSet];
    } else {
      return icons[this.props.iconSet];
    }
  }

}
ShowRationale.propTypes = {
  classes: PropTypes.object.isRequired
};
ShowRationale.propTypes = {
  iconSet: PropTypes.oneOf(['emoji', 'check']),
  open: PropTypes.bool
};
ShowRationale.defaultProps = {
  iconSet: 'check',
  open: false
};
var showRationaleIcon = withStyles(styles)(ShowRationale);

export { correctIcon as Correct, correctResponseIcon as CorrectResponse, incorrectIcon as Incorrect, Instructions, learnMoreIcon as LearnMore, nothingSubmittedIcon as NothingSubmitted, partiallyCorrectIcon as PartiallyCorrect, showRationaleIcon as ShowRationale };
//# sourceMappingURL=index.js.map
