@react-md/core 6.3.0 → 6.3.2

package/src/avatar/styles.ts

@@ -4,6 +4,17 @@ import { type ThemeColor, cssUtils } from "../cssUtils.js";
 import { type OverridableStringUnion } from "../types.js";
 import { bem } from "../utils/bem.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-avatar-background-color"?: string;
+    "--rmd-avatar-color"?: string;
+    "--rmd-avatar-border-color"?: string;
+    "--rmd-avatar-border-radius"?: string | number;
+    "--rmd-avatar-size"?: string | number;
+    "--rmd-avatar-font-size"?: string | number;
+  }
+}
+
 const styles = bem("rmd-avatar");
 
 /**

package/src/badge/Badge.tsx

@@ -2,6 +2,18 @@ import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
 
 import { type BadgeTheme, badge } from "./styles.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-badge-border-radius"?: string | number;
+    "--rmd-badge-greyscale-background-color"?: string;
+    "--rmd-badge-greyscale-color"?: string;
+    "--rmd-badge-size"?: string | number;
+    "--rmd-badge-offset"?: string | number;
+    "--rmd-badge-offset-top"?: string | number;
+    "--rmd-badge-offset-right"?: string | number;
+  }
+}
+
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   /** @defaultValue `"greyscale"` */
   theme?: BadgeTheme;

package/src/badge/styles.ts

@@ -3,15 +3,6 @@ import { cnb } from "cnbuilder";
 import { type BackgroundColor, cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-badge-size"?: string | number;
-    "--rmd-badge-offset"?: string | number;
-    "--rmd-badge-offset-top"?: string | number;
-    "--rmd-badge-offset-right"?: string | number;
-  }
-}
-
 const styles = bem("rmd-badge");
 
 /**

package/src/box/styles.ts

@@ -11,16 +11,25 @@ declare module "react" {
   interface CSSProperties {
     "--rmd-box-gap"?: string | number;
     "--rmd-box-padding"?: string | number;
+    "--rmd-box-padding-h"?: string | number;
+    "--rmd-box-padding-v"?: string | number;
     "--rmd-box-item-min-size"?: string | number;
+    "--rmd-box-item-min-height"?: string | number;
     "--rmd-box-columns"?: string | number;
+    "--rmd-box-row-max-height"?: string;
+    "--rmd-box-auto-rows-height"?: string;
     "--rmd-box-phone-columns"?: number | string;
+    "--rmd-box-phone-item-min-height"?: number | string;
     "--rmd-box-phone-item-min-size"?: number | string;
     "--rmd-box-tablet-columns"?: number | string;
     "--rmd-box-tablet-item-min-size"?: number | string;
+    "--rmd-box-tablet-item-min-height"?: number | string;
     "--rmd-box-desktop-columns"?: number | string;
     "--rmd-box-desktop-item-min-size"?: number | string;
+    "--rmd-box-desktop-item-min-height"?: number | string;
     "--rmd-box-large-desktop-columns"?: number | string;
     "--rmd-box-large-desktop-item-min-size"?: number | string;
+    "--rmd-box-large-desktop-item-min-height"?: number | string;
   }
 }
 

package/src/button/styles.ts

@@ -19,8 +19,12 @@ declare module "react" {
     "--rmd-button-text-vertical-padding"?: string | number;
     "--rmd-button-text-min-height"?: string | number;
     "--rmd-button-text-min-width"?: string | number;
+    "--rmd-button-text-border-radius"?: string | number;
     "--rmd-button-icon-size"?: string | number;
-    "--rmd-button-icon-radius"?: string | number;
+    "--rmd-button-icon-padding"?: string | number;
+    "--rmd-button-icon-font-size"?: string | number;
+    "--rmd-button-icon-border-radius"?: string | number;
+    "--rmd-button-icon-square-border-radius"?: string | number;
   }
 }
 

package/src/card/Card.tsx

@@ -4,14 +4,6 @@ import { Box } from "../box/Box.js";
 import { type BoxAlignItems, type BoxOptions } from "../box/styles.js";
 import { type CardClassNameOptions, card } from "./styles.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-card-background-color"?: string;
-    "--rmd-card-color"?: string;
-    "--rmd-card-secondary-color"?: string;
-  }
-}
-
 /**
  * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the
  * deprecated `raiseable` prop

package/src/card/styles.ts

@@ -3,7 +3,14 @@ import { cnb } from "cnbuilder";
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 
-const cardStyles = bem("rmd-card");
+const styles = bem("rmd-card");
+
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-card-background-color"?: string;
+    "--rmd-card-color"?: string;
+  }
+}
 
 /** @since 6.0.0 */
 export interface CardClassNameOptions {
@@ -42,7 +49,7 @@ export function card(options: CardClassNameOptions = {}): string {
   const { className, bordered, raisable, interactable } = options;
 
   return cnb(
-    cardStyles({
+    styles({
       bordered,
       shadowed: !bordered,
       raisable: !bordered && raisable,
@@ -70,7 +77,7 @@ export function cardHeader(options: CardHeaderClassNameOptions = {}): string {
   const { className, addonAfter = false, addonBefore = false } = options;
 
   return cnb(
-    cardStyles("header", {
+    styles("header", {
       "addon-after": addonAfter && !addonBefore,
       "addon-before": addonBefore && !addonAfter,
       surrounded: addonAfter && addonBefore,
@@ -92,7 +99,7 @@ export function cardHeaderContent(
 ): string {
   const { className } = options;
 
-  return cnb(cardStyles("header-content"), className);
+  return cnb(styles("header-content"), className);
 }
 
 /** @since 6.0.0 */
@@ -106,7 +113,7 @@ export interface CardTitleClassNameOptions {
 export function cardTitle(options: CardTitleClassNameOptions = {}): string {
   const { className } = options;
 
-  return cnb(cardStyles("title"), className);
+  return cnb(styles("title"), className);
 }
 
 /** @since 6.0.0 */
@@ -122,7 +129,7 @@ export function cardSubtitle(
 ): string {
   const { className } = options;
 
-  return cnb(cardStyles("subtitle"), className);
+  return cnb(styles("subtitle"), className);
 }
 
 /** @since 6.0.0 */
@@ -165,7 +172,7 @@ export function cardContent(options: CardContentClassNameOptions = {}): string {
   } = options;
 
   return cnb(
-    cardStyles("content", {
+    styles("content", {
       padded: !disablePadding,
       "padding-bottom": !disableLastChildPadding,
     }),
@@ -187,5 +194,5 @@ export interface CardFooterClassNameOptions {
 export function cardFooter(options: CardFooterClassNameOptions = {}): string {
   const { className } = options;
 
-  return cnb(cardStyles("footer"), className);
+  return cnb(styles("footer"), className);
 }

package/src/chip/Chip.tsx

@@ -14,33 +14,27 @@ import { getIcon } from "../icon/config.js";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
-import { useMaxWidthTransition } from "../transition/useMaxWidthTransition.js";
+import {
+  type BaseMaxWidthTransitionOptions,
+  useMaxWidthTransition,
+} from "../transition/useMaxWidthTransition.js";
 import { type PropsWithRef } from "../types.js";
-import { chip, chipContent } from "./styles.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-chip-solid-background-color"?: string;
-    "--rmd-chip-solid-disabled-background-color"?: string;
-    "--rmd-chip-solid-color"?: string;
-    "--rmd-chip-theme-background-color"?: string;
-    "--rmd-chip-theme-color"?: string;
-    "--rmd-chip-outline-background-color"?: string;
-    "--rmd-chip-outline-color"?: string;
-  }
-}
+import { type ChipTheme, chip, chipContent } from "./styles.js";
 
 /**
  * @since 6.0.0 Renamed the `noninteractive` prop to
  * `noninteractable`.
+ * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module
+ * augmentation.
  */
 export interface ChipProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
+    BaseMaxWidthTransitionOptions,
     ComponentWithRippleProps {
   /**
    * @defaultValue `"solid"`
    */
-  theme?: "outline" | "solid";
+  theme?: ChipTheme;
 
   /**
    * Set this to `true` if the chip should gain additional box shadow while the

package/src/chip/styles.ts

@@ -5,6 +5,30 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-chip");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-chip-gap"?: string;
+    "--rmd-chip-height"?: string;
+    "--rmd-chip-border-radius"?: string | number;
+    "--rmd-chip-horizontal-padding"?: string | number;
+    "--rmd-chip-vertical-padding"?: string | number;
+    "--rmd-chip-solid-background-color"?: string;
+    "--rmd-chip-solid-disabled-background-color"?: string;
+    "--rmd-chip-solid-color"?: string;
+    "--rmd-chip-theme-background-color"?: string;
+    "--rmd-chip-theme-color"?: string;
+    "--rmd-chip-outline-color"?: string;
+    "--rmd-chip-outline-width"?: string | number;
+    "--rmd-chip-outline-background-color"?: string;
+    "--rmd-chip-outline-text-color"?: string;
+  }
+}
+
+/**
+ * @since 6.3.1
+ */
+export type ChipTheme = "outline" | "solid";
+
 /**
  * @since 6.0.0
  *
@@ -39,10 +63,14 @@ const styles = bem("rmd-chip");
  */
 export interface ChipClassNameOptions {
   className?: string;
+
+  /**
+   * An optional className to provide only while {@link selected} is `true`.
+   */
   selectedClassName?: string;
 
   /** @defaultValue `"solid"` */
-  theme?: "outline" | "solid";
+  theme?: ChipTheme;
 
   backgroundColor?: BackgroundColor;
 

package/src/dialog/Dialog.tsx

@@ -287,6 +287,10 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
     const { eventHandlers, transitionOptions } = useFocusContainer({
       nodeRef: ref,
       activate: visible,
+      onEnter(appearing) {
+        onEnter(appearing);
+        setChildVisible(type !== "full-page");
+      },
       onEntered(appear) {
         onEntered(appear);
         // this needs to be called onEnter and onEntered just in case the
@@ -294,6 +298,10 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
         setChildVisible(type !== "full-page");
       },
       onEntering,
+      onExit() {
+        onExit();
+        setChildVisible(false);
+      },
       onExiting,
       onExited() {
         onExited();
@@ -334,14 +342,6 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
       appear: appear && !disableTransition && !ssr,
       enter: enter && !disableTransition,
       exit: exit && !disableTransition,
-      onEnter(appearing) {
-        onEnter(appearing);
-        setChildVisible(type !== "full-page");
-      },
-      onExit() {
-        onExit();
-        setChildVisible(false);
-      },
       temporary,
       exitedHidden,
       disablePortal: propDisablePortal,

package/src/dialog/styles.ts

@@ -9,8 +9,6 @@ import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-dialog-background-color"?: string;
-    "--rmd-dialog-color"?: string;
     "--rmd-dialog-min-width"?: string | number;
     "--rmd-dialog-horizontal-margin"?: string | number;
     "--rmd-dialog-vertical-margin"?: string | number;
@@ -19,6 +17,11 @@ declare module "react" {
     "--rmd-dialog-header-padding-bottom"?: string | number;
     "--rmd-dialog-content-padding"?: string | number;
     "--rmd-dialog-footer-padding"?: string | number;
+    "--rmd-dialog-width"?: string | number;
+    "--rmd-dialog-small-width"?: string | number;
+    "--rmd-dialog-medium-width"?: string | number;
+    "--rmd-dialog-large-width"?: string | number;
+    "--rmd-dialog-extra-large-width"?: string | number;
   }
 }
 

package/src/divider/styles.ts

@@ -5,7 +5,7 @@ import { bem } from "../utils/bem.js";
 declare module "react" {
   interface CSSProperties {
     "--rmd-divider-size"?: string | number;
-    "--rmd-divider-vertical-size"?: string | number;
+    "--rmd-divider-border-size"?: string | number;
     "--rmd-divider-color"?: string;
     "--rmd-divider-spacing"?: string | number;
     "--rmd-divider-vertical-spacing"?: string | number;

package/src/focus/useFocusContainer.ts

@@ -39,15 +39,19 @@ const noop = (): void => {
  */
 export type FocusType = "mount" | "unmount" | "keyboard";
 
-/** @since 6.0.0 */
-export type FocusContainerTransitionCallbacks = Pick<
-  TransitionCallbacks,
-  "onEntering" | "onEntered" | "onExiting" | "onExited"
->;
+/**
+ * @since 6.0.0
+ * @deprecated Use `TransitionCallbacks` instead.
+ */
+export type FocusContainerTransitionCallbacks = TransitionCallbacks;
 
-/** @since 6.0.0 */
+/**
+ * @since 6.0.0
+ * @since 6.3.2 Fixed by extending `TransitionCallbacks` after the
+ * `onEnteredOnce` and `onExitedOnce` support was added to CSS transitions.
+ */
 export interface FocusContainerTransitionOptions<E extends HTMLElement>
-  extends FocusContainerTransitionCallbacks {
+  extends TransitionCallbacks {
   /**
    * An optional ref that will be merged with the
    * {@link FocusContainerImplementation.nodeRef}
@@ -155,10 +159,12 @@ export function useFocusContainer<E extends HTMLElement>(
   const {
     nodeRef,
     activate,
-    onEntering = noop,
-    onEntered = noop,
-    onExiting = noop,
-    onExited = noop,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
     onKeyDown = noop,
     programmatic = false,
     disableTransition = false,
@@ -181,6 +187,7 @@ export function useFocusContainer<E extends HTMLElement>(
     transitionOptions: {
       nodeRef: refCallback,
       ...getTransitionCallbacks({
+        onEnter,
         onEnterOnce: () => {
           const instance = ref.current;
           if (
@@ -205,6 +212,7 @@ export function useFocusContainer<E extends HTMLElement>(
             prevFocus.current?.focus();
           });
         },
+        onExit,
         onExiting,
         onExited,
         disableTransition,

package/src/form/InputToggle.tsx

@@ -18,6 +18,8 @@ import { FormMessageContainer } from "./FormMessageContainer.js";
 import { InputToggleIcon } from "./InputToggleIcon.js";
 import { Label } from "./Label.js";
 import { type InputToggleSize } from "./inputToggleStyles.js";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type LabelClassNameOptions } from "./types.js";
 import {
   type FormComponentStates,
   type FormMessageContainerExtension,

package/src/form/Label.tsx

@@ -3,17 +3,6 @@ import { forwardRef } from "react";
 import { label } from "./labelStyles.js";
 import { type LabelProps } from "./types.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-label-floating-x"?: string | number;
-    "--rmd-label-floating-y"?: string | number;
-    "--rmd-label-floating-active-x"?: string | number;
-    "--rmd-label-floating-active-y"?: string | number;
-    "--rmd-label-active-padding"?: string | number;
-    "--rmd-label-active-background-color"?: string;
-  }
-}
-
 /**
  * Most of the form components already use this `Label` internally when a
  * `label` prop has been provided. You should generally use this component if

package/src/form/Slider.tsx

@@ -33,6 +33,8 @@ import { type RangeSliderState } from "./useRangeSlider.js";
 import { type SliderState, type SliderValueOptions } from "./useSlider.js";
 import { useSliderDraggable } from "./useSliderDraggable.js";
 
+// NOTE: The augmentation appears in this file since no type definitions are
+// ever imported from the `sliderStyles` file.
 declare module "react" {
   interface CSSProperties {
     "--rmd-slider-color"?: string;
@@ -47,6 +49,10 @@ declare module "react" {
     "--rmd-slider-tooltip-scale"?: string | number;
     "--rmd-slider-tooltip-translate"?: string | number;
     "--rmd-slider-mark-offset"?: string;
+    "--rmd-slider-mark-active-color"?: string;
+    "--rmd-slider-mark-active-opacity"?: string | number;
+    "--rmd-slider-mark-inactive-color"?: string;
+    "--rmd-slider-mark-inactive-opacity"?: string | number;
   }
 }
 

package/src/form/Switch.tsx

@@ -19,6 +19,8 @@ import {
   type FormMessageContainerExtension,
 } from "./types.js";
 
+// NOTE: The augmentation appears in this file since no type definitions are
+// ever imported from the `switchStyles` file.
 declare module "react" {
   interface CSSProperties {
     "--rmd-switch-track-background-color"?: string;

package/src/form/TextArea.tsx

@@ -22,6 +22,8 @@ import {
   useResizingTextArea,
 } from "./useResizingTextArea.js";
 
+// NOTE: The augmentation appears in this file since no type definitions are
+// ever imported from the `textAreaStylesStyles` file.
 declare module "react" {
   interface CSSProperties {
     "--rmd-text-area-height"?: string | number;

package/src/form/TextFieldContainer.tsx

@@ -7,20 +7,6 @@ import { getFormConfig } from "./formConfig.js";
 import { textFieldContainer } from "./textFieldContainerStyles.js";
 import { type TextFieldContainerOptions } from "./types.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-text-field-height"?: string | number;
-    "--rmd-text-field-padding-left"?: string | number;
-    "--rmd-text-field-padding-right"?: string | number;
-    "--rmd-text-field-padding-top"?: string | number;
-    "--rmd-text-field-border-color"?: string;
-    "--rmd-text-field-hover-border-color"?: string;
-    "--rmd-text-field-filled-color"?: string;
-    "--rmd-form-addon-top"?: string | number;
-    "--rmd-form-addon-margin-top"?: string | number;
-  }
-}
-
 export interface TextFieldContainerProps
   extends HTMLAttributes<HTMLDivElement>,
     TextFieldContainerOptions {

package/src/form/types.ts

@@ -12,6 +12,35 @@ declare module "react" {
   interface CSSProperties {
     "--rmd-form-active-color"?: string;
     "--rmd-form-focus-color"?: string;
+
+    // NOTE: The label properties are in this file since all label types are
+    // in this file. If they are able to be moved to labelStyles or Label and
+    // the compiled `.d.ts` includes the types from those files, this can be
+    // moved.
+    "--rmd-label-floating-x"?: string | number;
+    "--rmd-label-floating-y"?: string | number;
+    "--rmd-label-floating-active-x"?: string | number;
+    "--rmd-label-floating-active-y"?: string | number;
+    "--rmd-label-active-padding"?: string | number;
+    "--rmd-label-active-background-color"?: string;
+
+    // NOTE: The text field properties are in this file since there are no
+    // typedefs included from `TextFieldContainer` or
+    // `textFieldContainerStyles`.
+    "--rmd-text-field-addon-top"?: string | number;
+    "--rmd-text-field-addon-spacing"?: string | number;
+    "--rmd-text-field-addon-margin-top"?: string | number;
+    "--rmd-text-field-addon-left-offset"?: string | number;
+    "--rmd-text-field-height"?: string | number;
+    "--rmd-text-field-padding-left"?: string | number;
+    "--rmd-text-field-padding-right"?: string | number;
+    "--rmd-text-field-padding-top"?: string | number;
+    "--rmd-text-field-border-color"?: string;
+    "--rmd-text-field-hover-border-color"?: string;
+    "--rmd-text-field-filled-color"?: string;
+    "--rmd-text-field-filled-padding"?: string | number;
+    "--rmd-text-field-outlined-padding"?: string | number;
+    "--rmd-text-field-underlined-padding"?: string | number;
   }
 }
 

package/src/hoverMode/useHoverModeProvider.ts

@@ -111,7 +111,15 @@ export interface HoverModeContext extends SimpleHoverModeContext {
  */
 export interface CreateHoverModeContextOptions {
   /**
-   * TODO: I think this has something to do with how I implemented the MenuBar.
+   * This should only be used if creating nested hover mode behavior where the
+   * hover mode should default to being enabled if a parent element is hovered.
+   * So set this to an element's `id` if a parent element is being hovered when
+   * the component **mounts**.
+   *
+   * The use case for this is the `MenuBar` component since after clicking a
+   * menu button or hovering it long enough to enable the hover mode, all child
+   * menus should also be in the hover mode until the top-most element is
+   * closed.
    *
    * @defaultValue `""`
    */

package/src/interaction/types.ts

@@ -8,7 +8,6 @@ import type {
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-ripple-background-color"?: string;
     "--rmd-interaction-background-color"?: string;
     "--rmd-hover-background-color"?: string;
     "--rmd-focus-background-color"?: string;
@@ -16,6 +15,11 @@ declare module "react" {
     "--rmd-selected-background-color"?: string;
     "--rmd-focus-color"?: string;
     "--rmd-focus-width"?: string | number;
+    "--rmd-ripple-inset"?: string | number;
+    "--rmd-ripple-border-radius"?: string | number;
+    "--rmd-ripple-background-color"?: string;
+    "--rmd-surface-inset"?: string | number;
+    "--rmd-surface-border-radius"?: string | number;
   }
 }
 

package/src/link/Link.tsx

@@ -6,14 +6,6 @@ import {
 
 import { type LinkClassNameOptions, link } from "./styles.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-link-color"?: string;
-    "--rmd-link-visited-color"?: string;
-    "--rmd-link-hover-color"?: string;
-  }
-}
-
 /**
  * @since 6.0.0
  */

package/src/link/styles.ts

@@ -4,6 +4,14 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-link");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-link-color"?: string;
+    "--rmd-link-visited-color"?: string;
+    "--rmd-link-hover-color"?: string;
+  }
+}
+
 /** @since 6.0.0 */
 export interface LinkClassNameOptions {
   className?: string;

package/src/list/List.tsx

@@ -1,30 +1,20 @@
 import { type HTMLAttributes, forwardRef } from "react";
 
-import { list } from "./listStyles.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-list-padding-h"?: string | number;
-    "--rmd-list-padding-v"?: string | number;
-  }
-}
+import { type ListClassNameOptions, list } from "./listStyles.js";
 
 export type ListElement = HTMLUListElement | HTMLOListElement;
 
-export interface ListProps extends HTMLAttributes<ListElement> {
+/**
+ * @since 6.3.1 Extends the ListClassNameOptions
+ */
+export interface ListProps
+  extends HTMLAttributes<ListElement>,
+    ListClassNameOptions {
   /**
    * @defaultValue `"none"`
    */
   role?: HTMLAttributes<ListElement>["role"];
 
-  /**
-   * Set to `true` to decrease the amount of padding and font size within the
-   * list.
-   *
-   * @defaultValue `false`
-   */
-  dense?: boolean;
-
   /**
    * Set this to `true` to render as `<ol>` instead of `<ul>` when the children
    * are in a specific order. For example: steps within a recipe.
@@ -32,13 +22,6 @@ export interface ListProps extends HTMLAttributes<ListElement> {
    * @defaultValue `false`
    */
   ordered?: boolean;
-
-  /**
-   * Set this to `true` to render horizontally instead of vertically.
-   *
-   * @defaultValue `false`
-   */
-  horizontal?: boolean;
 }
 
 /**