@taiga-ui/cdk 3.59.0-canary.bbbc36e → 3.60.0-canary.799e7d6

package/schematics/ng-add/index.js

@@ -16,39 +16,39 @@ function addDependencies(tree, options) {
     removeTaigaSchematicsPackage(tree);
     if (options.addGlobalStyles) {
         ng_morph_1.addPackageJsonDependency(tree, {
-            name: `@taiga-ui/styles`,
+            name: '@taiga-ui/styles',
             version: versions_1.TAIGA_VERSION,
         });
     }
     if (options.addSanitizer) {
         ng_morph_1.addPackageJsonDependency(tree, {
-            name: `@tinkoff/ng-dompurify`,
+            name: '@tinkoff/ng-dompurify',
             version: versions_1.NG_DOMPURIFY_VERSION,
         });
         ng_morph_1.addPackageJsonDependency(tree, {
-            name: `dompurify`,
+            name: 'dompurify',
             version: versions_1.DOMPURIFY_VERSION,
         });
         ng_morph_1.addPackageJsonDependency(tree, {
-            name: `@types/dompurify`,
+            name: '@types/dompurify',
             version: versions_1.DOMPURIFY_TYPES_VERSION,
             type: ng_morph_1.NodeDependencyType.Dev,
         });
     }
-    if (packages.includes(`addon-table`) || packages.includes(`addon-mobile`)) {
+    if (packages.includes('addon-table') || packages.includes('addon-mobile')) {
         addAngularCdkDep(tree);
     }
 }
 function addAngularCdkDep(tree) {
     var _a;
-    const angularCore = (_a = ng_morph_1.getPackageJsonDependency(tree, `@angular/core`)) === null || _a === void 0 ? void 0 : _a.version;
+    const angularCore = (_a = ng_morph_1.getPackageJsonDependency(tree, '@angular/core')) === null || _a === void 0 ? void 0 : _a.version;
     if (!angularCore) {
         return;
     }
     const majorVersionArr = angularCore.match(/[0-9]+/);
     if (majorVersionArr) {
         ng_morph_1.addPackageJsonDependency(tree, {
-            name: `@angular/cdk`,
+            name: '@angular/cdk',
             version: `^${majorVersionArr[0]}.0.0`,
         });
     }
@@ -56,8 +56,8 @@ function addAngularCdkDep(tree) {
 function removeTaigaSchematicsPackage(tree) {
     var _a;
     try {
-        if ((_a = ng_morph_1.getPackageJsonDependency(tree, `taiga-ui`)) === null || _a === void 0 ? void 0 : _a.version) {
-            ng_morph_1.removePackageJsonDependency(tree, `taiga-ui`);
+        if ((_a = ng_morph_1.getPackageJsonDependency(tree, 'taiga-ui')) === null || _a === void 0 ? void 0 : _a.version) {
+            ng_morph_1.removePackageJsonDependency(tree, 'taiga-ui');
         }
     }
     catch (_b) {
@@ -69,7 +69,7 @@ function ngAdd(options) {
         context.logger.info(`The main packages will be installed - ${packages_1.MAIN_PACKAGES}`);
         addDependencies(tree, options);
         context.addTask(new tasks_1.NodePackageInstallTask(), [
-            context.addTask(new tasks_1.RunSchematicTask(`ng-add-setup-project`, options)),
+            context.addTask(new tasks_1.RunSchematicTask('ng-add-setup-project', options)),
         ]);
     };
 }

package/schematics/ng-add/steps/add-taiga-icons.js

@@ -5,9 +5,9 @@ const workspace_1 = require("@schematics/angular/utility/workspace");
 const get_project_target_options_1 = require("../../utils/get-project-target-options");
 const get_projects_1 = require("../../utils/get-projects");
 const ICON_ASSETS = {
-    glob: `**/*`,
-    input: `node_modules/@taiga-ui/icons/src`,
-    output: `assets/taiga-ui/icons`,
+    glob: '**/*',
+    input: 'node_modules/@taiga-ui/icons/src',
+    output: 'assets/taiga-ui/icons',
 };
 function addTaigaIcons(options) {
     return (_) => addTaigaAssetsToAngularJson(options);
@@ -17,7 +17,7 @@ function addTaigaAssetsToAngularJson(options) {
     return workspace_1.updateWorkspace(workspace => {
         const project = get_projects_1.getProjects(options, workspace)[0];
         if (project) {
-            const targetOptions = get_project_target_options_1.getProjectTargetOptions(project, `build`);
+            const targetOptions = get_project_target_options_1.getProjectTargetOptions(project, 'build');
             const assets = targetOptions.assets;
             targetOptions.assets = assets ? [...assets, ICON_ASSETS] : [ICON_ASSETS];
         }

package/schematics/ng-add/steps/add-taiga-modules.js

@@ -26,7 +26,7 @@ function addExtraTuiProvidersToRootComponent({ mainClass, options, standalone =
     if (!options.addSanitizer) {
         return;
     }
-    const provider = `{provide: TUI_SANITIZER, useClass: NgDompurifySanitizer}`;
+    const provider = '{provide: TUI_SANITIZER, useClass: NgDompurifySanitizer}';
     if (standalone) {
         ng_morph_1.addProviderToComponent(mainClass, provider, { unique: true });
     }
@@ -38,7 +38,7 @@ function addExtraTuiProvidersToRootComponent({ mainClass, options, standalone =
     });
 }
 function addTuiEntitiesToStandalone({ bootstrapFunction, options, context, }) {
-    const [rootComponentIdentifier, bootstrapOptions = bootstrapFunction.addArgument(`{providers}: []`),] = bootstrapFunction.getArguments();
+    const [rootComponentIdentifier, bootstrapOptions = bootstrapFunction.addArgument('{providers}: []'),] = bootstrapFunction.getArguments();
     const mainClass = get_component_from_identifier_1.getComponentFromIdentifier(rootComponentIdentifier);
     const optionsObject = getOptionsObject(bootstrapOptions);
     if (mainClass) {
@@ -48,16 +48,16 @@ function addTuiEntitiesToStandalone({ bootstrapFunction, options, context, }) {
     }
 }
 function addRootTuiProvidersToBootstrapFn(bootstrapOptions) {
-    const property = bootstrapOptions.getProperty(`providers`);
+    const property = bootstrapOptions.getProperty('providers');
     const initializer = property.getInitializer();
     const providerFrom = initializer
         .getElements()
         .find(el => ng_morph_1.Node.isCallExpression(el) &&
-        el.getExpression().getText() === `importProvidersFrom`);
+        el.getExpression().getText() === 'importProvidersFrom');
     const provideAnimations = initializer
         .getElements()
         .find(el => ng_morph_1.Node.isCallExpression(el) &&
-        el.getExpression().getText() === `provideAnimations`);
+        el.getExpression().getText() === 'provideAnimations');
     const modules = [modules_1.MAIN_MODULE];
     if (ng_morph_1.Node.isCallExpression(providerFrom)) {
         const existing = providerFrom.getArguments();
@@ -67,18 +67,18 @@ function addRootTuiProvidersToBootstrapFn(bootstrapOptions) {
         providerFrom.addArguments(moduleNames);
     }
     else {
-        push_to_array_property_1.pushToObjectArrayProperty(bootstrapOptions, `providers`, `importProvidersFrom(TuiRootModule)`);
+        push_to_array_property_1.pushToObjectArrayProperty(bootstrapOptions, 'providers', 'importProvidersFrom(TuiRootModule)');
     }
     if (!provideAnimations) {
         modules.push({
-            name: `provideAnimations`,
-            packageName: `@angular/platform-browser/animations`,
+            name: 'provideAnimations',
+            packageName: '@angular/platform-browser/animations',
         });
-        push_to_array_property_1.pushToObjectArrayProperty(bootstrapOptions, `providers`, `provideAnimations()`, {
+        push_to_array_property_1.pushToObjectArrayProperty(bootstrapOptions, 'providers', 'provideAnimations()', {
             index: 0,
         });
     }
-    [...modules, { name: `importProvidersFrom`, packageName: `@angular/core` }].forEach(({ name, packageName }) => {
+    [...modules, { name: 'importProvidersFrom', packageName: '@angular/core' }].forEach(({ name, packageName }) => {
         add_unique_import_1.addUniqueImport(bootstrapOptions.getSourceFile().getFilePath(), name, packageName);
     });
 }
@@ -111,16 +111,16 @@ function addTaigaModules(options) {
         const workspace = yield workspace_1.getWorkspace(tree);
         const project = get_projects_1.getProjects(options, workspace)[0];
         if (!project) {
-            context.logger.warn(`[WARNING]: Target project not found in current workspace`);
+            context.logger.warn('[WARNING]: Target project not found in current workspace');
             return;
         }
-        const buildOptions = get_project_target_options_1.getProjectTargetOptions(project, `build`);
+        const buildOptions = get_project_target_options_1.getProjectTargetOptions(project, 'build');
         const mainFilePath = (buildOptions.main || buildOptions.browser);
         if (!mainFilePath) {
-            context.logger.error(`[ERROR]: Could not find the project main file`);
+            context.logger.error('[ERROR]: Could not find the project main file');
             return;
         }
-        ng_morph_1.setActiveProject(ng_morph_1.createProject(tree, `/`, constants_1.ALL_FILES));
+        ng_morph_1.setActiveProject(ng_morph_1.createProject(tree, '/', constants_1.ALL_FILES));
         const bootstrapFunction = get_standalone_bootstrap_function_1.getStandaloneBootstrapFunction(mainFilePath);
         if (bootstrapFunction) {
             addTuiEntitiesToStandalone({

package/schematics/ng-add/steps/wrap-with-tui-root.js

@@ -13,12 +13,12 @@ function addTuiRootComponent(filePath, context, tree) {
     const buffer = tree.read(filePath);
     if (!buffer) {
         context.logger.error(`Could not read the default template file within the project ${filePath}`);
-        context.logger.info(`Consider manually wrapping content of your app with tui-root`);
+        context.logger.info('Consider manually wrapping content of your app with tui-root');
         return;
     }
     const htmlContent = buffer.toString();
-    const openTag = `<tui-root>\n`;
-    const closeTag = `\n</tui-root>`;
+    const openTag = '<tui-root>\n';
+    const closeTag = '\n</tui-root>';
     if (htmlContent.includes(openTag)) {
         return;
     }
@@ -36,7 +36,7 @@ function getAppTemplatePath(mainPath) {
         return component && getTemplatePathFromComponent(component);
     }
     const mainModule = ng_morph_1.getMainModule(mainPath);
-    const mainInitializer = getTemplateInitializer(mainModule, `NgModule`, `declarations`);
+    const mainInitializer = getTemplateInitializer(mainModule, 'NgModule', 'declarations');
     if (!ng_morph_1.Node.isArrayLiteralExpression(mainInitializer)) {
         return;
     }
@@ -45,11 +45,11 @@ function getAppTemplatePath(mainPath) {
     return getTemplatePathFromComponent(appComponent);
 }
 function getTemplatePathFromComponent(component) {
-    const templateInitializer = getTemplateInitializer(component, `Component`, `templateUrl`);
-    const appComponentPath = component.getSourceFile().getFilePath().split(`/`);
+    const templateInitializer = getTemplateInitializer(component, 'Component', 'templateUrl');
+    const appComponentPath = component.getSourceFile().getFilePath().split('/');
     return `${appComponentPath
         .splice(0, appComponentPath.length - 1)
-        .join(`/`)}/${templateInitializer === null || templateInitializer === void 0 ? void 0 : templateInitializer.getText().replace(/['"]/g, ``)}`;
+        .join('/')}/${templateInitializer === null || templateInitializer === void 0 ? void 0 : templateInitializer.getText().replace(/['"]/g, '')}`;
 }
 function getTemplateInitializer(classDeclaration, decoratorName, propertyName) {
     const decorator = classDeclaration.getDecorator(decoratorName);
@@ -73,14 +73,14 @@ function wrapWithTuiRootComponent(options) {
         if (!project) {
             return;
         }
-        const buildOptions = get_project_target_options_1.getProjectTargetOptions(project, `build`);
-        ng_morph_1.setActiveProject(ng_morph_1.createProject(tree, `/`, constants_1.ALL_FILES));
+        const buildOptions = get_project_target_options_1.getProjectTargetOptions(project, 'build');
+        ng_morph_1.setActiveProject(ng_morph_1.createProject(tree, '/', constants_1.ALL_FILES));
         const appTemplatePath = getAppTemplatePath(buildOptions.main);
         ng_morph_1.saveActiveProject();
         if (!appTemplatePath) {
-            context.logger.error(`Could not find the default main template file for this project.`);
-            context.logger.info(`Consider manually wrapping content of your app with tui-root`);
-            context.logger.info(`More information at https://taiga-ui.dev/getting-started`);
+            context.logger.error('Could not find the default main template file for this project.');
+            context.logger.info('Consider manually wrapping content of your app with tui-root');
+            context.logger.info('More information at https://taiga-ui.dev/getting-started');
             return;
         }
         addTuiRootComponent(appTemplatePath, context, tree);

package/schematics/ng-update/steps/icons/replace-imports.js

@@ -27,9 +27,9 @@ function replaceImports(replaceable, options) {
                 add_unique_import_1.addUniqueImport(namedImport.getSourceFile().getFilePath(), to.namedImport || to.name, to.moduleSpecifier);
             }
         });
-        !options[`skip-logs`] && progressLog(`replacing imports...`, true);
+        !options['skip-logs'] && progressLog('replacing imports...', true);
     });
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.successLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.SUCCESS_SYMBOL} imports replaced \n`);
 }
 exports.replaceImports = replaceImports;

package/schematics/ng-update/steps/remove-module.js

@@ -6,10 +6,10 @@ const colored_log_1 = require("../../utils/colored-log");
 const get_named_import_references_1 = require("../../utils/get-named-import-references");
 const import_manipulations_1 = require("../../utils/import-manipulations");
 function removeModules(options, modules) {
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.infoLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.REPLACE_SYMBOL} removing modules...`);
     modules.forEach(({ name, moduleSpecifier }) => removeModule(name, moduleSpecifier));
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.successLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.SUCCESS_SYMBOL} modules removed \n`);
 }
 exports.removeModules = removeModules;

package/schematics/ng-update/steps/rename-types.js

@@ -17,7 +17,7 @@ function renameType(from, to, moduleSpecifier, preserveGenerics = false) {
         }
         else if (ng_morph_1.Node.isTypeReference(parent)) {
             const targetType = preserveGenerics && to ? addGeneric(to, parent.getTypeArguments()) : to;
-            parent.replaceWithText(targetType || `any`);
+            parent.replaceWithText(targetType || 'any');
         }
     });
 }
@@ -32,18 +32,18 @@ function processImport(node, from, to) {
     }
 }
 function removeGeneric(type) {
-    return type.replace(/<.*>$/gi, ``);
+    return type.replace(/<.*>$/gi, '');
 }
 function addGeneric(typeName, generics) {
     const typeArgs = generics.map(t => t.getType().getText());
-    const genericType = typeArgs.length ? `<${typeArgs.join(`, `)}>` : ``;
+    const genericType = typeArgs.length ? `<${typeArgs.join(', ')}>` : '';
     return typeName + genericType;
 }
 function renameTypes(options, types) {
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.infoLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.REPLACE_SYMBOL} renaming types...`);
     types.forEach(({ from, to, moduleSpecifier, preserveGenerics }) => renameType(from, to, moduleSpecifier, preserveGenerics));
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.successLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.SUCCESS_SYMBOL} types renamed \n`);
 }
 exports.renameTypes = renameTypes;

package/schematics/ng-update/steps/replace-deep-import.js

@@ -6,17 +6,17 @@ const constants_1 = require("../../constants");
 const colored_log_1 = require("../../utils/colored-log");
 const DEEP_REGEX = /(@taiga-ui\/\w+)\/.*/;
 function replaceDeepImports(options) {
-    if (options[`skip-deep-imports`]) {
+    if (options['skip-deep-imports']) {
         return;
     }
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.infoLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.REPLACE_SYMBOL} replacing deep imports...`);
     const deepImports = ng_morph_1.getImports(constants_1.ALL_TS_FILES).filter(imp => DEEP_REGEX.test(imp.getModuleSpecifier().getLiteralValue()));
     ng_morph_1.editImports(deepImports, deepImport => {
-        const specifier = deepImport.moduleSpecifier.replace(DEEP_REGEX, `$1`);
+        const specifier = deepImport.moduleSpecifier.replace(DEEP_REGEX, '$1');
         return { moduleSpecifier: specifier };
     });
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.successLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.SUCCESS_SYMBOL} deep imports replaced \n`);
 }
 exports.replaceDeepImports = replaceDeepImports;

package/schematics/ng-update/steps/replace-enums.js

@@ -38,10 +38,10 @@ function containTypeRef(node) {
         .some(ref => ng_morph_1.Node.isTypeReference(ref.getParent()));
 }
 function replaceEnums(options, enums) {
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.infoLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.REPLACE_SYMBOL} replacing enums imports...`);
     enums.forEach(({ name, replaceValues, keepAsType }) => replaceEnumWithString(name, replaceValues, keepAsType));
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.successLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.SUCCESS_SYMBOL} enums replaced \n`);
 }
 exports.replaceEnums = replaceEnums;

package/schematics/ng-update/steps/replace-identifier.js

@@ -7,10 +7,10 @@ const colored_log_1 = require("../../utils/colored-log");
 const get_named_import_references_1 = require("../../utils/get-named-import-references");
 const import_manipulations_1 = require("../../utils/import-manipulations");
 function replaceIdentifiers(options, constants) {
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.infoLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.REPLACE_SYMBOL} replacing identifiers...`);
     constants.forEach(replaceIdentifier);
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.successLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.SUCCESS_SYMBOL} identifiers replaced \n`);
 }
 exports.replaceIdentifiers = replaceIdentifiers;

package/schematics/ng-update/steps/replace-services.js

@@ -7,7 +7,7 @@ const colored_log_1 = require("../../utils/colored-log");
 const get_named_import_references_1 = require("../../utils/get-named-import-references");
 const import_manipulations_1 = require("../../utils/import-manipulations");
 function replaceService({ from, to, replaceMethods }, options) {
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.processLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.PROCESSING_SYMBOL}replacing ${from.name}...`);
     const references = get_named_import_references_1.getNamedImportReferences(from.name, from.moduleSpecifier);
     references.forEach(ref => {
@@ -32,7 +32,7 @@ function replaceProperties(parent, replaceProperties) {
     identifier === null || identifier === void 0 ? void 0 : identifier.findReferencesAsNodes().forEach(ref => {
         let parent = ref.getParent();
         if ((ng_morph_1.Node.isPropertyAccessExpression(parent) &&
-            parent.getText().startsWith(`this.`)) ||
+            parent.getText().startsWith('this.')) ||
             ng_morph_1.Node.isCallExpression(parent)) {
             parent = parent.getParentIfKind(ng_morph_1.SyntaxKind.PropertyAccessExpression);
         }
@@ -51,10 +51,10 @@ function replaceProperty(node, properties) {
     });
 }
 function replaceServices(options, services) {
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.infoLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.REPLACE_SYMBOL} replacing services...`);
     services.forEach(service => replaceService(service, options));
-    !options[`skip-logs`] &&
+    !options['skip-logs'] &&
         colored_log_1.successLog(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.SUCCESS_SYMBOL} services replaced \n`);
 }
 exports.replaceServices = replaceServices;

package/schematics/ng-update/steps/show-warnings.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.showWarnings = void 0;
 const ng_morph_1 = require("ng-morph");
 const constants_1 = require("../../constants");
-function showWarning({ name, message, moduleSpecifier = `**/**` }, { logger }) {
+function showWarning({ name, message, moduleSpecifier = '**/**' }, { logger }) {
     const references = ng_morph_1.getImports(constants_1.ALL_TS_FILES, {
         moduleSpecifier,
         namedImports: [name],

package/schematics/ng-update/utils/replace-text.js

@@ -8,7 +8,7 @@ function replaceText(replaceable, pattern = constants_1.ALL_FILES) {
     sourceFiles.forEach(file => {
         let text = file.getFullText();
         replaceable.forEach(({ from, to }) => {
-            const regexp = new RegExp(from, `g`);
+            const regexp = new RegExp(from, 'g');
             if (text.match(regexp)) {
                 text = text.replace(regexp, to);
             }

package/schematics/ng-update/utils/templates/replace-tag.js

@@ -12,6 +12,6 @@ function replaceTag(recorder, sourceCodeLocation, from, to, templateOffset = 0,
         recorder.insertRight(endTagOffset + templateOffset + END_TAG_OFFSET, to);
     }
     recorder.remove((startTagOffset !== null && startTagOffset !== void 0 ? startTagOffset : 0) + templateOffset + START_TAG_OFFSET, from.length);
-    recorder.insertRight((startTagOffset !== null && startTagOffset !== void 0 ? startTagOffset : 0) + templateOffset + START_TAG_OFFSET, `${to} ${addAttributes.join(` `)}`);
+    recorder.insertRight((startTagOffset !== null && startTagOffset !== void 0 ? startTagOffset : 0) + templateOffset + START_TAG_OFFSET, `${to} ${addAttributes.join(' ')}`);
 }
 exports.replaceTag = replaceTag;

package/schematics/ng-update/v3/constants/breakpoints.js

@@ -3,32 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEPRECATED_BREAKPOINTS = void 0;
 exports.DEPRECATED_BREAKPOINTS = [
     // all previously actual breakpoints
-    { from: `@media-retina`, to: `@tui-media-retina` },
-    { from: `@media-retina-mobile`, to: `@tui-media-retina-mobile` },
-    { from: `@media-retina-tablet`, to: `@tui-media-retina-tablet` },
-    { from: `@media-retina-desktop`, to: `@tui-media-retina-desktop` },
-    { from: `@mobile-m`, to: `@tui-mobile` },
-    { from: `@mobile-m-min`, to: `@tui-mobile-min` },
-    { from: `@mobile-m-interval`, to: `@tui-mobile-interval` },
-    { from: `@tablet-lg`, to: `@tui-tablet` },
-    { from: `@tablet-lg-min`, to: `@tui-tablet-min` },
-    { from: `@tablet-lg-interval`, to: `@tui-tablet-interval` },
-    { from: `@desktop-s`, to: `@tui-desktop` },
-    { from: `@desktop-s-min`, to: `@tui-desktop-min` },
-    { from: `@desktop-s-interval`, to: `@tui-desktop-interval` },
-    { from: `@desktop-m-min`, to: `@tui-desktop-lg-min` },
+    { from: '@media-retina', to: '@tui-media-retina' },
+    { from: '@media-retina-mobile', to: '@tui-media-retina-mobile' },
+    { from: '@media-retina-tablet', to: '@tui-media-retina-tablet' },
+    { from: '@media-retina-desktop', to: '@tui-media-retina-desktop' },
+    { from: '@mobile-m', to: '@tui-mobile' },
+    { from: '@mobile-m-min', to: '@tui-mobile-min' },
+    { from: '@mobile-m-interval', to: '@tui-mobile-interval' },
+    { from: '@tablet-lg', to: '@tui-tablet' },
+    { from: '@tablet-lg-min', to: '@tui-tablet-min' },
+    { from: '@tablet-lg-interval', to: '@tui-tablet-interval' },
+    { from: '@desktop-s', to: '@tui-desktop' },
+    { from: '@desktop-s-min', to: '@tui-desktop-min' },
+    { from: '@desktop-s-interval', to: '@tui-desktop-interval' },
+    { from: '@desktop-m-min', to: '@tui-desktop-lg-min' },
     // legacy breakpoints
-    { from: `@mobile`, to: `@tui-mobile` },
-    { from: `@mobile-min`, to: `@tui-mobile-min` },
-    { from: `@mobile-interval`, to: `@tui-mobile-interval` },
-    { from: `@tablet-s`, to: `@tui-mobile` },
-    { from: `@tablet-s-min`, to: `@tui-mobile-min` },
-    { from: `@tablet-s-interval`, to: `@tui-mobile-interval` },
-    { from: `@tablet`, to: `@tui-tablet` },
-    { from: `@tablet-min`, to: `@tui-tablet-min` },
-    { from: `@tablet-interval`, to: `@tui-tablet-interval` },
-    { from: `@desktop`, to: `@tui-desktop` },
-    { from: `@desktop-min`, to: `@tui-desktop-min` },
-    { from: `@desktop-interval`, to: `@tui-desktop-interval` },
-    { from: `@desktop-lg-min`, to: `@tui-desktop-lg-min` },
+    { from: '@mobile', to: '@tui-mobile' },
+    { from: '@mobile-min', to: '@tui-mobile-min' },
+    { from: '@mobile-interval', to: '@tui-mobile-interval' },
+    { from: '@tablet-s', to: '@tui-mobile' },
+    { from: '@tablet-s-min', to: '@tui-mobile-min' },
+    { from: '@tablet-s-interval', to: '@tui-mobile-interval' },
+    { from: '@tablet', to: '@tui-tablet' },
+    { from: '@tablet-min', to: '@tui-tablet-min' },
+    { from: '@tablet-interval', to: '@tui-tablet-interval' },
+    { from: '@desktop', to: '@tui-desktop' },
+    { from: '@desktop-min', to: '@tui-desktop-min' },
+    { from: '@desktop-interval', to: '@tui-desktop-interval' },
+    { from: '@desktop-lg-min', to: '@tui-desktop-lg-min' },
 ];