@pie-lib/correct-answer-toggle 3.1.0-next.2 → 3.1.0-next.35

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.1.0-next.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@3.1.0-next.2...@pie-lib/correct-answer-toggle@3.1.0-next.4) (2026-01-27)
+
+**Note:** Version bump only for package @pie-lib/correct-answer-toggle
+
+
+
+
+
 # [3.1.0-next.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@3.1.0-next.1...@pie-lib/correct-answer-toggle@3.1.0-next.2) (2026-01-26)
 
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle

package/lib/expander.js

@@ -0,0 +1,87 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _reactTransitionGroup = require("react-transition-group");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var transition = 'height ease-in 300ms, opacity ease-in 300ms';
+var StyledExpander = (0, _styles.styled)('div')(function () {
+  return {
+    position: 'relative',
+    height: 0,
+    overflow: 'hidden',
+    display: 'flex',
+    visibility: 'hidden',
+    width: 0,
+    '&.enter': {
+      transition: transition,
+      opacity: 1,
+      height: 'auto',
+      width: 'auto',
+      visibility: 'visible',
+      minHeight: '25px'
+    },
+    '&.enter-done': {
+      height: 'auto',
+      visibility: 'visible',
+      width: 'auto',
+      minHeight: '25px'
+    },
+    '&.exit': {
+      transition: transition,
+      opacity: 0,
+      height: 0,
+      visibility: 'visible',
+      width: 0
+    },
+    '&.exit-done': {
+      opacity: 0,
+      visibility: 'hidden',
+      height: 0,
+      width: 0
+    }
+  };
+});
+var Expander = function Expander(props) {
+  var show = props.show,
+    children = props.children,
+    className = props.className;
+  var nodeRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
+    nodeRef: nodeRef,
+    "in": show,
+    appear: true,
+    mountOnEnter: false,
+    timeout: 300,
+    classNames: {
+      enter: 'enter',
+      enterDone: 'enter-done',
+      exit: 'exit',
+      exitDone: 'exit-done'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(StyledExpander, {
+    ref: nodeRef,
+    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

@@ -0,0 +1 @@
+{"version":3,"file":"expander.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_styles","_reactTransitionGroup","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","transition","StyledExpander","styled","position","height","overflow","display","visibility","width","opacity","minHeight","Expander","props","show","children","className","nodeRef","useRef","createElement","CSSTransition","appear","mountOnEnter","timeout","classNames","enter","enterDone","exit","exitDone","ref","propTypes","PropTypes","bool","isRequired","string","oneOfType","arrayOf","node","_default","exports"],"sources":["../src/expander.jsx"],"sourcesContent":["import React, { useRef } 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  const nodeRef = useRef(null);\n\n  return (\n    <CSSTransition\n      nodeRef={nodeRef}\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 ref={nodeRef} className={className}>\n        {children}\n      </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":"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","ignoreList":[]}

package/lib/index.js

@@ -0,0 +1,223 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.reflect.construct.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CorrectAnswerToggle = void 0;
+require("core-js/modules/es.function.bind.js");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+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 = require("@mui/material/styles");
+var _reactTransitionGroup = require("react-transition-group");
+var _icons = require("@pie-lib/icons");
+var _renderUi = require("@pie-lib/render-ui");
+var _expander = _interopRequireDefault(require("./expander"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+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 = exports.CorrectAnswerToggle = /*#__PURE__*/function (_React$Component) {
+  function CorrectAnswerToggle(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, CorrectAnswerToggle);
+    _this = _callSuper(this, CorrectAnswerToggle, [props]);
+    _this.state = {
+      show: props.show
+    };
+    _this.openIconRef = /*#__PURE__*/_react["default"].createRef();
+    _this.closedIconRef = /*#__PURE__*/_react["default"].createRef();
+    CorrectAnswerToggle.defaultProps = _objectSpread(_objectSpread({}, CorrectAnswerToggle.defaultProps), {}, {
+      showMessage: translator.t('common:showCorrectAnswer', {
+        lng: props.language
+      }),
+      hideMessage: translator.t('common:hideCorrectAnswer', {
+        lng: props.language
+      })
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(CorrectAnswerToggle, _React$Component);
+  return (0, _createClass2["default"])(CorrectAnswerToggle, [{
+    key: "onClick",
+    value: function onClick() {
+      this.props.onToggle(!this.props.toggled);
+    }
+  }, {
+    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', {
+            lng: nextProps.language
+          }),
+          hideMessage: translator.t('common:hideCorrectAnswer', {
+            lng: nextProps.language
+          })
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        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
+      }, /*#__PURE__*/_react["default"].createElement(StyledContent, {
+        onClick: this.onClick.bind(this),
+        onTouchEnd: this.onTouch.bind(this)
+      }, /*#__PURE__*/_react["default"].createElement(StyledIconHolder, null, /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
+        nodeRef: this.openIconRef,
+        timeout: 400,
+        "in": toggled,
+        exit: !toggled,
+        classNames: {
+          enter: 'enter',
+          enterActive: 'enter-active',
+          exit: 'exit',
+          exitActive: 'exit-active'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(StyledIcon, {
+        ref: this.openIconRef
+      }, /*#__PURE__*/_react["default"].createElement(_icons.CorrectResponse, {
+        open: toggled,
+        key: "correct-open"
+      }))), /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
+        nodeRef: this.closedIconRef,
+        timeout: 5000,
+        "in": !toggled,
+        exit: toggled,
+        classNames: {
+          enter: 'enter',
+          enterActive: 'enter-active',
+          exit: 'exit',
+          exitActive: 'exit-active'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(StyledIcon, {
+        ref: this.closedIconRef
+      }, /*#__PURE__*/_react["default"].createElement(_icons.CorrectResponse, {
+        open: toggled,
+        key: "correct-closed"
+      })))), /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
+        "false": true
+      }, /*#__PURE__*/_react["default"].createElement(StyledLabel, {
+        "aria-hidden": !this.state.show
+      }, toggled ? hideMessage : showMessage)))));
+    }
+  }]);
+}(_react["default"].Component);
+(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,
+  className: _propTypes["default"].string,
+  language: _propTypes["default"].string
+});
+(0, _defineProperty2["default"])(CorrectAnswerToggle, "defaultProps", {
+  showMessage: 'Show correct answer',
+  hideMessage: 'Hide correct answer',
+  show: false,
+  toggled: false
+});
+var _default = exports["default"] = CorrectAnswerToggle;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_styles","require","_reactTransitionGroup","_icons","_renderUi","_expander","_interopRequireDefault","_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","openIconRef","React","createRef","closedIconRef","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","CSSTransition","nodeRef","timeout","exit","classNames","enter","enterActive","exitActive","ref","CorrectResponse","open","Readable","Component","PropTypes","func","bool","string","_default"],"sources":["../src/index.jsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport { CSSTransition } from 'react-transition-group';\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    this.openIconRef = React.createRef();\n    this.closedIconRef = React.createRef();\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                nodeRef={this.openIconRef}\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 ref={this.openIconRef}>\n                  <CorrectResponse open={toggled} key=\"correct-open\" />\n                </StyledIcon>\n              </CSSTransition>\n              <CSSTransition\n                nodeRef={this.closedIconRef}\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 ref={this.closedIconRef}>\n                  <CorrectResponse open={toggled} key=\"correct-closed\" />\n                </StyledIcon>\n              </CSSTransition>\n            </StyledIconHolder>\n            <Readable false>\n              <StyledLabel aria-hidden={!this.state.show}>{toggled ? hideMessage : showMessage}</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

@@ -12,7 +12,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.1.0-next.2",
+  "version": "3.1.0-next.35+086496dd",
   "main": "lib/index.js",
   "module": "src/index.jsx",
   "scripts": {},
@@ -21,9 +21,9 @@
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/icons": "3.1.0-next.1",
-    "@pie-lib/render-ui": "5.1.0-next.2",
-    "@pie-lib/translator": "3.1.0-next.1",
+    "@pie-lib/icons": "^3.1.0-next.4",
+    "@pie-lib/render-ui": "^5.1.0-next.35+086496dd",
+    "@pie-lib/translator": "^3.1.0-next.4",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "react-transition-group": "^4.4.5"
@@ -36,5 +36,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "04c639af6e49d1881bf3244ebb3940171c26bd3e"
+  "gitHead": "086496dd2bf934512555e4e84aa12847b3df4bf3"
 }