@pie-lib/text-select 1.30.0 → 1.32.0-mui-update.0

package/lib/token-select/token.js

@@ -1,168 +1,227 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.TokenTypes = exports.Token = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-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 _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
-
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
-
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _renderUi = require("@pie-lib/render-ui");
-
-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 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; }
+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; })(); }
 // we need to use a larger line height for the token to be more readable
-var LINE_HEIGHT_MULTIPLIER = 3.2; // we need a bit more space for correctness indicators
-
+var LINE_HEIGHT_MULTIPLIER = 3.2;
+// we need a bit more space for correctness indicators
 var CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;
 var CORRECTNESS_PADDING = 2;
 
-var Wrapper = function Wrapper(_ref) {
-  var useWrapper = _ref.useWrapper,
-      children = _ref.children,
-      classNameContainer = _ref.classNameContainer,
-      iconClass = _ref.iconClass,
-      Icon = _ref.Icon;
-  return useWrapper ? /*#__PURE__*/_react["default"].createElement("span", {
-    className: classNameContainer
-  }, children, /*#__PURE__*/_react["default"].createElement(Icon, {
-    className: iconClass
-  })) : children;
+// Styled components for different token states
+var StyledToken = (0, _styles.styled)('span')(function (_ref) {
+  var theme = _ref.theme;
+  return (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
+    cursor: 'pointer',
+    textIndent: 0,
+    '&.disabled': {
+      cursor: 'inherit',
+      color: _renderUi.color.disabled()
+    },
+    '&.disabledBlack': {
+      cursor: 'inherit'
+    },
+    '&.disabledAndSelected': {
+      backgroundColor: _renderUi.color.blueGrey100()
+    }
+  }, "@media (min-width: ".concat(theme.breakpoints.values.md, "px)"), {
+    '&.selectable:hover': {
+      backgroundColor: _renderUi.color.blueGrey300(),
+      color: theme.palette.common.black,
+      '& > *': {
+        backgroundColor: _renderUi.color.blueGrey300()
+      }
+    }
+  }), '&.selected', {
+    backgroundColor: _renderUi.color.blueGrey100(),
+    color: theme.palette.common.black,
+    lineHeight: "".concat(theme.spacing(1) * LINE_HEIGHT_MULTIPLIER, "px"),
+    border: "solid 2px ".concat(_renderUi.color.blueGrey900()),
+    borderRadius: '4px',
+    '& > *': {
+      backgroundColor: _renderUi.color.blueGrey100()
+    }
+  }), '&.highlight', {
+    border: "dashed 2px ".concat(_renderUi.color.blueGrey600()),
+    borderRadius: '4px',
+    lineHeight: "".concat(theme.spacing(1) * LINE_HEIGHT_MULTIPLIER, "px")
+  }), '&.print', {
+    border: "dashed 2px ".concat(_renderUi.color.blueGrey600()),
+    borderRadius: '4px',
+    lineHeight: "".concat(theme.spacing(1) * LINE_HEIGHT_MULTIPLIER, "px"),
+    color: _renderUi.color.text()
+  }), '&.custom', {
+    display: 'initial'
+  });
+});
+var StyledCommonTokenStyle = (0, _styles.styled)('span')(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    position: 'relative',
+    borderRadius: '4px',
+    color: theme.palette.common.black,
+    lineHeight: "".concat(theme.spacing(1) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING, "px"),
+    padding: "".concat(CORRECTNESS_PADDING, "px")
+  };
+});
+var StyledCorrectContainer = (0, _styles.styled)(StyledCommonTokenStyle)(function () {
+  return {
+    border: "".concat(_renderUi.color.correctTertiary(), " solid 2px")
+  };
+});
+var StyledIncorrectContainer = (0, _styles.styled)(StyledCommonTokenStyle)(function () {
+  return {
+    border: "".concat(_renderUi.color.incorrectWithIcon(), " solid 2px")
+  };
+});
+var StyledMissingContainer = (0, _styles.styled)(StyledCommonTokenStyle)(function () {
+  return {
+    border: "".concat(_renderUi.color.incorrectWithIcon(), " dashed 2px")
+  };
+});
+var StyledCorrectnessIcon = (0, _styles.styled)('span')(function () {
+  return {
+    color: _renderUi.color.white(),
+    position: 'absolute',
+    top: '-8px',
+    left: '-8px',
+    borderRadius: '50%',
+    fontSize: '12px',
+    padding: '2px',
+    display: 'inline-block'
+  };
+});
+var StyledCorrectIcon = (0, _styles.styled)(StyledCorrectnessIcon)(function () {
+  return {
+    backgroundColor: _renderUi.color.correctTertiary()
+  };
+});
+var StyledIncorrectIcon = (0, _styles.styled)(StyledCorrectnessIcon)(function () {
+  return {
+    backgroundColor: _renderUi.color.incorrectWithIcon()
+  };
+});
+var Wrapper = function Wrapper(_ref4) {
+  var useWrapper = _ref4.useWrapper,
+    children = _ref4.children,
+    Container = _ref4.Container,
+    IconComponent = _ref4.IconComponent,
+    Icon = _ref4.Icon;
+  return useWrapper ? /*#__PURE__*/_react["default"].createElement(Container, null, children, Icon && IconComponent ? /*#__PURE__*/_react["default"].createElement(IconComponent, null, /*#__PURE__*/_react["default"].createElement(Icon, {
+    fontSize: "inherit"
+  })) : null) : children;
 };
-
 Wrapper.propTypes = {
   useWrapper: _propTypes["default"].bool,
-  classNameContainer: _propTypes["default"].string,
-  iconClass: _propTypes["default"].string,
-  Icon: _propTypes["default"].func,
-  children: _propTypes["default"].element
+  Container: _propTypes["default"].elementType,
+  IconComponent: _propTypes["default"].elementType,
+  Icon: _propTypes["default"].elementType,
+  children: _propTypes["default"].node
 };
-var TokenTypes = {
+var TokenTypes = exports.TokenTypes = {
   text: _propTypes["default"].string,
   selectable: _propTypes["default"].bool
 };
-exports.TokenTypes = TokenTypes;
-
-var Token = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Token, _React$Component);
-
-  var _super = _createSuper(Token);
-
+var Token = exports.Token = /*#__PURE__*/function (_React$Component) {
   function Token() {
     var _this;
-
     (0, _classCallCheck2["default"])(this, Token);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getClassAndIconConfig", function () {
+    _this = _callSuper(this, Token, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "getClassAndIconConfig", function () {
       var _this$props = _this.props,
-          selectable = _this$props.selectable,
-          selected = _this$props.selected,
-          classes = _this$props.classes,
-          classNameProp = _this$props.className,
-          disabled = _this$props.disabled,
-          highlight = _this$props.highlight,
-          correct = _this$props.correct,
-          animationsDisabled = _this$props.animationsDisabled,
-          isMissing = _this$props.isMissing;
+        selectable = _this$props.selectable,
+        selected = _this$props.selected,
+        classNameProp = _this$props.className,
+        disabled = _this$props.disabled,
+        highlight = _this$props.highlight,
+        correct = _this$props.correct,
+        animationsDisabled = _this$props.animationsDisabled,
+        isMissing = _this$props.isMissing;
       var isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
       var baseClassName = Token.rootClassName;
-      var classNameContainer;
+      var Container;
       var Icon;
-      var iconClass;
-
+      var IconComponent;
       if (correct === undefined && selected && disabled) {
         return {
-          className: (0, _classnames["default"])(classes.token, classes.selected, classes.disabledBlack)
+          className: (0, _classnames["default"])(baseClassName, 'selected', 'disabledBlack', classNameProp),
+          Component: StyledToken
         };
       }
-
       if (correct !== undefined) {
         var isCorrect = correct === true;
         return {
-          className: (0, _classnames["default"])(baseClassName, classes.custom),
-          classNameContainer: (0, _classnames["default"])(isCorrect ? classes.correct : classes.incorrect, classes.commonTokenStyle),
+          className: (0, _classnames["default"])(baseClassName, 'custom', classNameProp),
+          Component: StyledToken,
+          Container: isCorrect ? StyledCorrectContainer : StyledIncorrectContainer,
           Icon: isCorrect ? _Check["default"] : _Close["default"],
-          iconClass: (0, _classnames["default"])(classes.correctnessIndicatorIcon, isCorrect ? classes.correctIcon : classes.incorrectIcon)
+          IconComponent: isCorrect ? StyledCorrectIcon : StyledIncorrectIcon
         };
       }
-
       if (isMissing) {
         return {
-          className: (0, _classnames["default"])(baseClassName, classes.custom, classes.missing, classes.commonTokenStyle),
-          classNameContainer: classes.commonTokenStyle,
+          className: (0, _classnames["default"])(baseClassName, 'custom', 'missing', classNameProp),
+          Component: StyledToken,
+          Container: StyledMissingContainer,
           Icon: _Close["default"],
-          iconClass: (0, _classnames["default"])(classes.correctnessIndicatorIcon, classes.incorrectIcon)
+          IconComponent: StyledIncorrectIcon
         };
       }
-
       return {
-        className: (0, _classnames["default"])(baseClassName, classes.token, disabled && classes.disabled, selectable && !disabled && !isTouchEnabled && classes.selectable, selected && !disabled && classes.selected, selected && disabled && classes.disabledAndSelected, highlight && selectable && !disabled && !selected && classes.highlight, animationsDisabled && classes.print, classNameProp),
-        classNameContainer: classNameContainer,
+        className: (0, _classnames["default"])(baseClassName, disabled && 'disabled', selectable && !disabled && !isTouchEnabled && 'selectable', selected && !disabled && 'selected', selected && disabled && 'disabledAndSelected', highlight && selectable && !disabled && !selected && 'highlight', animationsDisabled && 'print', classNameProp),
+        Component: StyledToken,
+        Container: Container,
         Icon: Icon,
-        iconClass: iconClass
+        IconComponent: IconComponent
       };
     });
     return _this;
   }
-
-  (0, _createClass2["default"])(Token, [{
+  (0, _inherits2["default"])(Token, _React$Component);
+  return (0, _createClass2["default"])(Token, [{
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-          text = _this$props2.text,
-          index = _this$props2.index,
-          correct = _this$props2.correct,
-          isMissing = _this$props2.isMissing;
-
+        text = _this$props2.text,
+        index = _this$props2.index,
+        correct = _this$props2.correct,
+        isMissing = _this$props2.isMissing;
       var _this$getClassAndIcon = this.getClassAndIconConfig(),
-          className = _this$getClassAndIcon.className,
-          classNameContainer = _this$getClassAndIcon.classNameContainer,
-          Icon = _this$getClassAndIcon.Icon,
-          iconClass = _this$getClassAndIcon.iconClass;
-
+        className = _this$getClassAndIcon.className,
+        Component = _this$getClassAndIcon.Component,
+        Container = _this$getClassAndIcon.Container,
+        Icon = _this$getClassAndIcon.Icon,
+        IconComponent = _this$getClassAndIcon.IconComponent;
+      var TokenComponent = Component || StyledToken;
       return /*#__PURE__*/_react["default"].createElement(Wrapper, {
         useWrapper: correct !== undefined || isMissing,
-        classNameContainer: classNameContainer,
-        iconClass: iconClass,
+        Container: Container,
+        IconComponent: IconComponent,
         Icon: Icon
-      }, /*#__PURE__*/_react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement(TokenComponent, {
         className: className,
         dangerouslySetInnerHTML: {
           __html: (text || '').replace(/\n/g, '<br>')
@@ -171,13 +230,9 @@ var Token = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-  return Token;
 }(_react["default"].Component);
-
-exports.Token = Token;
 (0, _defineProperty2["default"])(Token, "rootClassName", 'tokenRootClass');
 (0, _defineProperty2["default"])(Token, "propTypes", _objectSpread(_objectSpread({}, TokenTypes), {}, {
-  classes: _propTypes["default"].object.isRequired,
   text: _propTypes["default"].string.isRequired,
   className: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
@@ -188,89 +243,5 @@ exports.Token = Token;
   selectable: false,
   text: ''
 });
-
-var _default = (0, _styles.withStyles)(function (theme) {
-  return {
-    token: {
-      cursor: 'pointer',
-      textIndent: 0
-    },
-    disabled: {
-      cursor: 'inherit',
-      color: _renderUi.color.disabled()
-    },
-    disabledBlack: {
-      cursor: 'inherit'
-    },
-    disabledAndSelected: {
-      backgroundColor: _renderUi.color.blueGrey100()
-    },
-    selectable: (0, _defineProperty2["default"])({}, theme.breakpoints.up(769), {
-      '&:hover': {
-        backgroundColor: _renderUi.color.blueGrey300(),
-        color: theme.palette.common.black,
-        '& > *': {
-          backgroundColor: _renderUi.color.blueGrey300()
-        }
-      }
-    }),
-    selected: {
-      backgroundColor: _renderUi.color.blueGrey100(),
-      color: theme.palette.common.black,
-      lineHeight: "".concat(theme.spacing.unit * LINE_HEIGHT_MULTIPLIER, "px"),
-      border: "solid 2px ".concat(_renderUi.color.blueGrey900()),
-      borderRadius: '4px',
-      '& > *': {
-        backgroundColor: _renderUi.color.blueGrey100()
-      }
-    },
-    highlight: {
-      border: "dashed 2px ".concat(_renderUi.color.blueGrey600()),
-      borderRadius: '4px',
-      lineHeight: "".concat(theme.spacing.unit * LINE_HEIGHT_MULTIPLIER, "px")
-    },
-    print: {
-      border: "dashed 2px ".concat(_renderUi.color.blueGrey600()),
-      borderRadius: '4px',
-      lineHeight: "".concat(theme.spacing.unit * LINE_HEIGHT_MULTIPLIER, "px"),
-      color: _renderUi.color.text()
-    },
-    custom: {
-      display: 'initial'
-    },
-    commonTokenStyle: {
-      position: 'relative',
-      borderRadius: '4px',
-      color: theme.palette.common.black,
-      lineHeight: "".concat(theme.spacing.unit * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING, "px"),
-      padding: "".concat(CORRECTNESS_PADDING, "px")
-    },
-    correct: {
-      border: "".concat(_renderUi.color.correctTertiary(), " solid 2px")
-    },
-    incorrect: {
-      border: "".concat(_renderUi.color.incorrectWithIcon(), " solid 2px")
-    },
-    missing: {
-      border: "".concat(_renderUi.color.incorrectWithIcon(), " dashed 2px")
-    },
-    incorrectIcon: {
-      backgroundColor: _renderUi.color.incorrectWithIcon()
-    },
-    correctIcon: {
-      backgroundColor: _renderUi.color.correctTertiary()
-    },
-    correctnessIndicatorIcon: {
-      color: _renderUi.color.white(),
-      position: 'absolute',
-      top: '-8px',
-      left: '-8px',
-      borderRadius: '50%',
-      fontSize: '12px',
-      padding: '2px'
-    }
-  };
-})(Token);
-
-exports["default"] = _default;
+var _default = exports["default"] = Token;
 //# sourceMappingURL=token.js.map

package/lib/token-select/token.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/token-select/token.jsx"],"names":["LINE_HEIGHT_MULTIPLIER","CORRECTNESS_LINE_HEIGHT_MULTIPLIER","CORRECTNESS_PADDING","Wrapper","useWrapper","children","classNameContainer","iconClass","Icon","propTypes","PropTypes","bool","string","func","element","TokenTypes","text","selectable","Token","props","selected","classes","classNameProp","className","disabled","highlight","correct","animationsDisabled","isMissing","isTouchEnabled","window","navigator","maxTouchPoints","msMaxTouchPoints","baseClassName","rootClassName","undefined","token","disabledBlack","isCorrect","custom","incorrect","commonTokenStyle","Check","Close","correctnessIndicatorIcon","correctIcon","incorrectIcon","missing","disabledAndSelected","print","index","getClassAndIconConfig","__html","replace","React","Component","object","isRequired","theme","cursor","textIndent","color","backgroundColor","blueGrey100","breakpoints","up","blueGrey300","palette","common","black","lineHeight","spacing","unit","border","blueGrey900","borderRadius","blueGrey600","display","position","padding","correctTertiary","incorrectWithIcon","white","top","left","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Check from '@material-ui/icons/Check';\nimport Close from '@material-ui/icons/Close';\n\nimport { color } from '@pie-lib/render-ui';\n\n// we need to use a larger line height for the token to be more readable\nconst LINE_HEIGHT_MULTIPLIER = 3.2;\n// we need a bit more space for correctness indicators\nconst CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;\nconst CORRECTNESS_PADDING = 2;\n\nconst Wrapper = ({ useWrapper, children, classNameContainer, iconClass, Icon }) =>\n  useWrapper ? (\n    <span className={classNameContainer}>\n      {children}\n      <Icon className={iconClass} />\n    </span>\n  ) : (\n    children\n  );\n\nWrapper.propTypes = {\n  useWrapper: PropTypes.bool,\n  classNameContainer: PropTypes.string,\n  iconClass: PropTypes.string,\n  Icon: PropTypes.func,\n  children: PropTypes.element,\n};\n\nexport const TokenTypes = {\n  text: PropTypes.string,\n  selectable: PropTypes.bool,\n};\n\nexport class Token extends React.Component {\n  static rootClassName = 'tokenRootClass';\n\n  static propTypes = {\n    ...TokenTypes,\n    classes: PropTypes.object.isRequired,\n    text: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    highlight: PropTypes.bool,\n    correct: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    selectable: false,\n    text: '',\n  };\n\n  getClassAndIconConfig = () => {\n    const {\n      selectable,\n      selected,\n      classes,\n      className: classNameProp,\n      disabled,\n      highlight,\n      correct,\n      animationsDisabled,\n      isMissing,\n    } = this.props;\n    const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;\n    const baseClassName = Token.rootClassName;\n    let classNameContainer;\n    let Icon;\n    let iconClass;\n\n    if (correct === undefined && selected && disabled) {\n      return {\n        className: classNames(classes.token, classes.selected, classes.disabledBlack),\n      };\n    }\n\n    if (correct !== undefined) {\n      const isCorrect = correct === true;\n      return {\n        className: classNames(baseClassName, classes.custom),\n        classNameContainer: classNames(isCorrect ? classes.correct : classes.incorrect, classes.commonTokenStyle),\n        Icon: isCorrect ? Check : Close,\n        iconClass: classNames(\n          classes.correctnessIndicatorIcon,\n          isCorrect ? classes.correctIcon : classes.incorrectIcon,\n        ),\n      };\n    }\n\n    if (isMissing) {\n      return {\n        className: classNames(baseClassName, classes.custom, classes.missing, classes.commonTokenStyle),\n        classNameContainer: classes.commonTokenStyle,\n        Icon: Close,\n        iconClass: classNames(classes.correctnessIndicatorIcon, classes.incorrectIcon),\n      };\n    }\n\n    return {\n      className: classNames(\n        baseClassName,\n        classes.token,\n        disabled && classes.disabled,\n        selectable && !disabled && !isTouchEnabled && classes.selectable,\n        selected && !disabled && classes.selected,\n        selected && disabled && classes.disabledAndSelected,\n        highlight && selectable && !disabled && !selected && classes.highlight,\n        animationsDisabled && classes.print,\n        classNameProp,\n      ),\n      classNameContainer,\n      Icon,\n      iconClass,\n    };\n  };\n\n  render() {\n    const { text, index, correct, isMissing } = this.props;\n    const { className, classNameContainer, Icon, iconClass } = this.getClassAndIconConfig();\n\n    return (\n      <Wrapper\n        useWrapper={correct !== undefined || isMissing}\n        classNameContainer={classNameContainer}\n        iconClass={iconClass}\n        Icon={Icon}\n      >\n        <span\n          className={className}\n          dangerouslySetInnerHTML={{ __html: (text || '').replace(/\\n/g, '<br>') }}\n          data-indexkey={index}\n        />\n      </Wrapper>\n    );\n  }\n}\n\nexport default withStyles((theme) => {\n  return {\n    token: {\n      cursor: 'pointer',\n      textIndent: 0,\n    },\n    disabled: {\n      cursor: 'inherit',\n      color: color.disabled(),\n    },\n    disabledBlack: {\n      cursor: 'inherit',\n    },\n    disabledAndSelected: {\n      backgroundColor: color.blueGrey100(),\n    },\n    selectable: {\n      [theme.breakpoints.up(769)]: {\n        '&:hover': {\n          backgroundColor: color.blueGrey300(),\n          color: theme.palette.common.black,\n          '& > *': {\n            backgroundColor: color.blueGrey300(),\n          },\n        },\n      },\n    },\n    selected: {\n      backgroundColor: color.blueGrey100(),\n      color: theme.palette.common.black,\n      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,\n      border: `solid 2px ${color.blueGrey900()}`,\n      borderRadius: '4px',\n      '& > *': {\n        backgroundColor: color.blueGrey100(),\n      },\n    },\n    highlight: {\n      border: `dashed 2px ${color.blueGrey600()}`,\n      borderRadius: '4px',\n      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,\n    },\n    print: {\n      border: `dashed 2px ${color.blueGrey600()}`,\n      borderRadius: '4px',\n      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,\n      color: color.text(),\n    },\n    custom: {\n      display: 'initial',\n    },\n    commonTokenStyle: {\n      position: 'relative',\n      borderRadius: '4px',\n      color: theme.palette.common.black,\n      lineHeight: `${theme.spacing.unit * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,\n      padding: `${CORRECTNESS_PADDING}px`,\n    },\n    correct: {\n      border: `${color.correctTertiary()} solid 2px`,\n    },\n    incorrect: {\n      border: `${color.incorrectWithIcon()} solid 2px`,\n    },\n    missing: {\n      border: `${color.incorrectWithIcon()} dashed 2px`,\n    },\n    incorrectIcon: {\n      backgroundColor: color.incorrectWithIcon(),\n    },\n    correctIcon: {\n      backgroundColor: color.correctTertiary(),\n    },\n    correctnessIndicatorIcon: {\n      color: color.white(),\n      position: 'absolute',\n      top: '-8px',\n      left: '-8px',\n      borderRadius: '50%',\n      fontSize: '12px',\n      padding: '2px',\n    },\n  };\n})(Token);\n"],"file":"token.js"}
+{"version":3,"file":"token.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_classnames","_Check","_Close","_renderUi","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","Boolean","prototype","valueOf","call","LINE_HEIGHT_MULTIPLIER","CORRECTNESS_LINE_HEIGHT_MULTIPLIER","CORRECTNESS_PADDING","StyledToken","styled","_ref","theme","cursor","textIndent","color","disabled","backgroundColor","blueGrey100","concat","breakpoints","values","md","blueGrey300","palette","common","black","lineHeight","spacing","border","blueGrey900","borderRadius","blueGrey600","text","display","StyledCommonTokenStyle","_ref3","position","padding","StyledCorrectContainer","correctTertiary","StyledIncorrectContainer","incorrectWithIcon","StyledMissingContainer","StyledCorrectnessIcon","white","top","left","fontSize","StyledCorrectIcon","StyledIncorrectIcon","Wrapper","_ref4","useWrapper","children","Container","IconComponent","Icon","createElement","propTypes","PropTypes","bool","elementType","node","TokenTypes","exports","string","selectable","Token","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","_this$props","props","selected","classNameProp","className","highlight","correct","animationsDisabled","isMissing","isTouchEnabled","window","navigator","maxTouchPoints","msMaxTouchPoints","baseClassName","rootClassName","undefined","classNames","Component","isCorrect","Check","Close","_inherits2","_createClass2","key","value","render","_this$props2","index","_this$getClassAndIcon","getClassAndIconConfig","TokenComponent","dangerouslySetInnerHTML","__html","replace","React","isRequired","_default"],"sources":["../../src/token-select/token.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\nimport Check from '@mui/icons-material/Check';\nimport Close from '@mui/icons-material/Close';\n\nimport { color } from '@pie-lib/render-ui';\n\n// we need to use a larger line height for the token to be more readable\nconst LINE_HEIGHT_MULTIPLIER = 3.2;\n// we need a bit more space for correctness indicators\nconst CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;\nconst CORRECTNESS_PADDING = 2;\n\n// Styled components for different token states\nconst StyledToken = styled('span')(({ theme }) => ({\n  cursor: 'pointer',\n  textIndent: 0,\n  '&.disabled': {\n    cursor: 'inherit',\n    color: color.disabled(),\n  },\n  '&.disabledBlack': {\n    cursor: 'inherit',\n  },\n  '&.disabledAndSelected': {\n    backgroundColor: color.blueGrey100(),\n  },\n  [`@media (min-width: ${theme.breakpoints.values.md}px)`]: {\n    '&.selectable:hover': {\n      backgroundColor: color.blueGrey300(),\n      color: theme.palette.common.black,\n      '& > *': {\n        backgroundColor: color.blueGrey300(),\n      },\n    },\n  },\n  '&.selected': {\n    backgroundColor: color.blueGrey100(),\n    color: theme.palette.common.black,\n    lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,\n    border: `solid 2px ${color.blueGrey900()}`,\n    borderRadius: '4px',\n    '& > *': {\n      backgroundColor: color.blueGrey100(),\n    },\n  },\n  '&.highlight': {\n    border: `dashed 2px ${color.blueGrey600()}`,\n    borderRadius: '4px',\n    lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,\n  },\n  '&.print': {\n    border: `dashed 2px ${color.blueGrey600()}`,\n    borderRadius: '4px',\n    lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,\n    color: color.text(),\n  },\n  '&.custom': {\n    display: 'initial',\n  },\n}));\n\nconst StyledCommonTokenStyle = styled('span')(({ theme }) => ({\n  position: 'relative',\n  borderRadius: '4px',\n  color: theme.palette.common.black,\n  lineHeight: `${theme.spacing(1) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,\n  padding: `${CORRECTNESS_PADDING}px`,\n}));\n\nconst StyledCorrectContainer = styled(StyledCommonTokenStyle)(() => ({\n  border: `${color.correctTertiary()} solid 2px`,\n}));\n\nconst StyledIncorrectContainer = styled(StyledCommonTokenStyle)(() => ({\n  border: `${color.incorrectWithIcon()} solid 2px`,\n}));\n\nconst StyledMissingContainer = styled(StyledCommonTokenStyle)(() => ({\n  border: `${color.incorrectWithIcon()} dashed 2px`,\n}));\n\nconst StyledCorrectnessIcon = styled('span')(() => ({\n  color: color.white(),\n  position: 'absolute',\n  top: '-8px',\n  left: '-8px',\n  borderRadius: '50%',\n  fontSize: '12px',\n  padding: '2px',\n  display: 'inline-block',\n}));\n\nconst StyledCorrectIcon = styled(StyledCorrectnessIcon)(() => ({\n  backgroundColor: color.correctTertiary(),\n}));\n\nconst StyledIncorrectIcon = styled(StyledCorrectnessIcon)(() => ({\n  backgroundColor: color.incorrectWithIcon(),\n}));\n\nconst Wrapper = ({ useWrapper, children, Container, IconComponent, Icon }) =>\n  useWrapper ? (\n    <Container>\n      {children}\n      {Icon && IconComponent ? (\n        <IconComponent>\n          <Icon fontSize=\"inherit\" />\n        </IconComponent>\n      ) : null}\n    </Container>\n  ) : (\n    children\n  );\n\nWrapper.propTypes = {\n  useWrapper: PropTypes.bool,\n  Container: PropTypes.elementType,\n  IconComponent: PropTypes.elementType,\n  Icon: PropTypes.elementType,\n  children: PropTypes.node,\n};\n\nexport const TokenTypes = {\n  text: PropTypes.string,\n  selectable: PropTypes.bool,\n};\n\nexport class Token extends React.Component {\n  static rootClassName = 'tokenRootClass';\n\n  static propTypes = {\n    ...TokenTypes,\n    text: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    highlight: PropTypes.bool,\n    correct: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    selectable: false,\n    text: '',\n  };\n\n  getClassAndIconConfig = () => {\n    const {\n      selectable,\n      selected,\n      className: classNameProp,\n      disabled,\n      highlight,\n      correct,\n      animationsDisabled,\n      isMissing,\n    } = this.props;\n    const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;\n    const baseClassName = Token.rootClassName;\n    let Container;\n    let Icon;\n    let IconComponent;\n\n    if (correct === undefined && selected && disabled) {\n      return {\n        className: classNames(baseClassName, 'selected', 'disabledBlack', classNameProp),\n        Component: StyledToken,\n      };\n    }\n\n    if (correct !== undefined) {\n      const isCorrect = correct === true;\n      return {\n        className: classNames(baseClassName, 'custom', classNameProp),\n        Component: StyledToken,\n        Container: isCorrect ? StyledCorrectContainer : StyledIncorrectContainer,\n        Icon: isCorrect ? Check : Close,\n        IconComponent: isCorrect ? StyledCorrectIcon : StyledIncorrectIcon,\n      };\n    }\n\n    if (isMissing) {\n      return {\n        className: classNames(baseClassName, 'custom', 'missing', classNameProp),\n        Component: StyledToken,\n        Container: StyledMissingContainer,\n        Icon: Close,\n        IconComponent: StyledIncorrectIcon,\n      };\n    }\n\n    return {\n      className: classNames(\n        baseClassName,\n        disabled && 'disabled',\n        selectable && !disabled && !isTouchEnabled && 'selectable',\n        selected && !disabled && 'selected',\n        selected && disabled && 'disabledAndSelected',\n        highlight && selectable && !disabled && !selected && 'highlight',\n        animationsDisabled && 'print',\n        classNameProp,\n      ),\n      Component: StyledToken,\n      Container,\n      Icon,\n      IconComponent,\n    };\n  };\n\n  render() {\n    const { text, index, correct, isMissing } = this.props;\n    const { className, Component, Container, Icon, IconComponent } = this.getClassAndIconConfig();\n\n    const TokenComponent = Component || StyledToken;\n\n    return (\n      <Wrapper\n        useWrapper={correct !== undefined || isMissing}\n        Container={Container}\n        IconComponent={IconComponent}\n        Icon={Icon}\n      >\n        <TokenComponent\n          className={className}\n          dangerouslySetInnerHTML={{ __html: (text || '').replace(/\\n/g, '<br>') }}\n          data-indexkey={index}\n        />\n      </Wrapper>\n    );\n  }\n}\n\nexport default Token;\n"],"mappings":"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","ignoreList":[]}