@vkontakte/vkui 4.25.2 → 4.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.25.2",
+  "version": "4.26.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "@vkontakte/eslint-config": "2.5.0",
     "@vkontakte/icons": "^1.136.0",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.0.0-rc.71",
+    "@vkontakte/vkui-tokens": "4.2.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -147,7 +147,7 @@
     "size": "yarn clear && concurrently 'yarn:babel' 'yarn:postcss' && size-limit",
     "size:ci": "yarn install --frozen-lockfile --ignore-scripts && yarn build:no-types",
     "styleguide": "cross-env NODE_ENV=development styleguidist server --config=styleguide/config.js",
-    "styleguide:props": "cross-env NODE_ENV=development VKUI_STYLEGUIDE_PROPSPARSER=1 styleguidist server --config=styleguide/config.js",
+    "styleguide:props": "VKUI_STYLEGUIDE_PROPSPARSER=1 yarn styleguide",
     "styleguide:build": "cross-env NODE_ENV=production styleguidist build --config=styleguide/config.js",
     "dev": "yarn clear && concurrently \"yarn:tsc-dev\" \"yarn:babel-dev\" \"yarn:postcss-dev\"",
     "dev-cjs": "yarn clear && concurrently \"yarn:tsc-cjs-dev\" \"yarn:babel-cjs-dev\" \"yarn:postcss-dev\"",

package/postcss.config.js

@@ -10,6 +10,10 @@ const { defaultSchemeId } = require("./package.json");
 
 const animationsSource = path.join(__dirname, "src/styles/animations.css");
 const cssPropSources = [
+  path.join(
+    __dirname,
+    "node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css"
+  ),
   path.join(__dirname, "src/styles/bright_light.css"),
   path.join(__dirname, "src/styles/constants.css"),
   animationsSource,
@@ -27,7 +31,12 @@ let plugins = [
   // postcss-custom-properties only works with :root
   scopeRoot({
     customPropRoot: ".vkui__root, .vkui__portal-root",
-    except: path.resolve(`./src/styles/${defaultSchemeId}.css`),
+    except: [
+      path.resolve(`./src/styles/${defaultSchemeId}.css`),
+      path.resolve(
+        "./node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css"
+      ),
+    ],
   }),
   autoprefixer(),
   cssModules({

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -48,7 +48,7 @@ export interface ActionSheetItemProps
 const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
   children,
   autoclose,
-  mode,
+  mode = "default",
   meta,
   subtitle,
   before,
@@ -181,9 +181,8 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
   );
 };
 
-ActionSheetItem.defaultProps = {
-  mode: "default",
-};
+const ActionSheetItemWithAdaptivity = withAdaptivity(ActionSheetItem, {
+  sizeY: true,
+});
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(ActionSheetItem, { sizeY: true });
+export { ActionSheetItemWithAdaptivity as ActionSheetItem };

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -135,5 +135,4 @@ function calculateAdaptivity(
   return { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover };
 }
 
-// eslint-disable-next-line import/no-default-export
-export default AdaptivityProvider;
+export { AdaptivityProvider };

package/src/components/Alert/Alert.tsx

@@ -285,9 +285,10 @@ class Alert extends React.Component<TAlertProps, AlertState> {
   }
 }
 
-// eslint-disable-next-line import/no-default-export
-export default withPlatform(
+const AlertWithPlatformAndAdaptivity = withPlatform(
   withAdaptivity(Alert, {
     viewWidth: true,
   })
 );
+
+export { AlertWithPlatformAndAdaptivity as Alert };

package/src/components/AppRoot/AppRoot.tsx

@@ -209,6 +209,3 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     hasMouse: true,
   }
 );
-
-// eslint-disable-next-line import/no-default-export
-export default AppRoot;

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { AppearanceType } from "@vkontakte/vk-bridge";
 import { AppearanceProviderContext } from "./AppearanceProviderContext";
 import { getScheme } from "../../helpers/getScheme";
-import { classNames } from "../../lib/classNames";
+import { classNamesString } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 
 export interface AppearanceProviderProps {
@@ -31,7 +31,7 @@ export const AppearanceProvider: React.FC<AppearanceProviderProps> = ({
       {React.Children.map(children, (child) => {
         if (React.isValidElement(child)) {
           return React.cloneElement(child, {
-            className: classNames(
+            className: classNamesString(
               child.props.className,
               `vkui${appearanceContext.scheme}`
             ),

package/src/components/Button/Button.css

@@ -4,11 +4,11 @@
   box-sizing: border-box;
   text-decoration: none;
   border: none;
-  min-height: var(--vkui--size_button_small_height--regular, 28px);
+  min-height: var(--vkui--size_button_small_height--compact);
   margin: 0;
   padding: 0;
   user-select: none;
-  border-radius: var(--vkui--size_border_radius--regular, 8px);
+  border-radius: var(--vkui--size_border_radius--regular);
   max-width: 100%;
 }
 
@@ -41,7 +41,7 @@
 }
 
 .Button[disabled] {
-  opacity: var(--vkui--opacity_disable, 0.4);
+  opacity: var(--vkui--opacity_disable);
 }
 
 .Button--lvl-primary[disabled]:not(.Button--clr-overlay):not(.Button--clr-negative):not(.Button--clr-positive),
@@ -163,15 +163,7 @@
 /* Mode = Secondary */
 .Button--lvl-secondary {
   background-color: var(
-    --content_tint_background,
-    var(--vkui--color_background_secondary)
-  );
-}
-
-/* Only for VKCOM */
-.Button--vkcom.Button--lvl-secondary {
-  background-color: var(
-    --control_background,
+    --button_secondary_background,
     var(--vkui--color_background_secondary)
   );
 }
@@ -490,52 +482,30 @@
   transform: translateY(-1px);
 }
 
-/**
- * iOS
- */
-.Button--ios {
-  min-height: 26px;
-  border-radius: 10px;
-}
-
-/**
- * VKCOM
- */
-.Button--vkcom {
-  min-height: 26px;
-  border-radius: 4px;
-}
-
-.Button--vkcom.Button--lvl-secondary .Icon,
-.Button--vkcom.Button--lvl-tertiary .Icon,
-.Button--vkcom.Button--lvl-outline .Icon {
-  opacity: 0.72;
-}
-
 /**
  * sizeY COMPACT
  */
 .Button--sz-m {
-  min-height: var(--vkui--size_button_medium_height--compact, 32px);
+  min-height: var(--vkui--size_button_medium_height--compact);
 }
 
 .Button--sz-l {
-  min-height: var(--vkui--size_button_large_height--compact, 36px);
+  min-height: var(--vkui--size_button_large_height--compact);
 }
 
 /**
  * sizeY REGULAR
  */
 .Button--sizeY-regular {
-  min-height: var(--vkui--size_button_small_height--regular, 30px);
+  min-height: var(--vkui--size_button_small_height--regular);
 }
 
 .Button--sizeY-regular.Button--sz-m {
-  min-height: var(--vkui--size_button_medium_height--regular, 36px);
+  min-height: var(--vkui--size_button_medium_height--regular);
 }
 
 .Button--sizeY-regular.Button--sz-l {
-  min-height: var(--vkui--size_button_large_height--regular, 44px);
+  min-height: var(--vkui--size_button_large_height--regular);
 }
 
 /**

package/src/components/Button/Button.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
@@ -14,7 +13,7 @@ import {
   SizeType,
   withAdaptivity,
 } from "../../hoc/withAdaptivity";
-import { Platform, IOS, VKCOM } from "../../lib/platform";
+import { IOS, VKCOM, PlatformType } from "../../lib/platform";
 import Spinner from "../Spinner/Spinner";
 import "./Button.css";
 
@@ -46,7 +45,7 @@ export interface ButtonProps
 
 interface ButtonTypographyProps extends HasComponent {
   size: ButtonProps["size"];
-  platform: Platform | undefined;
+  platform: PlatformType | undefined;
   sizeY: AdaptivityProps["sizeY"];
   children?: ButtonProps["children"];
 }
@@ -174,7 +173,7 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
       onClick={loading ? undefined : onClick}
       focusVisibleMode="outside"
       vkuiClass={classNames(
-        getClassName("Button", platform),
+        "Button",
         `Button--sz-${size}`,
         `Button--lvl-${resolvedMode}`,
         `Button--clr-${resolvedAppearance}`,

package/src/components/Card/Card.css

@@ -1,6 +1,10 @@
 .Card {
   position: relative;
-  background: var(--content_tint_background);
+  background: var(
+    --content_tint_background,
+    var(--vkui--color_background_secondary)
+  );
+  border-radius: var(--vkui--size_card_border_radius--regular);
 }
 
 .Card__in {
@@ -10,12 +14,16 @@
 }
 
 .Card--md-shadow {
-  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.08), 0 0 2px 0 rgba(0, 0, 0, 0.08);
-  background: var(--modal_card_background);
+  box-shadow: var(
+    --vkui--elevation3,
+    0 2px 24px 0 rgba(0, 0, 0, 0.08),
+    0 0 2px 0 rgba(0, 0, 0, 0.08)
+  );
+  background: var(--modal_card_background, var(--vkui--color_background_modal));
 }
 
 .Card--md-outline {
-  background: var(--modal_card_background);
+  background: var(--modal_card_background, var(--vkui--color_background_modal));
 }
 
 .Card--md-outline::before {
@@ -26,25 +34,9 @@
   height: 100%;
   content: "";
   display: block;
-  border: var(--thin-border) solid var(--input_border);
+  border: var(--thin-border) solid
+    var(--input_border, var(--vkui--color_image_border_alpha));
   z-index: 1;
   box-sizing: border-box;
   border-radius: inherit;
 }
-
-/**
-  * iOS
- */
-
-.Card--ios {
-  border-radius: 10px;
-}
-
-/**
- * Android, VKCOM
- */
-
-.Card--android,
-.Card--vkcom {
-  border-radius: 8px;
-}

package/src/components/CardScroll/CardScroll.css

@@ -4,7 +4,7 @@
 }
 
 .CardScroll .Card {
-  margin-right: 8px;
+  margin-right: var(--vkui--size_cardgrid_padding--regular);
   flex-shrink: 0;
 }
 
@@ -33,33 +33,20 @@
   width: 100%;
 }
 
-/**
- * iOS
- */
-
-.CardScroll--ios .CardScroll__gap {
-  width: 12px;
-}
-
-/**
- * Android & VKCOM
- */
-
-.CardScroll--android .CardScroll__gap,
-.CardScroll--vkcom .CardScroll__gap {
-  width: 16px;
+.CardScroll--withSpaces .CardScroll__gap {
+  width: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 /**
  * SplitCol
  */
 
-.SplitCol--spaced .CardScroll {
+.SplitCol--spaced .CardScroll--withSpaces .CardScroll {
   margin-left: -16px;
   margin-right: -16px;
 }
 
-.SplitCol--spaced .CardScroll__gap {
+.SplitCol--spaced .CardScroll--withSpaces .CardScroll__gap {
   width: 16px;
 }
 
@@ -75,7 +62,7 @@
  * Group
  */
 
-.Group--card .CardScroll {
+.Group--card .CardScroll--withSpaces {
   margin-left: -8px;
   margin-right: -8px;
 }
@@ -88,10 +75,10 @@
   margin-right: 16px;
 }
 
-.Group--card .CardScroll:first-child {
-  padding-top: 8px;
+.Group--card .CardScroll--withSpaces:first-child {
+  padding-top: var(--vkui--size_cardgrid_padding_vertical--regular);
 }
 
-.Group--card .CardScroll:last-child {
-  padding-bottom: 8px;
+.Group--card .CardScroll--withSpaces:last-child {
+  padding-bottom: var(--vkui--size_cardgrid_padding_vertical--regular);
 }

package/src/components/CardScroll/CardScroll.tsx

@@ -2,7 +2,9 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
-import HorizontalScroll from "../HorizontalScroll/HorizontalScroll";
+import HorizontalScroll, {
+  HorizontalScrollProps,
+} from "../HorizontalScroll/HorizontalScroll";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { useDOM } from "../../lib/dom";
 import "./CardScroll.css";
@@ -10,13 +12,21 @@ import "./CardScroll.css";
 export interface CardScrollProps
   extends React.HTMLAttributes<HTMLDivElement>,
     AdaptivityProps {
-  size?: "s" | "m" | "l";
+  /**
+   * При size = "s", "m", "l" у Card будет явно задана ширина в %
+   * При size = false ширина Card будет регулироваться контентом внутри
+   */
+  size?: "s" | "m" | "l" | false;
+  showArrows?: HorizontalScrollProps["showArrows"];
+  withSpaces: boolean;
 }
 
 const CardScroll: React.FC<CardScrollProps> = ({
   children,
   size,
+  showArrows = true,
   sizeX,
+  withSpaces = true,
   ...restProps
 }: CardScrollProps) => {
   const platform = usePlatform();
@@ -88,14 +98,15 @@ const CardScroll: React.FC<CardScrollProps> = ({
       {...restProps}
       vkuiClass={classNames(
         getClassName("CardScroll", platform),
+        `CardScroll--sizeX-${sizeX}`,
         `CardScroll--${size}`,
-        `CardScroll--sizeX-${sizeX}`
+        { ["CardScroll--withSpaces"]: withSpaces }
       )}
     >
       <HorizontalScroll
         getScrollToLeft={getScrollToLeft}
         getScrollToRight={getScrollToRight}
-        showArrows={true}
+        showArrows={showArrows}
       >
         <div vkuiClass="CardScroll__in" ref={refContainer}>
           <span vkuiClass="CardScroll__gap" ref={gapRef} />

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -16,6 +16,7 @@ import {
   Scheme,
 } from "../../helpers/scheme";
 import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
+import { Platform } from "../../lib/platform";
 
 export interface ConfigProviderProps extends ConfigProviderContextInterface {
   /**
@@ -58,21 +59,41 @@ const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
     ? "dark"
     : "light";
 
+const generateVKUITokensClassName = (
+  platform: string,
+  appearance: string
+): string => {
+  let tokensPlatform;
+  switch (platform) {
+    case Platform.ANDROID:
+      tokensPlatform = "vkBase";
+      break;
+    case Platform.IOS:
+      tokensPlatform = "vkIOS";
+      break;
+    case Platform.VKCOM:
+      tokensPlatform = "vkCom";
+      break;
+    default:
+      tokensPlatform = platform;
+  }
+
+  return `vkui--${tokensPlatform}--${appearance}`;
+};
+
 const ConfigProvider: React.FC<ConfigProviderProps> = ({
   children,
-  schemeTarget,
   ...props
-}: React.PropsWithChildren<ConfigProviderProps> & {
-  schemeTarget?: HTMLElement;
 }) => {
   const config = { ...defaultConfigProviderProps, ...props };
+  const { platform, appearance } = config;
   const scheme = normalizeScheme({
     scheme: config.scheme,
-    platform: config.platform,
-    appearance: config.appearance,
+    platform: platform,
+    appearance: appearance,
   });
   const { document } = useDOM();
-  const target = schemeTarget || document?.body;
+  const target = document?.body;
 
   useIsomorphicLayoutEffect(() => {
     if (scheme === "inherit") {
@@ -91,8 +112,23 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
   }, [scheme]);
 
   const realScheme = useSchemeDetector(target, scheme);
+  const derivedAppearance = deriveAppearance(realScheme);
+
+  useIsomorphicLayoutEffect(() => {
+    const VKUITokensClassName = generateVKUITokensClassName(
+      platform,
+      derivedAppearance
+    );
+
+    target?.classList.add(VKUITokensClassName);
+
+    return () => {
+      target?.classList.remove(VKUITokensClassName);
+    };
+  }, [platform, derivedAppearance]);
+
   const configContext = useObjectMemo({
-    appearance: deriveAppearance(realScheme),
+    appearance: derivedAppearance,
     ...config,
   });
 

package/src/components/ContentCard/ContentCard.tsx

@@ -7,6 +7,7 @@ import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
+import { warnOnce } from "../../lib/warnOnce";
 import { HasRef, HasRootRef } from "../../types";
 import { classNames } from "../../lib/classNames";
 import "./ContentCard.css";
@@ -46,6 +47,7 @@ export interface ContentCardProps
   mode?: CardProps["mode"];
 }
 
+const warn = warnOnce("ContentCard");
 const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
   const {
     subtitle,
@@ -78,6 +80,10 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
 
   const source = image || src;
 
+  if (image && process.env.NODE_ENV === "development") {
+    warn("Свойство image устарело и будет удалено в 5.0.0. Используйте src");
+  }
+
   return (
     <Card
       mode={mode}

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -39,7 +39,7 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
   const { sizeY } = useAdaptivity();
 
   if (!!option && process.env.NODE_ENV === "development") {
-    warn("Свойство option было добавлено по ошибке будет и удалено в 5.0.0");
+    warn("Свойство option было добавлено по ошибке и будет удалено в 5.0.0.");
   }
 
   return (

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -7,6 +7,7 @@ import { easeInOutSine } from "../../lib/fx";
 import { useEventListener } from "../../hooks/useEventListener";
 import { useExternRef } from "../../hooks/useExternRef";
 import { HasRef } from "../../types";
+import { classNames } from "../../lib/classNames";
 import "./HorizontalScroll.css";
 
 interface ScrollContext {
@@ -38,7 +39,7 @@ export interface HorizontalScrollProps
    * Функция для расчета величины прокрутки при клике на правую стрелку.
    */
   getScrollToRight?: ScrollPositionHandler;
-  showArrows?: boolean;
+  showArrows?: boolean | "always";
   scrollAnimationDuration?: number;
 }
 
@@ -181,7 +182,12 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   React.useEffect(onscroll, [scrollerRef, children, onscroll]);
 
   return (
-    <div {...restProps} vkuiClass={getClassName("HorizontalScroll", platform)}>
+    <div
+      {...restProps}
+      vkuiClass={classNames(getClassName("HorizontalScroll", platform), {
+        ["HorizontalScroll--withConstArrows"]: showArrows === "always",
+      })}
+    >
       {showArrows && hasMouse && canScrollLeft && (
         <HorizontalScrollArrow
           direction="left"

package/src/components/HorizontalScroll/HorizontalScrollArrow.css

@@ -22,7 +22,9 @@
 }
 
 .HorizontalScroll:hover .HorizontalScrollArrow:hover,
-.Gallery:hover .HorizontalScrollArrow:hover {
+.Gallery:hover .HorizontalScrollArrow:hover,
+.HorizontalScroll--withConstArrows .HorizontalScrollArrow,
+.HorizontalScroll--withConstArrows:hover .HorizontalScrollArrow {
   opacity: 1;
 }
 

package/src/components/IconButton/IconButton.tsx

@@ -5,6 +5,7 @@ import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { IOS } from "../../lib/platform";
+import { warnOnce } from "../../lib/warnOnce";
 import "./IconButton.css";
 
 export interface IconButtonProps extends TappableProps {
@@ -14,6 +15,7 @@ export interface IconButtonProps extends TappableProps {
   icon?: React.ReactNode;
 }
 
+const warn = warnOnce("IconButton");
 const IconButton: React.FC<IconButtonProps> = ({
   icon,
   sizeY,
@@ -23,6 +25,12 @@ const IconButton: React.FC<IconButtonProps> = ({
 }: IconButtonProps) => {
   const platform = usePlatform();
 
+  if (icon && process.env.NODE_ENV === "development") {
+    warn(
+      "Свойство icon устарело и будет удалено в 5.0.0. Используйте children"
+    );
+  }
+
   return (
     <Tappable
       {...restProps}

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -2,8 +2,9 @@ import * as React from "react";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
+import { warnOnce } from "../../lib/warnOnce";
 import { usePlatform } from "../../hooks/usePlatform";
-import { isPrimitiveReactNode } from "../../lib/utils";
+import { getTitleFromChildren, isPrimitiveReactNode } from "../../lib/utils";
 import { IOS, VKCOM, ANDROID } from "../../lib/platform";
 import Text from "../Typography/Text/Text";
 import Title from "../Typography/Title/Title";
@@ -41,9 +42,10 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = ({
   );
 };
 
+const warn = warnOnce("PanelHeaderButton");
 export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
   children,
-  primary,
+  primary = false,
   label,
   ...restProps
 }: PanelHeaderButtonProps) => {
@@ -68,6 +70,21 @@ export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
       activeMode = "PanelHeaderButton--active";
   }
 
+  if (process.env.NODE_ENV === "development") {
+    const hasAccessibleName = Boolean(
+      getTitleFromChildren(children) ||
+        getTitleFromChildren(label) ||
+        restProps["aria-label"] ||
+        restProps["aria-labelledby"]
+    );
+
+    if (!hasAccessibleName) {
+      warn(
+        "a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label."
+      );
+    }
+  }
+
   return (
     <Tappable
       {...restProps}
@@ -94,8 +111,3 @@ export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
     </Tappable>
   );
 };
-
-PanelHeaderButton.defaultProps = {
-  primary: false,
-  "aria-label": "Закрыть",
-};