@pie-lib/text-select 3.0.3 → 3.0.4

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@3.0.3...@pie-lib/text-select@3.0.4) (2026-06-12)
+
+### Bug Fixes
+
+- correct @emotion/style typo to @emotion/styled in package deps PIE-678 ([d529ac7](https://github.com/pie-framework/pie-lib/commit/d529ac7bc3dfa94d8037688452d4c70c66f2590b))
+- **text-select:** update selectable and selected class names to include 'token' suffix PIE-663 ([e25cc95](https://github.com/pie-framework/pie-lib/commit/e25cc951be4264595aae0d93a6d9e9832ace72ca))
+
 ## [3.0.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@3.0.2...@pie-lib/text-select@3.0.3) (2026-06-01)
 
 **Note:** Version bump only for package @pie-lib/text-select

package/lib/token-select/token.js

@@ -46,14 +46,14 @@ var StyledToken = (0, _styles.styled)('span')(function (_ref) {
       backgroundColor: _renderUi.color.blueGrey100()
     }
   }, "@media (min-width: ".concat(theme.breakpoints.values.md, "px)"), {
-    '&.selectable:hover': {
+    '&.selectableToken:hover': {
       backgroundColor: _renderUi.color.blueGrey300(),
       color: theme.palette.common.black,
       '& > *': {
         backgroundColor: _renderUi.color.blueGrey300()
       }
     }
-  }), '&.selected', {
+  }), '&.selectedToken', {
     backgroundColor: _renderUi.color.blueGrey100(),
     color: theme.palette.common.black,
     lineHeight: "".concat(parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER, "px"),
@@ -161,7 +161,7 @@ var Token = exports.Token = /*#__PURE__*/function (_React$Component) {
       var Icon;
       if (correct === undefined && selected && disabled) {
         return {
-          className: (0, _classnames["default"])(baseClassName, 'selected', 'disabledBlack', classNameProp),
+          className: (0, _classnames["default"])(baseClassName, 'selectedToken', 'disabledBlack', classNameProp),
           Component: StyledToken
         };
       }
@@ -183,7 +183,7 @@ var Token = exports.Token = /*#__PURE__*/function (_React$Component) {
         };
       }
       return {
-        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),
+        className: (0, _classnames["default"])(baseClassName, disabled && 'disabled', selectable && !disabled && !isTouchEnabled && 'selectableToken', selected && !disabled && 'selectedToken', selected && disabled && 'disabledAndSelected', highlight && selectable && !disabled && !selected && 'highlight', animationsDisabled && 'print', classNameProp),
         Component: StyledToken,
         Container: Container,
         Icon: Icon

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

@@ -1 +1 @@
-{"version":3,"file":"token.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_classnames","_Check","_Close","_renderUi","_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","LINE_HEIGHT_MULTIPLIER","CORRECTNESS_LINE_HEIGHT_MULTIPLIER","CORRECTNESS_PADDING","StyledToken","styled","_ref","theme","cursor","textIndent","color","disabled","pointerEvents","backgroundColor","blueGrey100","concat","breakpoints","values","md","blueGrey300","palette","common","black","lineHeight","parseFloat","spacing","border","blueGrey900","borderRadius","blueGrey600","text","display","StyledCommonTokenStyle","_ref3","position","padding","StyledCorrectContainer","correctTertiary","StyledIncorrectContainer","incorrectWithIcon","StyledMissingContainer","baseIconStyles","white","top","left","fontSize","StyledCorrectCheckIcon","Check","StyledIncorrectCloseIcon","Close","Wrapper","_ref4","useWrapper","children","Container","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","_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    pointerEvents: 'none',\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: `${parseFloat(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: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,\n  },\n  '&.print': {\n    border: `dashed 2px ${color.blueGrey600()}`,\n    borderRadius: '4px',\n    lineHeight: `${parseFloat(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: `${parseFloat(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 baseIconStyles = {\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 StyledCorrectCheckIcon = styled(Check)(() => ({\n  ...baseIconStyles,\n  backgroundColor: color.correctTertiary(),\n}));\n\nconst StyledIncorrectCloseIcon = styled(Close)(() => ({\n  ...baseIconStyles,\n  backgroundColor: color.incorrectWithIcon(),\n}));\n\nconst Wrapper = ({ useWrapper, children, Container, Icon }) =>\n  useWrapper ? (\n    <Container>\n      {children}\n      {Icon ? <Icon /> : null}\n    </Container>\n  ) : (\n    children\n  );\n\nWrapper.propTypes = {\n  useWrapper: PropTypes.bool,\n  Container: 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\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 ? StyledCorrectCheckIcon : StyledIncorrectCloseIcon,\n      };\n    }\n\n    if (isMissing) {\n      return {\n        className: classNames(baseClassName, 'custom', 'missing', classNameProp),\n        Component: StyledToken,\n        Container: StyledMissingContainer,\n        Icon: StyledIncorrectCloseIcon,\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    };\n  };\n\n  render() {\n    const { text, index, correct, isMissing } = this.props;\n    const { className, Component, Container, Icon } = this.getClassAndIconConfig();\n\n    const TokenComponent = Component || StyledToken;\n\n    return (\n      <Wrapper useWrapper={correct !== undefined || isMissing} Container={Container} Icon={Icon}>\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":[]}
+{"version":3,"file":"token.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_classnames","_Check","_Close","_renderUi","_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","LINE_HEIGHT_MULTIPLIER","CORRECTNESS_LINE_HEIGHT_MULTIPLIER","CORRECTNESS_PADDING","StyledToken","styled","_ref","theme","cursor","textIndent","color","disabled","pointerEvents","backgroundColor","blueGrey100","concat","breakpoints","values","md","blueGrey300","palette","common","black","lineHeight","parseFloat","spacing","border","blueGrey900","borderRadius","blueGrey600","text","display","StyledCommonTokenStyle","_ref3","position","padding","StyledCorrectContainer","correctTertiary","StyledIncorrectContainer","incorrectWithIcon","StyledMissingContainer","baseIconStyles","white","top","left","fontSize","StyledCorrectCheckIcon","Check","StyledIncorrectCloseIcon","Close","Wrapper","_ref4","useWrapper","children","Container","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","_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    pointerEvents: 'none',\n  },\n  '&.disabledAndSelected': {\n    backgroundColor: color.blueGrey100(),\n  },\n  [`@media (min-width: ${theme.breakpoints.values.md}px)`]: {\n    '&.selectableToken:hover': {\n      backgroundColor: color.blueGrey300(),\n      color: theme.palette.common.black,\n      '& > *': {\n        backgroundColor: color.blueGrey300(),\n      },\n    },\n  },\n  '&.selectedToken': {\n    backgroundColor: color.blueGrey100(),\n    color: theme.palette.common.black,\n    lineHeight: `${parseFloat(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: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,\n  },\n  '&.print': {\n    border: `dashed 2px ${color.blueGrey600()}`,\n    borderRadius: '4px',\n    lineHeight: `${parseFloat(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: `${parseFloat(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 baseIconStyles = {\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 StyledCorrectCheckIcon = styled(Check)(() => ({\n  ...baseIconStyles,\n  backgroundColor: color.correctTertiary(),\n}));\n\nconst StyledIncorrectCloseIcon = styled(Close)(() => ({\n  ...baseIconStyles,\n  backgroundColor: color.incorrectWithIcon(),\n}));\n\nconst Wrapper = ({ useWrapper, children, Container, Icon }) =>\n  useWrapper ? (\n    <Container>\n      {children}\n      {Icon ? <Icon /> : null}\n    </Container>\n  ) : (\n    children\n  );\n\nWrapper.propTypes = {\n  useWrapper: PropTypes.bool,\n  Container: 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\n    if (correct === undefined && selected && disabled) {\n      return {\n        className: classNames(baseClassName, 'selectedToken', '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 ? StyledCorrectCheckIcon : StyledIncorrectCloseIcon,\n      };\n    }\n\n    if (isMissing) {\n      return {\n        className: classNames(baseClassName, 'custom', 'missing', classNameProp),\n        Component: StyledToken,\n        Container: StyledMissingContainer,\n        Icon: StyledIncorrectCloseIcon,\n      };\n    }\n\n    return {\n      className: classNames(\n        baseClassName,\n        disabled && 'disabled',\n        selectable && !disabled && !isTouchEnabled && 'selectableToken',\n        selected && !disabled && 'selectedToken',\n        selected && disabled && 'disabledAndSelected',\n        highlight && selectable && !disabled && !selected && 'highlight',\n        animationsDisabled && 'print',\n        classNameProp,\n      ),\n      Component: StyledToken,\n      Container,\n      Icon,\n    };\n  };\n\n  render() {\n    const { text, index, correct, isMissing } = this.props;\n    const { className, Component, Container, Icon } = this.getClassAndIconConfig();\n\n    const TokenComponent = Component || StyledToken;\n\n    return (\n      <Wrapper useWrapper={correct !== undefined || isMissing} Container={Container} Icon={Icon}>\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":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Some react components for text selection",
   "keywords": [
     "react",
@@ -18,11 +18,11 @@
   "repository": "pie-framework/pie-lib",
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@emotion/style": "^0.8.0",
+    "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/render-ui": "^6.1.1",
+    "@pie-lib/render-ui": "^6.1.2",
     "@pie-lib/style-utils": "^2.0.2",
     "@pie-lib/translator": "^4.0.2",
     "classnames": "^2.2.6",
@@ -40,6 +40,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "381e012542b7849f83aa84b08e4b6664cedff245",
+  "gitHead": "3ab0bf122d0f08bbb365fd440e8556d9aacf3749",
   "scripts": {}
 }

package/src/token-select/__tests__/token.test.jsx

@@ -6,7 +6,7 @@ describe('token', () => {
   const defaultProps = {
     classes: {
       token: 'token',
-      selectable: 'selectable',
+      selectable: 'selectableToken',
     },
     text: 'foo bar',
   };
@@ -54,31 +54,31 @@ describe('token', () => {
   });
 
   describe('selectable state', () => {
-    it('applies selectable class when selectable is true', () => {
+    it('applies selectableToken class when selectable is true', () => {
       const { container } = render(<Token {...defaultProps} selectable={true} />);
-      expect(container.querySelector('.selectable')).toBeInTheDocument();
+      expect(container.querySelector('.selectableToken')).toBeInTheDocument();
     });
 
-    it('does not apply selectable class when selectable is false', () => {
+    it('does not apply selectableToken class when selectable is false', () => {
       const { container } = render(<Token {...defaultProps} selectable={false} />);
-      expect(container.querySelector('.selectable')).not.toBeInTheDocument();
+      expect(container.querySelector('.selectableToken')).not.toBeInTheDocument();
     });
 
-    it('does not apply selectable class when disabled', () => {
+    it('does not apply selectableToken class when disabled', () => {
       const { container } = render(<Token {...defaultProps} selectable={true} disabled={true} />);
-      expect(container.querySelector('.selectable')).not.toBeInTheDocument();
+      expect(container.querySelector('.selectableToken')).not.toBeInTheDocument();
     });
   });
 
   describe('selected state', () => {
-    it('applies selected class when selected is true', () => {
+    it('applies selectedToken class when selected is true', () => {
       const { container } = render(<Token {...defaultProps} selected={true} />);
-      expect(container.querySelector('.selected')).toBeInTheDocument();
+      expect(container.querySelector('.selectedToken')).toBeInTheDocument();
     });
 
-    it('does not apply selected class when selected is false', () => {
+    it('does not apply selectedToken class when selected is false', () => {
       const { container } = render(<Token {...defaultProps} selected={false} />);
-      expect(container.querySelector('.selected')).not.toBeInTheDocument();
+      expect(container.querySelector('.selectedToken')).not.toBeInTheDocument();
     });
 
     it('applies disabledBlack class when selected and disabled without correct prop', () => {
@@ -208,7 +208,7 @@ describe('token', () => {
   describe('className combinations', () => {
     it('combines multiple state classes', () => {
       const { container } = render(<Token {...defaultProps} selectable={true} selected={true} highlight={true} />);
-      expect(container.querySelector('.selected')).toBeInTheDocument();
+      expect(container.querySelector('.selectedToken')).toBeInTheDocument();
     });
 
     it('applies correct precedence for disabled and selected', () => {

package/src/token-select/token.jsx

@@ -29,7 +29,7 @@ const StyledToken = styled('span')(({ theme }) => ({
     backgroundColor: color.blueGrey100(),
   },
   [`@media (min-width: ${theme.breakpoints.values.md}px)`]: {
-    '&.selectable:hover': {
+    '&.selectableToken:hover': {
       backgroundColor: color.blueGrey300(),
       color: theme.palette.common.black,
       '& > *': {
@@ -37,7 +37,7 @@ const StyledToken = styled('span')(({ theme }) => ({
       },
     },
   },
-  '&.selected': {
+  '&.selectedToken': {
     backgroundColor: color.blueGrey100(),
     color: theme.palette.common.black,
     lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
@@ -161,7 +161,7 @@ export class Token extends React.Component {
 
     if (correct === undefined && selected && disabled) {
       return {
-        className: classNames(baseClassName, 'selected', 'disabledBlack', classNameProp),
+        className: classNames(baseClassName, 'selectedToken', 'disabledBlack', classNameProp),
         Component: StyledToken,
       };
     }
@@ -189,8 +189,8 @@ export class Token extends React.Component {
       className: classNames(
         baseClassName,
         disabled && 'disabled',
-        selectable && !disabled && !isTouchEnabled && 'selectable',
-        selected && !disabled && 'selected',
+        selectable && !disabled && !isTouchEnabled && 'selectableToken',
+        selected && !disabled && 'selectedToken',
         selected && disabled && 'disabledAndSelected',
         highlight && selectable && !disabled && !selected && 'highlight',
         animationsDisabled && 'print',