@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/components/ImageBase/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["getFallbackIconSizeByImageBaseSize","imageSize","MAX_SIZE","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize"],"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 28) {\n    return 16;\n  } else if (imageSize > 28 && imageSize <= 32) {\n    return 20;\n  } else if (imageSize > 32 && imageSize <= 44) {\n    return 24;\n  } else if (imageSize > 44 && imageSize <= 64) {\n    return 28;\n  }\n  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetFallbackIconSizeByImageBaseSize.MAX_SIZE = 36 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize > 36 && imageSize <= 48) {\n    return 16;\n  } else if (imageSize > 48 && imageSize <= 64) {\n    return 20;\n  }\n  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getOverlayIconSizeByImageBaseSize(\n  imageSize: number,\n): 12 | 16 | 18 | 20 | 24 | 28 | 32 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 24) {\n    return 16;\n  } else if (imageSize > 24 && imageSize <= 28) {\n    return 18;\n  } else if (imageSize > 28 && imageSize <= 40) {\n    return 20;\n  } else if (imageSize > 40 && imageSize <= 48) {\n    return 24;\n  } else if (imageSize > 48 && imageSize <= 88) {\n    return 28;\n  }\n  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,SAASA,kCAAkC,CAACC,SAAiB,EAA+B;EACjG,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOD,kCAAkC,CAACE,QAAQ;AACpD;AAEAF,kCAAkC,CAACE,QAAQ,GAAG,EAAW;;AAEzD;AACA;AACA;AACA,OAAO,SAASC,+BAA+B,CAACF,SAAiB,EAAqB;EACpF,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOE,+BAA+B,CAACD,QAAQ;AACjD;AAEAC,+BAA+B,CAACD,QAAQ,GAAG,EAAW;;AAEtD;AACA;AACA;AACA,OAAO,SAASE,iCAAiC,CAC/CH,SAAiB,EACiB;EAClC,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOG,iCAAiC,CAACF,QAAQ;AACnD;AAEAE,iCAAiC,CAACF,QAAQ,GAAG,EAAW"}
+{"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 28) {\n    return 16;\n  } else if (imageSize > 28 && imageSize <= 32) {\n    return 20;\n  } else if (imageSize > 32 && imageSize <= 44) {\n    return 24;\n  } else if (imageSize > 44 && imageSize <= 64) {\n    return 28;\n  }\n  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetFallbackIconSizeByImageBaseSize.MAX_SIZE = 36 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize > 36 && imageSize <= 48) {\n    return 16;\n  } else if (imageSize > 48 && imageSize <= 64) {\n    return 20;\n  }\n  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getOverlayIconSizeByImageBaseSize(\n  imageSize: number,\n): 12 | 16 | 18 | 20 | 24 | 28 | 32 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 24) {\n    return 16;\n  } else if (imageSize > 24 && imageSize <= 28) {\n    return 18;\n  } else if (imageSize > 28 && imageSize <= 40) {\n    return 20;\n  } else if (imageSize > 40 && imageSize <= 48) {\n    return 24;\n  } else if (imageSize > 48 && imageSize <= 88) {\n    return 28;\n  }\n  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;\n"],"names":["getFallbackIconSizeByImageBaseSize","imageSize","MAX_SIZE","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize"],"mappings":"AAAA;;CAEC,GACD,OAAO,SAASA,mCAAmCC,SAAiB,EAA+B;IACjG,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,CAAC;IACD,OAAOD,mCAAmCE,QAAQ;AACpD,CAAC;AAEDF,mCAAmCE,QAAQ,GAAG;AAE9C;;CAEC,GACD,OAAO,SAASC,gCAAgCF,SAAiB,EAAqB;IACpF,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,CAAC;IACD,OAAOE,gCAAgCD,QAAQ;AACjD,CAAC;AAEDC,gCAAgCD,QAAQ,GAAG;AAE3C;;CAEC,GACD,OAAO,SAASE,kCACdH,SAAiB,EACiB;IAClC,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,CAAC;IACD,OAAOG,kCAAkCF,QAAQ;AACnD,CAAC;AAEDE,kCAAkCF,QAAQ,GAAG"}

package/dist/cssm/components/ImageBase/types.d.ts

@@ -1,6 +1,6 @@
 export declare const imageBaseSizes: readonly [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96];
-export declare type ImageBaseSize = (typeof imageBaseSizes)[number];
-export declare type ImageBaseExpectedIconProps = {
+export type ImageBaseSize = (typeof imageBaseSizes)[number];
+export type ImageBaseExpectedIconProps = {
     width?: number;
     height?: number;
     className?: string;

package/dist/cssm/components/ImageBase/types.js

@@ -1,2 +1,19 @@
-export var imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96];
+export const imageBaseSizes = [
+    16,
+    20,
+    24,
+    28,
+    32,
+    36,
+    40,
+    44,
+    48,
+    56,
+    64,
+    72,
+    80,
+    88,
+    96
+];
+
 //# sourceMappingURL=types.js.map

package/dist/cssm/components/ImageBase/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["imageBaseSizes"],"sources":["../../../../src/components/ImageBase/types.ts"],"sourcesContent":["export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96] as const;\n\nexport type ImageBaseSize = (typeof imageBaseSizes)[number];\n\nexport type ImageBaseExpectedIconProps = {\n  width?: number;\n  height?: number;\n  className?: string;\n};\n\nexport interface ImageBaseContextProps {\n  size: ImageBaseSize | number;\n}\n"],"mappings":"AAAA,OAAO,IAAMA,cAAc,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAU"}
+{"version":3,"sources":["../../../../src/components/ImageBase/types.ts"],"sourcesContent":["export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96] as const;\n\nexport type ImageBaseSize = (typeof imageBaseSizes)[number];\n\nexport type ImageBaseExpectedIconProps = {\n  width?: number;\n  height?: number;\n  className?: string;\n};\n\nexport interface ImageBaseContextProps {\n  size: ImageBaseSize | number;\n}\n"],"names":["imageBaseSizes"],"mappings":"AAAA,OAAO,MAAMA,iBAAiB;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;CAAG,CAAU"}

package/dist/cssm/components/ImageBase/validators.js

@@ -1,82 +1,75 @@
 import { warnOnce } from '../../lib/warnOnce';
 import { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize } from './helpers';
 import { imageBaseSizes } from './types';
-
 /**
  * Пример,
  *
  * Icon28User -> 28
  * Icon12Circle1 -> 12
  * Icon12Circle2 -> 12
- */
-function parseIconSizeByDisplayName(displayName) {
-  if (typeof displayName !== 'string') {
-    return null;
-  }
-  var rawSize = displayName.replace(/\d+$/g, '') // удаляем цифры в конце
-  .replace(/\D/g, ''); // удаляем всё, что не является числом
-  var size = Number(rawSize);
-  return size > 0 ? size : null;
+ */ function parseIconSizeByDisplayName(displayName) {
+    if (typeof displayName !== 'string') {
+        return null;
+    }
+    const rawSize = displayName.replace(/\d+$/g, '') // удаляем цифры в конце
+    .replace(/\D/g, ''); // удаляем всё, что не является числом
+    const size = Number(rawSize);
+    return size > 0 ? size : null;
 }
 function parseIconSizeByWidthProp(width) {
-  if (typeof width !== 'string' && typeof width !== 'number') {
-    return null;
-  }
-  var size = Number(width);
-  return size > 0 ? size : null;
+    if (typeof width !== 'string' && typeof width !== 'number') {
+        return null;
+    }
+    const size = Number(width);
+    return size > 0 ? size : null;
 }
 function getElementDisplayName(element) {
-  var _element$type$display;
-  return (_element$type$display = element.type.displayName) !== null && _element$type$display !== void 0 ? _element$type$display : null;
+    return element.type.displayName ?? null;
 }
 function getElementWidthProp(element) {
-  var _element$props$width;
-  return (_element$props$width = element.props.width) !== null && _element$props$width !== void 0 ? _element$props$width : null;
+    return element.props.width ?? null;
 }
 function getIconSizeByElement(element) {
-  var sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));
-  var sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));
-  return sizeByWidth ? sizeByWidth : sizeByDisplayName;
+    const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));
+    const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));
+    return sizeByWidth ? sizeByWidth : sizeByDisplayName;
 }
 function validateIconComponentSizeByImageSize(imageSize, iconProp, selectorFn, logger) {
-  var iconSize = getIconSizeByElement(iconProp.value);
-  if (iconSize === null) {
-    return;
-  }
-  var result = selectorFn(imageSize);
-  if (result === iconSize || result === selectorFn.MAX_SIZE && iconSize >= result) {
-    return;
-  }
-  var iconName = getElementDisplayName(iconProp.value);
-  var propMessage = iconName ? "".concat(iconProp.name, "={<").concat(iconName, " />}") : iconProp.name;
-  logger("\u0420\u0430\u0437\u043C\u0435\u0440 `".concat(propMessage, "` \u043D\u0435 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043D-\u0441\u0438\u0441\u0442\u0435\u043C\u0435. \u0414\u043B\u044F `size={").concat(imageSize, "}` \u0440\u0430\u0437\u043C\u0435\u0440 \u0438\u043A\u043E\u043D\u043A\u0438 \u0434\u043B\u044F `").concat(iconProp.name, "` \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043E\u0432\u0430\u0442\u044C <Icon").concat(result, "<name> />. \u0415\u0441\u043B\u0438 \u0442\u0430\u043A\u043E\u0433\u043E \u0440\u0430\u0437\u043C\u0435\u0440\u0430 \u043D\u0435\u0442, \u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 <").concat(iconName, " width={").concat(result, "} height={").concat(result, "} />"), 'log');
+    const iconSize = getIconSizeByElement(iconProp.value);
+    if (iconSize === null) {
+        return;
+    }
+    const result = selectorFn(imageSize);
+    if (result === iconSize || result === selectorFn.MAX_SIZE && iconSize >= result) {
+        return;
+    }
+    const iconName = getElementDisplayName(iconProp.value);
+    const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;
+    logger(`Размер \`${propMessage}\` не соответствует дизайн-системе. Для \`size={${imageSize}}\` размер иконки для \`${iconProp.name}\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`, 'log');
 }
-var warnImageBase = warnOnce('ImageBase');
+const warnImageBase = warnOnce('ImageBase');
 export function validateFallbackIcon(imageSize, iconProp) {
-  return validateIconComponentSizeByImageSize(imageSize, iconProp, getFallbackIconSizeByImageBaseSize, warnImageBase);
+    return validateIconComponentSizeByImageSize(imageSize, iconProp, getFallbackIconSizeByImageBaseSize, warnImageBase);
 }
-var mapOfExpectedSize = new Set(imageBaseSizes);
-var arrayOfSizes = Object.keys(mapOfExpectedSize).map(function (str) {
-  return Number(str);
-});
-var maxSize = arrayOfSizes.reduce(function (maxSize, size) {
-  return size > maxSize ? size : maxSize;
-}, 0);
+const mapOfExpectedSize = new Set(imageBaseSizes);
+const arrayOfSizes = Object.keys(mapOfExpectedSize).map((str)=>Number(str));
+const maxSize = arrayOfSizes.reduce((maxSize, size)=>size > maxSize ? size : maxSize, 0);
 export function validateSize(imageSize) {
-  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {
-    return;
-  }
-  warnImageBase("`size={".concat(imageSize, "}` \u043D\u0435 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043D-\u0441\u0438\u0441\u0442\u0435\u043C\u0435. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043E\u0434\u0438\u043D \u0438\u0437 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432: ").concat(arrayOfSizes.join(' | ')), 'log');
+    if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {
+        return;
+    }
+    warnImageBase(`\`size={${imageSize}}\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(' | ')}`, 'log');
 }
-var warnImageBaseBadge = warnOnce('ImageBase.Badge');
+const warnImageBaseBadge = warnOnce('ImageBase.Badge');
 export function validateBadgeIcon(imageSize, iconProp) {
-  if (imageSize < 24 && iconProp) {
-    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');
-  }
-  validateIconComponentSizeByImageSize(imageSize, iconProp, getBadgeIconSizeByImageBaseSize, warnImageBaseBadge);
+    if (imageSize < 24 && iconProp) {
+        return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');
+    }
+    validateIconComponentSizeByImageSize(imageSize, iconProp, getBadgeIconSizeByImageBaseSize, warnImageBaseBadge);
 }
-var warnImageBaseOverlay = warnOnce('ImageBase.Overlay');
+const warnImageBaseOverlay = warnOnce('ImageBase.Overlay');
 export function validateOverlayIcon(imageSize, iconProp) {
-  validateIconComponentSizeByImageSize(imageSize, iconProp, getOverlayIconSizeByImageBaseSize, warnImageBaseOverlay);
+    validateIconComponentSizeByImageSize(imageSize, iconProp, getOverlayIconSizeByImageBaseSize, warnImageBaseOverlay);
 }
+
 //# sourceMappingURL=validators.js.map

package/dist/cssm/components/ImageBase/validators.js.map

@@ -1 +1 @@
-{"version":3,"file":"validators.js","names":["warnOnce","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageBaseSizes","parseIconSizeByDisplayName","displayName","rawSize","replace","size","Number","parseIconSizeByWidthProp","width","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","validateFallbackIcon","mapOfExpectedSize","Set","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","warnImageBaseOverlay","validateOverlayIcon"],"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n  const rawSize = displayName\n    .replace(/\\d+$/g, '') // удаляем цифры в конце\n    .replace(/\\D/g, ''); // удаляем всё, что не является числом\n  const size = Number(rawSize);\n  return size > 0 ? size : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number | null {\n  if (typeof width !== 'string' && typeof width !== 'number') {\n    return null;\n  }\n  const size = Number(width);\n  return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string | null {\n  return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number | string | null {\n  return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number | null {\n  const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n  const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n  return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n  name: string;\n  value: JSX.Element;\n}\n\ninterface SelectorFn {\n  (imageSize: number): number;\n  MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n  imageSize: number,\n  iconProp: IconProp,\n  selectorFn: SelectorFn,\n  logger: ReturnType<typeof warnOnce>,\n) {\n  const iconSize = getIconSizeByElement(iconProp.value);\n\n  if (iconSize === null) {\n    return;\n  }\n\n  const result = selectorFn(imageSize);\n\n  if (result === iconSize || (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n  logger(\n    `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n    'log',\n  );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp) {\n  return validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getFallbackIconSizeByImageBaseSize,\n    warnImageBase,\n  );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {\n    return;\n  }\n  warnImageBase(\n    `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n      ' | ',\n    )}`,\n    'log',\n  );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n  if (imageSize < 24 && iconProp) {\n    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n  }\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getBadgeIconSizeByImageBaseSize,\n    warnImageBaseBadge,\n  );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay,\n  );\n}\n"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n  const rawSize = displayName\n    .replace(/\\d+$/g, '') // удаляем цифры в конце\n    .replace(/\\D/g, ''); // удаляем всё, что не является числом\n  const size = Number(rawSize);\n  return size > 0 ? size : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number | null {\n  if (typeof width !== 'string' && typeof width !== 'number') {\n    return null;\n  }\n  const size = Number(width);\n  return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string | null {\n  return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number | string | null {\n  return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number | null {\n  const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n  const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n  return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n  name: string;\n  value: JSX.Element;\n}\n\ninterface SelectorFn {\n  (imageSize: number): number;\n  MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n  imageSize: number,\n  iconProp: IconProp,\n  selectorFn: SelectorFn,\n  logger: ReturnType<typeof warnOnce>,\n) {\n  const iconSize = getIconSizeByElement(iconProp.value);\n\n  if (iconSize === null) {\n    return;\n  }\n\n  const result = selectorFn(imageSize);\n\n  if (result === iconSize || (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n  logger(\n    `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n    'log',\n  );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp) {\n  return validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getFallbackIconSizeByImageBaseSize,\n    warnImageBase,\n  );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {\n    return;\n  }\n  warnImageBase(\n    `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n      ' | ',\n    )}`,\n    'log',\n  );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n  if (imageSize < 24 && iconProp) {\n    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n  }\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getBadgeIconSizeByImageBaseSize,\n    warnImageBaseBadge,\n  );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay,\n  );\n}\n"],"names":["warnOnce","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageBaseSizes","parseIconSizeByDisplayName","displayName","rawSize","replace","size","Number","parseIconSizeByWidthProp","width","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","validateFallbackIcon","mapOfExpectedSize","Set","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","warnImageBaseOverlay","validateOverlayIcon"],"mappings":"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"}

package/dist/cssm/components/InfoRow/InfoRow.js

@@ -1,26 +1,18 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["header", "children", "className"];
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
-import "./InfoRow.module.css";
+import styles from './InfoRow.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/InfoRow
- */
-export var InfoRow = function InfoRow(_ref) {
-  var header = _ref.header,
-    children = _ref.children,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Headline, _extends({}, restProps, {
-    Component: "span",
-    className: classNames("vkuiInfoRow", className),
-    weight: "3"
-  }), hasReactNode(header) && /*#__PURE__*/React.createElement(Subhead, {
-    Component: "span",
-    className: "vkuiInfoRow__header"
-  }, header), children);
-};
+ */ export const InfoRow = ({ header , children , className , ...restProps })=>/*#__PURE__*/ React.createElement(Headline, {
+        ...restProps,
+        Component: "span",
+        className: classNames(styles['InfoRow'], className),
+        weight: "3"
+    }, hasReactNode(header) && /*#__PURE__*/ React.createElement(Subhead, {
+        Component: "span",
+        className: styles['InfoRow__header']
+    }, header), children);
+
 //# sourceMappingURL=InfoRow.js.map

package/dist/cssm/components/InfoRow/InfoRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoRow.js","names":["React","classNames","hasReactNode","Headline","Subhead","InfoRow","header","children","className","restProps"],"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNames(styles['InfoRow'], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"span\" className={styles['InfoRow__header']}>\n        {header}\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AAOxD;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAAA,oBACjE,oBAAC,QAAQ,eACHA,SAAS;IACb,SAAS,EAAC,MAAM;IAChB,SAAS,EAAER,UAAU,gBAAoBO,SAAS,CAAE;IACpD,MAAM,EAAC;EAAG,IAETN,YAAY,CAACI,MAAM,CAAC,iBACnB,oBAAC,OAAO;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS;EAA4B,GAC5DA,MAAM,CAEV,EACAC,QAAQ,CACA;AAAA,CACZ"}
+{"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNames(styles['InfoRow'], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"span\" className={styles['InfoRow__header']}>\n        {header}\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"names":["React","classNames","hasReactNode","Headline","Subhead","styles","InfoRow","header","children","className","restProps","Component","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAM,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAAyB,iBACjF,oBAACP;QACE,GAAGO,SAAS;QACbC,WAAU;QACVF,WAAWR,WAAWI,MAAM,CAAC,UAAU,EAAEI;QACzCG,QAAO;OAENV,aAAaK,yBACZ,oBAACH;QAAQO,WAAU;QAAOF,WAAWJ,MAAM,CAAC,kBAAkB;OAC3DE,SAGJC,UAEH"}

package/dist/cssm/components/Input/Input.js

@@ -1,49 +1,32 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style", "before", "after", "status", "mode"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { SizeType } from '../../lib/adaptivity';
 import { FormField } from '../FormField/FormField';
-import "./Input.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiInput--sizeY-none"
-}, SizeType.COMPACT, "vkuiInput--sizeY-compact");
+import styles from './Input.module.css';
+const sizeYClassNames = {
+    none: styles['Input--sizeY-none'],
+    [SizeType.COMPACT]: styles['Input--sizeY-compact']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Input
- */
-export var Input = function Input(_ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'text' : _ref$type,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'left' : _ref$align,
-    getRef = _ref.getRef,
-    className = _ref.className,
-    getRootRef = _ref.getRootRef,
-    style = _ref.style,
-    before = _ref.before,
-    after = _ref.after,
-    status = _ref.status,
-    mode = _ref.mode,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  return /*#__PURE__*/React.createElement(FormField, {
-    style: style,
-    className: classNames("vkuiInput", align === 'right' && "vkuiInput--align-right", align === 'center' && "vkuiInput--align-center", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], before && "vkuiInput--hasBefore", after && "vkuiInput--hasAfter", className),
-    getRootRef: getRootRef,
-    before: before,
-    after: after,
-    disabled: restProps.disabled,
-    mode: mode,
-    status: status
-  }, /*#__PURE__*/React.createElement("input", _extends({}, restProps, {
-    type: type,
-    className: "vkuiInput__el",
-    ref: getRef
-  })));
+ */ export const Input = ({ type ='text' , align ='left' , getRef , className , getRootRef , style , before , after , status , mode , ...restProps })=>{
+    const { sizeY ='none'  } = useAdaptivity();
+    return /*#__PURE__*/ React.createElement(FormField, {
+        style: style,
+        className: classNames(styles['Input'], align === 'right' && styles['Input--align-right'], align === 'center' && styles['Input--align-center'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], before && styles['Input--hasBefore'], after && styles['Input--hasAfter'], className),
+        getRootRef: getRootRef,
+        before: before,
+        after: after,
+        disabled: restProps.disabled,
+        mode: mode,
+        status: status
+    }, /*#__PURE__*/ React.createElement("input", {
+        ...restProps,
+        type: type,
+        className: styles['Input__el'],
+        ref: getRef
+    }));
 };
+
 //# sourceMappingURL=Input.js.map

package/dist/cssm/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","classNames","useAdaptivity","SizeType","FormField","sizeYClassNames","none","COMPACT","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","REGULAR","disabled"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  [SizeType.COMPACT]: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n  type = 'text',\n  align = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: InputProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align === 'right' && styles['Input--align-right'],\n        align === 'center' && styles['Input--align-center'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        before && styles['Input--hasBefore'],\n        after && styles['Input--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      mode={mode}\n      status={status}\n    >\n      <input {...restProps} type={type} className={styles['Input__el']} ref={getRef} />\n    </FormField>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,SAAS,QAAwB,wBAAwB;AAAC;AAGnE,IAAMC,eAAe;EACnBC,IAAI;AAA6B,GAChCH,QAAQ,CAACI,OAAO,6BAClB;AASD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAYA;EAAA,qBAXhBC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,kBACbC,KAAK;IAALA,KAAK,2BAAG,MAAM;IACdC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACDC,SAAS;EAEZ,qBAA2BjB,aAAa,EAAE;IAAA,sCAAlCkB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,SAAS;IACR,KAAK,EAAEN,KAAM;IACb,SAAS,EAAEb,UAAU,cAEnBS,KAAK,KAAK,OAAO,4BAAgC,EACjDA,KAAK,KAAK,QAAQ,6BAAiC,EACnDU,KAAK,KAAKjB,QAAQ,CAACkB,OAAO,IAAIhB,eAAe,CAACe,KAAK,CAAC,EACpDL,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEG,SAAS,CAACG,QAAS;IAC7B,IAAI,EAAEJ,IAAK;IACX,MAAM,EAAED;EAAO,gBAEf,0CAAWE,SAAS;IAAE,IAAI,EAAEV,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC"}
+{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  [SizeType.COMPACT]: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n  type = 'text',\n  align = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: InputProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align === 'right' && styles['Input--align-right'],\n        align === 'center' && styles['Input--align-center'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        before && styles['Input--hasBefore'],\n        after && styles['Input--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      mode={mode}\n      status={status}\n    >\n      <input {...restProps} type={type} className={styles['Input__el']} ref={getRef} />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","FormField","styles","sizeYClassNames","none","COMPACT","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","REGULAR","disabled","input","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACF,SAASK,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;AACpD;AASA;;CAEC,GACD,OAAO,MAAMI,QAAQ,CAAC,EACpBC,MAAO,OAAM,EACbC,OAAQ,OAAM,EACdC,OAAM,EACNC,UAAS,EACTC,WAAU,EACVC,MAAK,EACLC,OAAM,EACNC,MAAK,EACLC,OAAM,EACNC,KAAI,EACJ,GAAGC,WACQ,GAAK;IAChB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGnB;IAE3B,qBACE,oBAACE;QACCW,OAAOA;QACPF,WAAWZ,WACTI,MAAM,CAAC,QAAQ,EACfM,UAAU,WAAWN,MAAM,CAAC,qBAAqB,EACjDM,UAAU,YAAYN,MAAM,CAAC,sBAAsB,EACnDgB,UAAUlB,SAASmB,OAAO,IAAIhB,eAAe,CAACe,MAAM,EACpDL,UAAUX,MAAM,CAAC,mBAAmB,EACpCY,SAASZ,MAAM,CAAC,kBAAkB,EAClCQ;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPM,UAAUH,UAAUG,QAAQ;QAC5BJ,MAAMA;QACND,QAAQA;qBAER,oBAACM;QAAO,GAAGJ,SAAS;QAAEV,MAAMA;QAAMG,WAAWR,MAAM,CAAC,YAAY;QAAEoB,KAAKb;;AAG7E,EAAE"}

package/dist/cssm/components/Input/Input.module.css

@@ -1 +1 @@
-.vkuiInput{font-size:16px;line-height:20px;position:relative}.vkuiInput--align-center .vkuiInput__el{text-align:center}.vkuiInput--align-right .vkuiInput__el{text-align:right}.vkuiInput__el{align-self:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:inherit;box-shadow:none;box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);display:block;font-family:inherit;font-size:16px;font-size:var(--vkui--font_text--font_size--regular);font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular);line-height:20px;line-height:var(--vkui--font_text--line_height--regular);margin:0;padding:0 12px;position:relative;width:100%;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiInput--sizeY-compact .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}.vkuiInput--hasBefore .vkuiInput__el{padding-left:0}.vkuiInput--hasAfter .vkuiInput__el{padding-right:0}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiInput--sizeY-none .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}}.vkuiInput__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiInput__el::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}
+.vkuiInput{font-size:16px;line-height:20px;position:relative}.vkuiInput--align-center .vkuiInput__el{text-align:center}.vkuiInput--align-right .vkuiInput__el{text-align:right}.vkuiInput__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:inherit;box-shadow:none;box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);font-family:inherit;font-size:16px;font-size:var(--vkui--font_text--font_size--regular);font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular);height:44px;height:var(--vkui--size_field_height--regular);line-height:20px;line-height:var(--vkui--font_text--line_height--regular);margin:0;padding:0 12px;position:relative;width:100%;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiInput--sizeY-compact .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);height:36px;height:var(--vkui--size_field_height--compact);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}.vkuiInput--hasBefore .vkuiInput__el{padding-left:0}.vkuiInput--hasAfter .vkuiInput__el{padding-right:0}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiInput--sizeY-none .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);height:36px;height:var(--vkui--size_field_height--compact);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}}.vkuiInput__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiInput__el::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}

package/dist/cssm/components/InputLike/InputLike.js

@@ -1,47 +1,39 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["value", "length", "index", "onElementSelect", "onClick", "onFocus", "getRootRef", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { callMultiple } from '../../lib/callMultiple';
 import { stopPropagation } from '../../lib/utils';
-import "./InputLike.module.css";
-var MASK_SYMBOL = String.fromCharCode(0x2007);
+import styles from './InputLike.module.css';
+const MASK_SYMBOL = String.fromCharCode(0x2007);
 function getMaskElements(length) {
-  var result = [];
-  for (var _index = 0; _index < length; _index += 1) {
-    result.push( /*#__PURE__*/React.createElement("span", {
-      key: _index,
-      className: "vkuiInputLike__mask"
-    }, MASK_SYMBOL));
-  }
-  return result;
+    const result = [];
+    for(let index = 0; index < length; index += 1){
+        result.push(/*#__PURE__*/ React.createElement("span", {
+            key: index,
+            className: styles['InputLike__mask']
+        }, MASK_SYMBOL));
+    }
+    return result;
 }
-export var InputLike = function InputLike(_ref) {
-  var _value$length;
-  var value = _ref.value,
-    length = _ref.length,
-    index = _ref.index,
-    onElementSelect = _ref.onElementSelect,
-    onClick = _ref.onClick,
-    onFocus = _ref.onFocus,
-    getRootRef = _ref.getRootRef,
-    className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var handleElementSelect = React.useCallback(function (event) {
-    stopPropagation(event);
-    onElementSelect === null || onElementSelect === void 0 ? void 0 : onElementSelect(index);
-  }, [index, onElementSelect]);
-  return /*#__PURE__*/React.createElement("span", _extends({
-    className: classNames("vkuiInputLike", (value === null || value === void 0 ? void 0 : value.length) === length && "vkuiInputLike--full", className),
-    tabIndex: 0,
-    ref: getRootRef,
-    onClick: callMultiple(onClick, handleElementSelect),
-    onFocus: callMultiple(stopPropagation, onFocus)
-  }, props), value === null || value === void 0 ? void 0 : value.slice(0, length - 1), (value === null || value === void 0 ? void 0 : value.slice(length - 1)) && /*#__PURE__*/React.createElement("span", {
-    key: index,
-    className: "vkuiInputLike__last_character"
-  }, value.slice(length - 1)), getMaskElements(length - ((_value$length = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length !== void 0 ? _value$length : 0)));
+export const InputLike = ({ value , length , index , onElementSelect , onClick , onFocus , getRootRef , className , ...props })=>{
+    const handleElementSelect = React.useCallback((event)=>{
+        stopPropagation(event);
+        onElementSelect?.(index);
+    }, [
+        index,
+        onElementSelect
+    ]);
+    return /*#__PURE__*/ React.createElement("span", {
+        className: classNames(styles['InputLike'], value?.length === length && styles['InputLike--full'], className),
+        tabIndex: 0,
+        ref: getRootRef,
+        onClick: callMultiple(onClick, handleElementSelect),
+        onFocus: callMultiple(stopPropagation, onFocus),
+        ...props
+    }, value?.slice(0, length - 1), value?.slice(length - 1) && /*#__PURE__*/ React.createElement("span", {
+        key: index,
+        className: styles['InputLike__last_character']
+    }, value.slice(length - 1)), getMaskElements(length - (value?.length ?? 0)));
 };
 InputLike.displayName = 'InputLike';
+
 //# sourceMappingURL=InputLike.js.map

package/dist/cssm/components/InputLike/InputLike.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputLike.js","names":["React","classNames","callMultiple","stopPropagation","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","className","props","handleElementSelect","useCallback","event","slice","displayName"],"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { HasRootRef } from '../../types';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    HasRootRef<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: string;\n  onElementSelect?(index: number): void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n  const result = [];\n  for (let index = 0; index < length; index += 1) {\n    result.push(\n      <span key={index} className={styles['InputLike__mask']}>\n        {MASK_SYMBOL}\n      </span>,\n    );\n  }\n  return result;\n}\n\nexport const InputLike = ({\n  value,\n  length,\n  index,\n  onElementSelect,\n  onClick,\n  onFocus,\n  getRootRef,\n  className,\n  ...props\n}: InputLikeProps) => {\n  const handleElementSelect = React.useCallback(\n    (event: React.MouseEvent<HTMLSpanElement>) => {\n      stopPropagation(event);\n      onElementSelect?.(index);\n    },\n    [index, onElementSelect],\n  );\n\n  return (\n    <span\n      className={classNames(\n        styles['InputLike'],\n        value?.length === length && styles[`InputLike--full`],\n        className,\n      )}\n      tabIndex={0}\n      ref={getRootRef}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...props}\n    >\n      {value?.slice(0, length - 1)}\n      {value?.slice(length - 1) && (\n        <span key={index} className={styles['InputLike__last_character']}>\n          {value.slice(length - 1)}\n        </span>\n      )}\n      {getMaskElements(length - (value?.length ?? 0))}\n    </span>\n  );\n};\n\nInputLike.displayName = 'InputLike';\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,eAAe,QAAQ,iBAAiB;AAAC;AAalD,IAAMC,WAAW,GAAGC,MAAM,CAACC,YAAY,CAAC,MAAM,CAAC;AAE/C,SAASC,eAAe,CAACC,MAAc,EAAE;EACvC,IAAMC,MAAM,GAAG,EAAE;EACjB,KAAK,IAAIC,MAAK,GAAG,CAAC,EAAEA,MAAK,GAAGF,MAAM,EAAEE,MAAK,IAAI,CAAC,EAAE;IAC9CD,MAAM,CAACE,IAAI,eACT;MAAM,GAAG,EAAED,MAAM;MAAC,SAAS;IAA4B,GACpDN,WAAW,CACP,CACR;EACH;EACA,OAAOK,MAAM;AACf;AAEA,OAAO,IAAMG,SAAS,GAAG,SAAZA,SAAS,OAUA;EAAA;EAAA,IATpBC,KAAK,QAALA,KAAK;IACLL,MAAM,QAANA,MAAM;IACNE,KAAK,QAALA,KAAK;IACLI,eAAe,QAAfA,eAAe;IACfC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,IAAMC,mBAAmB,GAAGpB,KAAK,CAACqB,WAAW,CAC3C,UAACC,KAAwC,EAAK;IAC5CnB,eAAe,CAACmB,KAAK,CAAC;IACtBR,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGJ,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,KAAK,EAAEI,eAAe,CAAC,CACzB;EAED,oBACE;IACE,SAAS,EAAEb,UAAU,kBAEnB,CAAAY,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,MAAKA,MAAM,yBAA6B,EACrDU,SAAS,CACT;IACF,QAAQ,EAAE,CAAE;IACZ,GAAG,EAAED,UAAW;IAChB,OAAO,EAAEf,YAAY,CAACa,OAAO,EAAEK,mBAAmB,CAAE;IACpD,OAAO,EAAElB,YAAY,CAACC,eAAe,EAAEa,OAAO;EAAE,GAC5CG,KAAK,GAERN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,KAAK,CAAC,CAAC,EAAEf,MAAM,GAAG,CAAC,CAAC,EAC3B,CAAAK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,KAAK,CAACf,MAAM,GAAG,CAAC,CAAC,kBACvB;IAAM,GAAG,EAAEE,KAAM;IAAC,SAAS;EAAsC,GAC9DG,KAAK,CAACU,KAAK,CAACf,MAAM,GAAG,CAAC,CAAC,CAE3B,EACAD,eAAe,CAACC,MAAM,qBAAIK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,yDAAI,CAAC,CAAC,CAAC,CAC1C;AAEX,CAAC;AAEDI,SAAS,CAACY,WAAW,GAAG,WAAW"}
+{"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { HasRootRef } from '../../types';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    HasRootRef<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: string;\n  onElementSelect?(index: number): void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n  const result = [];\n  for (let index = 0; index < length; index += 1) {\n    result.push(\n      <span key={index} className={styles['InputLike__mask']}>\n        {MASK_SYMBOL}\n      </span>,\n    );\n  }\n  return result;\n}\n\nexport const InputLike = ({\n  value,\n  length,\n  index,\n  onElementSelect,\n  onClick,\n  onFocus,\n  getRootRef,\n  className,\n  ...props\n}: InputLikeProps) => {\n  const handleElementSelect = React.useCallback(\n    (event: React.MouseEvent<HTMLSpanElement>) => {\n      stopPropagation(event);\n      onElementSelect?.(index);\n    },\n    [index, onElementSelect],\n  );\n\n  return (\n    <span\n      className={classNames(\n        styles['InputLike'],\n        value?.length === length && styles['InputLike--full'],\n        className,\n      )}\n      tabIndex={0}\n      ref={getRootRef}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...props}\n    >\n      {value?.slice(0, length - 1)}\n      {value?.slice(length - 1) && (\n        <span key={index} className={styles['InputLike__last_character']}>\n          {value.slice(length - 1)}\n        </span>\n      )}\n      {getMaskElements(length - (value?.length ?? 0))}\n    </span>\n  );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["React","classNames","callMultiple","stopPropagation","styles","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","key","className","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","props","handleElementSelect","useCallback","event","tabIndex","ref","slice","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,eAAe,QAAQ,kBAAkB;AAElD,OAAOC,YAAY,yBAAyB;AAW5C,MAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc,EAAE;IACvC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,oBAACC;YAAKC,KAAKH;YAAOI,WAAWX,MAAM,CAAC,kBAAkB;WACnDC;IAGP;IACA,OAAOK;AACT;AAEA,OAAO,MAAMM,YAAY,CAAC,EACxBC,MAAK,EACLR,OAAM,EACNE,MAAK,EACLO,gBAAe,EACfC,QAAO,EACPC,QAAO,EACPC,WAAU,EACVN,UAAS,EACT,GAAGO,OACY,GAAK;IACpB,MAAMC,sBAAsBvB,MAAMwB,WAAW,CAC3C,CAACC,QAA6C;QAC5CtB,gBAAgBsB;QAChBP,kBAAkBP;IACpB,GACA;QAACA;QAAOO;KAAgB;IAG1B,qBACE,oBAACL;QACCE,WAAWd,WACTG,MAAM,CAAC,YAAY,EACnBa,OAAOR,WAAWA,UAAUL,MAAM,CAAC,kBAAkB,EACrDW;QAEFW,UAAU;QACVC,KAAKN;QACLF,SAASjB,aAAaiB,SAASI;QAC/BH,SAASlB,aAAaC,iBAAiBiB;QACtC,GAAGE,KAAK;OAERL,OAAOW,MAAM,GAAGnB,SAAS,IACzBQ,OAAOW,MAAMnB,SAAS,oBACrB,oBAACI;QAAKC,KAAKH;QAAOI,WAAWX,MAAM,CAAC,4BAA4B;OAC7Da,MAAMW,KAAK,CAACnB,SAAS,KAGzBD,gBAAgBC,SAAUQ,CAAAA,OAAOR,UAAU,CAAA;AAGlD,EAAE;AAEFO,UAAUa,WAAW,GAAG"}

package/dist/cssm/components/InputLike/InputLike.module.css

@@ -1 +1 @@
-.vkuiInputLike__mask{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);position:relative}.vkuiInputLike__mask:after{border-bottom:1px solid #818c99;border-bottom:1px solid var(--vkui--color_text_secondary);bottom:0;content:"";height:1px;left:0;position:absolute;width:calc(100% - .1em)}.vkuiInputLike__mask:last-child{margin-right:1px}.vkuiInputLike__last_character{letter-spacing:1px!important}.vkuiInputLike--full+.vkuiInputLikeDivider{color:#000;color:var(--vkui--color_text_primary)}
+.vkuiInputLike__mask{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);position:relative}.vkuiInputLike__mask:after{border-bottom:1px solid #818c99;border-bottom:1px solid var(--vkui--color_text_secondary);bottom:0;content:"";height:1px;left:0;position:absolute;width:calc(100% - .1em)}.vkuiInputLike__mask:last-child{margin-right:1px}.vkuiInputLike__divider,.vkuiInputLike__last_character{letter-spacing:1px!important}.vkuiInputLike__divider{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInputLike--full+.vkuiInputLike__divider{color:#000;color:var(--vkui--color_text_primary)}

package/dist/cssm/components/InputLike/InputLikeDivider.js

@@ -1,15 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import "./InputLikeDivider.module.css";
-export var InputLikeDivider = function InputLikeDivider(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("span", _extends({
-    className: classNames("vkuiInputLikeDivider", className)
-  }, props), children);
+import styles from './InputLike.module.css';
+export const InputLikeDivider = ({ children , className , ...props })=>{
+    return /*#__PURE__*/ React.createElement("span", {
+        className: classNames(styles['InputLike__divider'], className),
+        ...props
+    }, children);
 };
+
 //# sourceMappingURL=InputLikeDivider.js.map

package/dist/cssm/components/InputLike/InputLikeDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputLikeDivider.js","names":["React","classNames","InputLikeDivider","children","className","props"],"sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './InputLikeDivider.module.css';\n\nexport const InputLikeDivider = ({\n  children,\n  className,\n  ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span className={classNames(styles['InputLikeDivider'], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAG7C,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAIqB;EAAA,IAHhDC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,oBACE;IAAM,SAAS,EAAEJ,UAAU,yBAA6BG,SAAS;EAAE,GAAKC,KAAK,GAC1EF,QAAQ,CACJ;AAEX,CAAC"}
+{"version":3,"sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './InputLike.module.css';\n\nexport const InputLikeDivider = ({\n  children,\n  className,\n  ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span className={classNames(styles['InputLike__divider'], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"names":["React","classNames","styles","InputLikeDivider","children","className","props","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAE5C,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,SAAQ,EACRC,UAAS,EACT,GAAGC,OACwC,GAAK;IAChD,qBACE,oBAACC;QAAKF,WAAWJ,WAAWC,MAAM,CAAC,qBAAqB,EAAEG;QAAa,GAAGC,KAAK;OAC5EF;AAGP,EAAE"}