@atlaskit/eslint-plugin-design-system 13.29.2 → 13.30.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.30.0
+
+### Minor Changes
+
+- [`24edc07c201e2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/24edc07c201e2) -
+  `use-tokens-typography` now only matches and supports tokens from the refreshed typography theme.
+  Changes include:
+  - `font.body.UNSAFE_small` will no longer be suggested in autofixes.
+  - Both 11px and 12px will now be autofixed to the `font.body.small` token.
+  - Heading tokens will only be suggested if bold font weights (700 or 653) are used.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.29.3
+
+### Patch Changes
+
+- [`da8c77a7aa301`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/da8c77a7aa301) -
+  Update the use-character-counter-field rule to include guidance for when to use the standalone
+  character counter component
+
 ## 13.29.2
 
 ### Patch Changes

package/README.md

@@ -98,7 +98,7 @@ module.exports = {
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-utility-icons/README.md">no-utility-icons</a>                                                                           | Disallow use of deprecated utility icons, in favor of core icons with `size="small"`.                                                                                                                                                                                                                               | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/prefer-primitives/README.md">prefer-primitives</a>                                                                         | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-button-group-label/README.md">use-button-group-label</a>                                                               | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |
-| <a href="./packages/design-system/eslint-plugin/src/rules/use-character-counter-field/README.md">use-character-counter-field</a>                                                     | Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props within a Form.                                                                                                                                                                                         | Yes         |         |             |
+| <a href="./packages/design-system/eslint-plugin/src/rules/use-character-counter-field/README.md">use-character-counter-field</a>                                                     | Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props.                                                                                                                                                                                   | Yes         |         |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-correct-field/README.md">use-correct-field</a>                                                                         | Ensure makers use appropriate field component for their respective form elements.                                                                                                                                                                                                                                   | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-cx-function-in-xcss/README.md">use-cx-function-in-xcss</a>                                                             | Enforces cx function use to combine styles in xcss.                                                                                                                                                                                                                                                                 | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-datetime-picker-calendar-button/README.md">use-datetime-picker-calendar-button</a>                                     | Encourages makers to use calendar button in Atlassian Design System's date picker and datetime picker components.                                                                                                                                                                                                   | Yes         | Yes     | Yes         |

package/dist/cjs/rules/no-deprecated-imports/checks.js

@@ -14,6 +14,14 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var createChecks = exports.createChecks = function createChecks(context) {
   var deprecatedIconHandler = (0, _icon.getDeprecationIconHandler)(context);
+  var cachedConfig = function (_context$options$) {
+    var config = ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || (0, _getDeprecatedConfig.getConfig)('imports');
+    if (!(0, _types.isDeprecatedImportConfig)(config)) {
+      throw new Error('Config is invalid for deprecated imports');
+    }
+    return config;
+  }();
+  var deprecatedImportSources = new Set(Object.keys(cachedConfig));
   var throwErrors = function throwErrors() {
     deprecatedIconHandler.throwErrors();
   };
@@ -33,20 +41,14 @@ var createChecks = exports.createChecks = function createChecks(context) {
    * @private
    */
   function checkRestrictedPathAndReport(_ref) {
-    var _context$options$;
     var importSource = _ref.importSource,
       type = _ref.type,
       node = _ref.node,
       importNames = _ref.importNames;
-    var restrictedPathMessages =
-    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
-    ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || (0, _getDeprecatedConfig.getConfig)('imports');
-    if (!(0, _types.isDeprecatedImportConfig)(restrictedPathMessages)) {
-      throw new Error('Config is invalid for deprecated imports');
-    }
-    if (!Object.prototype.hasOwnProperty.call(restrictedPathMessages, importSource)) {
+    if (!deprecatedImportSources.has(importSource)) {
       return;
     }
+    var restrictedPathMessages = cachedConfig;
     var config = restrictedPathMessages[importSource];
     var handler = getHandler(importSource);
     if (handler) {

package/dist/cjs/rules/no-deprecated-imports/handlers/icon.js

@@ -24,6 +24,7 @@ var getDeprecationIconHandler = exports.getDeprecationIconHandler = function get
   var identifiers = new Map();
   var importErrors = {};
   var exportErrors = {};
+  var iconNameToImportSource = new Map();
   var getConfigFlag = function getConfigFlag(key, defaultValue) {
     if (context.options && context.options.length > 0 && context.options[0] && context.options[0].hasOwnProperty(key)) {
       return context.options[0][key] === !defaultValue ? !defaultValue : defaultValue;
@@ -40,6 +41,7 @@ var getDeprecationIconHandler = exports.getDeprecationIconHandler = function get
       importSource = _ref.importSource,
       config = _ref.config;
     if (config.message) {
+      var _node$specifiers$;
       var myError = {
         node: node,
         messageId: _constants.pathWithCustomMessageId,
@@ -50,6 +52,10 @@ var getDeprecationIconHandler = exports.getDeprecationIconHandler = function get
         }
       };
       importErrors[node.source.value] = myError;
+      var importIconName = (_node$specifiers$ = node.specifiers[0]) === null || _node$specifiers$ === void 0 || (_node$specifiers$ = _node$specifiers$.local) === null || _node$specifiers$ === void 0 ? void 0 : _node$specifiers$.name;
+      if (importIconName) {
+        iconNameToImportSource.set(importIconName, importSource);
+      }
     }
   };
   var createExportError = function createExportError(_ref2) {
@@ -166,20 +172,14 @@ var getDeprecationIconHandler = exports.getDeprecationIconHandler = function get
     if (!('openingElement' in node) || !(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
       return;
     }
-    for (var _i3 = 0, _Object$entries2 = Object.entries(importErrors); _i3 < _Object$entries2.length; _i3++) {
-      var _Object$entries2$_i = (0, _slicedToArray2.default)(_Object$entries2[_i3], 2),
-        importSource = _Object$entries2$_i[0],
-        error = _Object$entries2$_i[1];
-      var importIconName = error.node.specifiers[0].local.name;
-      var iconName = node.openingElement.name.name;
-      if (iconName === importIconName) {
-        if (jsxElements.has(importSource)) {
-          var _jsxElements$get;
-          (_jsxElements$get = jsxElements.get(importSource)) === null || _jsxElements$get === void 0 || _jsxElements$get.push(node);
-        } else {
-          jsxElements.set(importSource, [node]);
-        }
-        break;
+    var iconName = node.openingElement.name.name;
+    var importSource = iconNameToImportSource.get(iconName);
+    if (importSource) {
+      if (jsxElements.has(importSource)) {
+        var _jsxElements$get;
+        (_jsxElements$get = jsxElements.get(importSource)) === null || _jsxElements$get === void 0 || _jsxElements$get.push(node);
+      } else {
+        jsxElements.set(importSource, [node]);
       }
     }
   };
@@ -187,20 +187,14 @@ var getDeprecationIconHandler = exports.getDeprecationIconHandler = function get
     if (node.type !== 'Identifier' || node.parent.type !== 'JSXExpressionContainer') {
       return;
     }
-    for (var _i4 = 0, _Object$entries3 = Object.entries(importErrors); _i4 < _Object$entries3.length; _i4++) {
-      var _Object$entries3$_i = (0, _slicedToArray2.default)(_Object$entries3[_i4], 2),
-        importSource = _Object$entries3$_i[0],
-        error = _Object$entries3$_i[1];
-      var importIconName = error.node.specifiers[0].local.name;
-      var iconName = node.name;
-      if (iconName === importIconName) {
-        if (identifiers.has(importSource)) {
-          var _identifiers$get;
-          (_identifiers$get = identifiers.get(importSource)) === null || _identifiers$get === void 0 || _identifiers$get.push(node);
-        } else {
-          identifiers.set(importSource, [node]);
-        }
-        break;
+    var iconName = node.name;
+    var importSource = iconNameToImportSource.get(iconName);
+    if (importSource) {
+      if (identifiers.has(importSource)) {
+        var _identifiers$get;
+        (_identifiers$get = identifiers.get(importSource)) === null || _identifiers$get === void 0 || _identifiers$get.push(node);
+      } else {
+        identifiers.set(importSource, [node]);
       }
     }
   };

package/dist/cjs/rules/use-character-counter-field/index.js

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ruleName = exports.message = exports.default = void 0;
+exports.ruleName = exports.messageOutsideForm = exports.messageInsideForm = exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _jsxElement = require("../../ast-nodes/jsx-element");
 var _createRule = require("../utils/create-rule");
 var TEXTFIELD_PACKAGE = '@atlaskit/textfield';
 var TEXTAREA_PACKAGE = '@atlaskit/textarea';
 var FORM_PACKAGE = '@atlaskit/form';
-var message = exports.message = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)';
+var messageInsideForm = exports.messageInsideForm = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)';
+var messageOutsideForm = exports.messageOutsideForm = 'When using `maxLength` or `minLength` props with Textfield/Textarea, use `CharacterCounter` from `@atlaskit/form` alongside your input for real-time character count feedback. This ensures accessibility through screen reader announcements and visual feedback. Read more about [standalone character counter](https://atlassian.design/components/form/examples#standalone-charactercounter)';
 var ruleName = exports.ruleName = __dirname.split('/').slice(-1)[0];
 
 /**
@@ -58,12 +59,13 @@ var rule = (0, _createRule.createLintRule)({
     name: ruleName,
     type: 'suggestion',
     docs: {
-      description: 'Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props within a Form.',
+      description: 'Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props.',
       recommended: true,
       severity: 'warn'
     },
     messages: {
-      useCharacterCounterField: message
+      useCharacterCounterField: messageInsideForm,
+      useCharacterCounter: messageOutsideForm
     }
   },
   create: function create(context) {
@@ -124,12 +126,17 @@ var rule = (0, _createRule.createLintRule)({
         var hasMaxLength = _jsxElement.JSXElementHelper.getAttributeByName(node, 'maxLength');
         var hasMinLength = _jsxElement.JSXElementHelper.getAttributeByName(node, 'minLength');
         if (hasMaxLength || hasMinLength) {
-          // Only warn if inside a Form or Field component
+          // Use different messages based on whether inside Form context or not
           if (isInsideFormOrField(node, formComponentNames)) {
             context.report({
               node: node,
               messageId: 'useCharacterCounterField'
             });
+          } else {
+            context.report({
+              node: node,
+              messageId: 'useCharacterCounter'
+            });
           }
         }
       }

package/dist/cjs/rules/use-tokens-typography/transformers/style-object.js

@@ -95,12 +95,10 @@ var StyleObject = exports.StyleObject = {
       matchingTokens = (0, _utils2.findTypographyTokenForValues)(fontSizeValue, lineHeightValue);
       if (matchingTokens.length) {
         // If we have multiple matching tokens, try matching fontWeight
-        var matchingTokensWithWeight = matchingTokens.filter(function (token) {
-          return fontWeightValue ? token.values.fontWeight === fontWeightValue : token;
-        });
-        if (matchingTokensWithWeight.length) {
+        var matchingTokenWithWeight = (0, _utils2.findFontWeightTokenForValue)(fontWeightValue, matchingTokens);
+        if (matchingTokenWithWeight) {
           // Possibly narrowed down tokens
-          matchingTokens = matchingTokensWithWeight;
+          matchingTokens = [matchingTokenWithWeight];
         } else {
           // Ended up with 0 matches by matching fontWeight
           // return body token and add fontWeight manually

package/dist/cjs/rules/use-tokens-typography/utils.js

@@ -40,12 +40,16 @@ var isFontFamily = exports.isFontFamily = function isFontFamily(node) {
 var isCodeFontFamily = exports.isCodeFontFamily = function isCodeFontFamily(node) {
   return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
 };
-var typographyValueToToken = exports.typographyValueToToken = _tokensRaw.typographyAdg3
+var typographyValueToToken = exports.typographyValueToToken = _tokensRaw.typography
 // we're filtering here to remove the `font` tokens.
 .filter(function (t) {
   return t.attributes.group === 'typography';
 }).filter(function (t) {
   return t.cleanName.includes('font.heading') || t.cleanName.includes('font.body');
+})
+// Filtering out UNSAFE tokens that were meant for migrations, these tokens are deprecated and will be removed in the future
+.filter(function (t) {
+  return !t.cleanName.includes('UNSAFE');
 }).map(function (currentToken) {
   var _typographyPalette$fi, _typographyPalette$fi2, _typographyPalette$fi3;
   var individualValues = {
@@ -72,7 +76,7 @@ var typographyValueToToken = exports.typographyValueToToken = _tokensRaw.typogra
   };
 });
 function isValidTypographyToken(tokenName) {
-  return _tokensRaw.typographyAdg3.filter(function (t) {
+  return _tokensRaw.typography.filter(function (t) {
     return t.attributes.group === 'typography';
   }).filter(function (t) {
     return t.cleanName.includes('font.heading') || t.cleanName.includes('font.body') || t.cleanName.includes('font.code');
@@ -81,6 +85,10 @@ function isValidTypographyToken(tokenName) {
   });
 }
 function findTypographyTokenForValues(fontSize, lineHeight) {
+  // Match 11px to 12px as this is what happened when transitioning from legacy to refreshed typography
+  if (fontSize === '11px') {
+    fontSize = '12px';
+  }
   var matchingTokens = typographyValueToToken.filter(function (token) {
     return token.values.fontSize === fontSize;
   })
@@ -90,24 +98,29 @@ function findTypographyTokenForValues(fontSize, lineHeight) {
   });
   return matchingTokens;
 }
-var fontWeightTokens = exports.fontWeightTokens = _tokensRaw.typographyAdg3.filter(function (token) {
+var fontWeightTokens = exports.fontWeightTokens = _tokensRaw.typography.filter(function (token) {
   return token.attributes.group === 'fontWeight';
 }).map(function (token) {
   return {
     tokenName: token.cleanName,
     tokenValue: token.value,
-    values: {}
+    values: {
+      fontWeight: token.value
+    }
   };
 });
 function findFontWeightTokenForValue(fontWeight) {
+  var tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : fontWeightTokens;
   if (fontWeight === 'normal') {
     fontWeight = '400';
   }
-  if (fontWeight === 'bold') {
-    fontWeight = '700';
+
+  // Match bold and 700 to 653 to match with bold weight refreshed typography
+  if (fontWeight === 'bold' || fontWeight === '700') {
+    fontWeight = '653';
   }
-  return fontWeightTokens.find(function (token) {
-    return token.tokenValue === fontWeight;
+  return tokens.find(function (token) {
+    return token.values.fontWeight === fontWeight;
   });
 }
 var fontWeightMap = exports.fontWeightMap = {
@@ -117,7 +130,7 @@ var fontWeightMap = exports.fontWeightMap = {
   bold: '700'
 };
 var defaultFontWeight = exports.defaultFontWeight = fontWeightMap.regular;
-var fontFamilyTokens = exports.fontFamilyTokens = _tokensRaw.typographyAdg3.filter(function (token) {
+var fontFamilyTokens = exports.fontFamilyTokens = _tokensRaw.typography.filter(function (token) {
   return token.attributes.group === 'fontFamily';
 });
 function findFontFamilyValueForToken(tokenName) {

package/dist/es2019/rules/no-deprecated-imports/checks.js

@@ -5,6 +5,14 @@ import { importNameWithCustomMessageId, pathWithCustomMessageId } from './consta
 import { getDeprecationIconHandler } from './handlers/icon';
 export const createChecks = context => {
   const deprecatedIconHandler = getDeprecationIconHandler(context);
+  const cachedConfig = (_context$options$ => {
+    const config = ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || getConfig('imports');
+    if (!isDeprecatedImportConfig(config)) {
+      throw new Error('Config is invalid for deprecated imports');
+    }
+    return config;
+  })();
+  const deprecatedImportSources = new Set(Object.keys(cachedConfig));
   const throwErrors = () => {
     deprecatedIconHandler.throwErrors();
   };
@@ -29,16 +37,10 @@ export const createChecks = context => {
     node,
     importNames
   }) {
-    var _context$options$;
-    const restrictedPathMessages =
-    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
-    ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || getConfig('imports');
-    if (!isDeprecatedImportConfig(restrictedPathMessages)) {
-      throw new Error('Config is invalid for deprecated imports');
-    }
-    if (!Object.prototype.hasOwnProperty.call(restrictedPathMessages, importSource)) {
+    if (!deprecatedImportSources.has(importSource)) {
       return;
     }
+    const restrictedPathMessages = cachedConfig;
     const config = restrictedPathMessages[importSource];
     const handler = getHandler(importSource);
     if (handler) {

package/dist/es2019/rules/no-deprecated-imports/handlers/icon.js

@@ -13,6 +13,7 @@ export const getDeprecationIconHandler = context => {
   const identifiers = new Map();
   const importErrors = {};
   const exportErrors = {};
+  const iconNameToImportSource = new Map();
   const getConfigFlag = (key, defaultValue) => {
     if (context.options && context.options.length > 0 && context.options[0] && context.options[0].hasOwnProperty(key)) {
       return context.options[0][key] === !defaultValue ? !defaultValue : defaultValue;
@@ -28,6 +29,7 @@ export const getDeprecationIconHandler = context => {
     config
   }) => {
     if (config.message) {
+      var _node$specifiers$, _node$specifiers$$loc;
       const myError = {
         node,
         messageId: pathWithCustomMessageId,
@@ -38,6 +40,10 @@ export const getDeprecationIconHandler = context => {
         }
       };
       importErrors[node.source.value] = myError;
+      const importIconName = (_node$specifiers$ = node.specifiers[0]) === null || _node$specifiers$ === void 0 ? void 0 : (_node$specifiers$$loc = _node$specifiers$.local) === null || _node$specifiers$$loc === void 0 ? void 0 : _node$specifiers$$loc.name;
+      if (importIconName) {
+        iconNameToImportSource.set(importIconName, importSource);
+      }
     }
   };
   const createExportError = ({
@@ -121,17 +127,14 @@ export const getDeprecationIconHandler = context => {
     if (!('openingElement' in node) || !isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
       return;
     }
-    for (const [importSource, error] of Object.entries(importErrors)) {
-      let importIconName = error.node.specifiers[0].local.name;
-      const iconName = node.openingElement.name.name;
-      if (iconName === importIconName) {
-        if (jsxElements.has(importSource)) {
-          var _jsxElements$get;
-          (_jsxElements$get = jsxElements.get(importSource)) === null || _jsxElements$get === void 0 ? void 0 : _jsxElements$get.push(node);
-        } else {
-          jsxElements.set(importSource, [node]);
-        }
-        break;
+    const iconName = node.openingElement.name.name;
+    const importSource = iconNameToImportSource.get(iconName);
+    if (importSource) {
+      if (jsxElements.has(importSource)) {
+        var _jsxElements$get;
+        (_jsxElements$get = jsxElements.get(importSource)) === null || _jsxElements$get === void 0 ? void 0 : _jsxElements$get.push(node);
+      } else {
+        jsxElements.set(importSource, [node]);
       }
     }
   };
@@ -139,17 +142,14 @@ export const getDeprecationIconHandler = context => {
     if (node.type !== 'Identifier' || node.parent.type !== 'JSXExpressionContainer') {
       return;
     }
-    for (const [importSource, error] of Object.entries(importErrors)) {
-      let importIconName = error.node.specifiers[0].local.name;
-      const iconName = node.name;
-      if (iconName === importIconName) {
-        if (identifiers.has(importSource)) {
-          var _identifiers$get;
-          (_identifiers$get = identifiers.get(importSource)) === null || _identifiers$get === void 0 ? void 0 : _identifiers$get.push(node);
-        } else {
-          identifiers.set(importSource, [node]);
-        }
-        break;
+    const iconName = node.name;
+    const importSource = iconNameToImportSource.get(iconName);
+    if (importSource) {
+      if (identifiers.has(importSource)) {
+        var _identifiers$get;
+        (_identifiers$get = identifiers.get(importSource)) === null || _identifiers$get === void 0 ? void 0 : _identifiers$get.push(node);
+      } else {
+        identifiers.set(importSource, [node]);
       }
     }
   };

package/dist/es2019/rules/use-character-counter-field/index.js

@@ -4,7 +4,8 @@ import { createLintRule } from '../utils/create-rule';
 const TEXTFIELD_PACKAGE = '@atlaskit/textfield';
 const TEXTAREA_PACKAGE = '@atlaskit/textarea';
 const FORM_PACKAGE = '@atlaskit/form';
-export const message = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)';
+export const messageInsideForm = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)';
+export const messageOutsideForm = 'When using `maxLength` or `minLength` props with Textfield/Textarea, use `CharacterCounter` from `@atlaskit/form` alongside your input for real-time character count feedback. This ensures accessibility through screen reader announcements and visual feedback. Read more about [standalone character counter](https://atlassian.design/components/form/examples#standalone-charactercounter)';
 export const ruleName = __dirname.split('/').slice(-1)[0];
 
 /**
@@ -52,12 +53,13 @@ const rule = createLintRule({
     name: ruleName,
     type: 'suggestion',
     docs: {
-      description: 'Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props within a Form.',
+      description: 'Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props.',
       recommended: true,
       severity: 'warn'
     },
     messages: {
-      useCharacterCounterField: message
+      useCharacterCounterField: messageInsideForm,
+      useCharacterCounter: messageOutsideForm
     }
   },
   create(context) {
@@ -116,12 +118,17 @@ const rule = createLintRule({
         const hasMaxLength = JSXElementHelper.getAttributeByName(node, 'maxLength');
         const hasMinLength = JSXElementHelper.getAttributeByName(node, 'minLength');
         if (hasMaxLength || hasMinLength) {
-          // Only warn if inside a Form or Field component
+          // Use different messages based on whether inside Form context or not
           if (isInsideFormOrField(node, formComponentNames)) {
             context.report({
               node,
               messageId: 'useCharacterCounterField'
             });
+          } else {
+            context.report({
+              node,
+              messageId: 'useCharacterCounter'
+            });
           }
         }
       }

package/dist/es2019/rules/use-tokens-typography/transformers/style-object.js

@@ -91,10 +91,10 @@ export const StyleObject = {
       matchingTokens = findTypographyTokenForValues(fontSizeValue, lineHeightValue);
       if (matchingTokens.length) {
         // If we have multiple matching tokens, try matching fontWeight
-        let matchingTokensWithWeight = matchingTokens.filter(token => fontWeightValue ? token.values.fontWeight === fontWeightValue : token);
-        if (matchingTokensWithWeight.length) {
+        let matchingTokenWithWeight = findFontWeightTokenForValue(fontWeightValue, matchingTokens);
+        if (matchingTokenWithWeight) {
           // Possibly narrowed down tokens
-          matchingTokens = matchingTokensWithWeight;
+          matchingTokens = [matchingTokenWithWeight];
         } else {
           // Ended up with 0 matches by matching fontWeight
           // return body token and add fontWeight manually

package/dist/es2019/rules/use-tokens-typography/utils.js

@@ -1,6 +1,6 @@
 import { callExpression, identifier, isNodeOfType, literal, memberExpression, property } from 'eslint-codemod-utils';
 import { typographyPalette } from '@atlaskit/tokens/palettes-raw';
-import { typographyAdg3 as typographyTokens } from '@atlaskit/tokens/tokens-raw';
+import { typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
 import { Import, Root } from '../../ast-nodes';
 export const typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
 export const isTypographyProperty = propertyName => {
@@ -12,7 +12,9 @@ export const isFontFamily = node => isNodeOfType(node, 'CallExpression') && isNo
 export const isCodeFontFamily = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
 export const typographyValueToToken = typographyTokens
 // we're filtering here to remove the `font` tokens.
-.filter(t => t.attributes.group === 'typography').filter(t => t.cleanName.includes('font.heading') || t.cleanName.includes('font.body')).map(currentToken => {
+.filter(t => t.attributes.group === 'typography').filter(t => t.cleanName.includes('font.heading') || t.cleanName.includes('font.body'))
+// Filtering out UNSAFE tokens that were meant for migrations, these tokens are deprecated and will be removed in the future
+.filter(t => !t.cleanName.includes('UNSAFE')).map(currentToken => {
   var _typographyPalette$fi, _typographyPalette$fi2, _typographyPalette$fi3;
   const individualValues = {
     fontSize: (_typographyPalette$fi = typographyPalette.find(baseToken => baseToken.path.slice(-1)[0] ===
@@ -35,6 +37,10 @@ export function isValidTypographyToken(tokenName) {
   return typographyTokens.filter(t => t.attributes.group === 'typography').filter(t => t.cleanName.includes('font.heading') || t.cleanName.includes('font.body') || t.cleanName.includes('font.code')).find(t => t.cleanName === tokenName);
 }
 export function findTypographyTokenForValues(fontSize, lineHeight) {
+  // Match 11px to 12px as this is what happened when transitioning from legacy to refreshed typography
+  if (fontSize === '11px') {
+    fontSize = '12px';
+  }
   let matchingTokens = typographyValueToToken.filter(token => token.values.fontSize === fontSize)
   // If lineHeight == 1, we don't match to a token
   .filter(() => lineHeight === '1' ? false : true);
@@ -44,17 +50,21 @@ export const fontWeightTokens = typographyTokens.filter(token => token.attribute
   return {
     tokenName: token.cleanName,
     tokenValue: token.value,
-    values: {}
+    values: {
+      fontWeight: token.value
+    }
   };
 });
-export function findFontWeightTokenForValue(fontWeight) {
+export function findFontWeightTokenForValue(fontWeight, tokens = fontWeightTokens) {
   if (fontWeight === 'normal') {
     fontWeight = '400';
   }
-  if (fontWeight === 'bold') {
-    fontWeight = '700';
+
+  // Match bold and 700 to 653 to match with bold weight refreshed typography
+  if (fontWeight === 'bold' || fontWeight === '700') {
+    fontWeight = '653';
   }
-  return fontWeightTokens.find(token => token.tokenValue === fontWeight);
+  return tokens.find(token => token.values.fontWeight === fontWeight);
 }
 export const fontWeightMap = {
   regular: '400',

package/dist/esm/rules/no-deprecated-imports/checks.js

@@ -8,6 +8,14 @@ import { importNameWithCustomMessageId, pathWithCustomMessageId } from './consta
 import { getDeprecationIconHandler } from './handlers/icon';
 export var createChecks = function createChecks(context) {
   var deprecatedIconHandler = getDeprecationIconHandler(context);
+  var cachedConfig = function (_context$options$) {
+    var config = ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || getConfig('imports');
+    if (!isDeprecatedImportConfig(config)) {
+      throw new Error('Config is invalid for deprecated imports');
+    }
+    return config;
+  }();
+  var deprecatedImportSources = new Set(Object.keys(cachedConfig));
   var throwErrors = function throwErrors() {
     deprecatedIconHandler.throwErrors();
   };
@@ -27,20 +35,14 @@ export var createChecks = function createChecks(context) {
    * @private
    */
   function checkRestrictedPathAndReport(_ref) {
-    var _context$options$;
     var importSource = _ref.importSource,
       type = _ref.type,
       node = _ref.node,
       importNames = _ref.importNames;
-    var restrictedPathMessages =
-    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
-    ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || getConfig('imports');
-    if (!isDeprecatedImportConfig(restrictedPathMessages)) {
-      throw new Error('Config is invalid for deprecated imports');
-    }
-    if (!Object.prototype.hasOwnProperty.call(restrictedPathMessages, importSource)) {
+    if (!deprecatedImportSources.has(importSource)) {
       return;
     }
+    var restrictedPathMessages = cachedConfig;
     var config = restrictedPathMessages[importSource];
     var handler = getHandler(importSource);
     if (handler) {

package/dist/esm/rules/no-deprecated-imports/handlers/icon.js

@@ -17,6 +17,7 @@ export var getDeprecationIconHandler = function getDeprecationIconHandler(contex
   var identifiers = new Map();
   var importErrors = {};
   var exportErrors = {};
+  var iconNameToImportSource = new Map();
   var getConfigFlag = function getConfigFlag(key, defaultValue) {
     if (context.options && context.options.length > 0 && context.options[0] && context.options[0].hasOwnProperty(key)) {
       return context.options[0][key] === !defaultValue ? !defaultValue : defaultValue;
@@ -33,6 +34,7 @@ export var getDeprecationIconHandler = function getDeprecationIconHandler(contex
       importSource = _ref.importSource,
       config = _ref.config;
     if (config.message) {
+      var _node$specifiers$;
       var myError = {
         node: node,
         messageId: pathWithCustomMessageId,
@@ -43,6 +45,10 @@ export var getDeprecationIconHandler = function getDeprecationIconHandler(contex
         }
       };
       importErrors[node.source.value] = myError;
+      var importIconName = (_node$specifiers$ = node.specifiers[0]) === null || _node$specifiers$ === void 0 || (_node$specifiers$ = _node$specifiers$.local) === null || _node$specifiers$ === void 0 ? void 0 : _node$specifiers$.name;
+      if (importIconName) {
+        iconNameToImportSource.set(importIconName, importSource);
+      }
     }
   };
   var createExportError = function createExportError(_ref2) {
@@ -159,20 +165,14 @@ export var getDeprecationIconHandler = function getDeprecationIconHandler(contex
     if (!('openingElement' in node) || !isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
       return;
     }
-    for (var _i3 = 0, _Object$entries2 = Object.entries(importErrors); _i3 < _Object$entries2.length; _i3++) {
-      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i3], 2),
-        importSource = _Object$entries2$_i[0],
-        error = _Object$entries2$_i[1];
-      var importIconName = error.node.specifiers[0].local.name;
-      var iconName = node.openingElement.name.name;
-      if (iconName === importIconName) {
-        if (jsxElements.has(importSource)) {
-          var _jsxElements$get;
-          (_jsxElements$get = jsxElements.get(importSource)) === null || _jsxElements$get === void 0 || _jsxElements$get.push(node);
-        } else {
-          jsxElements.set(importSource, [node]);
-        }
-        break;
+    var iconName = node.openingElement.name.name;
+    var importSource = iconNameToImportSource.get(iconName);
+    if (importSource) {
+      if (jsxElements.has(importSource)) {
+        var _jsxElements$get;
+        (_jsxElements$get = jsxElements.get(importSource)) === null || _jsxElements$get === void 0 || _jsxElements$get.push(node);
+      } else {
+        jsxElements.set(importSource, [node]);
       }
     }
   };
@@ -180,20 +180,14 @@ export var getDeprecationIconHandler = function getDeprecationIconHandler(contex
     if (node.type !== 'Identifier' || node.parent.type !== 'JSXExpressionContainer') {
       return;
     }
-    for (var _i4 = 0, _Object$entries3 = Object.entries(importErrors); _i4 < _Object$entries3.length; _i4++) {
-      var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i4], 2),
-        importSource = _Object$entries3$_i[0],
-        error = _Object$entries3$_i[1];
-      var importIconName = error.node.specifiers[0].local.name;
-      var iconName = node.name;
-      if (iconName === importIconName) {
-        if (identifiers.has(importSource)) {
-          var _identifiers$get;
-          (_identifiers$get = identifiers.get(importSource)) === null || _identifiers$get === void 0 || _identifiers$get.push(node);
-        } else {
-          identifiers.set(importSource, [node]);
-        }
-        break;
+    var iconName = node.name;
+    var importSource = iconNameToImportSource.get(iconName);
+    if (importSource) {
+      if (identifiers.has(importSource)) {
+        var _identifiers$get;
+        (_identifiers$get = identifiers.get(importSource)) === null || _identifiers$get === void 0 || _identifiers$get.push(node);
+      } else {
+        identifiers.set(importSource, [node]);
       }
     }
   };

package/dist/esm/rules/use-character-counter-field/index.js

@@ -4,7 +4,8 @@ import { createLintRule } from '../utils/create-rule';
 var TEXTFIELD_PACKAGE = '@atlaskit/textfield';
 var TEXTAREA_PACKAGE = '@atlaskit/textarea';
 var FORM_PACKAGE = '@atlaskit/form';
-export var message = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)';
+export var messageInsideForm = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)';
+export var messageOutsideForm = 'When using `maxLength` or `minLength` props with Textfield/Textarea, use `CharacterCounter` from `@atlaskit/form` alongside your input for real-time character count feedback. This ensures accessibility through screen reader announcements and visual feedback. Read more about [standalone character counter](https://atlassian.design/components/form/examples#standalone-charactercounter)';
 export var ruleName = __dirname.split('/').slice(-1)[0];
 
 /**
@@ -52,12 +53,13 @@ var rule = createLintRule({
     name: ruleName,
     type: 'suggestion',
     docs: {
-      description: 'Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props within a Form.',
+      description: 'Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props.',
       recommended: true,
       severity: 'warn'
     },
     messages: {
-      useCharacterCounterField: message
+      useCharacterCounterField: messageInsideForm,
+      useCharacterCounter: messageOutsideForm
     }
   },
   create: function create(context) {
@@ -118,12 +120,17 @@ var rule = createLintRule({
         var hasMaxLength = JSXElementHelper.getAttributeByName(node, 'maxLength');
         var hasMinLength = JSXElementHelper.getAttributeByName(node, 'minLength');
         if (hasMaxLength || hasMinLength) {
-          // Only warn if inside a Form or Field component
+          // Use different messages based on whether inside Form context or not
           if (isInsideFormOrField(node, formComponentNames)) {
             context.report({
               node: node,
               messageId: 'useCharacterCounterField'
             });
+          } else {
+            context.report({
+              node: node,
+              messageId: 'useCharacterCounter'
+            });
           }
         }
       }

package/dist/esm/rules/use-tokens-typography/transformers/style-object.js

@@ -90,12 +90,10 @@ export var StyleObject = {
       matchingTokens = findTypographyTokenForValues(fontSizeValue, lineHeightValue);
       if (matchingTokens.length) {
         // If we have multiple matching tokens, try matching fontWeight
-        var matchingTokensWithWeight = matchingTokens.filter(function (token) {
-          return fontWeightValue ? token.values.fontWeight === fontWeightValue : token;
-        });
-        if (matchingTokensWithWeight.length) {
+        var matchingTokenWithWeight = findFontWeightTokenForValue(fontWeightValue, matchingTokens);
+        if (matchingTokenWithWeight) {
           // Possibly narrowed down tokens
-          matchingTokens = matchingTokensWithWeight;
+          matchingTokens = [matchingTokenWithWeight];
         } else {
           // Ended up with 0 matches by matching fontWeight
           // return body token and add fontWeight manually

package/dist/esm/rules/use-tokens-typography/utils.js

@@ -1,6 +1,6 @@
 import { callExpression, identifier, isNodeOfType, literal, memberExpression, property } from 'eslint-codemod-utils';
 import { typographyPalette } from '@atlaskit/tokens/palettes-raw';
-import { typographyAdg3 as typographyTokens } from '@atlaskit/tokens/tokens-raw';
+import { typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
 import { Import, Root } from '../../ast-nodes';
 export var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
 export var isTypographyProperty = function isTypographyProperty(propertyName) {
@@ -24,6 +24,10 @@ export var typographyValueToToken = typographyTokens
   return t.attributes.group === 'typography';
 }).filter(function (t) {
   return t.cleanName.includes('font.heading') || t.cleanName.includes('font.body');
+})
+// Filtering out UNSAFE tokens that were meant for migrations, these tokens are deprecated and will be removed in the future
+.filter(function (t) {
+  return !t.cleanName.includes('UNSAFE');
 }).map(function (currentToken) {
   var _typographyPalette$fi, _typographyPalette$fi2, _typographyPalette$fi3;
   var individualValues = {
@@ -59,6 +63,10 @@ export function isValidTypographyToken(tokenName) {
   });
 }
 export function findTypographyTokenForValues(fontSize, lineHeight) {
+  // Match 11px to 12px as this is what happened when transitioning from legacy to refreshed typography
+  if (fontSize === '11px') {
+    fontSize = '12px';
+  }
   var matchingTokens = typographyValueToToken.filter(function (token) {
     return token.values.fontSize === fontSize;
   })
@@ -74,18 +82,23 @@ export var fontWeightTokens = typographyTokens.filter(function (token) {
   return {
     tokenName: token.cleanName,
     tokenValue: token.value,
-    values: {}
+    values: {
+      fontWeight: token.value
+    }
   };
 });
 export function findFontWeightTokenForValue(fontWeight) {
+  var tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : fontWeightTokens;
   if (fontWeight === 'normal') {
     fontWeight = '400';
   }
-  if (fontWeight === 'bold') {
-    fontWeight = '700';
+
+  // Match bold and 700 to 653 to match with bold weight refreshed typography
+  if (fontWeight === 'bold' || fontWeight === '700') {
+    fontWeight = '653';
   }
-  return fontWeightTokens.find(function (token) {
-    return token.tokenValue === fontWeight;
+  return tokens.find(function (token) {
+    return token.values.fontWeight === fontWeight;
   });
 }
 export var fontWeightMap = {

package/dist/types/rules/use-character-counter-field/index.d.ts

@@ -1,5 +1,6 @@
 import type { Rule } from 'eslint';
-export declare const message = "When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)";
+export declare const messageInsideForm = "When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)";
+export declare const messageOutsideForm = "When using `maxLength` or `minLength` props with Textfield/Textarea, use `CharacterCounter` from `@atlaskit/form` alongside your input for real-time character count feedback. This ensures accessibility through screen reader announcements and visual feedback. Read more about [standalone character counter](https://atlassian.design/components/form/examples#standalone-charactercounter)";
 export declare const ruleName: string;
 declare const rule: Rule.RuleModule;
 export default rule;

package/dist/types/rules/use-tokens-typography/utils.d.ts

@@ -1,6 +1,6 @@
 import type { Rule } from 'eslint';
 import { type CallExpression, type Directive, type EslintNode, type ImportDeclaration, type ModuleDeclaration, type Property, type Statement, type StringableASTNode } from 'eslint-codemod-utils';
-import { typographyAdg3 as typographyTokens } from '@atlaskit/tokens/tokens-raw';
+import { typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
 export declare const typographyProperties: string[];
 export declare const isTypographyProperty: (propertyName: string) => boolean;
 export declare const isFontSize: (node: EslintNode) => node is CallExpression;
@@ -52,16 +52,8 @@ export declare function isValidTypographyToken(tokenName: string): {
     cleanName: string;
 } | undefined;
 export declare function findTypographyTokenForValues(fontSize: string, lineHeight?: string): TokenValueMap[];
-export declare const fontWeightTokens: {
-    tokenName: string;
-    tokenValue: string;
-    values: {};
-}[];
-export declare function findFontWeightTokenForValue(fontWeight: string): {
-    tokenName: string;
-    tokenValue: string;
-    values: {};
-} | undefined;
+export declare const fontWeightTokens: TokenValueMap[];
+export declare function findFontWeightTokenForValue(fontWeight: string, tokens?: TokenValueMap[]): TokenValueMap | undefined;
 export declare const fontWeightMap: FontWeightMap;
 export type FontWeightMap = {
     regular: string;

package/dist/types-ts4.5/rules/use-character-counter-field/index.d.ts

@@ -1,5 +1,6 @@
 import type { Rule } from 'eslint';
-export declare const message = "When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)";
+export declare const messageInsideForm = "When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)";
+export declare const messageOutsideForm = "When using `maxLength` or `minLength` props with Textfield/Textarea, use `CharacterCounter` from `@atlaskit/form` alongside your input for real-time character count feedback. This ensures accessibility through screen reader announcements and visual feedback. Read more about [standalone character counter](https://atlassian.design/components/form/examples#standalone-charactercounter)";
 export declare const ruleName: string;
 declare const rule: Rule.RuleModule;
 export default rule;

package/dist/types-ts4.5/rules/use-tokens-typography/utils.d.ts

@@ -1,6 +1,6 @@
 import type { Rule } from 'eslint';
 import { type CallExpression, type Directive, type EslintNode, type ImportDeclaration, type ModuleDeclaration, type Property, type Statement, type StringableASTNode } from 'eslint-codemod-utils';
-import { typographyAdg3 as typographyTokens } from '@atlaskit/tokens/tokens-raw';
+import { typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
 export declare const typographyProperties: string[];
 export declare const isTypographyProperty: (propertyName: string) => boolean;
 export declare const isFontSize: (node: EslintNode) => node is CallExpression;
@@ -52,16 +52,8 @@ export declare function isValidTypographyToken(tokenName: string): {
     cleanName: string;
 } | undefined;
 export declare function findTypographyTokenForValues(fontSize: string, lineHeight?: string): TokenValueMap[];
-export declare const fontWeightTokens: {
-    tokenName: string;
-    tokenValue: string;
-    values: {};
-}[];
-export declare function findFontWeightTokenForValue(fontWeight: string): {
-    tokenName: string;
-    tokenValue: string;
-    values: {};
-} | undefined;
+export declare const fontWeightTokens: TokenValueMap[];
+export declare function findFontWeightTokenForValue(fontWeight: string, tokens?: TokenValueMap[]): TokenValueMap | undefined;
 export declare const fontWeightMap: FontWeightMap;
 export type FontWeightMap = {
     regular: string;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
 	"description": "The essential plugin for use with the Atlassian Design System.",
-	"version": "13.29.2",
+	"version": "13.30.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -41,7 +41,7 @@
 		"@atlaskit/eslint-utils": "^2.0.0",
 		"@atlaskit/icon": "^29.3.0",
 		"@atlaskit/icon-lab": "^5.13.0",
-		"@atlaskit/tokens": "^9.0.0",
+		"@atlaskit/tokens": "^9.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@typescript-eslint/utils": "^7.1.0",
 		"ajv": "^6.12.6",