@vkontakte/vkui 4.28.0 → 4.28.1

package/src/lib/touch.ts

@@ -0,0 +1,59 @@
+import { canUseDOM } from "@vkontakte/vkjs";
+
+export interface VKUITouchEvent extends MouseEvent, TouchEvent {}
+export type VKUITouchEventHander = (e: VKUITouchEvent) => void;
+
+/*
+ * Получает координату по оси абсцисс из touch- или mouse-события
+ */
+const coordX = (e: VKUITouchEvent): number => {
+  if (e.clientX != null) {
+    return e.clientX;
+  }
+  return e.changedTouches && e.changedTouches[0].clientX;
+};
+
+/*
+ * Получает координату по оси ординат из touch- или mouse-события
+ */
+const coordY = (e: VKUITouchEvent): number => {
+  if (e.clientY != null) {
+    return e.clientY;
+  }
+  return e.changedTouches && e.changedTouches[0].clientY;
+};
+
+// eslint-disable-next-line no-restricted-globals
+const touchEnabled = () => canUseDOM && "ontouchstart" in window;
+
+/*
+ * Возвращает массив поддерживаемых событий
+ * Если браузер поддерживает pointer events или подключена handjs, вернет события указателя.
+ * Если нет, используем события мыши
+ */
+function getSupportedEvents(): string[] {
+  if (touchEnabled()) {
+    return ["touchstart", "touchmove", "touchend", "touchcancel"];
+  }
+
+  return ["mousedown", "mousemove", "mouseup", "mouseleave"];
+}
+
+/*
+ * Рассчитывает "сопротивление" для iOS тач-событий
+ */
+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);
+}
+
+export { getSupportedEvents, coordX, coordY, touchEnabled, rubber };

package/src/lib/useIsomorphicLayoutEffect.ts

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

package/src/lib/utils.ts

@@ -0,0 +1,99 @@
+import * as React from "react";
+
+export type ImgOnlyAttributes = {
+  [index in Exclude<
+    keyof React.ImgHTMLAttributes<HTMLImageElement>,
+    keyof React.HTMLAttributes<HTMLImageElement>
+  >]: React.ImgHTMLAttributes<HTMLImageElement>[index];
+};
+
+// Является ли переданное значение числовым
+export function isNumeric(value: any): boolean {
+  return !isNaN(parseFloat(value)) && isFinite(value);
+}
+
+// Является ли переданное значение функцией
+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
+) {
+  let timeout: any;
+
+  return (...args: A) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), delay);
+  };
+}
+
+export function leadingZero(val: number) {
+  let strVal = val.toFixed();
+
+  if (strVal.length === 1) {
+    return "0" + strVal;
+  }
+
+  return strVal;
+}
+
+export function hasReactNode(value: React.ReactNode): boolean {
+  return (
+    value !== undefined && value !== false && value !== null && value !== ""
+  );
+}
+
+export function isPrimitiveReactNode(node: React.ReactNode): boolean {
+  return typeof node === "string" || typeof node === "number";
+}
+
+export function setRef<T>(element: T, ref?: React.Ref<T>): void {
+  if (ref) {
+    if (typeof ref === "function") {
+      ref(element);
+    } else {
+      (ref as React.MutableRefObject<T>).current = element;
+    }
+  }
+}
+
+export function multiRef<T>(
+  ...refs: Array<React.Ref<T> | undefined>
+): React.RefObject<T> {
+  let current: T | null = null;
+  return {
+    get current() {
+      return current;
+    },
+    set current(element) {
+      current = element;
+      refs.forEach((ref) => ref && setRef(element, ref));
+    },
+  };
+}
+
+// eslint-disable-next-line
+export const noop = () => {};
+
+export function getTitleFromChildren(children: React.ReactNode): string {
+  let label = "";
+
+  React.Children.map(children, (child) => {
+    if (typeof child === "string") {
+      label += child;
+    }
+  });
+
+  return label;
+}
+
+export const generateRandomId = () => {
+  return Math.random()
+    .toString(36)
+    .replace(/[^a-z]+/g, "");
+};
+
+export const stopPropagation = <T extends React.SyntheticEvent>(event: T) =>
+  event.stopPropagation();

package/src/lib/warnOnce.ts

@@ -0,0 +1,9 @@
+export function warnOnce(zone: string) {
+  const didWarn: { [msg: string]: boolean } = {};
+  return (message: string) => {
+    if (!didWarn[message]) {
+      console.error(`[VKUI/${zone}] ${message}`);
+      didWarn[message] = true;
+    }
+  };
+}

package/src/styles/animations.css

@@ -0,0 +1,19 @@
+@keyframes vkui-rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes vkui-popper-fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/src/styles/bright_light.css

@@ -0,0 +1,244 @@
+/* stylelint-disable */
+/*
+* Этот файл сгенерирован автоматически. Не надо править его руками.
+*/
+:root,
+body[scheme="bright_light"],
+[scheme="bright_light"],
+.vkuibright_light {
+  --accent: #2688eb;
+  --accent_alternate: #0077ff;
+  --action_sheet_action_foreground: #2688eb;
+  --action_sheet_separator: rgba(0, 0, 0, 0.12);
+  --activity_indicator_tint: #aeb7c2;
+  --attach_picker_tab_active_background: #2d81e0;
+  --attach_picker_tab_active_icon: #ffffff;
+  --attach_picker_tab_active_text: #2d81e0;
+  --attach_picker_tab_inactive_background: #f2f3f5;
+  --attach_picker_tab_inactive_icon: #818c99;
+  --attach_picker_tab_inactive_text: #818c99;
+  --background_content: #ffffff;
+  --background_highlighted: rgba(0, 0, 0, 0.08);
+  --background_hover: rgba(0, 0, 0, 0.04);
+  --background_keyboard: #e1e3e6;
+  --background_light: #f9f9f9;
+  --background_page: #ebedf0;
+  --background_suggestions: #ffffff;
+  --background_text_highlighted: rgba(38, 136, 235, 0.2);
+  --button_bot_shadow: #c4c8cc;
+  --button_commerce_background: #4bb34b;
+  --button_commerce_foreground: #ffffff;
+  --button_muted_background: #f2f3f5;
+  --button_muted_foreground: #2688eb;
+  --button_outline_border: #2688eb;
+  --button_outline_foreground: #2688eb;
+  --button_primary_background: #2d81e0;
+  --button_primary_foreground: #ffffff;
+  --button_secondary_background: rgba(0, 28, 61, 0.05);
+  --button_secondary_background_highlighted: rgba(0, 28, 61, 0.03);
+  --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.6);
+  --button_secondary_foreground: #2688eb;
+  --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;
+  --content_placeholder_text: #818c99;
+  --content_positive_background: rgba(75, 179, 75, 0.15);
+  --content_tint_background: #f5f5f5;
+  --content_tint_foreground: #7f8285;
+  --content_warning_background: #fff2d6;
+  --control_background: #ebedf0;
+  --control_foreground: #5181b8;
+  --control_tint: #ffffff;
+  --control_tint_muted: #76787a;
+  --counter_primary_background: #2688eb;
+  --counter_primary_text: #ffffff;
+  --counter_prominent_background: #ff3347;
+  --counter_prominent_text: #ffffff;
+  --counter_secondary_background: #aeb7c2;
+  --counter_secondary_text: #ffffff;
+  --destructive: #e64646;
+  --dynamic_blue: #2688eb;
+  --dynamic_gray: #a3adb8;
+  --dynamic_green: #4bb34b;
+  --dynamic_orange: #ffa000;
+  --dynamic_purple: #735ce6;
+  --dynamic_raspberry_pink: #e03fab;
+  --dynamic_red: #ff3347;
+  --dynamic_violet: #792ec0;
+  --feed_recommended_friend_promo_background: #528bcc;
+  --field_background: #f2f3f5;
+  --field_border: rgba(0, 0, 0, 0.12);
+  --field_error_background: #faebeb;
+  --field_error_border: #e64646;
+  --field_text_placeholder: #818c99;
+  --field_valid_border: #4bb34b;
+  --float_button_background: #f5f5f5;
+  --float_button_background_highlighted: #ebedf0;
+  --float_button_border: rgba(0, 0, 0, 0.05);
+  --float_button_foreground: #99a2ad;
+  --header_alternate_background: #ffffff;
+  --header_alternate_tab_active_indicator: #2688eb;
+  --header_alternate_tab_active_text: #000000;
+  --header_alternate_tab_inactive_text: #99a2ad;
+  --header_background: #ffffff;
+  --header_background_before_blur: #ffffff;
+  --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);
+  --header_tab_active_indicator: #2688eb;
+  --header_tab_active_text: #000000;
+  --header_tab_inactive_text: #99a2ad;
+  --header_text: #000000;
+  --header_text_alternate: #000000;
+  --header_text_secondary: #818c99;
+  --header_tint: #2688eb;
+  --header_tint_alternate: #2688eb;
+  --icon_alpha_placeholder: #ffffff;
+  --icon_medium: #818c99;
+  --icon_medium_alpha: rgba(0, 0, 0, 0.48);
+  --icon_name: #74a2d6;
+  --icon_outline_medium: #818c99;
+  --icon_outline_secondary: #99a2ad;
+  --icon_secondary: #99a2ad;
+  --icon_secondary_alpha: rgba(0, 0, 0, 0.36);
+  --icon_tertiary: #b8c1cc;
+  --icon_tertiary_alpha: rgba(0, 0, 0, 0.24);
+  --im_attach_tint: #2d81e0;
+  --im_bubble_border_alternate: #e1e3e6;
+  --im_bubble_border_alternate_highlighted: #d7d8d9;
+  --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.6);
+  --im_bubble_gift_background: #f4e7c3;
+  --im_bubble_gift_background_highlighted: #e3d3ac;
+  --im_bubble_gift_text: #857250;
+  --im_bubble_gift_text_secondary: #ab9871;
+  --im_bubble_incoming: #ebedf0;
+  --im_bubble_incoming_alternate: #ffffff;
+  --im_bubble_incoming_alternate_highlighted: #f9f9f9;
+  --im_bubble_incoming_expiring: #e6e9ff;
+  --im_bubble_incoming_expiring_highlighted: #ccd3ff;
+  --im_bubble_incoming_highlighted: #d7d8d9;
+  --im_bubble_outgoing: #cce4ff;
+  --im_bubble_outgoing_alternate: #ffffff;
+  --im_bubble_outgoing_alternate_highlighted: #f9f9f9;
+  --im_bubble_outgoing_expiring: #ccd3ff;
+  --im_bubble_outgoing_expiring_highlighted: #adb8ff;
+  --im_bubble_outgoing_highlighted: #add3ff;
+  --im_bubble_wallpaper_button_background: #f2f3f5;
+  --im_bubble_wallpaper_button_background_highlighted: #e1e3e6;
+  --im_bubble_wallpaper_button_foreground: #000000;
+  --im_bubble_wallpaper_incoming: #ffffff;
+  --im_bubble_wallpaper_incoming_highlighted: #ebedf0;
+  --im_bubble_wallpaper_outgoing: #cce4ff;
+  --im_bubble_wallpaper_outgoing_highlighted: #add3ff;
+  --im_forward_line_tint: rgba(69, 103, 143, 0.24);
+  --im_reply_separator: #2d81e0;
+  --im_service_message_text: #818c99;
+  --im_text_name: #2d81e0;
+  --im_toolbar_separator: #001c3d;
+  --im_toolbar_voice_msg_background: #99a2ad;
+  --image_border: rgba(0, 0, 0, 0.08);
+  --input_background: #f2f3f5;
+  --input_border: #e1e3e6;
+  --landing_background: #ffffff;
+  --landing_field_background: #f2f3f5;
+  --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.1);
+  --landing_secondary_button_foreground: #2688eb;
+  --landing_snippet_border: rgba(0, 0, 0, 0.15);
+  --landing_tertiary_button_background: rgba(0, 0, 0, 0);
+  --landing_tertiary_button_foreground: #2d81e0;
+  --landing_text_primary: #000000;
+  --landing_text_secondary: #818c99;
+  --landing_text_title: #2d81e0;
+  --like_text_tint: #ff3347;
+  --link_alternate: #2d81e0;
+  --loader_background: #ebedf0;
+  --loader_tint: #76787a;
+  --loader_track_fill: #e1e3e6;
+  --loader_track_value_fill: #528bcc;
+  --media_overlay_button_background: #ffffff;
+  --media_overlay_button_foreground: #2c2d2e;
+  --modal_card_background: #ffffff;
+  --modal_card_border: rgba(0, 0, 0, 0);
+  --modal_card_header_close: #000000;
+  --music_playback_icon: #000000;
+  --overlay_status_background: #ebedf0;
+  --overlay_status_foreground: #6d7885;
+  --overlay_status_icon: #818c99;
+  --panel_tab_active_background: #ebedf0;
+  --panel_tab_active_text: #5d5f61;
+  --panel_tab_inactive_text: #76787a;
+  --placeholder_icon_background: rgba(0, 28, 61, 0.08);
+  --placeholder_icon_background_opaque: #f2f3f5;
+  --placeholder_icon_foreground_primary: #99a2ad;
+  --placeholder_icon_foreground_secondary: #aeb7c2;
+  --placeholder_icon_tint: #001c3d;
+  --poll_option_background: #45678f;
+  --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);
+  --segmented_control_tint: #99a2ad;
+  --selection_off_icon: #b8c1cc;
+  --separator_alpha: rgba(0, 0, 0, 0.12);
+  --separator_alternate: #e1e3e6;
+  --separator_common: #d7d8d9;
+  --skeleton_foreground_from: #f5f5f5;
+  --skeleton_foreground_to: #e1e3e6;
+  --skeleton_shimmer_from: #ffffff;
+  --skeleton_shimmer_to: #ffffff;
+  --snippet_background: #ffffff;
+  --snippet_border: rgba(0, 0, 0, 0.15);
+  --snippet_icon_tertiary: #c4c8cc;
+  --splashscreen_icon: #e1e3e6;
+  --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;
+  --stories_create_button_icon_background: #ffffff;
+  --stories_skeleton_loader_background: #c4c8cc;
+  --switch_ios_off_border: #e1e3e6;
+  --tabbar_active_icon: #2975cc;
+  --tabbar_background: #f9f9f9;
+  --tabbar_inactive_icon: #99a2ad;
+  --tabbar_tablet_active_icon: #2975cc;
+  --tabbar_tablet_background: #f9f9f9;
+  --tabbar_tablet_inactive_icon: #99a2ad;
+  --tabbar_tablet_text_primary: #000000;
+  --tabbar_tablet_text_secondary: #909499;
+  --text_action_counter: #818c99;
+  --text_link: #2d81e0;
+  --text_link_highlighted_background: #000000;
+  --text_muted: #2c2d2e;
+  --text_name: #2d81e0;
+  --text_placeholder: #818c99;
+  --text_primary: #000000;
+  --text_secondary: #818c99;
+  --text_subhead: #6d7885;
+  --text_tertiary: #99a2ad;
+  --toolbar_attach_background_from: #b8c1cc;
+  --toolbar_attach_background_to: #a3adb8;
+  --vk_connect_button_primary_background: #19191a;
+  --vk_connect_button_primary_foreground: #ffffff;
+  --vk_connect_button_secondary_background: #f2f3f5;
+  --vk_connect_button_secondary_foreground: #19191a;
+  --writebar_icon: #2688eb;
+}
+/* stylelint-enable */

package/src/styles/common.css

@@ -0,0 +1,39 @@
+.vkui > body {
+  overflow-x: hidden;
+}
+
+.vkui,
+.vkui > body,
+.vkui__root {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+.vkui,
+.vkui > body,
+.vkui__root,
+.vkui__portal-root {
+  -webkit-font-smoothing: subpixel-antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+  font-family: var(--font-common);
+  color: var(--text_primary);
+}
+
+.vkui__root input,
+.vkui__root textarea,
+.vkui__root select,
+.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__portal-root *:focus {
+  outline: none;
+}

package/src/styles/components.css

@@ -0,0 +1,152 @@
+@import "./constants.css";
+@import "./animations.css";
+
+/* Файлы с CSS компонентов подключаются здесь неслучайно. Пока не удалось делать импорты через JS так,
+ * чтобы в каждом файле были доступны 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";
+
+/* Service */
+@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";
+
+/* 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";
+
+/* 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";
+
+/* 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";
+
+/* Blocks */
+@import "../components/ButtonGroup/ButtonGroup.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";
+@import "../components/Pagination/Pagination.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/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/SelectMimicry/SelectMimicry.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";
+@import "../components/SegmentedControl/SegmentedControl.css";
+@import "../components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.css";
+@import "../components/VisuallyHiddenInput/VisuallyHiddenInput.css";
+
+@import "../components/Calendar/Calendar.css";
+@import "../components/CalendarDay/CalendarDay.css";
+@import "../components/CalendarDays/CalendarDays.css";
+@import "../components/CalendarHeader/CalendarHeader.css";
+@import "../components/CalendarRange/CalendarRange.css";
+@import "../components/CalendarTime/CalendarTime.css";
+@import "../components/InputLike/InputLike.css";
+@import "../components/InputLike/InputLikeDivider.css";
+@import "../components/DateInput/DateInput.css";
+@import "../components/DateRangeInput/DateRangeInput.css";
+
+/* Advertisement */
+@import "../components/PromoBanner/PromoBanner.css";
+
+/* Глобальные стили vkui.
+ */
+@import "./common.css";