@atlaskit/inline-edit 12.0.8 → 12.1.3

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @atlaskit/inline-edit
 
+## 12.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.0
+
+### Minor Changes
+
+- [`5c29b7f70ff`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c29b7f70ff) - Instrumented Inline-edit with the new theming package, `@atlaskit/tokens`.
+
+  Tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.0.8
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.0.7
+
+### Patch Changes
+
+- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+
 ## 12.0.8
 
 ### Patch Changes

package/dist/cjs/entry-points/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/inline-edit.js

@@ -48,7 +48,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.0.8"
+  packageVersion: "12.1.3"
 };
 
 var noop = function noop() {};

package/dist/cjs/inline-editable-textfield.js

@@ -21,6 +21,8 @@ var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _inlineEdit = _interopRequireDefault(require("./inline-edit"));
 
 var _styles = require("./internal/styles");
@@ -49,7 +51,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
           css: _styles.errorIconContainerStyles
         }, (0, _core.jsx)(_error.default, {
           label: "error",
-          primaryColor: _colors.R400
+          primaryColor: (0, _tokens.token)('color.iconBorder.danger', _colors.R400)
         })),
         testId: testId,
         isCompact: isCompact,

package/dist/cjs/internal/styles.js

@@ -1,36 +1,22 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.readViewWrapperStyles = exports.readViewContainerStyles = exports.readViewForTextFieldStyles = exports.errorIconContainerStyles = exports.editButtonStyles = exports.getButtonWrapperStyles = exports.buttonsContainerStyles = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var _tokens = require("@atlaskit/tokens");
 
 var spacingUnit = (0, _constants.gridSize)();
 var fontSizeUnit = (0, _constants.fontSize)();
 var elevations = {
-  light: [_colors.N50A, _colors.N60A],
-  dark: [_colors.DN50A, _colors.DN60A]
-};
-
-var getElevationStyleForMode = function getElevationStyleForMode(mode) {
-  var colors = elevations[mode];
-  return {
-    boxShadow: "0 4px 8px -2px ".concat(colors[0], ", 0 0 1px ").concat(colors[1])
-  };
+  light: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
+  dark: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A))
 };
-
 var buttonsContainerStyles = {
   display: 'flex',
   flexShrink: 0,
@@ -42,8 +28,9 @@ var buttonsContainerStyles = {
 exports.buttonsContainerStyles = buttonsContainerStyles;
 
 var getButtonWrapperStyles = function getButtonWrapperStyles(mode) {
-  return _objectSpread(_objectSpread({}, getElevationStyleForMode(mode)), {}, {
-    backgroundColor: '#FFFFFF',
+  return {
+    boxShadow: elevations[mode],
+    backgroundColor: (0, _tokens.token)('color.background.overlay', _colors.N0),
     width: spacingUnit * 4,
     zIndex: 200,
     borderRadius: spacingUnit / 2 - 1,
@@ -52,7 +39,7 @@ var getButtonWrapperStyles = function getButtonWrapperStyles(mode) {
     '&:last-child': {
       marginLeft: spacingUnit / 2
     }
-  });
+  };
 };
 
 exports.getButtonWrapperStyles = getButtonWrapperStyles;
@@ -66,8 +53,7 @@ var editButtonStyles = {
   padding: '0',
   outline: '0',
   '&:focus + div': {
-    border: "2px solid ".concat(_colors.B100),
-    background: _colors.N0
+    border: "2px solid ".concat((0, _tokens.token)('color.border.focus', _colors.B100))
   }
 };
 exports.editButtonStyles = editButtonStyles;
@@ -105,7 +91,7 @@ var readViewWrapperStyles = {
     width: '100%'
   },
   '&:hover': {
-    background: _colors.N30
+    background: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30)
   }
 };
 exports.readViewWrapperStyles = readViewWrapperStyles;

package/dist/cjs/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.0.8",
+	"version": "12.1.3",
 	"sideEffects": false
 }

package/dist/es2019/entry-points/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/inline-edit.js

@@ -13,7 +13,7 @@ import ReadView from './internal/read-view';
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.0.8"
+  packageVersion: "12.1.3"
 };
 
 const noop = () => {};

package/dist/es2019/inline-editable-textfield.js

@@ -6,6 +6,7 @@ import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
 import Textfield from '@atlaskit/textfield';
 import { R400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import InlineEdit from './inline-edit';
 import { errorIconContainerStyles, readViewForTextFieldStyles } from './internal/styles';
 
@@ -33,7 +34,7 @@ const InlineEditableTextfield = props => {
         css: errorIconContainerStyles
       }, jsx(ErrorIcon, {
         label: "error",
-        primaryColor: R400
+        primaryColor: token('color.iconBorder.danger', R400)
       })),
       testId: testId,
       isCompact: isCompact,

package/dist/es2019/internal/styles.js

@@ -1,19 +1,12 @@
 import { B100, DN50A, DN60A, N0, N30, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 const spacingUnit = gridSize();
 const fontSizeUnit = fontSize();
 const elevations = {
-  light: [N50A, N60A],
-  dark: [DN50A, DN60A]
+  light: token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
+  dark: token('shadow.overlay', `0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`)
 };
-
-const getElevationStyleForMode = mode => {
-  const colors = elevations[mode];
-  return {
-    boxShadow: `0 4px 8px -2px ${colors[0]}, 0 0 1px ${colors[1]}`
-  };
-};
-
 export const buttonsContainerStyles = {
   display: 'flex',
   flexShrink: 0,
@@ -22,8 +15,9 @@ export const buttonsContainerStyles = {
   right: 0,
   top: '100%'
 };
-export const getButtonWrapperStyles = mode => ({ ...getElevationStyleForMode(mode),
-  backgroundColor: '#FFFFFF',
+export const getButtonWrapperStyles = mode => ({
+  boxShadow: elevations[mode],
+  backgroundColor: token('color.background.overlay', N0),
   width: spacingUnit * 4,
   zIndex: 200,
   borderRadius: spacingUnit / 2 - 1,
@@ -43,8 +37,7 @@ export const editButtonStyles = {
   padding: '0',
   outline: '0',
   '&:focus + div': {
-    border: `2px solid ${B100}`,
-    background: N0
+    border: `2px solid ${token('color.border.focus', B100)}`
   }
 };
 export const errorIconContainerStyles = {
@@ -78,6 +71,6 @@ export const readViewWrapperStyles = {
     width: '100%'
   },
   '&:hover': {
-    background: N30
+    background: token('color.background.transparentNeutral.hover', N30)
   }
 };

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.0.8",
+	"version": "12.1.3",
 	"sideEffects": false
 }

package/dist/esm/entry-points/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/inline-edit.js

@@ -22,7 +22,7 @@ import ReadView from './internal/read-view';
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.0.8"
+  packageVersion: "12.1.3"
 };
 
 var noop = function noop() {};

package/dist/esm/inline-editable-textfield.js

@@ -7,6 +7,7 @@ import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
 import Textfield from '@atlaskit/textfield';
 import { R400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import InlineEdit from './inline-edit';
 import { errorIconContainerStyles, readViewForTextFieldStyles } from './internal/styles';
 
@@ -34,7 +35,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
           css: errorIconContainerStyles
         }, jsx(ErrorIcon, {
           label: "error",
-          primaryColor: R400
+          primaryColor: token('color.iconBorder.danger', R400)
         })),
         testId: testId,
         isCompact: isCompact,

package/dist/esm/internal/styles.js

@@ -1,25 +1,12 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import { B100, DN50A, DN60A, N0, N30, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 var spacingUnit = gridSize();
 var fontSizeUnit = fontSize();
 var elevations = {
-  light: [N50A, N60A],
-  dark: [DN50A, DN60A]
+  light: token('shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
+  dark: token('shadow.overlay', "0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A))
 };
-
-var getElevationStyleForMode = function getElevationStyleForMode(mode) {
-  var colors = elevations[mode];
-  return {
-    boxShadow: "0 4px 8px -2px ".concat(colors[0], ", 0 0 1px ").concat(colors[1])
-  };
-};
-
 export var buttonsContainerStyles = {
   display: 'flex',
   flexShrink: 0,
@@ -29,8 +16,9 @@ export var buttonsContainerStyles = {
   top: '100%'
 };
 export var getButtonWrapperStyles = function getButtonWrapperStyles(mode) {
-  return _objectSpread(_objectSpread({}, getElevationStyleForMode(mode)), {}, {
-    backgroundColor: '#FFFFFF',
+  return {
+    boxShadow: elevations[mode],
+    backgroundColor: token('color.background.overlay', N0),
     width: spacingUnit * 4,
     zIndex: 200,
     borderRadius: spacingUnit / 2 - 1,
@@ -39,7 +27,7 @@ export var getButtonWrapperStyles = function getButtonWrapperStyles(mode) {
     '&:last-child': {
       marginLeft: spacingUnit / 2
     }
-  });
+  };
 };
 export var editButtonStyles = {
   appearance: 'none',
@@ -51,8 +39,7 @@ export var editButtonStyles = {
   padding: '0',
   outline: '0',
   '&:focus + div': {
-    border: "2px solid ".concat(B100),
-    background: N0
+    border: "2px solid ".concat(token('color.border.focus', B100))
   }
 };
 export var errorIconContainerStyles = {
@@ -86,6 +73,6 @@ export var readViewWrapperStyles = {
     width: '100%'
   },
   '&:hover': {
-    background: N30
+    background: token('color.background.transparentNeutral.hover', N30)
   }
 };

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.0.8",
+	"version": "12.1.3",
 	"sideEffects": false
 }

package/dist/types/internal/styles.d.ts

@@ -13,7 +13,6 @@ export declare const editButtonStyles: {
     outline: string;
     '&:focus + div': {
         border: string;
-        background: string;
     };
 };
 export declare const errorIconContainerStyles: CSSObject;

package/dist/types/types.d.ts

@@ -2,66 +2,66 @@ import React from 'react';
 import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { FieldProps } from '@atlaskit/form';
 interface CommonProps extends WithAnalyticsEventsProps {
-    /** Label above the input. */
+    /** Additional information to be included in the `context` of analytics events that come from button. */
+    analyticsContext?: Record<string, any>;
+    /** Accessibility label for the cancel action button. */
+    cancelButtonLabel?: string;
+    /** Accessibility label for the confirm action button, which saves the field value into `editValue`. */
+    confirmButtonLabel?: string;
+    /** The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`. */
+    defaultValue: any;
+    /** Label above the input field that communicates what value should be entered. */
     label?: string;
-    /** Validation function handled by final-form. */
+    /** Displays an inline dialog with a message when the field input is invalid. This is handled by `react-final-form`. */
     validate?: (value: any, formState: {}, fieldState: {}) => string | void | Promise<string | void>;
-    /** Set whether onConfirm should be called on blur. */
+    /**
+     * Sets the view when the element blurs and loses focus (this can happen when a user clicks away).
+     * When set to true, inline edit stays in `editView` when blurred. */
     keepEditViewOpenOnBlur?: boolean;
-    /** Sets whether the checkmark and cross are displayed in the bottom right of the field. */
+    /** Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field. */
     hideActionButtons?: boolean;
     /** Determines whether the input value can be confirmed as empty. */
     isRequired?: boolean;
-    /** Determines whether the read view has 100% width within its container, or whether it fits the content. */
+    /** Determines whether the `readView` has 100% width within its container, or whether it fits the content. */
     readViewFitContainerWidth?: boolean;
-    /** Accessibility label for button which is used to enter edit view from keyboard. */
+    /** Accessibility label for button, which is used to enter `editView` from keyboard. */
     editButtonLabel?: string;
-    /** Accessibility label for the confirm action button. */
-    confirmButtonLabel?: string;
-    /** Accessibility label for the cancel action button. */
-    cancelButtonLabel?: string;
-    /** Handler called when checkmark is clicked. */
+    /** Exits `editView` and switches back to `readView`. This is called when the cancel action button (x) is clicked. */
     onCancel?: () => void;
-    /** Additional information to be included in the `context` of analytics events that come from button */
-    analyticsContext?: Record<string, any>;
+    /**
+     * Determines whether it begins in `editView` or `readView`. When set to true, `isEditing` begins as true and the inline edit
+     * starts in `editView`.
+     */
+    startWithEditViewOpen?: boolean;
 }
 export interface ExtendedFieldProps<FieldValue> extends FieldProps<FieldValue> {
     errorMessage?: string | undefined;
 }
 export interface InlineEditProps<FieldValue> extends CommonProps {
-    /** Component to be shown when not in edit view. */
-    readView: () => React.ReactNode;
-    /** Component to be shown when editing. */
+    /** The component shown when user is editing (when the inline edit is not in `readView`). */
     editView: (fieldProps: ExtendedFieldProps<FieldValue>, ref: React.RefObject<any>) => React.ReactNode;
+    /** Sets whether the component shows the `readView` or the `editView`. This is used to manage the state of the input in stateless inline edit. */
+    isEditing?: boolean;
     /**
-     * Handler called editView is closed and changes are confirmed.
-     * Field value is passed as an argument to this function.
+    Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.
      */
     onConfirm: (value: any, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Whether the component shows the readView or the editView. */
-    isEditing?: boolean;
-    /** The value shown in the editView when it is entered. Should be updated by onConfirm. */
-    defaultValue: any;
     /** Handler called when readView is clicked. */
     onEdit?: () => void;
-    /** Determines whether isEditing begins as true. */
-    startWithEditViewOpen?: boolean;
+    /** The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.*/
+    readView: () => React.ReactNode;
 }
 export interface InlineEditableTextfieldProps extends CommonProps {
+    /** Sets height of the text field to compact. The top and bottom padding is decreased. */
+    isCompact?: boolean;
     /**
-     * Handler called editView is closed and changes are confirmed.
-     * Field value is passed as an argument to this function.
+     * Calls the `editView` handler. It confirms the changes.
+     * The field value is passed as an argument to this function.
      */
     onConfirm: (value: string, analyticsEvent: UIAnalyticsEvent) => void;
-    /** The value shown in the editView when it is entered. Should be updated by onConfirm. */
-    defaultValue: any;
-    /** Text shown in read view when value is an empty string. */
+    /** Text shown in `readView` when the field value is an empty string. */
     placeholder: string;
-    /** Determines whether isEditing begins as true. */
-    startWithEditViewOpen?: boolean;
-    /** Sets height to compact. */
-    isCompact?: boolean;
-    /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+    /** A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests.
      */
     testId?: string;
 }

package/extract-react-types/inline-editable-textfield-props.tsx

@@ -0,0 +1,7 @@
+import { InlineEditableTextfieldProps } from '../src/types';
+
+export default function InlineEditableTextfieldProp(
+  props: InlineEditableTextfieldProps,
+) {
+  return null;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.0.8",
-  "description": "A base component used to build inline-editable components that match the Atlassian Design Guidelines",
+  "version": "12.1.3",
+  "description": "An inline edit displays a custom input component that switches between reading and editing on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -14,24 +14,25 @@
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
-  "atlaskit:designLink": "https://atlassian.design/patterns/inline-edit",
+  "homepage": "https://atlassian.design/components/inline-edit/",
   "atlassian": {
     "team": "Design System Team",
     "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Inline Edit"
+      "name": "Inline edit"
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/button": "^15.1.0",
-    "@atlaskit/codemod-utils": "^3.0.0",
-    "@atlaskit/form": "^8.2.0",
-    "@atlaskit/icon": "^21.6.0",
-    "@atlaskit/inline-dialog": "^13.0.0",
-    "@atlaskit/textfield": "^5.0.0",
-    "@atlaskit/theme": "^11.0.0",
+    "@atlaskit/analytics-next": "^8.2.0",
+    "@atlaskit/button": "^16.1.0",
+    "@atlaskit/codemod-utils": "^3.4.0",
+    "@atlaskit/form": "^8.4.0",
+    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/inline-dialog": "^13.1.0",
+    "@atlaskit/textfield": "^5.1.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -41,12 +42,13 @@
   "devDependencies": {
     "@atlaskit/build-utils": "*",
     "@atlaskit/docs": "*",
-    "@atlaskit/inline-dialog": "^13.0.0",
-    "@atlaskit/select": "^14.1.0",
+    "@atlaskit/inline-dialog": "^13.1.0",
+    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/select": "^15.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tag": "^11.0.0",
+    "@atlaskit/tag": "^11.2.0",
     "@atlaskit/tag-group": "^10.0.0",
-    "@atlaskit/textarea": "^4.1.0",
+    "@atlaskit/textarea": "^4.2.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -54,7 +56,7 @@
     "@testing-library/dom": "^7.7.3",
     "@testing-library/react": "^8.0.1",
     "ast-types": "^0.13.3",
-    "jscodeshift": "^0.11.0",
+    "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
     "typescript": "3.9.6",
@@ -70,18 +72,10 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
-      "ui-components": [
-        "lite-mode"
-      ],
-      "analytics": [
-        "analytics-next"
-      ],
-      "theming": [
-        "new-theming-api"
-      ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ]
+      "ui-components": "lite-mode",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports"
     }
   },
   "af:exports": {