@vkontakte/vkui 4.22.1 → 4.25.0

package/src/lib/supportEvents.ts

@@ -1,9 +1,9 @@
-import { canUseDOM } from './dom';
-import { isTesting } from './testing';
+import { canUseDOM } from "./dom";
+import { isTesting } from "./testing";
 
 export type VKUISupportEvents = {
   supported: boolean;
-  name?: string;
+  name?: string | null;
 };
 
 // WebKitAnimationEvent и WebKitTransitionEvent не существуют в глобальном контексте
@@ -20,18 +20,18 @@ const transitionEvent: VKUISupportEvents = {
 };
 
 if (canUseDOM && !isTesting) {
-  if (typeof AnimationEvent !== 'undefined') {
+  if (typeof AnimationEvent !== "undefined") {
     animationEvent.supported = true;
-  } else if (typeof WebKitAnimationEvent !== 'undefined') {
+  } else if (typeof WebKitAnimationEvent !== "undefined") {
     animationEvent.supported = true;
   }
 
-  if (typeof TransitionEvent !== 'undefined') {
+  if (typeof TransitionEvent !== "undefined") {
     transitionEvent.supported = true;
-    transitionEvent.name = 'transitionend';
-  } else if (typeof WebKitTransitionEvent !== 'undefined') {
+    transitionEvent.name = "transitionend";
+  } else if (typeof WebKitTransitionEvent !== "undefined") {
     transitionEvent.supported = true;
-    transitionEvent.name = 'webkitTransitionEnd';
+    transitionEvent.name = "webkitTransitionEnd";
   }
 }
 

package/src/lib/taptic.ts

@@ -1,7 +1,9 @@
-import vkBridge, { TapticVibrationPowerType } from '@vkontakte/vk-bridge';
+import vkBridge, { TapticVibrationPowerType } from "@vkontakte/vk-bridge";
 
 export function runTapticImpactOccurred(style: TapticVibrationPowerType) {
-  if (vkBridge.supports('VKWebAppTapticImpactOccurred')) {
-    vkBridge.send('VKWebAppTapticImpactOccurred', { style }).catch(() => undefined);
+  if (vkBridge.supports("VKWebAppTapticImpactOccurred")) {
+    vkBridge
+      .send("VKWebAppTapticImpactOccurred", { style })
+      .catch(() => undefined);
   }
 }

package/src/lib/testing.ts

@@ -1,4 +1,4 @@
-import { canUseDOM } from '@vkontakte/vkjs';
+import { canUseDOM } from "@vkontakte/vkjs";
 
 // eslint-disable-next-line no-restricted-globals
 export const isTesting = Boolean(canUseDOM && (window as any).__isVkuiTesting);

package/src/lib/touch.ts

@@ -1,4 +1,4 @@
-import { canUseDOM } from '@vkontakte/vkjs';
+import { canUseDOM } from "@vkontakte/vkjs";
 
 export interface VKUITouchEvent extends MouseEvent, TouchEvent {}
 export type VKUITouchEventHander = (e: VKUITouchEvent) => void;
@@ -24,7 +24,7 @@ const coordY = (e: VKUITouchEvent): number => {
 };
 
 // eslint-disable-next-line no-restricted-globals
-const touchEnabled = () => canUseDOM && 'ontouchstart' in window;
+const touchEnabled = () => canUseDOM && "ontouchstart" in window;
 
 /*
  * Возвращает массив поддерживаемых событий
@@ -33,22 +33,27 @@ const touchEnabled = () => canUseDOM && 'ontouchstart' in window;
  */
 function getSupportedEvents(): string[] {
   if (touchEnabled()) {
-    return ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
+    return ["touchstart", "touchmove", "touchend", "touchcancel"];
   }
 
-  return ['mousedown', 'mousemove', 'mouseup', 'mouseleave'];
+  return ["mousedown", "mousemove", "mouseup", "mouseleave"];
 }
 
 /*
  * Рассчитывает "сопротивление" для iOS тач-событий
  */
-function rubber(offset: number, dimension: number, resistanceRate: number, isAndroid: boolean): number {
+function rubber(
+  offset: number,
+  dimension: number,
+  resistanceRate: number,
+  isAndroid: boolean
+): number {
   if (isAndroid || offset < 0) {
     return offset;
   }
 
   const offsettedResistance = offset * resistanceRate;
-  return offsettedResistance * dimension / (offsettedResistance + dimension);
+  return (offsettedResistance * dimension) / (offsettedResistance + dimension);
 }
 
 export { getSupportedEvents, coordX, coordY, touchEnabled, rubber };

package/src/lib/useIsomorphicLayoutEffect.ts

@@ -1,5 +1,7 @@
-import * as React from 'react';
-import { canUseDOM } from './dom';
+import * as React from "react";
+import { canUseDOM } from "./dom";
 
-// eslint-disable-next-line no-restricted-properties
-export const useIsomorphicLayoutEffect = canUseDOM ? React.useLayoutEffect : React.useEffect;
+export const useIsomorphicLayoutEffect = canUseDOM
+  ? // eslint-disable-next-line no-restricted-properties
+    React.useLayoutEffect
+  : React.useEffect;

package/src/lib/utils.ts

@@ -1,7 +1,10 @@
-import * as React from 'react';
+import * as React from "react";
 
 export type ImgOnlyAttributes = {
-  [index in Exclude<keyof React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>]: React.ImgHTMLAttributes<HTMLImageElement>[index];
+  [index in Exclude<
+    keyof React.ImgHTMLAttributes<HTMLImageElement>,
+    keyof React.HTMLAttributes<HTMLImageElement>
+  >]: React.ImgHTMLAttributes<HTMLImageElement>[index];
 };
 
 // Является ли переданное значение числовым
@@ -10,11 +13,14 @@ export function isNumeric(value: any): boolean {
 }
 
 // Является ли переданное значение функцией
-export function isFunction(value: any): value is ((...args: any[]) => any) {
-  return typeof value === 'function';
+export function isFunction(value: any): value is (...args: any[]) => any {
+  return typeof value === "function";
 }
 
-export function debounce<A extends any[]>(fn: (...args: A) => void, delay: number) {
+export function debounce<A extends any[]>(
+  fn: (...args: A) => void,
+  delay: number
+) {
   let timeout: any;
 
   return (...args: A) => {
@@ -27,23 +33,25 @@ export function leadingZero(val: number) {
   let strVal = val.toFixed();
 
   if (strVal.length === 1) {
-    return '0' + strVal;
+    return "0" + strVal;
   }
 
   return strVal;
 }
 
 export function hasReactNode(value: React.ReactNode): boolean {
-  return value !== undefined && value !== false && value !== null && value !== '';
+  return (
+    value !== undefined && value !== false && value !== null && value !== ""
+  );
 }
 
 export function isPrimitiveReactNode(node: React.ReactNode): boolean {
-  return typeof node === 'string' || typeof node === 'number';
+  return typeof node === "string" || typeof node === "number";
 }
 
 export function setRef<T>(element: T, ref: React.Ref<T>): void {
   if (ref) {
-    if (typeof ref === 'function') {
+    if (typeof ref === "function") {
       ref(element);
     } else {
       (ref as React.MutableRefObject<T>).current = element;
@@ -51,7 +59,9 @@ export function setRef<T>(element: T, ref: React.Ref<T>): void {
   }
 }
 
-export function multiRef<T>(...refs: Array<React.Ref<T>>): React.RefObject<T> {
+export function multiRef<T>(
+  ...refs: Array<React.Ref<T> | undefined>
+): React.RefObject<T> {
   let current: T | null = null;
   return {
     get current() {
@@ -59,7 +69,7 @@ export function multiRef<T>(...refs: Array<React.Ref<T>>): React.RefObject<T> {
     },
     set current(element) {
       current = element;
-      refs.forEach((ref) => setRef(element, ref));
+      refs.forEach((ref) => ref && setRef(element, ref));
     },
   };
 }
@@ -68,10 +78,10 @@ export function multiRef<T>(...refs: Array<React.Ref<T>>): React.RefObject<T> {
 export const noop = () => {};
 
 export function getTitleFromChildren(children: React.ReactNode): string {
-  let label = '';
+  let label = "";
 
   React.Children.map(children, (child) => {
-    if (typeof child === 'string') {
+    if (typeof child === "string") {
       label += child;
     }
   });

package/src/styles/animations.css

@@ -7,3 +7,13 @@
     transform: rotate(360deg);
   }
 }
+
+@keyframes vkui-popper-fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/src/styles/bright_light.css

@@ -2,7 +2,10 @@
 /*
 * Этот файл сгенерирован автоматически. Не надо править его руками.
 */
-:root, body[scheme="bright_light"], [scheme="bright_light"] {
+:root,
+body[scheme="bright_light"],
+[scheme="bright_light"],
+.vkuibright_light {
   --accent: #2688eb;
   --accent_alternate: #0077ff;
   --action_sheet_action_foreground: #2688eb;
@@ -21,7 +24,7 @@
   --background_light: #f9f9f9;
   --background_page: #ebedf0;
   --background_suggestions: #ffffff;
-  --background_text_highlighted: rgba(38, 136, 235, 0.20);
+  --background_text_highlighted: rgba(38, 136, 235, 0.2);
   --button_bot_shadow: #c4c8cc;
   --button_commerce_background: #4bb34b;
   --button_commerce_foreground: #ffffff;
@@ -36,10 +39,10 @@
   --button_secondary_destructive_background: rgba(0, 28, 61, 0.05);
   --button_secondary_destructive_background_highlighted: rgba(0, 28, 61, 0.03);
   --button_secondary_destructive_foreground: #e64646;
-  --button_secondary_destructive_foreground_highlighted: rgba(230, 70, 70, 0.60);
+  --button_secondary_destructive_foreground_highlighted: rgba(230, 70, 70, 0.6);
   --button_secondary_foreground: #2688eb;
-  --button_secondary_foreground_highlighted: rgba(38, 136, 235, 0.60);
-  --button_tertiary_background: rgba(0, 0, 0, 0.00);
+  --button_secondary_foreground_highlighted: rgba(38, 136, 235, 0.6);
+  --button_tertiary_background: rgba(0, 0, 0, 0);
   --button_tertiary_foreground: #2d81e0;
   --cell_button_foreground: #2688eb;
   --content_placeholder_icon: #99a2ad;
@@ -87,7 +90,7 @@
   --header_background_before_blur_alternate: #ffffff;
   --header_search_field_background: #ebedf0;
   --header_search_field_tint: #818c99;
-  --header_tab_active_background: rgba(0, 0, 0, 0.00);
+  --header_tab_active_background: rgba(0, 0, 0, 0);
   --header_tab_active_indicator: #2688eb;
   --header_tab_active_text: #000000;
   --header_tab_inactive_text: #99a2ad;
@@ -112,7 +115,7 @@
   --im_bubble_button_background: #f9f9f9;
   --im_bubble_button_background_highlighted: #d7d8d9;
   --im_bubble_button_foreground: #000000;
-  --im_bubble_button_outgoing_background: rgba(255, 255, 255, 0.60);
+  --im_bubble_button_outgoing_background: rgba(255, 255, 255, 0.6);
   --im_bubble_gift_background: #f4e7c3;
   --im_bubble_gift_background_highlighted: #e3d3ac;
   --im_bubble_gift_text: #857250;
@@ -147,16 +150,16 @@
   --input_border: #e1e3e6;
   --landing_background: #ffffff;
   --landing_field_background: #f2f3f5;
-  --landing_field_border: rgba(0, 0, 0, 0.00);
+  --landing_field_border: rgba(0, 0, 0, 0);
   --landing_field_placeholder: #818c99;
   --landing_login_button_background: #2d81e0;
   --landing_login_button_foreground: #ffffff;
   --landing_primary_button_background: #2d81e0;
   --landing_primary_button_foreground: #ffffff;
-  --landing_secondary_button_background: rgba(0, 57, 115, 0.10);
+  --landing_secondary_button_background: rgba(0, 57, 115, 0.1);
   --landing_secondary_button_foreground: #2688eb;
   --landing_snippet_border: rgba(0, 0, 0, 0.15);
-  --landing_tertiary_button_background: rgba(0, 0, 0, 0.00);
+  --landing_tertiary_button_background: rgba(0, 0, 0, 0);
   --landing_tertiary_button_foreground: #2d81e0;
   --landing_text_primary: #000000;
   --landing_text_secondary: #818c99;
@@ -170,7 +173,7 @@
   --media_overlay_button_background: #ffffff;
   --media_overlay_button_foreground: #2c2d2e;
   --modal_card_background: #ffffff;
-  --modal_card_border: rgba(0, 0, 0, 0.00);
+  --modal_card_border: rgba(0, 0, 0, 0);
   --modal_card_header_close: #000000;
   --music_playback_icon: #000000;
   --overlay_status_background: #ebedf0;
@@ -185,13 +188,13 @@
   --placeholder_icon_foreground_secondary: #aeb7c2;
   --placeholder_icon_tint: #001c3d;
   --poll_option_background: #45678f;
-  --primary_overlay_badge: rgba(0, 0, 0, 0.60);
+  --primary_overlay_badge: rgba(0, 0, 0, 0.6);
   --search_bar_background: #ffffff;
   --search_bar_field_background: #ebedf0;
   --search_bar_field_tint: #818c99;
   --search_bar_segmented_control_tint: #818c99;
   --secondary_overlay_badge: rgba(0, 0, 0, 0.24);
-  --segmented_control_bar_background: rgba(0, 0, 0, 0.00);
+  --segmented_control_bar_background: rgba(0, 0, 0, 0);
   --segmented_control_tint: #99a2ad;
   --selection_off_icon: #b8c1cc;
   --separator_alpha: rgba(0, 0, 0, 0.12);
@@ -205,7 +208,7 @@
   --snippet_border: rgba(0, 0, 0, 0.15);
   --snippet_icon_tertiary: #c4c8cc;
   --splashscreen_icon: #e1e3e6;
-  --statusbar_alternate_legacy_background: rgba(0, 0, 0, 0.20);
+  --statusbar_alternate_legacy_background: rgba(0, 0, 0, 0.2);
   --stories_create_button_background_from: #f2f3f5;
   --stories_create_button_background_to: #e1e3e6;
   --stories_create_button_foreground: #6d7885;

package/src/styles/common.css

@@ -25,10 +25,15 @@
 .vkui__root input,
 .vkui__root textarea,
 .vkui__root select,
-.vkui__root button {
+.vkui__root button,
+.vkui__portal-root input,
+.vkui__portal-root textarea,
+.vkui__portal-root select,
+.vkui__portal-root button {
   font-family: inherit;
 }
 
-.vkui__root *:focus {
+.vkui__root *:focus,
+.vkui__portal-root *:focus {
   outline: none;
 }

package/src/styles/components.css

@@ -1,132 +1,135 @@
-@import './constants.css';
-@import './animations.css';
+@import "./constants.css";
+@import "./animations.css";
 
 /* Файлы с CSS компонентов подключаются здесь неслучайно. Пока не удалось делать импорты через JS так,
  * чтобы в каждом файле были доступны CSS переменные без их дублирования.
  */
 
-@import '../components/AppRoot/AppRoot.css';
+@import "../components/AppRoot/AppRoot.css";
 
 /* Typography */
-@import '../components/Typography/Title/Title.css';
-@import '../components/Typography/Headline/Headline.css';
-@import '../components/Typography/Subhead/Subhead.css';
-@import '../components/Typography/Caption/Caption.css';
-@import '../components/Typography/Text/Text.css';
+@import "../components/Typography/Title/Title.css";
+@import "../components/Typography/Headline/Headline.css";
+@import "../components/Typography/Subhead/Subhead.css";
+@import "../components/Typography/Caption/Caption.css";
+@import "../components/Typography/Text/Text.css";
 
 /* Service */
-@import '../components/Tappable/Tappable.css';
-@import '../components/FixedLayout/FixedLayout.css';
+@import "../components/Tappable/Tappable.css";
+@import "../components/FixedLayout/FixedLayout.css";
 
 /* Primitives */
-@import '../components/Button/Button.css';
-@import '../components/Removable/Removable.css';
-@import '../components/FocusVisible/FocusVisible.css';
+@import "../components/Button/Button.css";
+@import "../components/Removable/Removable.css";
+@import "../components/FocusVisible/FocusVisible.css";
 
 /* Layout */
-@import '../components/Root/Root.css';
-@import '../components/View/View.css';
-@import '../components/Panel/Panel.css';
-@import '../components/PanelHeader/PanelHeader.css';
-@import '../components/PanelHeaderButton/PanelHeaderButton.css';
-@import '../components/PanelHeaderBack/PanelHeaderBack.css';
-@import '../components/PanelHeaderContent/PanelHeaderContent.css';
-@import '../components/PanelHeaderContext/PanelHeaderContext.css';
-@import '../components/PopoutRoot/PopoutRoot.css';
-@import '../components/SplitLayout/SplitLayout.css';
-@import '../components/SplitCol/SplitCol.css';
-@import '../components/Epic/Epic.css';
-@import '../components/Tabbar/Tabbar.css';
-@import '../components/TabbarItem/TabbarItem.css';
-@import '../components/HorizontalScroll/HorizontalScroll.css';
-@import '../components/HorizontalScroll/HorizontalScrollArrow.css';
+@import "../components/Root/Root.css";
+@import "../components/View/View.css";
+@import "../components/Panel/Panel.css";
+@import "../components/PanelHeader/PanelHeader.css";
+@import "../components/PanelHeaderButton/PanelHeaderButton.css";
+@import "../components/PanelHeaderBack/PanelHeaderBack.css";
+@import "../components/PanelHeaderContent/PanelHeaderContent.css";
+@import "../components/PanelHeaderContext/PanelHeaderContext.css";
+@import "../components/PopoutRoot/PopoutRoot.css";
+@import "../components/SplitLayout/SplitLayout.css";
+@import "../components/SplitCol/SplitCol.css";
+@import "../components/Epic/Epic.css";
+@import "../components/Tabbar/Tabbar.css";
+@import "../components/TabbarItem/TabbarItem.css";
+@import "../components/HorizontalScroll/HorizontalScroll.css";
+@import "../components/HorizontalScroll/HorizontalScrollArrow.css";
 
 /* Popouts */
-@import '../components/PopoutWrapper/PopoutWrapper.css';
-@import '../components/ActionSheet/ActionSheet.css';
-@import '../components/ActionSheetItem/ActionSheetItem.css';
-@import '../components/Alert/Alert.css';
-@import '../components/ScreenSpinner/ScreenSpinner.css';
-@import '../components/Snackbar/Snackbar.css';
+@import "../components/PopoutWrapper/PopoutWrapper.css";
+@import "../components/ActionSheet/ActionSheet.css";
+@import "../components/ActionSheetItem/ActionSheetItem.css";
+@import "../components/Alert/Alert.css";
+@import "../components/ScreenSpinner/ScreenSpinner.css";
+@import "../components/Snackbar/Snackbar.css";
 
 /* Modals */
-@import '../components/ModalCardBase/ModalCardBase.css';
-@import '../components/ModalRoot/ModalRoot.css';
-@import '../components/ModalCard/ModalCard.css';
-@import '../components/ModalPage/ModalPage.css';
-@import '../components/ModalDismissButton/ModalDismissButton.css';
-@import '../components/ModalPageHeader/ModalPageHeader.css';
+@import "../components/ModalCardBase/ModalCardBase.css";
+@import "../components/ModalRoot/ModalRoot.css";
+@import "../components/ModalCard/ModalCard.css";
+@import "../components/ModalPage/ModalPage.css";
+@import "../components/ModalDismissButton/ModalDismissButton.css";
+@import "../components/ModalPageHeader/ModalPageHeader.css";
 
 /* Blocks */
-@import '../components/Badge/Badge.css';
-@import '../components/IconButton/IconButton.css';
-@import '../components/Card/Card.css';
-@import '../components/CardGrid/CardGrid.css';
-@import '../components/CardScroll/CardScroll.css';
-@import '../components/ContentCard/ContentCard.css';
-@import '../components/Div/Div.css';
-@import '../components/Link/Link.css';
-@import '../components/Header/Header.css';
-@import '../components/Group/Group.css';
-@import '../components/Gradient/Gradient.css';
-@import '../components/SimpleCell/SimpleCell.css';
-@import '../components/Cell/Cell.css';
-@import '../components/Cell/CellCheckbox/CellCheckbox.css';
-@import '../components/Cell/CellDragger/CellDragger.css';
-@import '../components/CellButton/CellButton.css';
-@import '../components/RichCell/RichCell.css';
-@import '../components/HorizontalCell/HorizontalCell.css';
-@import '../components/List/List.css';
-@import '../components/Footer/Footer.css';
-@import '../components/Spinner/Spinner.css';
-@import '../components/Switch/Switch.css';
-@import '../components/InfoRow/InfoRow.css';
-@import '../components/Avatar/Avatar.css';
-@import '../components/InitialsAvatar/InitialsAvatar.css';
-@import '../components/GridAvatar/GridAvatar.css';
-@import '../components/Gallery/Gallery.css';
-@import '../components/Progress/Progress.css';
-@import '../components/Search/Search.css';
-@import '../components/Tabs/Tabs.css';
-@import '../components/TabsItem/TabsItem.css';
-@import '../components/Tooltip/Tooltip.css';
-@import '../components/PullToRefresh/PullToRefresh.css';
-@import '../components/Counter/Counter.css';
-@import '../components/UsersStack/UsersStack.css';
-@import '../components/Separator/Separator.css';
-@import '../components/Spacing/Spacing.css';
-@import '../components/Placeholder/Placeholder.css';
-@import '../components/Banner/Banner.css';
-@import '../components/MiniInfoCell/MiniInfoCell.css';
-@import '../components/WriteBar/WriteBar.css';
-@import '../components/WriteBarIcon/WriteBarIcon.css';
-@import '../components/SubnavigationBar/SubnavigationBar.css';
-@import '../components/SubnavigationButton/SubnavigationButton.css';
+@import "../components/Badge/Badge.css";
+@import "../components/IconButton/IconButton.css";
+@import "../components/Card/Card.css";
+@import "../components/CardGrid/CardGrid.css";
+@import "../components/CardScroll/CardScroll.css";
+@import "../components/ContentCard/ContentCard.css";
+@import "../components/Div/Div.css";
+@import "../components/Link/Link.css";
+@import "../components/Header/Header.css";
+@import "../components/Group/Group.css";
+@import "../components/Gradient/Gradient.css";
+@import "../components/SimpleCell/SimpleCell.css";
+@import "../components/Cell/Cell.css";
+@import "../components/Cell/CellCheckbox/CellCheckbox.css";
+@import "../components/Cell/CellDragger/CellDragger.css";
+@import "../components/CellButton/CellButton.css";
+@import "../components/RichCell/RichCell.css";
+@import "../components/HorizontalCell/HorizontalCell.css";
+@import "../components/List/List.css";
+@import "../components/Footer/Footer.css";
+@import "../components/Spinner/Spinner.css";
+@import "../components/Switch/Switch.css";
+@import "../components/InfoRow/InfoRow.css";
+@import "../components/Avatar/Avatar.css";
+@import "../components/InitialsAvatar/InitialsAvatar.css";
+@import "../components/GridAvatar/GridAvatar.css";
+@import "../components/Gallery/Gallery.css";
+@import "../components/Progress/Progress.css";
+@import "../components/Search/Search.css";
+@import "../components/Tabs/Tabs.css";
+@import "../components/TabsItem/TabsItem.css";
+@import "../components/Tooltip/Tooltip.css";
+@import "../components/PullToRefresh/PullToRefresh.css";
+@import "../components/Counter/Counter.css";
+@import "../components/UsersStack/UsersStack.css";
+@import "../components/Separator/Separator.css";
+@import "../components/Spacing/Spacing.css";
+@import "../components/Placeholder/Placeholder.css";
+@import "../components/Banner/Banner.css";
+@import "../components/MiniInfoCell/MiniInfoCell.css";
+@import "../components/WriteBar/WriteBar.css";
+@import "../components/WriteBarIcon/WriteBarIcon.css";
+@import "../components/SubnavigationBar/SubnavigationBar.css";
+@import "../components/SubnavigationButton/SubnavigationButton.css";
 
 /* Forms */
-@import '../components/FormLayout/FormLayout.css';
-@import '../components/FormItem/FormItem.css';
-@import '../components/FormLayoutGroup/FormLayoutGroup.css';
-@import '../components/FormStatus/FormStatus.css';
-@import '../components/Slider/Slider.css';
-@import '../components/FormField/FormField.css';
-@import '../components/Radio/Radio.css';
-@import '../components/Checkbox/Checkbox.css';
-@import '../components/Input/Input.css';
-@import '../components/ChipsInput/ChipsInput.css';
-@import '../components/Chip/Chip.css';
-@import '../components/Select/Select.css';
-@import '../components/Textarea/Textarea.css';
-@import '../components/File/File.css';
-@import '../components/CustomScrollView/CustomScrollView.css';
-@import '../components/CustomSelect/CustomSelect.css';
-@import '../components/CustomSelectOption/CustomSelectOption.css';
-@import '../components/DatePicker/DatePicker.css';
-@import '../components/SliderSwitch/SliderSwitch.css';
+@import "../components/FormLayout/FormLayout.css";
+@import "../components/FormItem/FormItem.css";
+@import "../components/FormLayoutGroup/FormLayoutGroup.css";
+@import "../components/FormStatus/FormStatus.css";
+@import "../components/Slider/Slider.css";
+@import "../components/FormField/FormField.css";
+@import "../components/Radio/Radio.css";
+@import "../components/RadioGroup/RadioGroup.css";
+@import "../components/Checkbox/Checkbox.css";
+@import "../components/Input/Input.css";
+@import "../components/ChipsInput/ChipsInput.css";
+@import "../components/Chip/Chip.css";
+@import "../components/Select/Select.css";
+@import "../components/Textarea/Textarea.css";
+@import "../components/File/File.css";
+@import "../components/CustomScrollView/CustomScrollView.css";
+@import "../components/CustomSelect/CustomSelect.css";
+@import "../components/CustomSelectOption/CustomSelectOption.css";
+@import "../components/DatePicker/DatePicker.css";
+@import "../components/SliderSwitch/SliderSwitch.css";
+@import "../components/Popper/Popper.css";
+@import "../components/CustomSelectDropdown/CustomSelectDropdown.css";
 
 /* Advertisement */
-@import '../components/PromoBanner/PromoBanner.css';
+@import "../components/PromoBanner/PromoBanner.css";
 
 /* Глобальные стили vkui.
  */
-@import './common.css';
+@import "./common.css";

package/src/styles/constants.css

@@ -1,11 +1,18 @@
 :root {
   /* fonts */
   --font-common: -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif;
-  --font-tt: "TT Commons", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif;
+  /* @deprecated
+   * --font-tt будет удален в 5.0.0, используйте --font-display
+   * В коде библиотеки использовать нельзя. Оставлен для обратной совместимости для пользователей библиотеки.
+   */
+  --font-tt: "TT Commons", -apple-system, system-ui, Helvetica Neue, Roboto,
+    sans-serif;
+  --font-display: "VK Sans Display", -apple-system, system-ui, Helvetica Neue,
+    Roboto, sans-serif;
 
   /* easings */
-  --ios-easing: cubic-bezier(.36, .66, .04, 1);
-  --android-easing: cubic-bezier(.4, 0, .2, 1);
+  --ios-easing: cubic-bezier(0.36, 0.66, 0.04, 1);
+  --android-easing: cubic-bezier(0.4, 0, 0.2, 1);
 
   /* sizes */
   --tabbar_height: 48px;
@@ -31,18 +38,18 @@
   --safe-area-inset-left: 0px;
 
   /* animations */
-  --duration: .7s;
+  --duration: 0.7s;
 }
 
 @media (min-resolution: 2dppx) {
   :root {
-    --thin-border: .5px;
+    --thin-border: 0.5px;
   }
 }
 
 @media (min-resolution: 3dppx) {
   :root {
-    --thin-border: .33px;
+    --thin-border: 0.33px;
   }
 }