@vkontakte/vkui 4.22.2 → 4.25.1

package/src/components/Touch/Touch.tsx

@@ -1,12 +1,21 @@
-import * as React from 'react';
-import { getSupportedEvents, coordX, coordY, touchEnabled, VKUITouchEvent } from '../../lib/touch';
-import { HasComponent, HasRootRef } from '../../types';
-import { useDOM } from '../../lib/dom';
-import { useExternRef } from '../../hooks/useExternRef';
-import { useEventListener } from '../../hooks/useEventListener';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-
-export interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
+import * as React from "react";
+import {
+  getSupportedEvents,
+  coordX,
+  coordY,
+  touchEnabled,
+  VKUITouchEvent,
+} from "../../lib/touch";
+import { HasComponent, HasRootRef } from "../../types";
+import { useDOM } from "../../lib/dom";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useEventListener } from "../../hooks/useEventListener";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+
+export interface TouchProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent {
   /**
    * Привязать onEnter и onLeave через pointer-events - работает на disabled-инпутах
    */
@@ -70,7 +79,7 @@ export const Touch: React.FC<TouchProps> = ({
   usePointerHover,
   slideThreshold = 5,
   useCapture = false,
-  Component = 'div',
+  Component = "div",
   getRootRef,
   noSlideClick = false,
   stopPropagation = false,
@@ -79,42 +88,65 @@ export const Touch: React.FC<TouchProps> = ({
   const { document } = useDOM();
   const events = React.useMemo(getSupportedEvents, []);
   const didSlide = React.useRef(false);
-  const gesture = React.useRef<Partial<Gesture>>(null);
-  const handle = (e: VKUITouchEvent, handers: TouchEventHandler[]) => {
+  const gesture = React.useRef<Partial<Gesture> | null>(null);
+  const handle = (
+    e: VKUITouchEvent,
+    handers: Array<TouchEventHandler | undefined | false>
+  ) => {
     stopPropagation && e.stopPropagation();
     handers.forEach((cb) => {
-      const duration = Date.now() - gesture.current.startT.getTime();
-      cb && cb({ ...gesture.current as Gesture, duration, originalEvent: e });
+      const duration = Date.now() - (gesture.current?.startT?.getTime() ?? 0);
+      cb && cb({ ...(gesture.current as Gesture), duration, originalEvent: e });
     });
   };
 
-  const enterHandler = useEventListener(usePointerHover ? 'pointerenter' : 'mouseenter', onEnter);
-  const leaveHandler = useEventListener(usePointerHover ? 'pointerleave' : 'mouseleave', onLeave);
-  const startHandler = useEventListener(events[0], (e: VKUITouchEvent) => {
-    gesture.current = initGesture(coordX(e), coordY(e));
-
-    handle(e, [onStart, onStartX, onStartY]);
-    // 1 line, 2 bad specs, 2 workarounds:
-    subscribe(touchEnabled()
-      // Touch events fire on initial target, and won't bubble if its removed
-      // see: #235, #1968, https://stackoverflow.com/a/45760014
-      ? e.target as HTMLElement
-      // Mouse events fire on the element under pointer, so we lose move / end
-      // if pointer goes outside container.
-      // Can be fixed by PointerEvents' setPointerCapture later
-      : document);
-  }, { capture: useCapture, passive: false });
+  const enterHandler = useEventListener(
+    usePointerHover ? "pointerenter" : "mouseenter",
+    onEnter
+  );
+  const leaveHandler = useEventListener(
+    usePointerHover ? "pointerleave" : "mouseleave",
+    onLeave
+  );
+  const startHandler = useEventListener(
+    events[0],
+    (e: VKUITouchEvent) => {
+      gesture.current = initGesture(coordX(e), coordY(e));
+
+      handle(e, [onStart, onStartX, onStartY]);
+      // 1 line, 2 bad specs, 2 workarounds:
+      subscribe(
+        touchEnabled()
+          ? // Touch events fire on initial target, and won't bubble if its removed
+            // see: #235, #1968, https://stackoverflow.com/a/45760014
+            (e.target as HTMLElement)
+          : // Mouse events fire on the element under pointer, so we lose move / end
+            // if pointer goes outside container.
+            // Can be fixed by PointerEvents' setPointerCapture later
+            document
+      );
+    },
+    { capture: useCapture, passive: false }
+  );
   const containerRef = useExternRef(getRootRef);
 
   useIsomorphicLayoutEffect(() => {
     const el = containerRef.current;
-    enterHandler.add(el);
-    leaveHandler.add(el);
-    startHandler.add(el);
+    if (el) {
+      enterHandler.add(el);
+      leaveHandler.add(el);
+      startHandler.add(el);
+    }
   }, [Component]);
 
   function onMove(e: VKUITouchEvent) {
-    const { isPressed, isX, isY, startX, startY } = gesture.current;
+    const {
+      isPressed,
+      isX,
+      isY,
+      startX = 0,
+      startY = 0,
+    } = gesture.current ?? {};
 
     if (isPressed) {
       // смещения
@@ -146,7 +178,7 @@ export const Touch: React.FC<TouchProps> = ({
         });
       }
 
-      if (gesture.current.isSlide) {
+      if (gesture.current?.isSlide) {
         Object.assign(gesture.current, {
           shiftX,
           shiftY,
@@ -154,19 +186,23 @@ export const Touch: React.FC<TouchProps> = ({
           shiftYAbs,
         });
 
-        handle(e, [_onMove, gesture.current.isSlideX && onMoveX, gesture.current.isSlideY && onMoveY]);
+        handle(e, [
+          _onMove,
+          gesture.current.isSlideX && onMoveX,
+          gesture.current.isSlideY && onMoveY,
+        ]);
       }
     }
   }
 
   function onEnd(e: VKUITouchEvent) {
-    const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current;
+    const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current ?? {};
 
     if (isPressed) {
       handle(e, [_onEnd, isSlideY && onEndY, isSlideX && onEndX]);
     }
 
-    didSlide.current = isSlide;
+    didSlide.current = Boolean(isSlide);
     gesture.current = {};
 
     // Если это был тач-евент, симулируем отмену hover
@@ -182,8 +218,10 @@ export const Touch: React.FC<TouchProps> = ({
     useEventListener(events[2], onEnd, listenerParams),
     useEventListener(events[3], onEnd, listenerParams),
   ];
-  function subscribe(el: HTMLElement | Document | null) {
-    listeners.forEach((l) => l.add(el));
+  function subscribe(el: HTMLElement | Document | null | undefined) {
+    if (el) {
+      listeners.forEach((l) => l.add(el));
+    }
   }
 
   /**
@@ -192,7 +230,7 @@ export const Touch: React.FC<TouchProps> = ({
    */
   const onDragStart = (e: React.DragEvent<HTMLElement>) => {
     const target = e.target as HTMLElement;
-    if (target.tagName === 'A' || target.tagName === 'IMG') {
+    if (target.tagName === "A" || target.tagName === "IMG") {
       e.preventDefault();
     }
   };
@@ -206,7 +244,7 @@ export const Touch: React.FC<TouchProps> = ({
       return onClickCapture && onClickCapture(e);
     }
     // eslint-disable-next-line no-restricted-properties
-    if ((e.target as HTMLElement).closest('a')) {
+    if ((e.target as HTMLElement).closest("a")) {
       e.preventDefault();
     }
     if (noSlideClick) {

package/src/components/Touch/TouchContext.ts

@@ -1,9 +1,11 @@
-import * as React from 'react';
+import * as React from "react";
 
 /**
  * Контекст для компонентов, использующих Touch в качестве корневой обёртки,
  * и для которых важно не предотвращать вспылие тач-событий от дочерних компонентов
  */
-const TouchRootContext: React.Context<boolean> = React.createContext<boolean>(false);
+const TouchRootContext: React.Context<boolean> =
+  React.createContext<boolean>(false);
 
+// eslint-disable-next-line import/no-default-export
 export default TouchRootContext;

package/src/components/Typography/Caption/Caption.tsx

@@ -1,22 +1,24 @@
-import * as React from 'react';
-import { HasComponent } from '../../../types';
-import { usePlatform } from '../../../hooks/usePlatform';
-import { classNames } from '../../../lib/classNames';
-import { getClassName } from '../../../helpers/getClassName';
-import './Caption.css';
+import * as React from "react";
+import { HasComponent } from "../../../types";
+import { usePlatform } from "../../../hooks/usePlatform";
+import { classNames } from "../../../lib/classNames";
+import { getClassName } from "../../../helpers/getClassName";
+import "./Caption.css";
 
-export interface CaptionProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
-  weight: 'regular' | 'medium' | 'semibold' | 'bold';
-  level: '1' | '2' | '3' | '4';
+export interface CaptionProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasComponent {
+  weight: "regular" | "medium" | "semibold" | "bold";
+  level: "1" | "2" | "3" | "4";
   caps?: boolean;
 }
 
 const Caption: React.FC<CaptionProps> = ({
   children,
-  weight = 'regular',
-  level = '1',
+  weight = "regular",
+  level = "1",
   caps,
-  Component = 'span',
+  Component = "span",
   ...restProps
 }: CaptionProps) => {
   const platform = usePlatform();
@@ -24,20 +26,19 @@ const Caption: React.FC<CaptionProps> = ({
   return (
     <Component
       {...restProps}
-      vkuiClass={
-        classNames(
-          getClassName('Caption', platform),
-          `Caption--w-${weight}`,
-          `Caption--l-${level}`,
-          {
-            'Caption--caps': caps,
-          },
-        )
-      }
+      vkuiClass={classNames(
+        getClassName("Caption", platform),
+        `Caption--w-${weight}`,
+        `Caption--l-${level}`,
+        {
+          "Caption--caps": caps,
+        }
+      )}
     >
       {children}
     </Component>
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Caption;

package/src/components/Typography/Caption/Readme.md

@@ -1,5 +1,6 @@
 Упрощения в Android-версии (происходят автоматически):
-* `semibold` превращается в `medium`
+
+- `semibold` превращается в `medium`
 
 ```jsx
 <View activePanel="test">
@@ -7,18 +8,42 @@
     <PanelHeader>Caption</PanelHeader>
     <Group>
       <Div>
-        <Caption level="1" weight="regular" style={{ marginBottom: 16 }}>Caption 1 regular</Caption>
-        <Caption level="1" weight="medium" style={{ marginBottom: 16 }}>Caption 1 medium</Caption>
-        <Caption level="1" weight="semibold" style={{ marginBottom: 16 }}>Caption 1 semibold</Caption>
-        <Caption level="1" weight="semibold" caps style={{ marginBottom: 16 }}>Caption CAPS 1 semibold</Caption>
-        <Caption level="2" weight="regular" style={{ marginBottom: 16 }}>Caption 2 regular</Caption>
-        <Caption level="2" weight="medium" style={{ marginBottom: 16 }}>Caption 2 medium</Caption>
-        <Caption level="2" weight="semibold" style={{ marginBottom: 16 }}>Caption 2 semibold</Caption>
-        <Caption level="2" weight="semibold" caps style={{ marginBottom: 16 }}>Caption CAPS 2 semibold</Caption>
-        <Caption level="3" weight="regular" style={{ marginBottom: 16 }}>Caption 3 regular</Caption>
-        <Caption level="3" weight="semibold" caps style={{ marginBottom: 16 }}>Caption CAPS 3 semibold</Caption>
-        <Caption level="4" weight="regular" style={{ marginBottom: 16 }}>Caption 4 regular</Caption>
-        <Caption level="4" weight="bold" caps>Caption CAPS 4 bold</Caption>
+        <Caption level="1" weight="regular" style={{ marginBottom: 16 }}>
+          Caption 1 regular
+        </Caption>
+        <Caption level="1" weight="medium" style={{ marginBottom: 16 }}>
+          Caption 1 medium
+        </Caption>
+        <Caption level="1" weight="semibold" style={{ marginBottom: 16 }}>
+          Caption 1 semibold
+        </Caption>
+        <Caption level="1" weight="semibold" caps style={{ marginBottom: 16 }}>
+          Caption CAPS 1 semibold
+        </Caption>
+        <Caption level="2" weight="regular" style={{ marginBottom: 16 }}>
+          Caption 2 regular
+        </Caption>
+        <Caption level="2" weight="medium" style={{ marginBottom: 16 }}>
+          Caption 2 medium
+        </Caption>
+        <Caption level="2" weight="semibold" style={{ marginBottom: 16 }}>
+          Caption 2 semibold
+        </Caption>
+        <Caption level="2" weight="semibold" caps style={{ marginBottom: 16 }}>
+          Caption CAPS 2 semibold
+        </Caption>
+        <Caption level="3" weight="regular" style={{ marginBottom: 16 }}>
+          Caption 3 regular
+        </Caption>
+        <Caption level="3" weight="semibold" caps style={{ marginBottom: 16 }}>
+          Caption CAPS 3 semibold
+        </Caption>
+        <Caption level="4" weight="regular" style={{ marginBottom: 16 }}>
+          Caption 4 regular
+        </Caption>
+        <Caption level="4" weight="bold" caps>
+          Caption CAPS 4 bold
+        </Caption>
       </Div>
     </Group>
   </Panel>

package/src/components/Typography/Headline/Headline.tsx

@@ -1,18 +1,20 @@
-import * as React from 'react';
-import { HasComponent } from '../../../types';
-import { usePlatform } from '../../../hooks/usePlatform';
-import { classNames } from '../../../lib/classNames';
-import { getClassName } from '../../../helpers/getClassName';
-import './Headline.css';
+import * as React from "react";
+import { HasComponent } from "../../../types";
+import { usePlatform } from "../../../hooks/usePlatform";
+import { classNames } from "../../../lib/classNames";
+import { getClassName } from "../../../helpers/getClassName";
+import "./Headline.css";
 
-export interface HeadlineProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
-  weight: 'regular' | 'medium' | 'semibold';
+export interface HeadlineProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasComponent {
+  weight: "regular" | "medium" | "semibold";
 }
 
 const Headline: React.FC<HeadlineProps> = ({
   children,
-  weight = 'regular',
-  Component = 'h3',
+  weight = "regular",
+  Component = "h3",
   ...restProps
 }: HeadlineProps) => {
   const platform = usePlatform();
@@ -20,11 +22,15 @@ const Headline: React.FC<HeadlineProps> = ({
   return (
     <Component
       {...restProps}
-      vkuiClass={classNames(getClassName('Headline', platform), `Headline--w-${weight}`)}
+      vkuiClass={classNames(
+        getClassName("Headline", platform),
+        `Headline--w-${weight}`
+      )}
     >
       {children}
     </Component>
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Headline;

package/src/components/Typography/Headline/Readme.md

@@ -1,5 +1,6 @@
 Упрощения в Android-версии (происходят автоматически):
-* `semibold` превращается в `medium`
+
+- `semibold` превращается в `medium`
 
 ```jsx
 <View activePanel="test">
@@ -7,9 +8,15 @@
     <PanelHeader>Headline</PanelHeader>
     <Group>
       <Div>
-        <Headline weight="regular" style={{ marginBottom: 16 }}>Headline regular</Headline>
-        <Headline weight="medium" style={{ marginBottom: 16 }}>Headline medium</Headline>
-        <Headline weight="semibold" style={{ marginBottom: 16 }}>Headline semibold</Headline>
+        <Headline weight="regular" style={{ marginBottom: 16 }}>
+          Headline regular
+        </Headline>
+        <Headline weight="medium" style={{ marginBottom: 16 }}>
+          Headline medium
+        </Headline>
+        <Headline weight="semibold" style={{ marginBottom: 16 }}>
+          Headline semibold
+        </Headline>
       </Div>
     </Group>
   </Panel>

package/src/components/Typography/Subhead/Readme.md

@@ -1,5 +1,6 @@
 Упрощения в Android-версии (происходят автоматически):
-* `semibold` превращается в `medium`
+
+- `semibold` превращается в `medium`
 
 ```jsx
 <View activePanel="test">
@@ -7,10 +8,18 @@
     <PanelHeader>Subhead</PanelHeader>
     <Group>
       <Div>
-        <Subhead weight="regular" style={{ marginBottom: 16 }}>Subhead regular</Subhead>
-        <Subhead weight="medium" style={{ marginBottom: 16 }}>Subhead medium</Subhead>
-        <Subhead weight="semibold" style={{ marginBottom: 16 }}>Subhead semibold</Subhead>
-        <Subhead weight="bold" style={{ marginBottom: 16 }}>Subhead bold</Subhead>
+        <Subhead weight="regular" style={{ marginBottom: 16 }}>
+          Subhead regular
+        </Subhead>
+        <Subhead weight="medium" style={{ marginBottom: 16 }}>
+          Subhead medium
+        </Subhead>
+        <Subhead weight="semibold" style={{ marginBottom: 16 }}>
+          Subhead semibold
+        </Subhead>
+        <Subhead weight="bold" style={{ marginBottom: 16 }}>
+          Subhead bold
+        </Subhead>
       </Div>
     </Group>
   </Panel>

package/src/components/Typography/Subhead/Subhead.tsx

@@ -1,18 +1,20 @@
-import * as React from 'react';
-import { HasComponent } from '../../../types';
-import { usePlatform } from '../../../hooks/usePlatform';
-import { classNames } from '../../../lib/classNames';
-import { getClassName } from '../../../helpers/getClassName';
-import './Subhead.css';
+import * as React from "react";
+import { HasComponent } from "../../../types";
+import { usePlatform } from "../../../hooks/usePlatform";
+import { classNames } from "../../../lib/classNames";
+import { getClassName } from "../../../helpers/getClassName";
+import "./Subhead.css";
 
-export interface SubheadProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
-  weight: 'regular' | 'medium' | 'semibold' | 'bold';
+export interface SubheadProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasComponent {
+  weight: "regular" | "medium" | "semibold" | "bold";
 }
 
 const Subhead: React.FC<SubheadProps> = ({
   children,
-  weight = 'regular',
-  Component = 'h4',
+  weight = "regular",
+  Component = "h4",
   ...restProps
 }: SubheadProps) => {
   const platform = usePlatform();
@@ -20,11 +22,15 @@ const Subhead: React.FC<SubheadProps> = ({
   return (
     <Component
       {...restProps}
-      vkuiClass={classNames(getClassName('Subhead', platform), `Subhead--w-${weight}`)}
+      vkuiClass={classNames(
+        getClassName("Subhead", platform),
+        `Subhead--w-${weight}`
+      )}
     >
       {children}
     </Component>
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Subhead;

package/src/components/Typography/Text/Readme.md

@@ -1,5 +1,6 @@
 Упрощения в Android-версии (происходят автоматически):
-* `semibold` превращается в `medium`
+
+- `semibold` превращается в `medium`
 
 ```jsx
 <View activePanel="test">
@@ -7,8 +8,12 @@
     <PanelHeader>Text</PanelHeader>
     <Group>
       <Div>
-        <Text weight="regular" style={{ marginBottom: 16 }}>Text regular</Text>
-        <Text weight="medium" style={{ marginBottom: 16 }}>Text medium</Text>
+        <Text weight="regular" style={{ marginBottom: 16 }}>
+          Text regular
+        </Text>
+        <Text weight="medium" style={{ marginBottom: 16 }}>
+          Text medium
+        </Text>
         <Text weight="semibold">Text semibold</Text>
       </Div>
     </Group>

package/src/components/Typography/Text/Text.tsx

@@ -1,38 +1,49 @@
-import * as React from 'react';
-import { usePlatform } from '../../../hooks/usePlatform';
-import { classNames } from '../../../lib/classNames';
-import { getClassName } from '../../../helpers/getClassName';
-import { HasComponent, HasRootRef } from '../../../types';
-import { warnOnce } from '../../../lib/warnOnce';
-import './Text.css';
+import * as React from "react";
+import { usePlatform } from "../../../hooks/usePlatform";
+import { classNames } from "../../../lib/classNames";
+import { getClassName } from "../../../helpers/getClassName";
+import { HasComponent, HasRootRef } from "../../../types";
+import { warnOnce } from "../../../lib/warnOnce";
+import "./Text.css";
 
-export interface TextProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
-  weight: 'regular' | 'medium' | 'semibold';
+export interface TextProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent {
+  weight: "regular" | "medium" | "semibold";
 }
 
-const warn = warnOnce('Text');
+const warn = warnOnce("Text");
 const Text: React.FC<TextProps> = ({
   children,
-  weight = 'regular',
-  Component = 'span',
+  weight = "regular",
+  Component = "span",
   getRootRef,
   ...restProps
 }: TextProps) => {
   const platform = usePlatform();
 
-  if (process.env.NODE_ENV === 'development' && typeof Component !== 'string' && getRootRef) {
-    warn('getRootRef can only be used with DOM components');
+  if (
+    process.env.NODE_ENV === "development" &&
+    typeof Component !== "string" &&
+    getRootRef
+  ) {
+    warn("getRootRef can only be used with DOM components");
   }
 
   return (
     <Component
       {...restProps}
       ref={getRootRef}
-      vkuiClass={classNames(getClassName('Text', platform), `Text--w-${weight}`)}
+      vkuiClass={classNames(
+        getClassName("Text", platform),
+        `Text--w-${weight}`
+      )}
     >
       {children}
     </Component>
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Text;

package/src/components/Typography/Title/Readme.md

@@ -1,7 +1,8 @@
 Упрощения в Android-версии (происходят автоматически):
-* `semibold` превращается в `medium`
-* `heavy` превращается в `bold`
-* `<Title level="3" />` превращается в `<Headline />`
+
+- `semibold` превращается в `medium`
+- `heavy` превращается в `bold`
+- `<Title level="3" />` превращается в `<Headline />`
 
 ```jsx
 <View activePanel="test">
@@ -9,15 +10,33 @@
     <PanelHeader>Title</PanelHeader>
     <Group>
       <Div>
-        <Title level="1" weight="semibold" style={{ marginBottom: 16 }}>Title 1 semibold</Title>
-        <Title level="1" weight="bold" style={{ marginBottom: 16 }}>Title 1 bold</Title>
-        <Title level="1" weight="heavy" style={{ marginBottom: 16 }}>Title 1 heavy</Title>
-        <Title level="2" weight="regular" style={{ marginBottom: 16 }}>Title 2 regular</Title>
-        <Title level="2" weight="semibold" style={{ marginBottom: 16 }}>Title 2 semibold</Title>
-        <Title level="2" weight="heavy" style={{ marginBottom: 16 }}>Title 2 heavy</Title>
-        <Title level="3" weight="regular" style={{ marginBottom: 16 }}>Title 3 regular</Title>
-        <Title level="3" weight="medium" style={{ marginBottom: 16 }}>Title 3 medium</Title>
-        <Title level="3" weight="semibold">Title 3 semibold</Title>
+        <Title level="1" weight="semibold" style={{ marginBottom: 16 }}>
+          Title 1 semibold
+        </Title>
+        <Title level="1" weight="bold" style={{ marginBottom: 16 }}>
+          Title 1 bold
+        </Title>
+        <Title level="1" weight="heavy" style={{ marginBottom: 16 }}>
+          Title 1 heavy
+        </Title>
+        <Title level="2" weight="regular" style={{ marginBottom: 16 }}>
+          Title 2 regular
+        </Title>
+        <Title level="2" weight="semibold" style={{ marginBottom: 16 }}>
+          Title 2 semibold
+        </Title>
+        <Title level="2" weight="heavy" style={{ marginBottom: 16 }}>
+          Title 2 heavy
+        </Title>
+        <Title level="3" weight="regular" style={{ marginBottom: 16 }}>
+          Title 3 regular
+        </Title>
+        <Title level="3" weight="medium" style={{ marginBottom: 16 }}>
+          Title 3 medium
+        </Title>
+        <Title level="3" weight="semibold">
+          Title 3 semibold
+        </Title>
       </Div>
     </Group>
   </Panel>