@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/src/positioning/createHorizontalPosition.ts

@@ -22,7 +22,7 @@ interface XPosition {
 /**
  * @internal
  */
-export interface FixConfig extends XCoordConfig {
+export interface HorizontalFixConfig extends XCoordConfig {
   vwMargin: number;
   screenRight: number;
   disableSwapping: boolean;
@@ -55,7 +55,7 @@ export interface CreateHorizontalPositionOptions
  *
  * @internal
  */
-export function createAnchoredLeft(config: FixConfig): XPosition {
+export function createAnchoredLeft(config: HorizontalFixConfig): XPosition {
   const { vwMargin, screenRight, elWidth, disableSwapping } = config;
 
   let left = getLeftCoord(config);
@@ -85,7 +85,9 @@ export function createAnchoredLeft(config: FixConfig): XPosition {
  *
  * @internal
  */
-export function createAnchoredInnerLeft(config: FixConfig): XPosition {
+export function createAnchoredInnerLeft(
+  config: HorizontalFixConfig
+): XPosition {
   const { vwMargin, screenRight, elWidth, disableSwapping } = config;
 
   let left = getInnerLeftCoord(config);
@@ -127,7 +129,9 @@ export function createAnchoredInnerLeft(config: FixConfig): XPosition {
  *
  * @internal
  */
-export function createAnchoredCenter(config: FixConfig): XPosition {
+export function createAnchoredHorizontalCenter(
+  config: HorizontalFixConfig
+): XPosition {
   const { vwMargin, screenRight, elWidth } = config;
   let left = getCenterXCoord(config);
   if (left < vwMargin) {
@@ -149,7 +153,9 @@ export function createAnchoredCenter(config: FixConfig): XPosition {
  *
  * @internal
  */
-export function createAnchoredInnerRight(config: FixConfig): XPosition {
+export function createAnchoredInnerRight(
+  config: HorizontalFixConfig
+): XPosition {
   const { screenRight, vwMargin, elWidth, disableSwapping } = config;
 
   let left = getInnerRightCoord(config);
@@ -179,7 +185,7 @@ export function createAnchoredInnerRight(config: FixConfig): XPosition {
  *
  * @internal
  */
-export function createAnchoredRight(config: FixConfig): XPosition {
+export function createAnchoredRight(config: HorizontalFixConfig): XPosition {
   const { screenRight, vwMargin, elWidth, disableSwapping } = config;
 
   let left = getRightCoord(config);
@@ -281,6 +287,17 @@ export function createHorizontalPosition(
   } = options;
 
   const screenRight = vw - vwMargin;
+  if (width !== "equal" && elWidth > vw - vwMargin * 2) {
+    // if the element's width is greater than the viewport's width minus the
+    // margin on both sides, just make the element span the entire viewport with
+    // the margin
+    return {
+      left: vwMargin,
+      right: vwMargin,
+      actualX: x,
+    };
+  }
+
   if (width === "min" || width === "equal") {
     return createEqualWidth({
       x,
@@ -294,18 +311,7 @@ export function createHorizontalPosition(
     });
   }
 
-  if (elWidth > vw - vwMargin * 2) {
-    // if the element's width is greater than the viewport's width minus the
-    // margin on both sides, just make the element span the entire viewport with
-    // the margin
-    return {
-      left: vwMargin,
-      right: vwMargin,
-      actualX: x,
-    };
-  }
-
-  const config: FixConfig = {
+  const config: HorizontalFixConfig = {
     vwMargin,
     xMargin,
     elWidth,
@@ -321,7 +327,7 @@ export function createHorizontalPosition(
     case "inner-left":
       return createAnchoredInnerLeft(config);
     case "center":
-      return createAnchoredCenter(config);
+      return createAnchoredHorizontalCenter(config);
     case "inner-right":
       return createAnchoredInnerRight(config);
     case "right":

package/src/positioning/createVerticalPosition.ts

@@ -18,7 +18,7 @@ interface YPosition {
 }
 
 /** @internal */
-export interface FixConfig extends YCoordConfig {
+export interface VerticalFixConfig extends YCoordConfig {
   vhMargin: number;
   screenBottom: number;
   preventOverlap: boolean;
@@ -55,7 +55,7 @@ export interface CreateVerticalPositionOptions
  *
  * @internal
  */
-export function createAnchoredAbove(config: FixConfig): YPosition {
+export function createAnchoredAbove(config: VerticalFixConfig): YPosition {
   const {
     yMargin,
     vhMargin,
@@ -113,7 +113,7 @@ export function createAnchoredAbove(config: FixConfig): YPosition {
  *
  * @internal
  */
-export function createAnchoredTop(config: FixConfig): YPosition {
+export function createAnchoredTop(config: VerticalFixConfig): YPosition {
   const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =
     config;
   let top = getTopCoord(config);
@@ -142,7 +142,9 @@ export function createAnchoredTop(config: FixConfig): YPosition {
  *
  * @internal
  */
-export function createAnchoredCenter(config: FixConfig): YPosition {
+export function createAnchoredVerticalCenter(
+  config: VerticalFixConfig
+): YPosition {
   const { vhMargin, screenBottom, elHeight, disableVHBounds } = config;
   let top = getCenterYCoord(config);
   const actualY: VerticalPosition = "center";
@@ -168,7 +170,7 @@ export function createAnchoredCenter(config: FixConfig): YPosition {
  *
  * @internal
  */
-export function createAnchoredBottom(config: FixConfig): YPosition {
+export function createAnchoredBottom(config: VerticalFixConfig): YPosition {
   const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =
     config;
   let top = getBottomCoord(config);
@@ -198,7 +200,7 @@ export function createAnchoredBottom(config: FixConfig): YPosition {
  *
  * @internal
  */
-export function createAnchoredBelow(config: FixConfig): YPosition {
+export function createAnchoredBelow(config: VerticalFixConfig): YPosition {
   const {
     yMargin,
     vhMargin,
@@ -277,7 +279,7 @@ export function createVerticalPosition(
     };
   }
 
-  const config: FixConfig = {
+  const config: VerticalFixConfig = {
     vhMargin,
     yMargin,
     elHeight,
@@ -295,7 +297,7 @@ export function createVerticalPosition(
     case "top":
       return createAnchoredTop(config);
     case "center":
-      return createAnchoredCenter(config);
+      return createAnchoredVerticalCenter(config);
     case "bottom":
       return createAnchoredBottom(config);
     case "below":

package/src/positioning/useFixedPositioning.ts

@@ -228,6 +228,7 @@ export interface FixedPositioningImplementation<E extends HTMLElement> {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-fixed-positioning | useFixedPositioning Demos}
  * @typeParam FixedToElement - An HTMLElement type for the static element.
  * @typeParam FixedElement - An HTMLElement type for the fixed element.
  * @since 4.0.0

package/src/progress/CircularProgress.tsx

@@ -118,7 +118,7 @@ const styles = bem("rmd-circular-progress");
 /**
  * @example Indeterminate Example
  * ```tsx
- * import { CircularProgress } from "@react-md/core":
+ * import { CircularProgress } from "@react-md/core/progress/CircularProgress":
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -128,7 +128,7 @@ const styles = bem("rmd-circular-progress");
  *
  * @example Determinate Example
  * ```tsx
- * import { CircularProgress } from "@react-md/core":
+ * import { CircularProgress } from "@react-md/core/progress/CircularProgress":
  * import { useState, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -139,6 +139,7 @@ const styles = bem("rmd-circular-progress");
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/progress#circular-progress | Progress Demos}
  * @since 6.0.0 Updated the determinate circular progress to no longer
  * rotate while increasing the value and require a label for accessibility.
  */

package/src/progress/LinearProgress.tsx

@@ -66,7 +66,7 @@ const styles = bem("rmd-linear-progress");
 /**
  * @example Indeterminate Example
  * ```tsx
- * import { LinearProgress } from "@react-md/core";
+ * import { LinearProgress } from "@react-md/core/progress/LinearProgress";
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -76,7 +76,7 @@ const styles = bem("rmd-linear-progress");
  *
  * @example Determinate Example
  * ```tsx
- * import { LinearProgress } from "@react-md/core";
+ * import { LinearProgress } from "@react-md/core/progress/LinearProgress";
  * import { useState, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -87,6 +87,7 @@ const styles = bem("rmd-linear-progress");
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/progress#linear-progress | Progress Demos}
  * @since 6.0.0 Supports rendering as any of the theme colors and
  * requires a label for accessibility.
  */

package/src/responsive-item/ResponsiveItem.tsx

@@ -21,7 +21,7 @@ export interface ResponsiveItemProps
 /**
  * @example Image Example
  * ```tsx
- * import { ResponsiveItem } from "@react-md/core";
+ * import { ResponsiveItem } from "@react-md/core/responsive-item/ResponsiveItem";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -35,7 +35,7 @@ export interface ResponsiveItemProps
  *
  * @example Iframe Example
  * ```tsx
- * import { ResponsiveItem } from "@react-md/core";
+ * import { ResponsiveItem } from "@react-md/core/responsive-item/ResponsiveItem";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -53,7 +53,7 @@ export interface ResponsiveItemProps
  *
  * @example Forced Aspect Ratio
  * ```tsx
- * import { ResponsiveItem } from "@react-md/core";
+ * import { ResponsiveItem } from "@react-md/core/responsive-item/ResponsiveItem";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -65,6 +65,7 @@ export interface ResponsiveItemProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/responsive-item | ResponsiveItem Demos}
  * @since 6.0.0 Renamed from `MediaContainer` to
  * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.
  */

package/src/responsive-item/ResponsiveItemOverlay.tsx

@@ -18,25 +18,27 @@ export interface ResponsiveItemOverlayProps
 /**
  * @example Simple Example
  * ```tsx
- * import { ResponsiveItemContainer, ResponsiveItemOverlay } from "@react-md/core";
+ * import { CardContent } from "@react-md/core/card/CardContent";
+ * import { ResponsiveItemOverlay } from "@react-md/core/responsive-item/ResponsiveItemOverlay";
+ * import { Typography } from "@react-md/core/typography/Typography";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   return (
- *     <ResponsiveItemContainer>
+ *     <CardContent>
  *       <img alt="" src="/some-image.png" />
  *       <ResponsiveItemOverlay>
  *         <Typography type="headline-5" margin="none">
  *           This appears at the bottom by default.
  *         </Typography>
  *       </ResponsiveItemOverlay>
- *     </ResponsiveItemContainer>
+ *     </CardContent>
  *   );
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/responsive-item | ResponsiveItem Demos}
  * @see {@link ResponsiveItemOverlayPosition}
- *
  * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`
  * and renders as a `<span>` instead of a `<div>`.
  */

package/src/scroll/useScrollLock.ts

@@ -19,6 +19,7 @@ let isLocked = false;
 /**
  * Used to enable scroll locking on the entire page.
  *
+ * @see {@link https://next.react-md.dev/hooks/use-scroll-lock | useScrollLock Demos}
  * @since 6.0.0 No longer support scroll locking elements other than
  * the `document.body` since it's more reliable to scroll lock with an overlay.
  * @since 6.0.0 Now applies `paddingRight` equal to the current OS's

package/src/searching/fuzzy.ts

@@ -5,7 +5,8 @@ import { defaultExtractor, search } from "./utils.js";
 /**
  * @example
  * ```tsx
- * import { createFuzzyRegExp, toSearchQuery } from "@react-md/core":
+ * import { createFuzzyRegExp } from "@react-md/core/searching/fuzzy":
+ * import { toSearchQuery } from "@react-md/core/searching/toSearchQuery":
  * import { useDeferredValue, useMemo, useState, type ReactElement } from "react";
  *
  * function Example(): ReactElement {

package/src/segmented-button/SegmentedButton.tsx

@@ -66,10 +66,8 @@ export interface SegmentedButtonProps
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   SegmentedButton,
- *   SegmentedButtonContainer,
- * } from "@react-md/core";
+ * import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
+ * import { SegmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
  * import type { ReactElement } from "react";
  * import { useState } from "react";
  *
@@ -101,6 +99,7 @@ export interface SegmentedButtonProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/segmented-button | SegmentedButton Demos}
  * @since 6.0.0
  */
 export const SegmentedButton = forwardRef<

package/src/segmented-button/SegmentedButtonContainer.tsx

@@ -2,7 +2,7 @@ import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
 
 import {
   type SegmentedButtonContainerClassNameOptions,
-  segmentedButtonContainerStyles,
+  segmentedButtonContainer,
 } from "./segmentedButtonContainerStyles.js";
 
 /**
@@ -16,21 +16,19 @@ export interface SegmentedButtonContainerProps
 
 /**
  * Simple wrapper `div` to apply the segmented button container styles. You can
- * just use the {@link segmentedButtonContainerStyles} util function instead.
+ * just use the {@link segmentedButtonContainer} util function instead.
  *
  * @example Without This Component
  * ```tsx
- * import {
- *   SegmentedButton,
- *   segmentedButtonContainerStyles,
- * } from "@react-md/core";
+ * import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
+ * import { segmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
  * import type { ReactElement } from "react";
  *
  * import { CustomWrapperComponent } from "./CustomWrapperComponent.jsx";
  *
  * function Example(): ReactElement {
  *   return (
- *     <CustomWrapperComponent className={segmentedButtonContainerStyles()}>
+ *     <CustomWrapperComponent className={segmentedButtonContainer()}>
  *       <SegmentedButton>One</SegmentedButton>
  *       <SegmentedButton>Two</SegmentedButton>
  *       <SegmentedButton>Three</SegmentedButton>
@@ -39,6 +37,7 @@ export interface SegmentedButtonContainerProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/segmented-button | SegmentedButton Demos}
  * @since 6.0.0
  */
 export const SegmentedButtonContainer = forwardRef<
@@ -51,7 +50,7 @@ export const SegmentedButtonContainer = forwardRef<
     <div
       {...remaining}
       ref={ref}
-      className={segmentedButtonContainerStyles({
+      className={segmentedButtonContainer({
         className,
         disableFullWidth,
       })}

package/src/segmented-button/segmentedButtonContainerStyles.ts

@@ -17,7 +17,7 @@ export interface SegmentedButtonContainerClassNameOptions {
 /**
  * @since 6.0.0
  */
-export function segmentedButtonContainerStyles(
+export function segmentedButtonContainer(
   options: SegmentedButtonContainerClassNameOptions = {}
 ): string {
   const { className, disableFullWidth } = options;

package/src/sheet/Sheet.tsx

@@ -11,6 +11,19 @@ import {
   sheet,
 } from "./styles.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-sheet-height"?: string | number;
+    "--rmd-sheet-width"?: string | number;
+    "--rmd-sheet-max-height"?: string | number;
+    "--rmd-sheet-touch-width"?: string | number;
+    "--rmd-sheet-touch-max-height"?: string | number;
+    "--rmd-sheet-static-width"?: string | number;
+    "--rmd-sheet-transform-offscreen"?: string | number;
+    "--rmd-sheet-z-index"?: number;
+  }
+}
+
 /**
  * @since 6.0.0
  */
@@ -64,6 +77,8 @@ export type SheetProps = LabelRequiredForA11y<BaseSheetProps>;
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/sheet | Sheet Demos}
  */
 export const Sheet = forwardRef<HTMLDivElement, SheetProps>(
   function Sheet(props, ref) {

package/src/sheet/styles.ts

@@ -8,25 +8,18 @@ import {
 } from "../transition/types.js";
 import { bem } from "../utils/bem.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-sheet-height"?: string | number;
-    "--rmd-sheet-width"?: string | number;
-    "--rmd-sheet-max-height"?: string | number;
-    "--rmd-sheet-touch-width"?: string | number;
-    "--rmd-sheet-touch-max-height"?: string | number;
-    "--rmd-sheet-static-width"?: string | number;
-    "--rmd-sheet-transform-offscreen"?: string | number;
-    "--rmd-sheet-z-index"?: number;
-  }
-}
-
-export const DEFAULT_SHEET_TIMEOUT: Readonly<TransitionTimeout> = {
+/**
+ * @since 6.0.0 Uses `as const satisfies TransitionTimeout`
+ */
+export const DEFAULT_SHEET_TIMEOUT = {
   enter: 200,
   exit: 150,
-};
+} as const satisfies TransitionTimeout;
 
-export const DEFAULT_SHEET_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
+/**
+ * @since 6.0.0 Uses `as const satisfies CSSTransitionClassNames`
+ */
+export const DEFAULT_SHEET_CLASSNAMES = {
   appear: "rmd-sheet--offscreen",
   appearActive: "rmd-sheet--enter rmd-sheet--visible",
   enter: "rmd-sheet--offscreen",
@@ -34,7 +27,7 @@ export const DEFAULT_SHEET_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
   exit: "rmd-sheet--exit",
   exitActive: "rmd-sheet--offscreen",
   exitDone: "rmd-sheet--offscreen rmd-sheet--hidden",
-};
+} as const satisfies CSSTransitionClassNames;
 
 const styles = bem("rmd-sheet");
 

package/src/snackbar/DefaultToastRenderer.tsx

@@ -44,6 +44,7 @@ export interface ToastRendererProps extends ConfigurableToastProps, ToastMeta {
  * - always renders the {@link ToastRendererProps.toastDefaults}'s `children`
  *   'after the optional toast's `children`
  *
+ * @see {@link https://next.react-md.dev/components/snackbar | Snackbar Demos}
  * @since 6.0.0
  */
 export function DefaultToastRenderer(props: ToastRendererProps): ReactElement {

package/src/snackbar/Snackbar.tsx

@@ -48,14 +48,12 @@ export interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
    *
    * @example
    * ```ts
-   * import type { ToastRendererProps } from "@react-md/core";
-   * import {
-   *   Snackbar,
-   *   Toast,
-   *   ToastContent,
-   *   useToastManager,
-   * } from "@react-md/core";
-   * import type { ReactElement } from "react";
+   * import { Snackbar } from "@react-md/core/snackbar/Snackbar";
+   * import { Toast } from "@react-md/core/snackbar/Toast";
+   * import { ToastContent } from "@react-md/core/snackbar/ToastContent";
+   * import { type ToastRendererProps } from "@react-md/core/snackbar/DefaultToastRenderer";
+   * import { useToastManager } from "@react-md/core/snackbar/ToastManagerProvider";
+   * import { type ReactElement } from "react";
    *
    * function CustomToast(props: CustomToastRendererProps): ReactElement {
    *   // Pretend like we don't need anything else from the toast since the
@@ -122,7 +120,9 @@ export interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @example Super Simple Example
  * ```tsx
- * import { Button, Snackbar, addToast } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Snackbar } from "@react-md/core/snackbar/Snackbar";
+ * import { addToast } from "@react-md/core/snackbar/ToastManager";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -141,6 +141,7 @@ export interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/snackbar | Snackbar Demos}
  * @see {@link SnackbarProps.renderToast} for creating a custom toast
  * implementation.
  * @since 6.0.0 Rewritten to use a new API that supports adding toasts

package/src/snackbar/Toast.tsx

@@ -24,6 +24,14 @@ import { ToastCloseButton } from "./ToastCloseButton.js";
 import { ToastContent, type ToastContentProps } from "./ToastContent.js";
 import { toast } from "./toastStyles.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-toast-color"?: string;
+    "--rmd-toast-background-color"?: string;
+    "--rmd-toast-offset"?: string | number;
+  }
+}
+
 /**
  * @since 6.0.0
  */
@@ -137,6 +145,7 @@ export interface ToastProps extends ConfigurableToastProps {
  * This component is just used for toast styling and does not implement any of
  * the visibility behavior.
  *
+ * @see {@link https://next.react-md.dev/components/snackbar | Snackbar Demos}
  * @since 6.0.0
  */
 export const Toast = forwardRef<HTMLDivElement, ToastProps>(

package/src/snackbar/ToastActionButton.tsx

@@ -4,7 +4,7 @@ import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 
 import { Button, type ButtonProps } from "../button/Button.js";
-import { type ButtonTheme } from "../button/buttonStyles.js";
+import { type ButtonTheme } from "../button/styles.js";
 import { bem } from "../utils/bem.js";
 import { useCurrentToastActions } from "./useCurrentToastActions.js";
 
@@ -36,6 +36,7 @@ export interface ToastActionButtonProps extends ButtonProps {
  * This button will automatically close the toast when clicked unless
  * `event.stopPropagation()` is called from the `onClick` prop.
  *
+ * @see {@link https://next.react-md.dev/components/snackbar | Snackbar Demos}
  * @since 6.0.0
  */
 export const ToastActionButton = forwardRef<

package/src/snackbar/ToastCloseButton.tsx

@@ -4,7 +4,7 @@ import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 
 import { Button, type ButtonProps } from "../button/Button.js";
-import { type ButtonType } from "../button/buttonStyles.js";
+import { type ButtonType } from "../button/styles.js";
 import { getIcon } from "../icon/config.js";
 import { bem } from "../utils/bem.js";
 import { useCurrentToastActions } from "./useCurrentToastActions.js";
@@ -45,6 +45,7 @@ export interface ToastCloseButtonProps extends ButtonProps {
  * This button will automatically close the toast when clicked unless
  * `event.stopPropagation()` is called from the `onClick` prop.
  *
+ * @see {@link https://next.react-md.dev/components/snackbar | Snackbar Demos}
  * @since 6.0.0
  */
 export const ToastCloseButton = forwardRef<

package/src/snackbar/ToastContent.tsx

@@ -39,6 +39,7 @@ export interface ToastContentProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/snackbar | Snackbar Demos}
  * @since 6.0.0
  */
 export const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(

package/src/snackbar/{ToastManager.tsx → ToastManager.ts}

@@ -125,8 +125,8 @@ export interface ToastVisibilityTimers {
 }
 
 /**
+ * @see {@link https://next.react-md.dev/components/snackbar | Snackbar Demos}
  * @see {@link ToastManagerProvider}
- *
  * @since 6.0.0
  */
 export class ToastManager {

package/src/snackbar/ToastManagerProvider.tsx

@@ -94,6 +94,7 @@ export interface ToastManagerProviderProps {
  * the default {@link addToast}, {@link removeToast}, and {@link clearToasts}
  * implementation.
  *
+ * @see {@link https://next.react-md.dev/components/snackbar | Snackbar Demos}
  * @see {@link ToastManager} for example usage.
  * @since 6.0.0
  */

package/src/snackbar/toastStyles.ts

@@ -3,14 +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-toast-color"?: string;
-    "--rmd-toast-background-color"?: string;
-    "--rmd-toast-offset"?: string | number;
-  }
-}
-
 const styles = bem("rmd-toast");
 
 /** @since 6.0.0 */

package/src/snackbar/useCurrentToastActions.ts

@@ -34,6 +34,7 @@ export const { Provider: CurrentToastActionsProvider } = context;
  * This is only required if you have multiple `Snackbar` implementations in your
  * app.
  *
+ * @see {@link https://next.react-md.dev/components/snackbar | Snackbar Demos}
  * @since 6.0.0
  */
 export function useCurrentToastActions(): CurrentToastActions {

package/src/storage/useStorage.ts

@@ -119,6 +119,7 @@ import {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-storage | useStorage Demos}
  * @see https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage