@vkontakte/vkui 4.27.2 → 4.29.0

package/src/components/SimpleCheckbox/SimpleCheckbox.tsx

@@ -79,12 +79,17 @@ export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
   if (IS_DEV) {
     if (defaultIndeterminate && restProps.defaultChecked) {
       warn(
-        "defaultIndeterminate and defaultChecked cannot be true at the same time"
+        "defaultIndeterminate и defaultChecked не могут быть true одновременно",
+        "error"
       );
     }
 
     if (indeterminate && restProps.checked) {
-      warn("indeterminate and checked cannot be true at the same time");
+      warn("indeterminate и checked не могут быть true одновременно", "error");
+    }
+
+    if (restProps.defaultChecked && restProps.checked) {
+      warn("defaultChecked и checked не могут быть true одновременно", "error");
     }
   }
 
@@ -141,6 +146,3 @@ export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
     </Tappable>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default SimpleCheckbox;

package/src/components/SliderSwitch/SliderSwitch.tsx

@@ -176,6 +176,7 @@ class SliderSwitch extends React.Component<
           <div vkuiClass="SliderSwitch__border" />
         )}
         <div
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("SliderSwitch__slider", {
             ["SliderSwitch--firstActive"]: firstActive,
             ["SliderSwitch--secondActive"]: secondActive,

package/src/components/SliderSwitch/SliderSwitchButton.tsx

@@ -31,6 +31,7 @@ export const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (
   return (
     <Tappable
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("SliderSwitch__button", platform), {
         ["SliderSwitch__button--active"]: active,
         ["SliderSwitch__button--hover"]: !active && hovered,

package/src/components/Snackbar/Snackbar.tsx

@@ -7,7 +7,7 @@ import { ANDROID, VKCOM } from "../../lib/platform";
 import { rubber } from "../../lib/touch";
 import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
 import Text from "../Typography/Text/Text";
-import Button from "../Button/Button";
+import { Button } from "../Button/Button";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -195,6 +195,7 @@ const SnackbarComponent: React.FC<
     <AppRootPortal>
       <div
         {...restProps}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames(
           getClassName("Snackbar", platform),
           `Snackbar--l-${resolvedLayout}`,

package/src/components/Spacing/Spacing.tsx

@@ -26,7 +26,7 @@ export const Spacing: React.FC<SpacingProps> = ({
   style,
   ...restProps
 }: SpacingProps) => {
-  const platfrom = usePlatform();
+  const platform = usePlatform();
   const styles = {
     height: size,
     ...style,
@@ -36,7 +36,8 @@ export const Spacing: React.FC<SpacingProps> = ({
     <div
       {...restProps}
       aria-hidden="true"
-      vkuiClass={classNames(getClassName("Spacing", platfrom), {
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
+      vkuiClass={classNames(getClassName("Spacing", platform), {
         "Spacing--separator": !!separator,
         "Spacing--separator-center":
           separator === true || separator === "center",

package/src/components/SplitCol/SplitCol.tsx

@@ -58,6 +58,7 @@ export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
         minWidth: minWidth,
       }}
       ref={baseRef}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("SplitCol", {
         "SplitCol--spaced": spaced,
         "SplitCol--fixed": fixed,

package/src/components/SplitLayout/SplitLayout.tsx

@@ -43,6 +43,7 @@ export const SplitLayout: React.FC<SplitLayoutProps> = ({
       <div
         {...restProps}
         ref={getRef}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames("SplitLayout__inner", {
           "SplitLayout__inner--header": !!header,
         })}

package/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -2,7 +2,8 @@ import * as React from "react";
 import { usePlatform } from "../../hooks/usePlatform";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
-import HorizontalScroll, {
+import {
+  HorizontalScroll,
   HorizontalScrollProps,
   ScrollPositionHandler,
 } from "../HorizontalScroll/HorizontalScroll";

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -6,8 +6,8 @@ import { getTitleFromChildren, hasReactNode } from "../../lib/utils";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { Icon16Dropdown } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform";
-import Caption from "../Typography/Caption/Caption";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Caption } from "../Typography/Caption/Caption";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import "./SubnavigationButton.css";
 
 export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
@@ -39,13 +39,7 @@ const SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({
     return <Subhead {...restProps} />;
   }
 
-  return (
-    <Caption
-      level={textLevel === 2 ? "1" : "2"}
-      weight="regular"
-      {...restProps}
-    />
-  );
+  return <Caption level={textLevel === 2 ? "1" : "2"} {...restProps} />;
 };
 
 export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (
@@ -68,6 +62,7 @@ export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (
       {...restProps}
       hasActive={false}
       focusVisibleMode="outside"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("SubnavigationButton", platform),
         `SubnavigationButton--${size}`,

package/src/components/Switch/Switch.tsx

@@ -29,6 +29,7 @@ export const Switch: React.FC<SwitchProps> = ({
 
   return (
     <label
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Switch", platform),
         `Switch--sizeY-${sizeY}`,

package/src/components/Tabbar/Readme.md

@@ -3,5 +3,5 @@
 > **Важно**
 >
 > `Tabbar` располагается фиксированно. Если внутри панели вы используете `FixedLayout`, например
-> располагаете внизу панели `Tabs`, то у `Tabbar` нужно указать `shadow={false}`, чтобы его тень не наeзжала на
+> располагаете внизу панели `Tabs`, то у `Tabbar` нужно указать `shadow={false}`, чтобы его тень не наезжала на
 > "прижатый" книзу контент панели.

package/src/components/Tabbar/Tabbar.tsx

@@ -28,6 +28,7 @@ const Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {
 
   return (
     <div
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Tabbar", platform),
         `Tabbar--l-${getItemsLayout()}`,

package/src/components/TabbarItem/TabbarItem.css

@@ -35,6 +35,7 @@
   justify-content: center;
   pointer-events: none;
   height: 100%;
+  width: 100%;
   overflow: hidden;
 }
 

package/src/components/TabbarItem/TabbarItem.tsx

@@ -54,6 +54,7 @@ const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
       {...restProps}
       disabled={disabled}
       href={href}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("TabbarItem", platform), {
         "TabbarItem--selected": selected,
         "TabbarItem--text": !!text,

package/src/components/Tabs/Readme.md

@@ -7,7 +7,7 @@ class Example extends React.Component {
       activePanel: "panel1",
       contextOpened: false,
       mode: "all",
-      activeTab1: "recomendations",
+      activeTab1: "recommendations",
       activeTab2: "music",
       activeTab3: "news",
       activeTab4: "all",
@@ -63,11 +63,11 @@ class Example extends React.Component {
               <TabsItem
                 onClick={() => {
                   this.setState({
-                    activeTab1: "recomendations",
+                    activeTab1: "recommendations",
                     contextOpened: false,
                   });
                 }}
-                selected={this.state.activeTab1 === "recomendations"}
+                selected={this.state.activeTab1 === "recommendations"}
               >
                 Интересное
               </TabsItem>
@@ -134,8 +134,8 @@ class Example extends React.Component {
                 Моя музыка
               </TabsItem>
               <TabsItem
-                onClick={() => this.setState({ activeTab2: "recomendations" })}
-                selected={this.state.activeTab2 === "recomendations"}
+                onClick={() => this.setState({ activeTab2: "recommendations" })}
+                selected={this.state.activeTab2 === "recommendations"}
               >
                 Рекомендации
               </TabsItem>
@@ -169,9 +169,9 @@ class Example extends React.Component {
                 </TabsItem>
                 <TabsItem
                   onClick={() =>
-                    this.setState({ activeTab3: "recomendations" })
+                    this.setState({ activeTab3: "recommendations" })
                   }
-                  selected={this.state.activeTab3 === "recomendations"}
+                  selected={this.state.activeTab3 === "recommendations"}
                 >
                   Рекомендации
                 </TabsItem>

package/src/components/TabsItem/TabsItem.tsx

@@ -7,7 +7,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { TabsProps, TabsModeContext } from "../Tabs/Tabs";
 import Headline from "../Typography/Headline/Headline";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import Text from "../Typography/Text/Text";
 import "./TabsItem.css";
 
@@ -35,6 +35,7 @@ const TabsItem: React.FC<TabsItemProps> = ({
   return (
     <Tappable
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("TabsItem", platform), {
         "TabsItem--selected": selected,
       })}

package/src/components/Tappable/Tappable.css

@@ -1,5 +1,10 @@
 .Tappable {
   position: relative;
+  cursor: default;
+}
+
+.Tappable--hasHover,
+.Tappable--hasActive {
   cursor: pointer;
 }
 

package/src/components/Tappable/Tappable.tsx

@@ -18,6 +18,7 @@ import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useFocusVisible } from "../../hooks/useFocusVisible";
 import { callMultiple } from "../../lib/callMultiple";
+import { useBooleanState } from "../../hooks/useBooleanState";
 import "./Tappable.css";
 
 export interface TappableProps
@@ -61,6 +62,8 @@ export interface TappableProps
    * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
    */
   focusVisibleMode?: FocusVisibleMode | string;
+  onEnter?: (outputEvent: MouseEvent) => void;
+  onLeave?: (outputEvent: MouseEvent) => void;
 }
 
 interface Wave {
@@ -158,6 +161,8 @@ const Tappable: React.FC<TappableProps> = ({
   hasActive: _hasActive = true,
   activeMode = "background",
   focusVisibleMode = "inside",
+  onEnter,
+  onLeave,
   ...props
 }: TappableProps) => {
   Component = Component || ((props.href ? "a" : "div") as React.ElementType);
@@ -169,7 +174,11 @@ const Tappable: React.FC<TappableProps> = ({
 
   const [clicks, setClicks] = React.useState<Wave[]>([]);
   const [childHover, setChildHover] = React.useState(false);
-  const [_hovered, setHovered] = React.useState(false);
+  const {
+    value: _hovered,
+    setTrue: setHoveredTrue,
+    setFalse: setHoveredFalse,
+  } = useBooleanState(false);
 
   const hovered = _hovered && !props.disabled;
   const hasActive = _hasActive && !childHover && !props.disabled;
@@ -248,13 +257,16 @@ const Tappable: React.FC<TappableProps> = ({
     }
 
     // отключить без задержки при длинном тапе
-    const activeDuraion = duration - ACTIVE_DELAY;
-    stop(activeDuraion >= 100 ? 0 : activeEffectDelay - activeDuraion);
+    const activeDuration = duration - ACTIVE_DELAY;
+    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
   }
 
+  // eslint-disable-next-line vkui/no-object-expression-in-arguments
   const classes = classNames(
     getClassName("Tappable", platform),
     `Tappable--sizeX-${sizeX}`,
+    hasHover && `Tappable--hasHover`,
+    hasActive && `Tappable--hasActive`,
     hasHover && hovered && !isPresetHoverMode && hoverMode,
     hasActive && active && !isPresetActiveMode && activeMode,
     focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,
@@ -280,8 +292,8 @@ const Tappable: React.FC<TappableProps> = ({
 
   return (
     <Touch
-      onEnter={() => setHovered(true)}
-      onLeave={() => setHovered(false)}
+      onEnter={callMultiple(setHoveredTrue, onEnter)}
+      onLeave={callMultiple(setHoveredFalse, onLeave)}
       type={Component === "button" ? "button" : undefined}
       tabIndex={isCustomElement && !props.disabled ? 0 : undefined}
       role={isCustomElement ? role : undefined}

package/src/components/TextTooltip/Readme.md

@@ -2,7 +2,7 @@
 >
 > Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
 
-Тултип, открывающийся при наведеннии мыши на `children`. В качестве содержимого тултипа рекомендуется использовать только текст.
+Тултип, открывающийся при наведении мыши на `children`. В качестве содержимого тултипа рекомендуется использовать только текст.
 
 ```jsx { "props": { "layout": false, "iframe": false } }
 <TextTooltip text="Привет">

package/src/components/TextTooltip/TextTooltip.tsx

@@ -3,7 +3,7 @@ import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { prefixClass } from "../../lib/prefixClass";
 import "./TextTooltip.css";
 

package/src/components/Tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { useNavTransition } from "../NavTransitionContext/NavTransitionContext";
 import { Modifier, usePopper } from "react-popper";
 import { Placement } from "@popperjs/core";
@@ -184,7 +184,8 @@ const Tooltip: React.FC<TooltipProps> = ({
           primitiveChild && JSON.stringify(children),
         ]
           .filter(Boolean)
-          .join(" ")
+          .join(" "),
+        "error"
       );
   }
 
@@ -207,7 +208,7 @@ const Tooltip: React.FC<TooltipProps> = ({
     );
   }
 
-  const arrowOffsetModiifer = React.useMemo<ArrowOffsetModifier>(() => {
+  const arrowOffsetModifier = React.useMemo<ArrowOffsetModifier>(() => {
     return {
       name: "arrowOffset",
       enabled: true,
@@ -261,7 +262,7 @@ const Tooltip: React.FC<TooltipProps> = ({
       {
         name: "flip",
       },
-      arrowOffsetModiifer,
+      arrowOffsetModifier,
     ],
   });
 

package/src/components/Touch/Touch.tsx

@@ -91,10 +91,10 @@ export const Touch: React.FC<TouchProps> = ({
   const gesture = React.useRef<Partial<Gesture> | null>(null);
   const handle = (
     e: VKUITouchEvent,
-    handers: Array<TouchEventHandler | undefined | false>
+    handlers: Array<TouchEventHandler | undefined | false>
   ) => {
     stopPropagation && e.stopPropagation();
-    handers.forEach((cb) => {
+    handlers.forEach((cb) => {
       const duration = Date.now() - (gesture.current?.startT?.getTime() ?? 0);
       cb && cb({ ...(gesture.current as Gesture), duration, originalEvent: e });
     });
@@ -209,7 +209,7 @@ export const Touch: React.FC<TouchProps> = ({
     if (touchEnabled()) {
       onLeave && onLeave(e);
     }
-    subscribe(null);
+    unsubscribe();
   }
 
   const listenerParams = { capture: useCapture, passive: false };
@@ -223,6 +223,9 @@ export const Touch: React.FC<TouchProps> = ({
       listeners.forEach((l) => l.add(el));
     }
   }
+  function unsubscribe() {
+    listeners.forEach((l) => l.remove());
+  }
 
   /**
    * Обработчик событий dragstart

package/src/components/Touch/TouchContext.ts

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

package/src/components/Typography/Caption/Caption.css

@@ -1,3 +1,9 @@
+/*
+ * В следующей версии библиотеки Caption 1 должен превратиться в Footnote, Caption 2 — в Caption 1 и так далее.
+ * В токенах это обновление уже есть.
+ * TODO переехать на новый нейминг в 5.0.0. Заменить Caption 1 на Footnote, а остальные Caption поднять на один уровень наверх.
+ */
+
 .Caption {
   display: block;
   margin: 0;
@@ -8,48 +14,84 @@
 }
 
 .Caption--l-1 {
-  font-size: 13px;
-  line-height: 16px;
+  font-size: var(--vkui--font_footnote--font_size--regular);
+  line-height: var(--vkui--font_footnote--line_height--regular);
+  font-weight: var(--vkui--font_footnote--font_weight--regular);
+}
+
+.Caption--l-1.Caption--caps {
+  font-size: var(--vkui--font_footnote_caps--font_size--regular);
+  line-height: var(--vkui--font_footnote_caps--line_height--regular);
+  font-weight: var(--vkui--font_footnote_caps--font_weight--regular);
 }
 
 .Caption--l-2 {
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--vkui--font_caption1--font_size--regular);
+  line-height: var(--vkui--font_caption1--line_height--regular);
+  font-weight: var(--vkui--font_caption1--font_weight--regular);
+}
+
+.Caption--l-2.Caption--caps {
+  font-size: var(--vkui--font_caption1_caps--font_size--regular);
+  line-height: var(--vkui--font_caption1_caps--line_height--regular);
+  font-weight: var(--vkui--font_caption1_caps--font_weight--regular);
 }
 
 .Caption--l-3 {
-  font-size: 11px;
-  line-height: 14px;
+  font-size: var(--vkui--font_caption2--font_size--regular);
+  line-height: var(--vkui--font_caption2--line_height--regular);
+  font-weight: var(--vkui--font_caption2--font_weight--regular);
+}
+
+.Caption--l-3.Caption--caps {
+  font-size: var(--vkui--font_caption2_caps--font_size--regular);
+  line-height: var(--vkui--font_caption2_caps--line_height--regular);
+  font-weight: var(--vkui--font_caption2_caps--font_weight--regular);
 }
 
 .Caption--l-4 {
-  font-size: 9px;
-  line-height: 12px;
+  font-size: var(--vkui--font_caption3--font_size--regular);
+  line-height: var(--vkui--font_caption3--line_height--regular);
+  font-weight: var(--vkui--font_caption3--font_weight--regular);
+}
+
+.Caption--l-4.Caption--caps {
+  font-size: var(--vkui--font_caption3_caps--font_size--regular);
+  line-height: var(--vkui--font_caption3_caps--line_height--regular);
+  font-weight: var(--vkui--font_caption3_caps--font_weight--regular);
+}
+
+.Caption.Caption--w-1 {
+  /* Мы утяжеляем селектор, чтобы перебить селекторы .Caption--caps */
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+.Caption.Caption--w-2 {
+  /* Мы утяжеляем селектор, чтобы перебить селекторы .Caption--caps */
+  font-weight: var(--vkui--font_weight_accent2);
 }
 
+.Caption.Caption--w-3 {
+  /* Мы утяжеляем селектор, чтобы перебить селекторы .Caption--caps */
+  font-weight: var(--vkui--font_weight_accent3);
+}
+
+/* TODO удалить перед релизом 5.0.0 */
 .Caption--w-regular {
   font-weight: 400;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Caption--w-medium {
   font-weight: 500;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Caption--w-semibold {
   font-weight: 600;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Caption--w-bold {
   font-weight: 700;
 }
-
-.Caption--w-heavy {
-  font-weight: 800;
-}
-
-/**
- * ANDROID
- */
-.Caption--android.Caption--w-semibold {
-  font-weight: 500;
-}

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

@@ -1,44 +1,53 @@
 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 { warnOnce } from "../../../lib/warnOnce";
 import "./Caption.css";
 
 export interface CaptionProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasComponent {
-  weight: "regular" | "medium" | "semibold" | "bold";
-  level: "1" | "2" | "3" | "4";
+  /**
+   * Задаёт начертание шрифта отличное от стандартного.
+   *
+   * > ⚠️ Начертания `"bold"`, `"semibold"`, `medium` и `"regular"` устарели и будут удалены в 5.0.0. Используйте значения `"1"`, `"2"` и `"3"`.
+   */
+  weight?: "regular" | "medium" | "semibold" | "bold" | "1" | "2" | "3";
+  level?: "1" | "2" | "3" | "4";
   caps?: boolean;
 }
 
-const Caption: React.FC<CaptionProps> = ({
+const warn = warnOnce("Caption");
+
+export const Caption: React.FC<CaptionProps> = ({
   children,
-  weight = "regular",
+  weight,
   level = "1",
   caps,
   Component = "span",
   ...restProps
 }: CaptionProps) => {
-  const platform = usePlatform();
+  if (process.env.NODE_ENV === "development") {
+    if (
+      weight &&
+      ["heavy", "bold", "semibold", "medium", "regular"].includes(weight)
+    )
+      warn(
+        `Начертание weight="${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
+      );
+  }
 
   return (
     <Component
       {...restProps}
       vkuiClass={classNames(
-        getClassName("Caption", platform),
-        `Caption--w-${weight}`,
+        "Caption",
         `Caption--l-${level}`,
-        {
-          "Caption--caps": caps,
-        }
+        caps && "Caption--caps",
+        weight && `Caption--w-${weight}`
       )}
     >
       {children}
     </Component>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Caption;