@react-md/core 1.0.0-next.16 → 1.0.0-next.17

package/dist/responsive-item/ResponsiveItemContainer.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
-import { bem } from "../utils/bem.js";
-const styles = bem("rmd-responsive-item-container");
-/** @since 6.0.0 */ export function responsiveItemContainer(options = {}) {
-    const { className, fullWidth = false, aspectRatio = "", responsive = "auto" } = options;
-    return cnb(styles({
-        auto: responsive !== "manual",
-        "auto-scale": responsive === "container",
-        "aspect-ratio": aspectRatio,
-        [aspectRatio]: aspectRatio,
-        "full-width": fullWidth
-    }), className);
-}
-/**
- * @example Image Example
- * ```tsx
- * import { ResponsiveItemContainer } from "@react-md/core";
- * import type { ReactElement } from "react";
- *
- * function Example(): ReactElement {
- *   return (
- *     <ResponsiveItemContainer>
- *       <img alt="" src="/some-image.png" />
- *     </ResponsiveItemContainer>
- *   );
- * }
- * ```
- *
- * @example Iframe Example
- * ```tsx
- * import { ResponsiveItemContainer } from "@react-md/core";
- * import type { ReactElement } from "react";
- *
- * function Example(): ReactElement {
- *   return (
- *     <ResponsiveItemContainer>
- *       <iframe
- *         src="https://youtube.com/some-video-url"
- *         title="Some YouTube video"
- *         allowFullScreen
- *       />
- *     </ResponsiveItemContainer>
- *   );
- * }
- * ```
- *
- * @example Forced Aspect Ratio
- * ```tsx
- * import { ResponsiveItemContainer } from "@react-md/core";
- * import type { ReactElement } from "react";
- *
- * function Example(): ReactElement {
- *   return (
- *     <ResponsiveItemContainer aspectRatio="16-9">
- *       <img alt="" src="/some-image.png" />
- *     </ResponsiveItemContainer>
- *   );
- * }
- * ```
- *
- * @since 6.0.0 Renamed from `MediaContainer` to
- * `ResponsiveItemContainer` and renders a `<span>` instead of a `<div>`.
- */ export const ResponsiveItemContainer = /*#__PURE__*/ forwardRef(function ResponsiveItemContainer(props, ref) {
-    const { className, fullWidth = false, aspectRatio, responsive = "auto", children, ...remaining } = props;
-    return /*#__PURE__*/ _jsx("span", {
-        ...remaining,
-        ref: ref,
-        className: responsiveItemContainer({
-            className,
-            fullWidth,
-            aspectRatio,
-            responsive
-        }),
-        children: children
-    });
-});
-
-//# sourceMappingURL=ResponsiveItemContainer.js.map

package/dist/responsive-item/ResponsiveItemContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/responsive-item/ResponsiveItemContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-responsive-item-container\");\n\n/** @since 6.0.0 */\nexport interface ResponsiveItemContainerClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the container should gain the following styles:\n   *\n   * ```scss\n   * display: block;\n   * width: 100%;\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Set this to a custom aspect ratio to use.\n   *\n   * @example Valid Aspect Ratios\n   * ```tsx\n   * aspectRatio=\"16-9\"\n   * aspectRatio=\"9-16\"\n   * aspectRatio=\"3-4\"\n   * aspectRatio=\"4-3\"\n   * aspectRatio=\"1-1\"\n   * ```\n   *\n   * These values are based on the `core.$responsive-item-aspect-ratios` map.\n   *\n   * @defaultValue `\"\"`\n   */\n  aspectRatio?: `${number}-${number}`;\n\n  /**\n   * Set this to `\"manual\"` if you want to manually specify which elements are\n   * responsive items using custom class names. You probably don't really want\n   * to use this.\n   *\n   * Set this to `\"auto\"` to automatically update all visual media that appear\n   * as a child in this component to a responsive item.\n   *\n   * Set this to `\"container\"` to automatically update all visual media that\n   * appear as a child in this component to be a responsive item that scales to\n   * the container's dimensions.\n   *\n   * Note: The `\"auto\"` and `\"container\"` values use the\n   * `core.$responsive-item-selectors` value for their behavior.\n   *\n   * @defaultValue `\"auto\"`\n   */\n  responsive?: \"auto\" | \"manual\" | \"container\";\n}\n\n/** @since 6.0.0 */\nexport function responsiveItemContainer(\n  options: ResponsiveItemContainerClassNameOptions = {}\n): string {\n  const {\n    className,\n    fullWidth = false,\n    aspectRatio = \"\",\n    responsive = \"auto\",\n  } = options;\n\n  return cnb(\n    styles({\n      auto: responsive !== \"manual\",\n      \"auto-scale\": responsive === \"container\",\n      \"aspect-ratio\": aspectRatio,\n      [aspectRatio]: aspectRatio,\n      \"full-width\": fullWidth,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0 Renamed from `MediaContainerProps` to\n * `ResponsiveItemContainerProps`\n * @since 6.0.0 The `height` and `width` props were removed in favor of the\n * `aspectRatio` props since the latest typescript string interpolation supports\n * enforcing the correct format.\n * @since 6.0.0 The `auto` prop was removed in favor of the new\n * {@link ResponsiveItemContainerProps.responsive} prop.\n */\nexport interface ResponsiveItemContainerProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    ResponsiveItemContainerClassNameOptions {}\n\n/**\n * @example Image Example\n * ```tsx\n * import { ResponsiveItemContainer } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItemContainer>\n *       <img alt=\"\" src=\"/some-image.png\" />\n *     </ResponsiveItemContainer>\n *   );\n * }\n * ```\n *\n * @example Iframe Example\n * ```tsx\n * import { ResponsiveItemContainer } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItemContainer>\n *       <iframe\n *         src=\"https://youtube.com/some-video-url\"\n *         title=\"Some YouTube video\"\n *         allowFullScreen\n *       />\n *     </ResponsiveItemContainer>\n *   );\n * }\n * ```\n *\n * @example Forced Aspect Ratio\n * ```tsx\n * import { ResponsiveItemContainer } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItemContainer aspectRatio=\"16-9\">\n *       <img alt=\"\" src=\"/some-image.png\" />\n *     </ResponsiveItemContainer>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Renamed from `MediaContainer` to\n * `ResponsiveItemContainer` and renders a `<span>` instead of a `<div>`.\n */\nexport const ResponsiveItemContainer = forwardRef<\n  HTMLSpanElement,\n  ResponsiveItemContainerProps\n>(function ResponsiveItemContainer(props, ref) {\n  const {\n    className,\n    fullWidth = false,\n    aspectRatio,\n    responsive = \"auto\",\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={responsiveItemContainer({\n        className,\n        fullWidth,\n        aspectRatio,\n        responsive,\n      })}\n    >\n      {children}\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","bem","styles","responsiveItemContainer","options","className","fullWidth","aspectRatio","responsive","auto","ResponsiveItemContainer","props","ref","children","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAwDnB,iBAAiB,GACjB,OAAO,SAASE,wBACdC,UAAmD,CAAC,CAAC;IAErD,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,cAAc,EAAE,EAChBC,aAAa,MAAM,EACpB,GAAGJ;IAEJ,OAAOL,IACLG,OAAO;QACLO,MAAMD,eAAe;QACrB,cAAcA,eAAe;QAC7B,gBAAgBD;QAChB,CAACA,YAAY,EAAEA;QACf,cAAcD;IAChB,IACAD;AAEJ;AAeA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,MAAMK,wCAA0BV,WAGrC,SAASU,wBAAwBC,KAAK,EAAEC,GAAG;IAC3C,MAAM,EACJP,SAAS,EACTC,YAAY,KAAK,EACjBC,WAAW,EACXC,aAAa,MAAM,EACnBK,QAAQ,EACR,GAAGC,WACJ,GAAGH;IAEJ,qBACE,KAACI;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLP,WAAWF,wBAAwB;YACjCE;YACAC;YACAC;YACAC;QACF;kBAECK;;AAGP,GAAG"}

package/dist/responsive-item/styles.d.ts

@@ -1,34 +0,0 @@
-/** @since 6.0.0 */
-export interface ResponsiveItemClassNameOptions {
-    className?: string;
-    /**
-     * Set this to `true` to apply the following styles:
-     * ```scss
-     * max-height: 100%;
-     * max-width: 100%;
-     * object-fit: contain;
-     * ```
-     *
-     * This is useful for displaying images in a full page dialog so that scroll
-     * bars do not appear while maintaining the correct aspect ratio for the item.
-     *
-     * @defaultValue `false`
-     */
-    scaleToContainer?: boolean;
-    /**
-     * Set this to `true` to force a specific aspect ratio.
-     *
-     * Note: This will only work if the parent element has applied the correct
-     * {@link ResponsiveItemContainerStyles} as well.
-     *
-     * @defaultValue `false`
-     */
-    forcedAspectRatio?: boolean;
-}
-/**
- * Applies the visual media responsive styles manually if you cannot use the
- * `ResponsiveItemContainer` component.
- *
- * @since 6.0.0
- */
-export declare function responsiveItem(options?: ResponsiveItemClassNameOptions): string;

package/dist/responsive-item/styles.js

@@ -1,17 +0,0 @@
-import { cnb } from "cnbuilder";
-import { bem } from "../utils/bem.js";
-const styles = bem("rmd-responsive-item");
-/**
- * Applies the visual media responsive styles manually if you cannot use the
- * `ResponsiveItemContainer` component.
- *
- * @since 6.0.0
- */ export function responsiveItem(options = {}) {
-    const { className, scaleToContainer = false, forcedAspectRatio = false } = options;
-    return cnb(styles({
-        scale: scaleToContainer,
-        "aspect-ratio": forcedAspectRatio
-    }), className);
-}
-
-//# sourceMappingURL=styles.js.map

package/dist/responsive-item/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/responsive-item/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-responsive-item\");\n\n/** @since 6.0.0 */\nexport interface ResponsiveItemClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to apply the following styles:\n   * ```scss\n   * max-height: 100%;\n   * max-width: 100%;\n   * object-fit: contain;\n   * ```\n   *\n   * This is useful for displaying images in a full page dialog so that scroll\n   * bars do not appear while maintaining the correct aspect ratio for the item.\n   *\n   * @defaultValue `false`\n   */\n  scaleToContainer?: boolean;\n\n  /**\n   * Set this to `true` to force a specific aspect ratio.\n   *\n   * Note: This will only work if the parent element has applied the correct\n   * {@link ResponsiveItemContainerStyles} as well.\n   *\n   * @defaultValue `false`\n   */\n  forcedAspectRatio?: boolean;\n}\n\n/**\n * Applies the visual media responsive styles manually if you cannot use the\n * `ResponsiveItemContainer` component.\n *\n * @since 6.0.0\n */\nexport function responsiveItem(\n  options: ResponsiveItemClassNameOptions = {}\n): string {\n  const {\n    className,\n    scaleToContainer = false,\n    forcedAspectRatio = false,\n  } = options;\n\n  return cnb(\n    styles({\n      scale: scaleToContainer,\n      \"aspect-ratio\": forcedAspectRatio,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","responsiveItem","options","className","scaleToContainer","forcedAspectRatio","scale"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAgCnB;;;;;CAKC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,SAAS,EACTC,mBAAmB,KAAK,EACxBC,oBAAoB,KAAK,EAC1B,GAAGH;IAEJ,OAAOJ,IACLE,OAAO;QACLM,OAAOF;QACP,gBAAgBC;IAClB,IACAF;AAEJ"}

package/dist/theme/usePrefersColorScheme.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/theme/usePrefersColorScheme.ts"],"sourcesContent":["\"use client\";\nimport { useMediaQuery } from \"../media-queries/useMediaQuery.js\";\n\n/**\n * A simple wrapper around the {@link useMediaQuery} hook with:\n * `\"(prefers-color-scheme: dark)\"`.\n *\n * @since 6.0.0\n */\nexport function usePrefersDarkTheme(disabled = false): boolean {\n  return useMediaQuery(\"(prefers-color-scheme: dark)\", disabled);\n}\n"],"names":["useMediaQuery","usePrefersDarkTheme","disabled"],"mappings":"AAAA;AACA,SAASA,aAAa,QAAQ,oCAAoC;AAElE;;;;;CAKC,GACD,OAAO,SAASC,oBAAoBC,WAAW,KAAK;IAClD,OAAOF,cAAc,gCAAgCE;AACvD"}

package/src/autocomplete/FilterAutocompleteOptions.tsx

@@ -1,86 +0,0 @@
-"use client";
-import { useMemo, type ReactElement, type RefObject } from "react";
-import {
-  triggerManualChangeEvent,
-  type EditableHTMLElement,
-} from "../form/utils.js";
-import { ListSubheader } from "../list/ListSubheader.js";
-import { MenuItem } from "../menu/MenuItem.js";
-import {
-  defaultAutocompleteExtractor,
-  defaultAutocompleteFilter,
-  defaultAutocompleteOptionProps,
-} from "./defaults.js";
-import { type AutocompleteOptionsProps } from "./types.js";
-
-const noop = (): void => {
-  // do nothing
-};
-
-export interface FilterAutocompleteOptionsProps<T>
-  extends AutocompleteOptionsProps<T> {
-  query: string;
-  comboboxRef: RefObject<EditableHTMLElement>;
-}
-
-export function FilterAutocompleteOptions<T>(
-  props: FilterAutocompleteOptionsProps<T>
-): ReactElement {
-  const {
-    query,
-    filter = defaultAutocompleteFilter,
-    options,
-    extractor = defaultAutocompleteExtractor,
-    whitespace = "keep",
-    comboboxRef,
-    disableFilter,
-    onAutocomplete = noop,
-    getOptionProps = defaultAutocompleteOptionProps,
-    clearOnAutocomplete,
-    noOptionsChildren = <ListSubheader>No Options</ListSubheader>,
-  } = props;
-  const filtered = useMemo(() => {
-    if (disableFilter) {
-      return options;
-    }
-
-    return filter({
-      list: options,
-      query,
-      extractor,
-      whitespace,
-    });
-  }, [disableFilter, extractor, filter, options, query, whitespace]);
-
-  return (
-    <>
-      {!filtered.length && noOptionsChildren}
-      {filtered.map((option, index) => {
-        const label = extractor(option);
-        const optionProps = getOptionProps({
-          index,
-          option,
-        });
-
-        return (
-          <MenuItem
-            key={label}
-            role="option"
-            {...optionProps}
-            onClick={(event) => {
-              optionProps?.onClick?.(event);
-
-              triggerManualChangeEvent(
-                comboboxRef.current,
-                clearOnAutocomplete ? "" : label
-              );
-              onAutocomplete(option);
-            }}
-          >
-            {optionProps?.children ?? label}
-          </MenuItem>
-        );
-      })}
-    </>
-  );
-}

package/src/dialog/DialogContainer.tsx

@@ -1,28 +0,0 @@
-import { cnb } from "cnbuilder";
-import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
-
-/**
- * @since 6.0.0
- * @internal
- */
-export interface DialogContainerProps extends HTMLAttributes<HTMLDivElement> {
-  enabled: boolean;
-  children: ReactNode;
-}
-
-/**
- * @since 6.0.0
- * @internal
- */
-export function DialogContainer(props: DialogContainerProps): ReactElement {
-  const { className, enabled, children, ...remaining } = props;
-  if (!enabled) {
-    return <>{children}</>;
-  }
-
-  return (
-    <div {...remaining} className={cnb("rmd-dialog-container", className)}>
-      {children}
-    </div>
-  );
-}

package/src/form/useListboxProvider.ts

@@ -1,45 +0,0 @@
-"use client";
-import { createContext, useContext, type RefObject } from "react";
-import { type ChangeableHTMLElement } from "./utils.js";
-
-/**
- * @internal
- * @since 6.0.0
- */
-export interface ListboxContext {
-  /**
-   * This ref is used to trigger the change event when an option is clicked.
-   */
-  inputRef: RefObject<ChangeableHTMLElement>;
-
-  /**
-   * This is used within the `Option` component to determine if it is currently
-   * selected or not.
-   */
-  currentValue: string | number | null;
-
-  selectedIconAfter: boolean;
-  disableSelectedIcon: boolean;
-}
-
-const context = createContext<ListboxContext | null>(null);
-
-/**
- * **Client Component**
- *
- * @internal
- * @since 6.0.0
- */
-export const { Provider: ListboxProvider } = context;
-
-/**
- * @internal
- * @since 6.0.0
- */
-export function useListboxContext(): ListboxContext {
-  const value = useContext(context);
-  if (!value) {
-    throw new Error("The `ListboxProvider` must be a parent component");
-  }
-  return value;
-}

package/src/navigation/getHrefFromParents.ts

@@ -1,15 +0,0 @@
-import { type NavigationItem } from "./types.js";
-
-/**
- * @since 6.0.0
- */
-export function getHrefFromParents(parents: readonly NavigationItem[]): string {
-  return parents.reduce<string>((result, parent) => {
-    if ("href" in parent && parent.href) {
-      const { href } = parent;
-      return result + href;
-    }
-
-    return result;
-  }, "");
-}

package/src/responsive-item/ResponsiveItemContainer.tsx

@@ -1,174 +0,0 @@
-import { cnb } from "cnbuilder";
-import { forwardRef, type HTMLAttributes } from "react";
-import { bem } from "../utils/bem.js";
-
-const styles = bem("rmd-responsive-item-container");
-
-/** @since 6.0.0 */
-export interface ResponsiveItemContainerClassNameOptions {
-  className?: string;
-
-  /**
-   * Set this to `true` if the container should gain the following styles:
-   *
-   * ```scss
-   * display: block;
-   * width: 100%;
-   * ```
-   *
-   * @defaultValue `false`
-   */
-  fullWidth?: boolean;
-
-  /**
-   * Set this to a custom aspect ratio to use.
-   *
-   * @example Valid Aspect Ratios
-   * ```tsx
-   * aspectRatio="16-9"
-   * aspectRatio="9-16"
-   * aspectRatio="3-4"
-   * aspectRatio="4-3"
-   * aspectRatio="1-1"
-   * ```
-   *
-   * These values are based on the `core.$responsive-item-aspect-ratios` map.
-   *
-   * @defaultValue `""`
-   */
-  aspectRatio?: `${number}-${number}`;
-
-  /**
-   * Set this to `"manual"` if you want to manually specify which elements are
-   * responsive items using custom class names. You probably don't really want
-   * to use this.
-   *
-   * Set this to `"auto"` to automatically update all visual media that appear
-   * as a child in this component to a responsive item.
-   *
-   * Set this to `"container"` to automatically update all visual media that
-   * appear as a child in this component to be a responsive item that scales to
-   * the container's dimensions.
-   *
-   * Note: The `"auto"` and `"container"` values use the
-   * `core.$responsive-item-selectors` value for their behavior.
-   *
-   * @defaultValue `"auto"`
-   */
-  responsive?: "auto" | "manual" | "container";
-}
-
-/** @since 6.0.0 */
-export function responsiveItemContainer(
-  options: ResponsiveItemContainerClassNameOptions = {}
-): string {
-  const {
-    className,
-    fullWidth = false,
-    aspectRatio = "",
-    responsive = "auto",
-  } = options;
-
-  return cnb(
-    styles({
-      auto: responsive !== "manual",
-      "auto-scale": responsive === "container",
-      "aspect-ratio": aspectRatio,
-      [aspectRatio]: aspectRatio,
-      "full-width": fullWidth,
-    }),
-    className
-  );
-}
-
-/**
- * @since 6.0.0 Renamed from `MediaContainerProps` to
- * `ResponsiveItemContainerProps`
- * @since 6.0.0 The `height` and `width` props were removed in favor of the
- * `aspectRatio` props since the latest typescript string interpolation supports
- * enforcing the correct format.
- * @since 6.0.0 The `auto` prop was removed in favor of the new
- * {@link ResponsiveItemContainerProps.responsive} prop.
- */
-export interface ResponsiveItemContainerProps
-  extends HTMLAttributes<HTMLSpanElement>,
-    ResponsiveItemContainerClassNameOptions {}
-
-/**
- * @example Image Example
- * ```tsx
- * import { ResponsiveItemContainer } from "@react-md/core";
- * import type { ReactElement } from "react";
- *
- * function Example(): ReactElement {
- *   return (
- *     <ResponsiveItemContainer>
- *       <img alt="" src="/some-image.png" />
- *     </ResponsiveItemContainer>
- *   );
- * }
- * ```
- *
- * @example Iframe Example
- * ```tsx
- * import { ResponsiveItemContainer } from "@react-md/core";
- * import type { ReactElement } from "react";
- *
- * function Example(): ReactElement {
- *   return (
- *     <ResponsiveItemContainer>
- *       <iframe
- *         src="https://youtube.com/some-video-url"
- *         title="Some YouTube video"
- *         allowFullScreen
- *       />
- *     </ResponsiveItemContainer>
- *   );
- * }
- * ```
- *
- * @example Forced Aspect Ratio
- * ```tsx
- * import { ResponsiveItemContainer } from "@react-md/core";
- * import type { ReactElement } from "react";
- *
- * function Example(): ReactElement {
- *   return (
- *     <ResponsiveItemContainer aspectRatio="16-9">
- *       <img alt="" src="/some-image.png" />
- *     </ResponsiveItemContainer>
- *   );
- * }
- * ```
- *
- * @since 6.0.0 Renamed from `MediaContainer` to
- * `ResponsiveItemContainer` and renders a `<span>` instead of a `<div>`.
- */
-export const ResponsiveItemContainer = forwardRef<
-  HTMLSpanElement,
-  ResponsiveItemContainerProps
->(function ResponsiveItemContainer(props, ref) {
-  const {
-    className,
-    fullWidth = false,
-    aspectRatio,
-    responsive = "auto",
-    children,
-    ...remaining
-  } = props;
-
-  return (
-    <span
-      {...remaining}
-      ref={ref}
-      className={responsiveItemContainer({
-        className,
-        fullWidth,
-        aspectRatio,
-        responsive,
-      })}
-    >
-      {children}
-    </span>
-  );
-});

package/src/responsive-item/styles.ts

@@ -1,58 +0,0 @@
-import { cnb } from "cnbuilder";
-import { bem } from "../utils/bem.js";
-
-const styles = bem("rmd-responsive-item");
-
-/** @since 6.0.0 */
-export interface ResponsiveItemClassNameOptions {
-  className?: string;
-
-  /**
-   * Set this to `true` to apply the following styles:
-   * ```scss
-   * max-height: 100%;
-   * max-width: 100%;
-   * object-fit: contain;
-   * ```
-   *
-   * This is useful for displaying images in a full page dialog so that scroll
-   * bars do not appear while maintaining the correct aspect ratio for the item.
-   *
-   * @defaultValue `false`
-   */
-  scaleToContainer?: boolean;
-
-  /**
-   * Set this to `true` to force a specific aspect ratio.
-   *
-   * Note: This will only work if the parent element has applied the correct
-   * {@link ResponsiveItemContainerStyles} as well.
-   *
-   * @defaultValue `false`
-   */
-  forcedAspectRatio?: boolean;
-}
-
-/**
- * Applies the visual media responsive styles manually if you cannot use the
- * `ResponsiveItemContainer` component.
- *
- * @since 6.0.0
- */
-export function responsiveItem(
-  options: ResponsiveItemClassNameOptions = {}
-): string {
-  const {
-    className,
-    scaleToContainer = false,
-    forcedAspectRatio = false,
-  } = options;
-
-  return cnb(
-    styles({
-      scale: scaleToContainer,
-      "aspect-ratio": forcedAspectRatio,
-    }),
-    className
-  );
-}