@pie-lib/correct-answer-toggle 2.25.1 → 2.26.0-mui-update.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.25.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.21.2...@pie-lib/correct-answer-toggle@2.25.1) (2025-10-22)
+# [2.26.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.25.0-mui-update.0...@pie-lib/correct-answer-toggle@2.26.0-mui-update.0) (2025-11-05)
 
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 
@@ -11,7 +11,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [2.25.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.24.0...@pie-lib/correct-answer-toggle@2.25.0) (2025-10-16)
+# [2.25.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.24.0-mui-update.0...@pie-lib/correct-answer-toggle@2.25.0-mui-update.0) (2025-11-03)
 
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 
@@ -19,7 +19,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [2.24.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.21.0...@pie-lib/correct-answer-toggle@2.24.0) (2025-10-16)
+# [2.24.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.22.0-mui-update.0...@pie-lib/correct-answer-toggle@2.24.0-mui-update.0) (2025-11-03)
 
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 
@@ -27,17 +27,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [2.23.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.21.0...@pie-lib/correct-answer-toggle@2.23.0) (2025-10-16)
-
-**Note:** Version bump only for package @pie-lib/correct-answer-toggle
+# [2.22.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.21.2...@pie-lib/correct-answer-toggle@2.22.0-mui-update.0) (2025-10-31)
 
 
+### Bug Fixes
 
+* **correct-answer-toggle, text-select:** change logic to corresp to material v5 PD-5269 PD-5271 ([e992861](https://github.com/pie-framework/pie-lib/commit/e992861c6d964340bf7afc8e5ac9007816d510ef))
 
 
-# [2.22.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.21.0...@pie-lib/correct-answer-toggle@2.22.0) (2025-10-16)
+### Features
 
-**Note:** Version bump only for package @pie-lib/correct-answer-toggle
+* **correct-answe-toggle, legend:** delete unused files and imports PD-5258 ([261638d](https://github.com/pie-framework/pie-lib/commit/261638d9ceff79163eb858696a4c8eb7a7a3006c))
+* bump react and react-dom ([01dc19e](https://github.com/pie-framework/pie-lib/commit/01dc19e88bbc8d372c561d1511df1a82937d45af))
 
 
 

package/lib/expander.js

@@ -1,60 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _reactTransitionGroup = require("react-transition-group");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var Expander = function Expander(props) {
-  var classes = props.classes,
-      show = props.show,
-      children = props.children;
-  return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
-    "in": show,
-    appear: true,
-    mountOnEnter: false,
-    timeout: 300,
-    classNames: _objectSpread({}, classes)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.expander
-  }, children));
-};
-
-Expander.propTypes = {
-  show: _propTypes["default"].bool.isRequired,
-  className: _propTypes["default"].string,
-  classes: _propTypes["default"].object,
-  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
-};
 var transition = 'height ease-in 300ms, opacity ease-in 300ms';
-
-var _default = (0, _styles.withStyles)(function () {
+var StyledExpander = (0, _styles.styled)('div')(function () {
   return {
-    expander: {
-      position: 'relative',
-      height: 0,
-      overflow: 'hidden',
-      display: 'flex',
-      visibility: 'hidden',
-      width: 0
-    },
-    enter: {
+    position: 'relative',
+    height: 0,
+    overflow: 'hidden',
+    display: 'flex',
+    visibility: 'hidden',
+    width: 0,
+    '&.enter': {
       transition: transition,
       opacity: 1,
       height: 'auto',
@@ -62,27 +26,50 @@ var _default = (0, _styles.withStyles)(function () {
       visibility: 'visible',
       minHeight: '25px'
     },
-    enterDone: {
+    '&.enter-done': {
       height: 'auto',
       visibility: 'visible',
       width: 'auto',
       minHeight: '25px'
     },
-    exit: {
+    '&.exit': {
       transition: transition,
       opacity: 0,
       height: 0,
       visibility: 'visible',
       width: 0
     },
-    exitDone: {
+    '&.exit-done': {
       opacity: 0,
       visibility: 'hidden',
       height: 0,
       width: 0
     }
   };
-})(Expander);
-
-exports["default"] = _default;
+});
+var Expander = function Expander(props) {
+  var show = props.show,
+    children = props.children,
+    className = props.className;
+  return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
+    "in": show,
+    appear: true,
+    mountOnEnter: false,
+    timeout: 300,
+    classNames: {
+      enter: 'enter',
+      enterDone: 'enter-done',
+      exit: 'exit',
+      exitDone: 'exit-done'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(StyledExpander, {
+    className: className
+  }, children));
+};
+Expander.propTypes = {
+  show: _propTypes["default"].bool.isRequired,
+  className: _propTypes["default"].string,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
+};
+var _default = exports["default"] = Expander;
 //# sourceMappingURL=expander.js.map

package/lib/expander.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/expander.jsx"],"names":["Expander","props","classes","show","children","expander","propTypes","PropTypes","bool","isRequired","className","string","object","oneOfType","arrayOf","node","transition","position","height","overflow","display","visibility","width","enter","opacity","minHeight","enterDone","exit","exitDone"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAW;AAC1B,MAAQC,OAAR,GAAoCD,KAApC,CAAQC,OAAR;AAAA,MAAiBC,IAAjB,GAAoCF,KAApC,CAAiBE,IAAjB;AAAA,MAAuBC,QAAvB,GAAoCH,KAApC,CAAuBG,QAAvB;AAEA,sBACE,gCAAC,mCAAD;AAAe,UAAID,IAAnB;AAAyB,IAAA,MAAM,EAAE,IAAjC;AAAuC,IAAA,YAAY,EAAE,KAArD;AAA4D,IAAA,OAAO,EAAE,GAArE;AAA0E,IAAA,UAAU,oBAAOD,OAAP;AAApF,kBACE;AAAK,IAAA,SAAS,EAAEA,OAAO,CAACG;AAAxB,KAAmCD,QAAnC,CADF,CADF;AAKD,CARD;;AAUAJ,QAAQ,CAACM,SAAT,GAAqB;AACnBH,EAAAA,IAAI,EAAEI,sBAAUC,IAAV,CAAeC,UADF;AAEnBC,EAAAA,SAAS,EAAEH,sBAAUI,MAFF;AAGnBT,EAAAA,OAAO,EAAEK,sBAAUK,MAHA;AAInBR,EAAAA,QAAQ,EAAEG,sBAAUM,SAAV,CAAoB,CAACN,sBAAUO,OAAV,CAAkBP,sBAAUQ,IAA5B,CAAD,EAAoCR,sBAAUQ,IAA9C,CAApB,EAAyEN;AAJhE,CAArB;AAOA,IAAMO,UAAU,GAAG,6CAAnB;;eAEe,wBAAW;AAAA,SAAO;AAC/BX,IAAAA,QAAQ,EAAE;AACRY,MAAAA,QAAQ,EAAE,UADF;AAERC,MAAAA,MAAM,EAAE,CAFA;AAGRC,MAAAA,QAAQ,EAAE,QAHF;AAIRC,MAAAA,OAAO,EAAE,MAJD;AAKRC,MAAAA,UAAU,EAAE,QALJ;AAMRC,MAAAA,KAAK,EAAE;AANC,KADqB;AAS/BC,IAAAA,KAAK,EAAE;AACLP,MAAAA,UAAU,EAAVA,UADK;AAELQ,MAAAA,OAAO,EAAE,CAFJ;AAGLN,MAAAA,MAAM,EAAE,MAHH;AAILI,MAAAA,KAAK,EAAE,MAJF;AAKLD,MAAAA,UAAU,EAAE,SALP;AAMLI,MAAAA,SAAS,EAAE;AANN,KATwB;AAiB/BC,IAAAA,SAAS,EAAE;AACTR,MAAAA,MAAM,EAAE,MADC;AAETG,MAAAA,UAAU,EAAE,SAFH;AAGTC,MAAAA,KAAK,EAAE,MAHE;AAITG,MAAAA,SAAS,EAAE;AAJF,KAjBoB;AAuB/BE,IAAAA,IAAI,EAAE;AACJX,MAAAA,UAAU,EAAVA,UADI;AAEJQ,MAAAA,OAAO,EAAE,CAFL;AAGJN,MAAAA,MAAM,EAAE,CAHJ;AAIJG,MAAAA,UAAU,EAAE,SAJR;AAKJC,MAAAA,KAAK,EAAE;AALH,KAvByB;AA8B/BM,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,CADD;AAERH,MAAAA,UAAU,EAAE,QAFJ;AAGRH,MAAAA,MAAM,EAAE,CAHA;AAIRI,MAAAA,KAAK,EAAE;AAJC;AA9BqB,GAAP;AAAA,CAAX,EAoCXtB,QApCW,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { CSSTransition } from 'react-transition-group';\n\nconst Expander = (props) => {\n  const { classes, show, children } = props;\n\n  return (\n    <CSSTransition in={show} appear={true} mountOnEnter={false} timeout={300} classNames={{ ...classes }}>\n      <div className={classes.expander}>{children}</div>\n    </CSSTransition>\n  );\n};\n\nExpander.propTypes = {\n  show: PropTypes.bool.isRequired,\n  className: PropTypes.string,\n  classes: PropTypes.object,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n};\n\nconst transition = 'height ease-in 300ms, opacity ease-in 300ms';\n\nexport default withStyles(() => ({\n  expander: {\n    position: 'relative',\n    height: 0,\n    overflow: 'hidden',\n    display: 'flex',\n    visibility: 'hidden',\n    width: 0,\n  },\n  enter: {\n    transition,\n    opacity: 1,\n    height: 'auto',\n    width: 'auto',\n    visibility: 'visible',\n    minHeight: '25px',\n  },\n  enterDone: {\n    height: 'auto',\n    visibility: 'visible',\n    width: 'auto',\n    minHeight: '25px',\n  },\n  exit: {\n    transition,\n    opacity: 0,\n    height: 0,\n    visibility: 'visible',\n    width: 0,\n  },\n  exitDone: {\n    opacity: 0,\n    visibility: 'hidden',\n    height: 0,\n    width: 0,\n  },\n}))(Expander);\n"],"file":"expander.js"}
+{"version":3,"file":"expander.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_reactTransitionGroup","transition","StyledExpander","styled","position","height","overflow","display","visibility","width","opacity","minHeight","Expander","props","show","children","className","createElement","CSSTransition","appear","mountOnEnter","timeout","classNames","enter","enterDone","exit","exitDone","propTypes","PropTypes","bool","isRequired","string","oneOfType","arrayOf","node","_default","exports"],"sources":["../src/expander.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { CSSTransition } from 'react-transition-group';\n\nconst transition = 'height ease-in 300ms, opacity ease-in 300ms';\n\nconst StyledExpander = styled('div')(() => ({\n  position: 'relative',\n  height: 0,\n  overflow: 'hidden',\n  display: 'flex',\n  visibility: 'hidden',\n  width: 0,\n  '&.enter': {\n    transition,\n    opacity: 1,\n    height: 'auto',\n    width: 'auto',\n    visibility: 'visible',\n    minHeight: '25px',\n  },\n  '&.enter-done': {\n    height: 'auto',\n    visibility: 'visible',\n    width: 'auto',\n    minHeight: '25px',\n  },\n  '&.exit': {\n    transition,\n    opacity: 0,\n    height: 0,\n    visibility: 'visible',\n    width: 0,\n  },\n  '&.exit-done': {\n    opacity: 0,\n    visibility: 'hidden',\n    height: 0,\n    width: 0,\n  },\n}));\n\nconst Expander = (props) => {\n  const { show, children, className } = props;\n\n  return (\n    <CSSTransition \n      in={show} \n      appear={true} \n      mountOnEnter={false} \n      timeout={300} \n      classNames={{\n        enter: 'enter',\n        enterDone: 'enter-done',\n        exit: 'exit',\n        exitDone: 'exit-done'\n      }}\n    >\n      <StyledExpander className={className}>{children}</StyledExpander>\n    </CSSTransition>\n  );\n};\n\nExpander.propTypes = {\n  show: PropTypes.bool.isRequired,\n  className: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n};\n\nexport default Expander;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;AAEA,IAAMI,UAAU,GAAG,6CAA6C;AAEhE,IAAMC,cAAc,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC;EAAA,OAAO;IAC1CC,QAAQ,EAAE,UAAU;IACpBC,MAAM,EAAE,CAAC;IACTC,QAAQ,EAAE,QAAQ;IAClBC,OAAO,EAAE,MAAM;IACfC,UAAU,EAAE,QAAQ;IACpBC,KAAK,EAAE,CAAC;IACR,SAAS,EAAE;MACTR,UAAU,EAAVA,UAAU;MACVS,OAAO,EAAE,CAAC;MACVL,MAAM,EAAE,MAAM;MACdI,KAAK,EAAE,MAAM;MACbD,UAAU,EAAE,SAAS;MACrBG,SAAS,EAAE;IACb,CAAC;IACD,cAAc,EAAE;MACdN,MAAM,EAAE,MAAM;MACdG,UAAU,EAAE,SAAS;MACrBC,KAAK,EAAE,MAAM;MACbE,SAAS,EAAE;IACb,CAAC;IACD,QAAQ,EAAE;MACRV,UAAU,EAAVA,UAAU;MACVS,OAAO,EAAE,CAAC;MACVL,MAAM,EAAE,CAAC;MACTG,UAAU,EAAE,SAAS;MACrBC,KAAK,EAAE;IACT,CAAC;IACD,aAAa,EAAE;MACbC,OAAO,EAAE,CAAC;MACVF,UAAU,EAAE,QAAQ;MACpBH,MAAM,EAAE,CAAC;MACTI,KAAK,EAAE;IACT;EACF,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMG,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,KAAK,EAAK;EAC1B,IAAQC,IAAI,GAA0BD,KAAK,CAAnCC,IAAI;IAAEC,QAAQ,GAAgBF,KAAK,CAA7BE,QAAQ;IAAEC,SAAS,GAAKH,KAAK,CAAnBG,SAAS;EAEjC,oBACErB,MAAA,YAAAsB,aAAA,CAACjB,qBAAA,CAAAkB,aAAa;IACZ,MAAIJ,IAAK;IACTK,MAAM,EAAE,IAAK;IACbC,YAAY,EAAE,KAAM;IACpBC,OAAO,EAAE,GAAI;IACbC,UAAU,EAAE;MACVC,KAAK,EAAE,OAAO;MACdC,SAAS,EAAE,YAAY;MACvBC,IAAI,EAAE,MAAM;MACZC,QAAQ,EAAE;IACZ;EAAE,gBAEF/B,MAAA,YAAAsB,aAAA,CAACf,cAAc;IAACc,SAAS,EAAEA;EAAU,GAAED,QAAyB,CACnD,CAAC;AAEpB,CAAC;AAEDH,QAAQ,CAACe,SAAS,GAAG;EACnBb,IAAI,EAAEc,qBAAS,CAACC,IAAI,CAACC,UAAU;EAC/Bd,SAAS,EAAEY,qBAAS,CAACG,MAAM;EAC3BhB,QAAQ,EAAEa,qBAAS,CAACI,SAAS,CAAC,CAACJ,qBAAS,CAACK,OAAO,CAACL,qBAAS,CAACM,IAAI,CAAC,EAAEN,qBAAS,CAACM,IAAI,CAAC,CAAC,CAACJ;AACrF,CAAC;AAAC,IAAAK,QAAA,GAAAC,OAAA,cAEaxB,QAAQ","ignoreList":[]}

package/lib/index.js

@@ -1,67 +1,97 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.CorrectAnswerToggle = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _styles = _interopRequireDefault(require("./styles"));
-
-var _styles2 = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
-
 var _icons = require("@pie-lib/icons");
-
 var _renderUi = require("@pie-lib/render-ui");
-
 var _expander = _interopRequireDefault(require("./expander"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _translator = _interopRequireDefault(require("@pie-lib/translator"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var translator = _translator["default"].translator;
+var noTouch = {
+  '-webkit-touchCcallout': 'none',
+  '-webkit-user-select': 'none',
+  '-khtml-user-select': 'none',
+  '-moz-user-select': 'none',
+  '-ms-user-select': 'none',
+  'user-select': 'none'
+};
+var StyledRoot = (0, _styles.styled)('div')(function () {
+  return {
+    width: '100%',
+    cursor: 'pointer'
+  };
+});
+var StyledContent = (0, _styles.styled)('div')(function () {
+  return {
+    margin: '0 auto',
+    textAlign: 'center',
+    display: 'flex'
+  };
+});
+var StyledLabel = (0, _styles.styled)('div')(function () {
+  return _objectSpread({
+    width: 'fit-content',
+    minWidth: '140px',
+    alignSelf: 'center',
+    verticalAlign: 'middle',
+    color: "var(--correct-answer-toggle-label-color, ".concat(_renderUi.color.text(), ")"),
+    fontWeight: 'normal'
+  }, noTouch);
+});
+var StyledIcon = (0, _styles.styled)('div')(function () {
+  return {
+    position: 'absolute',
+    width: '25px',
+    '&.enter': {
+      opacity: '0'
+    },
+    '&.enter-active': {
+      opacity: '1',
+      transition: 'opacity 0.3s ease-in'
+    },
+    '&.exit': {
+      opacity: '1'
+    },
+    '&.exit-active': {
+      opacity: '0',
+      transition: 'opacity 0.3s ease-in'
+    }
+  };
+});
+var StyledIconHolder = (0, _styles.styled)('div')(function () {
+  return {
+    width: '25px',
+    marginRight: '5px',
+    display: 'flex',
+    alignItems: 'center'
+  };
+});
+
 /**
  * We export the raw unstyled class for testability. For public use please use the default export.
  */
-
-var CorrectAnswerToggle = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(CorrectAnswerToggle, _React$Component);
-
-  var _super = _createSuper(CorrectAnswerToggle);
-
+var CorrectAnswerToggle = exports.CorrectAnswerToggle = /*#__PURE__*/function (_React$Component) {
   function CorrectAnswerToggle(props) {
     var _this;
-
     (0, _classCallCheck2["default"])(this, CorrectAnswerToggle);
-    _this = _super.call(this, props);
+    _this = _callSuper(this, CorrectAnswerToggle, [props]);
     _this.state = {
       show: props.show
     };
@@ -75,8 +105,8 @@ var CorrectAnswerToggle = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-
-  (0, _createClass2["default"])(CorrectAnswerToggle, [{
+  (0, _inherits2["default"])(CorrectAnswerToggle, _React$Component);
+  return (0, _createClass2["default"])(CorrectAnswerToggle, [{
     key: "onClick",
     value: function onClick() {
       this.props.onToggle(!this.props.toggled);
@@ -85,18 +115,15 @@ var CorrectAnswerToggle = /*#__PURE__*/function (_React$Component) {
     key: "onTouch",
     value: function onTouch(event) {
       event.preventDefault(); // Prevents the default action (click event)
-
       this.props.onToggle(!this.props.toggled);
     }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var _this$props;
-
       this.setState({
         show: nextProps.show
       });
-
       if (nextProps.language !== ((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.language)) {
         CorrectAnswerToggle.defaultProps = _objectSpread(_objectSpread({}, CorrectAnswerToggle.defaultProps), {}, {
           showMessage: translator.t('common:showCorrectAnswer', {
@@ -112,59 +139,57 @@ var CorrectAnswerToggle = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          className = _this$props2.className,
-          toggled = _this$props2.toggled,
-          hideMessage = _this$props2.hideMessage,
-          showMessage = _this$props2.showMessage;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.root, className)
+        className = _this$props2.className,
+        toggled = _this$props2.toggled,
+        hideMessage = _this$props2.hideMessage,
+        showMessage = _this$props2.showMessage;
+      return /*#__PURE__*/_react["default"].createElement(StyledRoot, {
+        className: className
       }, /*#__PURE__*/_react["default"].createElement(_expander["default"], {
-        show: this.state.show,
-        className: classes.expander
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.content,
+        show: this.state.show
+      }, /*#__PURE__*/_react["default"].createElement(StyledContent, {
         onClick: this.onClick.bind(this),
         onTouchEnd: this.onTouch.bind(this)
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.iconHolder
-      }, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(StyledIconHolder, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
         timeout: 400,
         "in": toggled,
         exit: !toggled,
-        classNames: classes
-      }, /*#__PURE__*/_react["default"].createElement(_icons.CorrectResponse, {
+        classNames: {
+          enter: 'enter',
+          enterActive: 'enter-active',
+          exit: 'exit',
+          exitActive: 'exit-active'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(StyledIcon, null, /*#__PURE__*/_react["default"].createElement(_icons.CorrectResponse, {
         open: toggled,
-        key: "correct-open",
-        className: classes.icon
-      })), /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+        key: "correct-open"
+      }))), /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
         timeout: 5000,
         "in": !toggled,
         exit: toggled,
-        classNames: classes
-      }, /*#__PURE__*/_react["default"].createElement(_icons.CorrectResponse, {
+        classNames: {
+          enter: 'enter',
+          enterActive: 'enter-active',
+          exit: 'exit',
+          exitActive: 'exit-active'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(StyledIcon, null, /*#__PURE__*/_react["default"].createElement(_icons.CorrectResponse, {
         open: toggled,
-        key: "correct-closed",
-        className: classes.icon
-      }))), /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
+        key: "correct-closed"
+      })))), /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
         "false": true
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.label,
+      }, /*#__PURE__*/_react["default"].createElement(StyledLabel, {
         "aria-hidden": !this.state.show
       }, toggled ? hideMessage : showMessage)))));
     }
   }]);
-  return CorrectAnswerToggle;
 }(_react["default"].Component);
-
-exports.CorrectAnswerToggle = CorrectAnswerToggle;
 (0, _defineProperty2["default"])(CorrectAnswerToggle, "propTypes", {
   onToggle: _propTypes["default"].func,
   toggled: _propTypes["default"].bool,
   show: _propTypes["default"].bool,
   hideMessage: _propTypes["default"].string,
   showMessage: _propTypes["default"].string,
-  classes: _propTypes["default"].object.isRequired,
   className: _propTypes["default"].string,
   language: _propTypes["default"].string
 });
@@ -174,8 +199,5 @@ exports.CorrectAnswerToggle = CorrectAnswerToggle;
   show: false,
   toggled: false
 });
-
-var _default = (0, _styles2.withStyles)(_styles["default"])(CorrectAnswerToggle);
-
-exports["default"] = _default;
+var _default = exports["default"] = CorrectAnswerToggle;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.jsx"],"names":["translator","Translator","CorrectAnswerToggle","props","state","show","defaultProps","showMessage","t","lng","language","hideMessage","onToggle","toggled","event","preventDefault","nextProps","setState","classes","className","root","expander","content","onClick","bind","onTouch","iconHolder","icon","label","React","Component","PropTypes","func","bool","string","object","isRequired","styles"],"mappings":"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","sourcesContent":["import styles from './styles';\nimport { withStyles } from '@material-ui/core/styles';\nimport CSSTransition from 'react-transition-group/CSSTransition';\nimport { CorrectResponse } from '@pie-lib/icons';\nimport { Readable } from '@pie-lib/render-ui';\nimport Expander from './expander';\nimport React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\n/**\n * We export the raw unstyled class for testability. For public use please use the default export.\n */\nexport class CorrectAnswerToggle extends React.Component {\n  static propTypes = {\n    onToggle: PropTypes.func,\n    toggled: PropTypes.bool,\n    show: PropTypes.bool,\n    hideMessage: PropTypes.string,\n    showMessage: PropTypes.string,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    language: PropTypes.string,\n  };\n\n  static defaultProps = {\n    showMessage: 'Show correct answer',\n    hideMessage: 'Hide correct answer',\n    show: false,\n    toggled: false,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      show: props.show,\n    };\n\n    CorrectAnswerToggle.defaultProps = {\n      ...CorrectAnswerToggle.defaultProps,\n      showMessage: translator.t('common:showCorrectAnswer', { lng: props.language }),\n      hideMessage: translator.t('common:hideCorrectAnswer', { lng: props.language }),\n    };\n  }\n\n  onClick() {\n    this.props.onToggle(!this.props.toggled);\n  }\n  onTouch(event) {\n    event.preventDefault(); // Prevents the default action (click event)\n    this.props.onToggle(!this.props.toggled);\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    this.setState({\n      show: nextProps.show,\n    });\n\n    if (nextProps.language !== this.props?.language) {\n      CorrectAnswerToggle.defaultProps = {\n        ...CorrectAnswerToggle.defaultProps,\n        showMessage: translator.t('common:showCorrectAnswer', { lng: nextProps.language }),\n        hideMessage: translator.t('common:hideCorrectAnswer', { lng: nextProps.language }),\n      };\n    }\n  }\n\n  render() {\n    const { classes, className, toggled, hideMessage, showMessage } = this.props;\n\n    return (\n      <div className={classNames(classes.root, className)}>\n        <Expander show={this.state.show} className={classes.expander}>\n          <div className={classes.content} onClick={this.onClick.bind(this)} onTouchEnd={this.onTouch.bind(this)}>\n            <div className={classes.iconHolder}>\n              <CSSTransition timeout={400} in={toggled} exit={!toggled} classNames={classes}>\n                <CorrectResponse open={toggled} key=\"correct-open\" className={classes.icon} />\n              </CSSTransition>\n              <CSSTransition timeout={5000} in={!toggled} exit={toggled} classNames={classes}>\n                <CorrectResponse open={toggled} key=\"correct-closed\" className={classes.icon} />\n              </CSSTransition>\n            </div>\n            <Readable false>\n              <div className={classes.label} aria-hidden={!this.state.show}>\n                {toggled ? hideMessage : showMessage}\n              </div>\n            </Readable>\n          </div>\n        </Expander>\n      </div>\n    );\n  }\n}\n\nexport default withStyles(styles)(CorrectAnswerToggle);\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_styles","require","_CSSTransition","_interopRequireDefault","_icons","_renderUi","_expander","_react","_propTypes","_translator","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","ownKeys","r","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","translator","Translator","noTouch","StyledRoot","styled","width","cursor","StyledContent","margin","textAlign","display","StyledLabel","minWidth","alignSelf","verticalAlign","color","concat","text","fontWeight","StyledIcon","position","opacity","transition","StyledIconHolder","marginRight","alignItems","CorrectAnswerToggle","exports","_React$Component","props","_this","_classCallCheck2","state","show","defaultProps","showMessage","lng","language","hideMessage","_inherits2","_createClass2","key","value","onClick","onToggle","toggled","onTouch","event","preventDefault","UNSAFE_componentWillReceiveProps","nextProps","_this$props","setState","render","_this$props2","className","createElement","bind","onTouchEnd","timeout","exit","classNames","enter","enterActive","exitActive","CorrectResponse","open","Readable","React","Component","PropTypes","func","bool","string","_default"],"sources":["../src/index.jsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport CSSTransition from 'react-transition-group/CSSTransition';\nimport { CorrectResponse } from '@pie-lib/icons';\nimport { Readable } from '@pie-lib/render-ui';\nimport Expander from './expander';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Translator from '@pie-lib/translator';\nimport { color } from '@pie-lib/render-ui';\n\nconst { translator } = Translator;\n\nconst noTouch = {\n  '-webkit-touchCcallout': 'none',\n  '-webkit-user-select': 'none',\n  '-khtml-user-select': 'none',\n  '-moz-user-select': 'none',\n  '-ms-user-select': 'none',\n  'user-select': 'none',\n};\n\nconst StyledRoot = styled('div')(() => ({\n  width: '100%',\n  cursor: 'pointer',\n}));\n\nconst StyledContent = styled('div')(() => ({\n  margin: '0 auto',\n  textAlign: 'center',\n  display: 'flex',\n}));\n\nconst StyledLabel = styled('div')(() => ({\n  width: 'fit-content',\n  minWidth: '140px',\n  alignSelf: 'center',\n  verticalAlign: 'middle',\n  color: `var(--correct-answer-toggle-label-color, ${color.text()})`,\n  fontWeight: 'normal',\n  ...noTouch,\n}));\n\nconst StyledIcon = styled('div')(() => ({\n  position: 'absolute',\n  width: '25px',\n  '&.enter': {\n    opacity: '0',\n  },\n  '&.enter-active': {\n    opacity: '1',\n    transition: 'opacity 0.3s ease-in',\n  },\n  '&.exit': {\n    opacity: '1',\n  },\n  '&.exit-active': {\n    opacity: '0',\n    transition: 'opacity 0.3s ease-in',\n  },\n}));\n\nconst StyledIconHolder = styled('div')(() => ({\n  width: '25px',\n  marginRight: '5px',\n  display: 'flex',\n  alignItems: 'center',\n}));\n\n/**\n * We export the raw unstyled class for testability. For public use please use the default export.\n */\nexport class CorrectAnswerToggle extends React.Component {\n  static propTypes = {\n    onToggle: PropTypes.func,\n    toggled: PropTypes.bool,\n    show: PropTypes.bool,\n    hideMessage: PropTypes.string,\n    showMessage: PropTypes.string,\n    className: PropTypes.string,\n    language: PropTypes.string,\n  };\n\n  static defaultProps = {\n    showMessage: 'Show correct answer',\n    hideMessage: 'Hide correct answer',\n    show: false,\n    toggled: false,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      show: props.show,\n    };\n\n    CorrectAnswerToggle.defaultProps = {\n      ...CorrectAnswerToggle.defaultProps,\n      showMessage: translator.t('common:showCorrectAnswer', { lng: props.language }),\n      hideMessage: translator.t('common:hideCorrectAnswer', { lng: props.language }),\n    };\n  }\n\n  onClick() {\n    this.props.onToggle(!this.props.toggled);\n  }\n  onTouch(event) {\n    event.preventDefault(); // Prevents the default action (click event)\n    this.props.onToggle(!this.props.toggled);\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    this.setState({\n      show: nextProps.show,\n    });\n\n    if (nextProps.language !== this.props?.language) {\n      CorrectAnswerToggle.defaultProps = {\n        ...CorrectAnswerToggle.defaultProps,\n        showMessage: translator.t('common:showCorrectAnswer', { lng: nextProps.language }),\n        hideMessage: translator.t('common:hideCorrectAnswer', { lng: nextProps.language }),\n      };\n    }\n  }\n\n  render() {\n    const { className, toggled, hideMessage, showMessage } = this.props;\n\n    return (\n      <StyledRoot className={className}>\n        <Expander show={this.state.show}>\n          <StyledContent onClick={this.onClick.bind(this)} onTouchEnd={this.onTouch.bind(this)}>\n            <StyledIconHolder>\n              <CSSTransition \n                timeout={400} \n                in={toggled} \n                exit={!toggled} \n                classNames={{\n                  enter: 'enter',\n                  enterActive: 'enter-active',\n                  exit: 'exit',\n                  exitActive: 'exit-active'\n                }}\n              >\n                <StyledIcon>\n                  <CorrectResponse open={toggled} key=\"correct-open\" />\n                </StyledIcon>\n              </CSSTransition>\n              <CSSTransition \n                timeout={5000} \n                in={!toggled} \n                exit={toggled} \n                classNames={{\n                  enter: 'enter',\n                  enterActive: 'enter-active',\n                  exit: 'exit',\n                  exitActive: 'exit-active'\n                }}\n              >\n                <StyledIcon>\n                  <CorrectResponse open={toggled} key=\"correct-closed\" />\n                </StyledIcon>\n              </CSSTransition>\n            </StyledIconHolder>\n            <Readable false>\n              <StyledLabel aria-hidden={!this.state.show}>\n                {toggled ? hideMessage : showMessage}\n              </StyledLabel>\n            </Readable>\n          </StyledContent>\n        </Expander>\n      </StyledRoot>\n    );\n  }\n}\n\nexport default CorrectAnswerToggle;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -6,32 +6,36 @@
   "keywords": [
     "react",
     "pie",
-    "material-ui"
+    "mui",
+    "@mui/material"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.25.1",
+  "version": "2.26.0-mui-update.0",
   "main": "lib/index.js",
   "module": "src/index.jsx",
   "scripts": {},
   "dependencies": {
-    "@material-ui/core": "^3.8.3",
-    "@pie-lib/icons": "^2.24.1",
-    "@pie-lib/render-ui": "^4.35.1",
-    "@pie-lib/translator": "^2.23.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/icons": "^2.25.0-mui-update.0",
+    "@pie-lib/render-ui": "^4.36.0-mui-update.0",
+    "@pie-lib/translator": "^2.25.0-mui-update.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "react-transition-group": "^2.5.2"
   },
   "devDependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.9.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "gitHead": "ce0ec7134200c51f3a3301257be3e707054b36ca"
+  "gitHead": "2e0222bda045f46b504640a972d43787e68288c4"
 }

package/src/expander.jsx

@@ -1,37 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { CSSTransition } from 'react-transition-group';
 
-const Expander = (props) => {
-  const { classes, show, children } = props;
-
-  return (
-    <CSSTransition in={show} appear={true} mountOnEnter={false} timeout={300} classNames={{ ...classes }}>
-      <div className={classes.expander}>{children}</div>
-    </CSSTransition>
-  );
-};
-
-Expander.propTypes = {
-  show: PropTypes.bool.isRequired,
-  className: PropTypes.string,
-  classes: PropTypes.object,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-};
-
 const transition = 'height ease-in 300ms, opacity ease-in 300ms';
 
-export default withStyles(() => ({
-  expander: {
-    position: 'relative',
-    height: 0,
-    overflow: 'hidden',
-    display: 'flex',
-    visibility: 'hidden',
-    width: 0,
-  },
-  enter: {
+const StyledExpander = styled('div')(() => ({
+  position: 'relative',
+  height: 0,
+  overflow: 'hidden',
+  display: 'flex',
+  visibility: 'hidden',
+  width: 0,
+  '&.enter': {
     transition,
     opacity: 1,
     height: 'auto',
@@ -39,23 +20,52 @@ export default withStyles(() => ({
     visibility: 'visible',
     minHeight: '25px',
   },
-  enterDone: {
+  '&.enter-done': {
     height: 'auto',
     visibility: 'visible',
     width: 'auto',
     minHeight: '25px',
   },
-  exit: {
+  '&.exit': {
     transition,
     opacity: 0,
     height: 0,
     visibility: 'visible',
     width: 0,
   },
-  exitDone: {
+  '&.exit-done': {
     opacity: 0,
     visibility: 'hidden',
     height: 0,
     width: 0,
   },
-}))(Expander);
+}));
+
+const Expander = (props) => {
+  const { show, children, className } = props;
+
+  return (
+    <CSSTransition 
+      in={show} 
+      appear={true} 
+      mountOnEnter={false} 
+      timeout={300} 
+      classNames={{
+        enter: 'enter',
+        enterDone: 'enter-done',
+        exit: 'exit',
+        exitDone: 'exit-done'
+      }}
+    >
+      <StyledExpander className={className}>{children}</StyledExpander>
+    </CSSTransition>
+  );
+};
+
+Expander.propTypes = {
+  show: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+export default Expander;

package/src/index.jsx

@@ -1,16 +1,71 @@
-import styles from './styles';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { CorrectResponse } from '@pie-lib/icons';
 import { Readable } from '@pie-lib/render-ui';
 import Expander from './expander';
 import React from 'react';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Translator from '@pie-lib/translator';
+import { color } from '@pie-lib/render-ui';
 
 const { translator } = Translator;
 
+const noTouch = {
+  '-webkit-touchCcallout': 'none',
+  '-webkit-user-select': 'none',
+  '-khtml-user-select': 'none',
+  '-moz-user-select': 'none',
+  '-ms-user-select': 'none',
+  'user-select': 'none',
+};
+
+const StyledRoot = styled('div')(() => ({
+  width: '100%',
+  cursor: 'pointer',
+}));
+
+const StyledContent = styled('div')(() => ({
+  margin: '0 auto',
+  textAlign: 'center',
+  display: 'flex',
+}));
+
+const StyledLabel = styled('div')(() => ({
+  width: 'fit-content',
+  minWidth: '140px',
+  alignSelf: 'center',
+  verticalAlign: 'middle',
+  color: `var(--correct-answer-toggle-label-color, ${color.text()})`,
+  fontWeight: 'normal',
+  ...noTouch,
+}));
+
+const StyledIcon = styled('div')(() => ({
+  position: 'absolute',
+  width: '25px',
+  '&.enter': {
+    opacity: '0',
+  },
+  '&.enter-active': {
+    opacity: '1',
+    transition: 'opacity 0.3s ease-in',
+  },
+  '&.exit': {
+    opacity: '1',
+  },
+  '&.exit-active': {
+    opacity: '0',
+    transition: 'opacity 0.3s ease-in',
+  },
+}));
+
+const StyledIconHolder = styled('div')(() => ({
+  width: '25px',
+  marginRight: '5px',
+  display: 'flex',
+  alignItems: 'center',
+}));
+
 /**
  * We export the raw unstyled class for testability. For public use please use the default export.
  */
@@ -21,7 +76,6 @@ export class CorrectAnswerToggle extends React.Component {
     show: PropTypes.bool,
     hideMessage: PropTypes.string,
     showMessage: PropTypes.string,
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     language: PropTypes.string,
   };
@@ -69,30 +123,54 @@ export class CorrectAnswerToggle extends React.Component {
   }
 
   render() {
-    const { classes, className, toggled, hideMessage, showMessage } = this.props;
+    const { className, toggled, hideMessage, showMessage } = this.props;
 
     return (
-      <div className={classNames(classes.root, className)}>
-        <Expander show={this.state.show} className={classes.expander}>
-          <div className={classes.content} onClick={this.onClick.bind(this)} onTouchEnd={this.onTouch.bind(this)}>
-            <div className={classes.iconHolder}>
-              <CSSTransition timeout={400} in={toggled} exit={!toggled} classNames={classes}>
-                <CorrectResponse open={toggled} key="correct-open" className={classes.icon} />
+      <StyledRoot className={className}>
+        <Expander show={this.state.show}>
+          <StyledContent onClick={this.onClick.bind(this)} onTouchEnd={this.onTouch.bind(this)}>
+            <StyledIconHolder>
+              <CSSTransition 
+                timeout={400} 
+                in={toggled} 
+                exit={!toggled} 
+                classNames={{
+                  enter: 'enter',
+                  enterActive: 'enter-active',
+                  exit: 'exit',
+                  exitActive: 'exit-active'
+                }}
+              >
+                <StyledIcon>
+                  <CorrectResponse open={toggled} key="correct-open" />
+                </StyledIcon>
               </CSSTransition>
-              <CSSTransition timeout={5000} in={!toggled} exit={toggled} classNames={classes}>
-                <CorrectResponse open={toggled} key="correct-closed" className={classes.icon} />
+              <CSSTransition 
+                timeout={5000} 
+                in={!toggled} 
+                exit={toggled} 
+                classNames={{
+                  enter: 'enter',
+                  enterActive: 'enter-active',
+                  exit: 'exit',
+                  exitActive: 'exit-active'
+                }}
+              >
+                <StyledIcon>
+                  <CorrectResponse open={toggled} key="correct-closed" />
+                </StyledIcon>
               </CSSTransition>
-            </div>
+            </StyledIconHolder>
             <Readable false>
-              <div className={classes.label} aria-hidden={!this.state.show}>
+              <StyledLabel aria-hidden={!this.state.show}>
                 {toggled ? hideMessage : showMessage}
-              </div>
+              </StyledLabel>
             </Readable>
-          </div>
+          </StyledContent>
         </Expander>
-      </div>
+      </StyledRoot>
     );
   }
 }
 
-export default withStyles(styles)(CorrectAnswerToggle);
+export default CorrectAnswerToggle;

package/lib/styles.js

@@ -1,65 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.animationStyles = void 0;
-
-var _renderUi = require("@pie-lib/render-ui");
-
-var noTouch = {
-  '-webkit-touchCcallout': 'none',
-  '-webkit-user-select': 'none',
-  '-khtml-user-select': 'none',
-  '-moz-user-select': 'none',
-  '-ms-user-select': 'none',
-  'user-select': 'none'
-};
-var _default = {
-  root: {
-    width: '100%',
-    cursor: 'pointer'
-  },
-  content: {
-    margin: '0 auto',
-    textAlign: 'center',
-    display: 'flex'
-  },
-  label: Object.assign({
-    width: 'fit-content',
-    minWidth: '140px',
-    // eslint-disable-next-line
-    alignSelf: 'center',
-    verticalAlign: 'middle',
-    color: "var(--correct-answer-toggle-label-color,  ".concat(_renderUi.color.text(), ")"),
-    fontWeight: 'normal'
-  }, noTouch),
-  icon: {
-    position: 'absolute',
-    width: '25px'
-  },
-  iconHolder: {
-    width: '25px',
-    marginRight: '5px',
-    display: 'flex',
-    alignItems: 'center'
-  },
-  enter: {
-    opacity: '0'
-  },
-  enterActive: {
-    opacity: '1',
-    transition: 'opacity 0.3s ease-in'
-  },
-  exit: {
-    opacity: '1'
-  },
-  exitActive: {
-    opacity: '0',
-    transition: 'opacity 0.3s ease-in'
-  }
-};
-exports["default"] = _default;
-var animationStyles = {};
-exports.animationStyles = animationStyles;
-//# sourceMappingURL=styles.js.map

package/lib/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/styles.js"],"names":["noTouch","root","width","cursor","content","margin","textAlign","display","label","Object","assign","minWidth","alignSelf","verticalAlign","color","text","fontWeight","icon","position","iconHolder","marginRight","alignItems","enter","opacity","enterActive","transition","exit","exitActive","animationStyles"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,OAAO,GAAG;AACd,2BAAyB,MADX;AAEd,yBAAuB,MAFT;AAGd,wBAAsB,MAHR;AAId,sBAAoB,MAJN;AAKd,qBAAmB,MALL;AAMd,iBAAe;AAND,CAAhB;eASe;AACbC,EAAAA,IAAI,EAAE;AACJC,IAAAA,KAAK,EAAE,MADH;AAEJC,IAAAA,MAAM,EAAE;AAFJ,GADO;AAKbC,EAAAA,OAAO,EAAE;AACPC,IAAAA,MAAM,EAAE,QADD;AAEPC,IAAAA,SAAS,EAAE,QAFJ;AAGPC,IAAAA,OAAO,EAAE;AAHF,GALI;AAUbC,EAAAA,KAAK,EAAEC,MAAM,CAACC,MAAP,CACL;AACER,IAAAA,KAAK,EAAE,aADT;AAEES,IAAAA,QAAQ,EAAE,OAFZ;AAGE;AACAC,IAAAA,SAAS,EAAE,QAJb;AAKEC,IAAAA,aAAa,EAAE,QALjB;AAMEC,IAAAA,KAAK,sDAA+CA,gBAAMC,IAAN,EAA/C,MANP;AAOEC,IAAAA,UAAU,EAAE;AAPd,GADK,EAULhB,OAVK,CAVM;AAsBbiB,EAAAA,IAAI,EAAE;AACJC,IAAAA,QAAQ,EAAE,UADN;AAEJhB,IAAAA,KAAK,EAAE;AAFH,GAtBO;AA0BbiB,EAAAA,UAAU,EAAE;AACVjB,IAAAA,KAAK,EAAE,MADG;AAEVkB,IAAAA,WAAW,EAAE,KAFH;AAGVb,IAAAA,OAAO,EAAE,MAHC;AAIVc,IAAAA,UAAU,EAAE;AAJF,GA1BC;AAgCbC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE;AADJ,GAhCM;AAmCbC,EAAAA,WAAW,EAAE;AACXD,IAAAA,OAAO,EAAE,GADE;AAEXE,IAAAA,UAAU,EAAE;AAFD,GAnCA;AAuCbC,EAAAA,IAAI,EAAE;AACJH,IAAAA,OAAO,EAAE;AADL,GAvCO;AA0CbI,EAAAA,UAAU,EAAE;AACVJ,IAAAA,OAAO,EAAE,GADC;AAEVE,IAAAA,UAAU,EAAE;AAFF;AA1CC,C;;AAgDR,IAAMG,eAAe,GAAG,EAAxB","sourcesContent":["import { color } from '@pie-lib/render-ui';\n\nconst noTouch = {\n  '-webkit-touchCcallout': 'none',\n  '-webkit-user-select': 'none',\n  '-khtml-user-select': 'none',\n  '-moz-user-select': 'none',\n  '-ms-user-select': 'none',\n  'user-select': 'none',\n};\n\nexport default {\n  root: {\n    width: '100%',\n    cursor: 'pointer',\n  },\n  content: {\n    margin: '0 auto',\n    textAlign: 'center',\n    display: 'flex',\n  },\n  label: Object.assign(\n    {\n      width: 'fit-content',\n      minWidth: '140px',\n      // eslint-disable-next-line\n      alignSelf: 'center',\n      verticalAlign: 'middle',\n      color: `var(--correct-answer-toggle-label-color,  ${color.text()})`,\n      fontWeight: 'normal',\n    },\n    noTouch,\n  ),\n  icon: {\n    position: 'absolute',\n    width: '25px',\n  },\n  iconHolder: {\n    width: '25px',\n    marginRight: '5px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n  enter: {\n    opacity: '0',\n  },\n  enterActive: {\n    opacity: '1',\n    transition: 'opacity 0.3s ease-in',\n  },\n  exit: {\n    opacity: '1',\n  },\n  exitActive: {\n    opacity: '0',\n    transition: 'opacity 0.3s ease-in',\n  },\n};\n\nexport const animationStyles = {};\n"],"file":"styles.js"}

package/src/styles.js

@@ -1,60 +0,0 @@
-import { color } from '@pie-lib/render-ui';
-
-const noTouch = {
-  '-webkit-touchCcallout': 'none',
-  '-webkit-user-select': 'none',
-  '-khtml-user-select': 'none',
-  '-moz-user-select': 'none',
-  '-ms-user-select': 'none',
-  'user-select': 'none',
-};
-
-export default {
-  root: {
-    width: '100%',
-    cursor: 'pointer',
-  },
-  content: {
-    margin: '0 auto',
-    textAlign: 'center',
-    display: 'flex',
-  },
-  label: Object.assign(
-    {
-      width: 'fit-content',
-      minWidth: '140px',
-      // eslint-disable-next-line
-      alignSelf: 'center',
-      verticalAlign: 'middle',
-      color: `var(--correct-answer-toggle-label-color,  ${color.text()})`,
-      fontWeight: 'normal',
-    },
-    noTouch,
-  ),
-  icon: {
-    position: 'absolute',
-    width: '25px',
-  },
-  iconHolder: {
-    width: '25px',
-    marginRight: '5px',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  enter: {
-    opacity: '0',
-  },
-  enterActive: {
-    opacity: '1',
-    transition: 'opacity 0.3s ease-in',
-  },
-  exit: {
-    opacity: '1',
-  },
-  exitActive: {
-    opacity: '0',
-    transition: 'opacity 0.3s ease-in',
-  },
-};
-
-export const animationStyles = {};