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

package/dist/responsive-item/responsiveItemStyles.js

@@ -0,0 +1,15 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-responsive-item");
+/** @since 6.0.0 */ export function responsiveItem(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);
+}
+
+//# sourceMappingURL=responsiveItemStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/responsive-item/responsiveItemStyles.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` 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 responsiveItem(\n  options: ResponsiveItemClassNameOptions = {}\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"],"names":["cnb","bem","styles","responsiveItem","options","className","fullWidth","aspectRatio","responsive","auto"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAwDnB,iBAAiB,GACjB,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,cAAc,EAAE,EAChBC,aAAa,MAAM,EACpB,GAAGJ;IAEJ,OAAOJ,IACLE,OAAO;QACLO,MAAMD,eAAe;QACrB,cAAcA,eAAe;QAC7B,gBAAgBD;QAChB,CAACA,YAAY,EAAEA;QACf,cAAcD;IAChB,IACAD;AAEJ"}

package/dist/scroll/useScrollLock.d.ts

@@ -1,3 +1,8 @@
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-scrollbar-size"?: string;
+    }
+}
 export declare const SCROLLBAR_SIZE_VAR = "--rmd-scrollbar-size";
 /**
  *

package/dist/scroll/useScrollLock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/scroll/useScrollLock.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\nimport { getScrollbarWidth } from \"./getScrollbarWidth.js\";\n\nexport const SCROLLBAR_SIZE_VAR = \"--rmd-scrollbar-size\";\n\n// this is really just so that nested dialogs will work correctly. Only the\n// first created dialog should prevent scroll locking on the `document.body`\nlet isLocked = false;\n\n/**\n *\n * @internal\n * @since 6.0.0 No longer support scroll locking elements other than\n * the `document.body` since it's more reliable to scroll lock with an overlay.\n * @since 6.0.0 Now applies `paddingRight` equal to the current OS's\n * scrollbar width if there is a full page scrollbar to prevent layout shifting.\n *\n * @param locked - The `document.body` will not be scrollable when this is\n * `true`.\n */\nexport function useScrollLock(locked: boolean): void {\n  useEffect(() => {\n    if (isLocked || !locked) {\n      return;\n    }\n\n    isLocked = true;\n\n    const size = `${getScrollbarWidth()}px`;\n    const el = document.body;\n    const { paddingRight } = el.style;\n    const isScrollbarVisible = el.scrollHeight > el.offsetHeight;\n\n    el.style.overflow = \"hidden\";\n    if (isScrollbarVisible) {\n      el.style.setProperty(SCROLLBAR_SIZE_VAR, size);\n      el.style.paddingRight = `var(${SCROLLBAR_SIZE_VAR})`;\n    }\n\n    return () => {\n      isLocked = false;\n\n      el.style.removeProperty(SCROLLBAR_SIZE_VAR);\n      el.style.overflow = \"\";\n      if (isScrollbarVisible) {\n        el.style.paddingRight = paddingRight;\n      }\n    };\n  }, [locked]);\n}\n"],"names":["useEffect","getScrollbarWidth","SCROLLBAR_SIZE_VAR","isLocked","useScrollLock","locked","size","el","document","body","paddingRight","style","isScrollbarVisible","scrollHeight","offsetHeight","overflow","setProperty","removeProperty"],"mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,iBAAiB,QAAQ,yBAAyB;AAE3D,OAAO,MAAMC,qBAAqB,uBAAuB;AAEzD,2EAA2E;AAC3E,4EAA4E;AAC5E,IAAIC,WAAW;AAEf;;;;;;;;;;CAUC,GACD,OAAO,SAASC,cAAcC,MAAe;IAC3CL,UAAU;QACR,IAAIG,YAAY,CAACE,QAAQ;YACvB;QACF;QAEAF,WAAW;QAEX,MAAMG,OAAO,CAAC,EAAEL,oBAAoB,EAAE,CAAC;QACvC,MAAMM,KAAKC,SAASC,IAAI;QACxB,MAAM,EAAEC,YAAY,EAAE,GAAGH,GAAGI,KAAK;QACjC,MAAMC,qBAAqBL,GAAGM,YAAY,GAAGN,GAAGO,YAAY;QAE5DP,GAAGI,KAAK,CAACI,QAAQ,GAAG;QACpB,IAAIH,oBAAoB;YACtBL,GAAGI,KAAK,CAACK,WAAW,CAACd,oBAAoBI;YACzCC,GAAGI,KAAK,CAACD,YAAY,GAAG,CAAC,IAAI,EAAER,mBAAmB,CAAC,CAAC;QACtD;QAEA,OAAO;YACLC,WAAW;YAEXI,GAAGI,KAAK,CAACM,cAAc,CAACf;YACxBK,GAAGI,KAAK,CAACI,QAAQ,GAAG;YACpB,IAAIH,oBAAoB;gBACtBL,GAAGI,KAAK,CAACD,YAAY,GAAGA;YAC1B;QACF;IACF,GAAG;QAACL;KAAO;AACb"}
+{"version":3,"sources":["../../src/scroll/useScrollLock.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\nimport { getScrollbarWidth } from \"./getScrollbarWidth.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-scrollbar-size\"?: string;\n  }\n}\n\nexport const SCROLLBAR_SIZE_VAR = \"--rmd-scrollbar-size\";\n\n// this is really just so that nested dialogs will work correctly. Only the\n// first created dialog should prevent scroll locking on the `document.body`\nlet isLocked = false;\n\n/**\n *\n * @internal\n * @since 6.0.0 No longer support scroll locking elements other than\n * the `document.body` since it's more reliable to scroll lock with an overlay.\n * @since 6.0.0 Now applies `paddingRight` equal to the current OS's\n * scrollbar width if there is a full page scrollbar to prevent layout shifting.\n *\n * @param locked - The `document.body` will not be scrollable when this is\n * `true`.\n */\nexport function useScrollLock(locked: boolean): void {\n  useEffect(() => {\n    if (isLocked || !locked) {\n      return;\n    }\n\n    isLocked = true;\n\n    const size = `${getScrollbarWidth()}px`;\n    const el = document.body;\n    const { paddingRight } = el.style;\n    const isScrollbarVisible = el.scrollHeight > el.offsetHeight;\n\n    el.style.overflow = \"hidden\";\n    if (isScrollbarVisible) {\n      el.style.setProperty(SCROLLBAR_SIZE_VAR, size);\n      el.style.paddingRight = `var(${SCROLLBAR_SIZE_VAR})`;\n    }\n\n    return () => {\n      isLocked = false;\n\n      el.style.removeProperty(SCROLLBAR_SIZE_VAR);\n      el.style.overflow = \"\";\n      if (isScrollbarVisible) {\n        el.style.paddingRight = paddingRight;\n      }\n    };\n  }, [locked]);\n}\n"],"names":["useEffect","getScrollbarWidth","SCROLLBAR_SIZE_VAR","isLocked","useScrollLock","locked","size","el","document","body","paddingRight","style","isScrollbarVisible","scrollHeight","offsetHeight","overflow","setProperty","removeProperty"],"mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,iBAAiB,QAAQ,yBAAyB;AAQ3D,OAAO,MAAMC,qBAAqB,uBAAuB;AAEzD,2EAA2E;AAC3E,4EAA4E;AAC5E,IAAIC,WAAW;AAEf;;;;;;;;;;CAUC,GACD,OAAO,SAASC,cAAcC,MAAe;IAC3CL,UAAU;QACR,IAAIG,YAAY,CAACE,QAAQ;YACvB;QACF;QAEAF,WAAW;QAEX,MAAMG,OAAO,GAAGL,oBAAoB,EAAE,CAAC;QACvC,MAAMM,KAAKC,SAASC,IAAI;QACxB,MAAM,EAAEC,YAAY,EAAE,GAAGH,GAAGI,KAAK;QACjC,MAAMC,qBAAqBL,GAAGM,YAAY,GAAGN,GAAGO,YAAY;QAE5DP,GAAGI,KAAK,CAACI,QAAQ,GAAG;QACpB,IAAIH,oBAAoB;YACtBL,GAAGI,KAAK,CAACK,WAAW,CAACd,oBAAoBI;YACzCC,GAAGI,KAAK,CAACD,YAAY,GAAG,CAAC,IAAI,EAAER,mBAAmB,CAAC,CAAC;QACtD;QAEA,OAAO;YACLC,WAAW;YAEXI,GAAGI,KAAK,CAACM,cAAc,CAACf;YACxBK,GAAGI,KAAK,CAACI,QAAQ,GAAG;YACpB,IAAIH,oBAAoB;gBACtBL,GAAGI,KAAK,CAACD,YAAY,GAAGA;YAC1B;QACF;IACF,GAAG;QAACL;KAAO;AACb"}

package/dist/searching/utils.d.ts

@@ -4,14 +4,14 @@ import { type BaseSearchOptions } from "./types.js";
  * @since 6.0.0
  * @internal
  */
-export declare const defaultExtractor: <T>(name: string) => (item: T) => string;
+export declare const defaultExtractor: (name: string) => (item: unknown) => string;
 /**
  * @internal
  * @since 6.0.0
  */
 export interface SearchOptions<T> extends BaseSearchOptions<T> {
     type: "search" | "filter";
-    filter(query: string, value: string): boolean;
+    filter: (query: string, value: string) => boolean;
     extractor: TextExtractor<T>;
 }
 /**

package/dist/searching/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/searching/utils.ts"],"sourcesContent":["import { type TextExtractor } from \"../types.js\";\nimport { toSearchQuery } from \"./toSearchQuery.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const defaultExtractor =\n  <T>(name: string) =>\n  (item: T): string => {\n    if (typeof item === \"string\") {\n      return item;\n    }\n\n    throw new Error(\n      `A \\`TextExtractor\\` must be provided to \\`${name}\\` for lists that do not contain strings`\n    );\n  };\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SearchOptions<T> extends BaseSearchOptions<T> {\n  type: \"search\" | \"filter\";\n  filter(query: string, value: string): boolean;\n  extractor: TextExtractor<T>;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function search<T>(\n  options: SearchOptions<T>\n): readonly T[] | T | undefined {\n  const { list, type, query, filter, extractor, whitespace = \"keep\" } = options;\n  const fallback = type === \"search\" ? undefined : list;\n  if (!list.length) {\n    return fallback;\n  }\n\n  const q = toSearchQuery(query, whitespace);\n  if (!q) {\n    return fallback;\n  }\n\n  const fn = type === \"search\" ? \"find\" : \"filter\";\n  return list[fn]((item) =>\n    filter(q, toSearchQuery(extractor(item), whitespace))\n  );\n}\n"],"names":["toSearchQuery","defaultExtractor","name","item","Error","search","options","list","type","query","filter","extractor","whitespace","fallback","undefined","length","q","fn"],"mappings":"AACA,SAASA,aAAa,QAAQ,qBAAqB;AAGnD;;;CAGC,GACD,OAAO,MAAMC,mBACX,CAAIC,OACJ,CAACC;QACC,IAAI,OAAOA,SAAS,UAAU;YAC5B,OAAOA;QACT;QAEA,MAAM,IAAIC,MACR,CAAC,0CAA0C,EAAEF,KAAK,wCAAwC,CAAC;IAE/F,EAAE;AAYJ;;;CAGC,GACD,OAAO,SAASG,OACdC,OAAyB;IAEzB,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAEC,SAAS,EAAEC,aAAa,MAAM,EAAE,GAAGN;IACtE,MAAMO,WAAWL,SAAS,WAAWM,YAAYP;IACjD,IAAI,CAACA,KAAKQ,MAAM,EAAE;QAChB,OAAOF;IACT;IAEA,MAAMG,IAAIhB,cAAcS,OAAOG;IAC/B,IAAI,CAACI,GAAG;QACN,OAAOH;IACT;IAEA,MAAMI,KAAKT,SAAS,WAAW,SAAS;IACxC,OAAOD,IAAI,CAACU,GAAG,CAAC,CAACd,OACfO,OAAOM,GAAGhB,cAAcW,UAAUR,OAAOS;AAE7C"}
+{"version":3,"sources":["../../src/searching/utils.ts"],"sourcesContent":["import { type TextExtractor } from \"../types.js\";\nimport { toSearchQuery } from \"./toSearchQuery.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const defaultExtractor =\n  (name: string) =>\n  (item: unknown): string => {\n    if (typeof item === \"string\") {\n      return item;\n    }\n\n    throw new Error(\n      `A \\`TextExtractor\\` must be provided to \\`${name}\\` for lists that do not contain strings`\n    );\n  };\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SearchOptions<T> extends BaseSearchOptions<T> {\n  type: \"search\" | \"filter\";\n  filter: (query: string, value: string) => boolean;\n  extractor: TextExtractor<T>;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function search<T>(\n  options: SearchOptions<T>\n): readonly T[] | T | undefined {\n  const { list, type, query, filter, extractor, whitespace = \"keep\" } = options;\n  const fallback = type === \"search\" ? undefined : list;\n  if (!list.length) {\n    return fallback;\n  }\n\n  const q = toSearchQuery(query, whitespace);\n  if (!q) {\n    return fallback;\n  }\n\n  const fn = type === \"search\" ? \"find\" : \"filter\";\n  return list[fn]((item) =>\n    filter(q, toSearchQuery(extractor(item), whitespace))\n  );\n}\n"],"names":["toSearchQuery","defaultExtractor","name","item","Error","search","options","list","type","query","filter","extractor","whitespace","fallback","undefined","length","q","fn"],"mappings":"AACA,SAASA,aAAa,QAAQ,qBAAqB;AAGnD;;;CAGC,GACD,OAAO,MAAMC,mBACX,CAACC,OACD,CAACC;QACC,IAAI,OAAOA,SAAS,UAAU;YAC5B,OAAOA;QACT;QAEA,MAAM,IAAIC,MACR,CAAC,0CAA0C,EAAEF,KAAK,wCAAwC,CAAC;IAE/F,EAAE;AAYJ;;;CAGC,GACD,OAAO,SAASG,OACdC,OAAyB;IAEzB,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAEC,SAAS,EAAEC,aAAa,MAAM,EAAE,GAAGN;IACtE,MAAMO,WAAWL,SAAS,WAAWM,YAAYP;IACjD,IAAI,CAACA,KAAKQ,MAAM,EAAE;QAChB,OAAOF;IACT;IAEA,MAAMG,IAAIhB,cAAcS,OAAOG;IAC/B,IAAI,CAACI,GAAG;QACN,OAAOH;IACT;IAEA,MAAMI,KAAKT,SAAS,WAAW,SAAS;IACxC,OAAOD,IAAI,CAACU,GAAG,CAAC,CAACd,OACfO,OAAOM,GAAGhB,cAAcW,UAAUR,OAAOS;AAE7C"}

package/dist/segmented-button/SegmentedButton.d.ts

@@ -1,8 +1,9 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 /**
  * @since 6.0.0
  */
-export interface SegmentedButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface SegmentedButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ComponentWithRippleProps {
     /**
      * Set this to `true` to apply selected styles and an optional
      * {@link selectedIcon}

package/dist/segmented-button/SegmentedButton.js

@@ -48,7 +48,7 @@ import { segmentedButton } from "./segmentedButtonStyles.js";
  *
  * @since 6.0.0
  */ export const SegmentedButton = /*#__PURE__*/ forwardRef(function SegmentedButton(props, ref) {
-    const { className, type = "button", leftAddon, rightAddon, children: propChildren, selected, selectedIcon: propSelectedIcon, selectedClassName, disableSelectedIcon, disableSelectedTransition, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, disabled, ...remaining } = props;
+    const { className, type = "button", leftAddon, rightAddon, children: propChildren, selected, selectedIcon: propSelectedIcon, selectedClassName, disableSelectedIcon, disableSelectedTransition, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, disabled, disableRipple, ...remaining } = props;
     const children = useHigherContrastChildren(propChildren);
     const selectedIconNode = getIcon("selected", propSelectedIcon);
     const selectedIcon = useMaxWidthTransition({
@@ -58,6 +58,7 @@ import { segmentedButton } from "./segmentedButtonStyles.js";
         disableTransition: disableSelectedTransition
     });
     const { pressedClassName, handlers, ripples } = useElementInteraction({
+        mode: disableRipple ? "none" : undefined,
         onBlur,
         onClick,
         onKeyDown,

package/dist/segmented-button/SegmentedButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/segmented-button/SegmentedButton.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { useMaxWidthTransition } from \"../transition/useMaxWidthTransition.js\";\nimport { segmentedButton } from \"./segmentedButtonStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SegmentedButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Set this to `true` to apply selected styles and an optional\n   * {@link selectedIcon}\n   *\n   * @defaultValue `false`\n   */\n  selected?: boolean;\n\n  /** @defaultValue `getIcon(\"selected\")` */\n  selectedIcon?: ReactNode;\n\n  /**\n   * An optional className to apply when {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /**\n   * Set this to `true` to not render the {@link selectedIcon} when\n   * {@link selected} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * Set this to `true` to disable the {@link selectedIcon} enter/exit\n   * transition and instead just use `display: none`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedTransition?: boolean;\n\n  /**\n   * An optional addon to render before the {@link children} and after the\n   * {@link selectedIcon}. This is only useful when rendering text children so\n   * it can appear above the interaction states.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the {@link children}. This is only useful\n   * when rendering text children so it can appear above the interaction states.\n   */\n  rightAddon?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import {\n *   SegmentedButton,\n *   SegmentedButtonContainer,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"a\");\n *   return (\n *     <SegmentedButtonContainer>\n *       <SegmentedButton\n *         onClick={() => setValue(\"a\")}\n *         selected={value === \"a\"}\n *       >\n *         First\n *       </SegmentedButton>\n *       <SegmentedButton\n *         onClick={() => setValue(\"b\")}\n *         selected={value === \"b\"}\n *       >\n *         Second\n *       </SegmentedButton>\n *       <SegmentedButton\n *         onClick={() => setValue(\"c\")}\n *         selected={value === \"c\"}\n *         disableSelectedIcon\n *       >\n *         Third\n *       </SegmentedButton>\n *     </SegmentedButtonContainer>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const SegmentedButton = forwardRef<\n  HTMLButtonElement,\n  SegmentedButtonProps\n>(function SegmentedButton(props, ref) {\n  const {\n    className,\n    type = \"button\",\n    leftAddon,\n    rightAddon,\n    children: propChildren,\n    selected,\n    selectedIcon: propSelectedIcon,\n    selectedClassName,\n    disableSelectedIcon,\n    disableSelectedTransition,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n    ...remaining\n  } = props;\n\n  const children = useHigherContrastChildren(propChildren);\n  const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n  const selectedIcon = useMaxWidthTransition({\n    element: selectedIconNode,\n    transitionIn: !!selected,\n    disabled: disableSelectedIcon,\n    disableTransition: disableSelectedTransition,\n  });\n  const { pressedClassName, handlers, ripples } = useElementInteraction({\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n  });\n\n  return (\n    <button\n      {...remaining}\n      {...handlers}\n      aria-pressed={selected}\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={segmentedButton({\n        className,\n        selected,\n        selectedClassName,\n        pressedClassName,\n      })}\n    >\n      {!disableSelectedIcon && selectedIcon}\n      {leftAddon}\n      {children}\n      {rightAddon}\n      {ripples}\n    </button>\n  );\n});\n"],"names":["forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","segmentedButton","SegmentedButton","props","ref","className","type","leftAddon","rightAddon","children","propChildren","selected","selectedIcon","propSelectedIcon","selectedClassName","disableSelectedIcon","disableSelectedTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disabled","remaining","selectedIconNode","element","transitionIn","disableTransition","pressedClassName","handlers","ripples","button","aria-pressed"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAmD,QAAQ;AAC9E,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,qBAAqB,QAAQ,yCAAyC;AAC/E,SAASC,eAAe,QAAQ,6BAA6B;AAqD7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMC,gCAAkBN,WAG7B,SAASM,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,SAAS,EACTC,OAAO,QAAQ,EACfC,SAAS,EACTC,UAAU,EACVC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,iBAAiB,EACjBC,mBAAmB,EACnBC,yBAAyB,EACzBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACR,GAAGC,WACJ,GAAG1B;IAEJ,MAAMM,WAAWV,0BAA0BW;IAC3C,MAAMoB,mBAAmBjC,QAAQ,YAAYgB;IAC7C,MAAMD,eAAeZ,sBAAsB;QACzC+B,SAASD;QACTE,cAAc,CAAC,CAACrB;QAChBiB,UAAUb;QACVkB,mBAAmBjB;IACrB;IACA,MAAM,EAAEkB,gBAAgB,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGtC,sBAAsB;QACpEmB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,MAACS;QACE,GAAGR,SAAS;QACZ,GAAGM,QAAQ;QACZG,gBAAc3B;QACdP,KAAKA;QACLE,MAAMA;QACNsB,UAAUA;QACVvB,WAAWJ,gBAAgB;YACzBI;YACAM;YACAG;YACAoB;QACF;;YAEC,CAACnB,uBAAuBH;YACxBL;YACAE;YACAD;YACA4B;;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/segmented-button/SegmentedButton.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { useMaxWidthTransition } from \"../transition/useMaxWidthTransition.js\";\nimport { segmentedButton } from \"./segmentedButtonStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SegmentedButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ComponentWithRippleProps {\n  /**\n   * Set this to `true` to apply selected styles and an optional\n   * {@link selectedIcon}\n   *\n   * @defaultValue `false`\n   */\n  selected?: boolean;\n\n  /** @defaultValue `getIcon(\"selected\")` */\n  selectedIcon?: ReactNode;\n\n  /**\n   * An optional className to apply when {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /**\n   * Set this to `true` to not render the {@link selectedIcon} when\n   * {@link selected} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * Set this to `true` to disable the {@link selectedIcon} enter/exit\n   * transition and instead just use `display: none`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedTransition?: boolean;\n\n  /**\n   * An optional addon to render before the {@link children} and after the\n   * {@link selectedIcon}. This is only useful when rendering text children so\n   * it can appear above the interaction states.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the {@link children}. This is only useful\n   * when rendering text children so it can appear above the interaction states.\n   */\n  rightAddon?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import {\n *   SegmentedButton,\n *   SegmentedButtonContainer,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"a\");\n *   return (\n *     <SegmentedButtonContainer>\n *       <SegmentedButton\n *         onClick={() => setValue(\"a\")}\n *         selected={value === \"a\"}\n *       >\n *         First\n *       </SegmentedButton>\n *       <SegmentedButton\n *         onClick={() => setValue(\"b\")}\n *         selected={value === \"b\"}\n *       >\n *         Second\n *       </SegmentedButton>\n *       <SegmentedButton\n *         onClick={() => setValue(\"c\")}\n *         selected={value === \"c\"}\n *         disableSelectedIcon\n *       >\n *         Third\n *       </SegmentedButton>\n *     </SegmentedButtonContainer>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const SegmentedButton = forwardRef<\n  HTMLButtonElement,\n  SegmentedButtonProps\n>(function SegmentedButton(props, ref) {\n  const {\n    className,\n    type = \"button\",\n    leftAddon,\n    rightAddon,\n    children: propChildren,\n    selected,\n    selectedIcon: propSelectedIcon,\n    selectedClassName,\n    disableSelectedIcon,\n    disableSelectedTransition,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n    disableRipple,\n    ...remaining\n  } = props;\n\n  const children = useHigherContrastChildren(propChildren);\n  const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n  const selectedIcon = useMaxWidthTransition({\n    element: selectedIconNode,\n    transitionIn: !!selected,\n    disabled: disableSelectedIcon,\n    disableTransition: disableSelectedTransition,\n  });\n  const { pressedClassName, handlers, ripples } = useElementInteraction({\n    mode: disableRipple ? \"none\" : undefined,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n  });\n\n  return (\n    <button\n      {...remaining}\n      {...handlers}\n      aria-pressed={selected}\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={segmentedButton({\n        className,\n        selected,\n        selectedClassName,\n        pressedClassName,\n      })}\n    >\n      {!disableSelectedIcon && selectedIcon}\n      {leftAddon}\n      {children}\n      {rightAddon}\n      {ripples}\n    </button>\n  );\n});\n"],"names":["forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","segmentedButton","SegmentedButton","props","ref","className","type","leftAddon","rightAddon","children","propChildren","selected","selectedIcon","propSelectedIcon","selectedClassName","disableSelectedIcon","disableSelectedTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disabled","disableRipple","remaining","selectedIconNode","element","transitionIn","disableTransition","pressedClassName","handlers","ripples","mode","undefined","button","aria-pressed"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAmD,QAAQ;AAC9E,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,qBAAqB,QAAQ,yCAAyC;AAC/E,SAASC,eAAe,QAAQ,6BAA6B;AAsD7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMC,gCAAkBN,WAG7B,SAASM,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,SAAS,EACTC,OAAO,QAAQ,EACfC,SAAS,EACTC,UAAU,EACVC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,iBAAiB,EACjBC,mBAAmB,EACnBC,yBAAyB,EACzBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACRC,aAAa,EACb,GAAGC,WACJ,GAAG3B;IAEJ,MAAMM,WAAWV,0BAA0BW;IAC3C,MAAMqB,mBAAmBlC,QAAQ,YAAYgB;IAC7C,MAAMD,eAAeZ,sBAAsB;QACzCgC,SAASD;QACTE,cAAc,CAAC,CAACtB;QAChBiB,UAAUb;QACVmB,mBAAmBlB;IACrB;IACA,MAAM,EAAEmB,gBAAgB,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGvC,sBAAsB;QACpEwC,MAAMT,gBAAgB,SAASU;QAC/BtB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,MAACY;QACE,GAAGV,SAAS;QACZ,GAAGM,QAAQ;QACZK,gBAAc9B;QACdP,KAAKA;QACLE,MAAMA;QACNsB,UAAUA;QACVvB,WAAWJ,gBAAgB;YACzBI;YACAM;YACAG;YACAqB;QACF;;YAEC,CAACpB,uBAAuBH;YACxBL;YACAE;YACAD;YACA6B;;;AAGP,GAAG"}

package/dist/segmented-button/SegmentedButtonContainer.d.ts

@@ -7,8 +7,6 @@ export interface SegmentedButtonContainerProps extends HTMLAttributes<HTMLDivEle
     children: ReactNode;
 }
 /**
- * **Server Component**
- *
  * Simple wrapper `div` to apply the segmented button container styles. You can
  * just use the {@link segmentedButtonContainerStyles} util function instead.
  *

package/dist/segmented-button/SegmentedButtonContainer.js

@@ -2,8 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { segmentedButtonContainerStyles } from "./segmentedButtonContainerStyles.js";
 /**
- * **Server Component**
- *
  * Simple wrapper `div` to apply the segmented button container styles. You can
  * just use the {@link segmentedButtonContainerStyles} util function instead.
  *

package/dist/segmented-button/SegmentedButtonContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/segmented-button/SegmentedButtonContainer.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport {\n  segmentedButtonContainerStyles,\n  type SegmentedButtonContainerClassNameOptions,\n} from \"./segmentedButtonContainerStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SegmentedButtonContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SegmentedButtonContainerClassNameOptions {\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * Simple wrapper `div` to apply the segmented button container styles. You can\n * just use the {@link segmentedButtonContainerStyles} util function instead.\n *\n * @example Without This Component\n * ```tsx\n * import {\n *   SegmentedButton,\n *   segmentedButtonContainerStyles,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * import { CustomWrapperComponent } from \"./CustomWrapperComponent.jsx\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <CustomWrapperComponent className={segmentedButtonContainerStyles()}>\n *       <SegmentedButton>One</SegmentedButton>\n *       <SegmentedButton>Two</SegmentedButton>\n *       <SegmentedButton>Three</SegmentedButton>\n *     </CustomWrapperComponent>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const SegmentedButtonContainer = forwardRef<\n  HTMLDivElement,\n  SegmentedButtonContainerProps\n>(function SegmentedButtonContainer(props, ref) {\n  const { className, disableFullWidth, children, ...remaining } = props;\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={segmentedButtonContainerStyles({\n        className,\n        disableFullWidth,\n      })}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","segmentedButtonContainerStyles","SegmentedButtonContainer","props","ref","className","disableFullWidth","children","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SACEC,8BAA8B,QAEzB,sCAAsC;AAW7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,MAAMC,yCAA2BF,WAGtC,SAASE,yBAAyBC,KAAK,EAAEC,GAAG;IAC5C,MAAM,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEhE,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,+BAA+B;YACxCI;YACAC;QACF;kBAECC;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/segmented-button/SegmentedButtonContainer.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport {\n  segmentedButtonContainerStyles,\n  type SegmentedButtonContainerClassNameOptions,\n} from \"./segmentedButtonContainerStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SegmentedButtonContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SegmentedButtonContainerClassNameOptions {\n  children: ReactNode;\n}\n\n/**\n * Simple wrapper `div` to apply the segmented button container styles. You can\n * just use the {@link segmentedButtonContainerStyles} util function instead.\n *\n * @example Without This Component\n * ```tsx\n * import {\n *   SegmentedButton,\n *   segmentedButtonContainerStyles,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * import { CustomWrapperComponent } from \"./CustomWrapperComponent.jsx\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <CustomWrapperComponent className={segmentedButtonContainerStyles()}>\n *       <SegmentedButton>One</SegmentedButton>\n *       <SegmentedButton>Two</SegmentedButton>\n *       <SegmentedButton>Three</SegmentedButton>\n *     </CustomWrapperComponent>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const SegmentedButtonContainer = forwardRef<\n  HTMLDivElement,\n  SegmentedButtonContainerProps\n>(function SegmentedButtonContainer(props, ref) {\n  const { className, disableFullWidth, children, ...remaining } = props;\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={segmentedButtonContainerStyles({\n        className,\n        disableFullWidth,\n      })}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","segmentedButtonContainerStyles","SegmentedButtonContainer","props","ref","className","disableFullWidth","children","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SACEC,8BAA8B,QAEzB,sCAAsC;AAW7C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,MAAMC,yCAA2BF,WAGtC,SAASE,yBAAyBC,KAAK,EAAEC,GAAG;IAC5C,MAAM,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEhE,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,+BAA+B;YACxCI;YACAC;QACF;kBAECC;;AAGP,GAAG"}

package/dist/segmented-button/_segmented-button.scss

@@ -169,27 +169,27 @@ $variables: (
         padding: $vertical-padding $horizontal-padding;
 
         &:first-child {
+          border-bottom-left-radius: $border-radius;
+          border-top-left-radius: $border-radius;
+
           @include utils.rtl {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: $border-radius;
             border-top-left-radius: 0;
             border-top-right-radius: $border-radius;
           }
-
-          border-bottom-left-radius: $border-radius;
-          border-top-left-radius: $border-radius;
         }
 
         &:last-child {
+          border-bottom-right-radius: $border-radius;
+          border-top-right-radius: $border-radius;
+
           @include utils.rtl {
             border-bottom-left-radius: $border-radius;
             border-bottom-right-radius: 0;
             border-top-left-radius: $border-radius;
             border-top-right-radius: 0;
           }
-
-          border-bottom-right-radius: $border-radius;
-          border-top-right-radius: $border-radius;
         }
 
         &--selected {

package/dist/sheet/Sheet.d.ts

@@ -1,23 +1,14 @@
-/// <reference types="react" />
 import { type BaseDialogProps } from "../dialog/Dialog.js";
-import { type CSSTransitionClassNames, type TransitionTimeout } from "../transition/types.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { type BaseSheetClassNameOptions } 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;
-    }
-}
-export declare const DEFAULT_SHEET_TIMEOUT: Readonly<TransitionTimeout>;
-export declare const DEFAULT_SHEET_CLASSNAMES: Readonly<CSSTransitionClassNames>;
+/**
+ * @since 6.0.0
+ */
 export type SheetDialogProps = Omit<BaseDialogProps, "role" | "type" | "modal">;
+/**
+ * @since 6.0.0 extends the `SheetDialogProps` instead of `AllowedDialogProps`
+ * and exports the `SheetDialogProps`.
+ */
 export interface BaseSheetProps extends SheetDialogProps, BaseSheetClassNameOptions {
     /**
      * @defaultValue `"dialog"`
@@ -34,5 +25,28 @@ export type SheetProps = LabelRequiredForA11y<BaseSheetProps>;
 /**
  * **Client Component**
  *
+ * The `Sheet` component is a {@link Dialog} that is fixed to the top, right,
+ * bottom, or left of the viewport.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Sheet } from "@react-md/core/sheet/Sheet";
+ * import { useToggle } from "@react-md/core/useToggle";
+ * import { type ReactElement } from "react";
+ *
+ * export function Example(): ReactElement {
+ *   const { toggled, disable, enable } = useToggle();
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={enable}>Show</Button>
+ *       <Sheet aria-label="Customization" visible={toggled} onRequestClose={disable}>
+ *         Whatever Content
+ *       </Sheet>
+ *     </>
+ *   );
+ * }
+ * ```
  */
 export declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/sheet/Sheet.js

@@ -2,23 +2,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Dialog } from "../dialog/Dialog.js";
-import { sheet } from "./styles.js";
-export const DEFAULT_SHEET_TIMEOUT = {
-    enter: 200,
-    exit: 150
-};
-export const DEFAULT_SHEET_CLASSNAMES = {
-    appear: "rmd-sheet--offscreen",
-    appearActive: "rmd-sheet--enter rmd-sheet--visible",
-    enter: "rmd-sheet--offscreen",
-    enterActive: "rmd-sheet--enter rmd-sheet--visible",
-    exit: "rmd-sheet--exit",
-    exitActive: "rmd-sheet--offscreen",
-    exitDone: "rmd-sheet--offscreen rmd-sheet--hidden"
-};
+import { DEFAULT_SHEET_CLASSNAMES, DEFAULT_SHEET_TIMEOUT, sheet } from "./styles.js";
 /**
  * **Client Component**
  *
+ * The `Sheet` component is a {@link Dialog} that is fixed to the top, right,
+ * bottom, or left of the viewport.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Sheet } from "@react-md/core/sheet/Sheet";
+ * import { useToggle } from "@react-md/core/useToggle";
+ * import { type ReactElement } from "react";
+ *
+ * export function Example(): ReactElement {
+ *   const { toggled, disable, enable } = useToggle();
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={enable}>Show</Button>
+ *       <Sheet aria-label="Customization" visible={toggled} onRequestClose={disable}>
+ *         Whatever Content
+ *       </Sheet>
+ *     </>
+ *   );
+ * }
+ * ```
  */ export const Sheet = /*#__PURE__*/ forwardRef(function Sheet(props, ref) {
     const { role = "dialog", className, position = "left", horizontalSize = "media", verticalSize = "recommended", timeout = DEFAULT_SHEET_TIMEOUT, classNames = DEFAULT_SHEET_CLASSNAMES, visible, temporary = true, exitedHidden = true, children, ...remaining } = props;
     const { disableOverlay } = props;

package/dist/sheet/Sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/sheet/Sheet.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport { Dialog, type BaseDialogProps } from \"../dialog/Dialog.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { sheet, type BaseSheetClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-sheet-height\"?: string | number;\n    \"--rmd-sheet-width\"?: string | number;\n    \"--rmd-sheet-max-height\"?: string | number;\n    \"--rmd-sheet-touch-width\"?: string | number;\n    \"--rmd-sheet-touch-max-height\"?: string | number;\n    \"--rmd-sheet-static-width\"?: string | number;\n    \"--rmd-sheet-transform-offscreen\"?: string | number;\n    \"--rmd-sheet-z-index\"?: number;\n  }\n}\n\nexport const DEFAULT_SHEET_TIMEOUT: Readonly<TransitionTimeout> = {\n  enter: 200,\n  exit: 150,\n};\n\nexport const DEFAULT_SHEET_CLASSNAMES: Readonly<CSSTransitionClassNames> = {\n  appear: \"rmd-sheet--offscreen\",\n  appearActive: \"rmd-sheet--enter rmd-sheet--visible\",\n  enter: \"rmd-sheet--offscreen\",\n  enterActive: \"rmd-sheet--enter rmd-sheet--visible\",\n  exit: \"rmd-sheet--exit\",\n  exitActive: \"rmd-sheet--offscreen\",\n  exitDone: \"rmd-sheet--offscreen rmd-sheet--hidden\",\n};\n\nexport type SheetDialogProps = Omit<BaseDialogProps, \"role\" | \"type\" | \"modal\">;\n\nexport interface BaseSheetProps\n  extends SheetDialogProps,\n    BaseSheetClassNameOptions {\n  /**\n   * @defaultValue `\"dialog\"`\n   */\n  role?: \"dialog\" | \"menu\" | \"none\";\n\n  /**\n   * @defaultValue `true`\n   * @see {@link SheetDialogProps.exitedHidden}\n   * @since 6.0.0\n   */\n  exitedHidden?: boolean;\n}\n\nexport type SheetProps = LabelRequiredForA11y<BaseSheetProps>;\n\n/**\n * **Client Component**\n *\n */\nexport const Sheet = forwardRef<HTMLDivElement, SheetProps>(\n  function Sheet(props, ref) {\n    const {\n      role = \"dialog\",\n      className,\n      position = \"left\",\n      horizontalSize = \"media\",\n      verticalSize = \"recommended\",\n      timeout = DEFAULT_SHEET_TIMEOUT,\n      classNames = DEFAULT_SHEET_CLASSNAMES,\n      visible,\n      temporary = true,\n      exitedHidden = true,\n      children,\n      ...remaining\n    } = props;\n    const { disableOverlay } = props;\n\n    return (\n      <Dialog\n        {...remaining}\n        ref={ref}\n        role={role}\n        type=\"custom\"\n        timeout={timeout}\n        classNames={classNames}\n        visible={visible}\n        temporary={temporary}\n        exitedHidden={exitedHidden}\n        className={sheet({\n          position,\n          horizontalSize,\n          verticalSize,\n          disableOverlay,\n          className,\n        })}\n      >\n        {children}\n      </Dialog>\n    );\n  }\n);\n"],"names":["forwardRef","Dialog","sheet","DEFAULT_SHEET_TIMEOUT","enter","exit","DEFAULT_SHEET_CLASSNAMES","appear","appearActive","enterActive","exitActive","exitDone","Sheet","props","ref","role","className","position","horizontalSize","verticalSize","timeout","classNames","visible","temporary","exitedHidden","children","remaining","disableOverlay","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,MAAM,QAA8B,sBAAsB;AAMnE,SAASC,KAAK,QAAwC,cAAc;AAepE,OAAO,MAAMC,wBAAqD;IAChEC,OAAO;IACPC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,2BAA8D;IACzEC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbJ,MAAM;IACNK,YAAY;IACZC,UAAU;AACZ,EAAE;AAsBF;;;CAGC,GACD,OAAO,MAAMC,sBAAQZ,WACnB,SAASY,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,OAAO,QAAQ,EACfC,SAAS,EACTC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,UAAUjB,qBAAqB,EAC/BkB,aAAaf,wBAAwB,EACrCgB,OAAO,EACPC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,QAAQ,EACR,GAAGC,WACJ,GAAGb;IACJ,MAAM,EAAEc,cAAc,EAAE,GAAGd;IAE3B,qBACE,KAACZ;QACE,GAAGyB,SAAS;QACbZ,KAAKA;QACLC,MAAMA;QACNa,MAAK;QACLR,SAASA;QACTC,YAAYA;QACZC,SAASA;QACTC,WAAWA;QACXC,cAAcA;QACdR,WAAWd,MAAM;YACfe;YACAC;YACAC;YACAQ;YACAX;QACF;kBAECS;;AAGP,GACA"}
+{"version":3,"sources":["../../src/sheet/Sheet.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport { Dialog, type BaseDialogProps } from \"../dialog/Dialog.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport {\n  DEFAULT_SHEET_CLASSNAMES,\n  DEFAULT_SHEET_TIMEOUT,\n  sheet,\n  type BaseSheetClassNameOptions,\n} from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type SheetDialogProps = Omit<BaseDialogProps, \"role\" | \"type\" | \"modal\">;\n\n/**\n * @since 6.0.0 extends the `SheetDialogProps` instead of `AllowedDialogProps`\n * and exports the `SheetDialogProps`.\n */\nexport interface BaseSheetProps\n  extends SheetDialogProps,\n    BaseSheetClassNameOptions {\n  /**\n   * @defaultValue `\"dialog\"`\n   */\n  role?: \"dialog\" | \"menu\" | \"none\";\n\n  /**\n   * @defaultValue `true`\n   * @see {@link SheetDialogProps.exitedHidden}\n   * @since 6.0.0\n   */\n  exitedHidden?: boolean;\n}\n\nexport type SheetProps = LabelRequiredForA11y<BaseSheetProps>;\n\n/**\n * **Client Component**\n *\n * The `Sheet` component is a {@link Dialog} that is fixed to the top, right,\n * bottom, or left of the viewport.\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   const { toggled, disable, enable } = useToggle();\n *\n *   return (\n *     <>\n *       <Button onClick={enable}>Show</Button>\n *       <Sheet aria-label=\"Customization\" visible={toggled} onRequestClose={disable}>\n *         Whatever Content\n *       </Sheet>\n *     </>\n *   );\n * }\n * ```\n */\nexport const Sheet = forwardRef<HTMLDivElement, SheetProps>(\n  function Sheet(props, ref) {\n    const {\n      role = \"dialog\",\n      className,\n      position = \"left\",\n      horizontalSize = \"media\",\n      verticalSize = \"recommended\",\n      timeout = DEFAULT_SHEET_TIMEOUT,\n      classNames = DEFAULT_SHEET_CLASSNAMES,\n      visible,\n      temporary = true,\n      exitedHidden = true,\n      children,\n      ...remaining\n    } = props;\n    const { disableOverlay } = props;\n\n    return (\n      <Dialog\n        {...remaining}\n        ref={ref}\n        role={role}\n        type=\"custom\"\n        timeout={timeout}\n        classNames={classNames}\n        visible={visible}\n        temporary={temporary}\n        exitedHidden={exitedHidden}\n        className={sheet({\n          position,\n          horizontalSize,\n          verticalSize,\n          disableOverlay,\n          className,\n        })}\n      >\n        {children}\n      </Dialog>\n    );\n  }\n);\n"],"names":["forwardRef","Dialog","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","Sheet","props","ref","role","className","position","horizontalSize","verticalSize","timeout","classNames","visible","temporary","exitedHidden","children","remaining","disableOverlay","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,MAAM,QAA8B,sBAAsB;AAEnE,SACEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QAEA,cAAc;AA6BrB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,MAAMC,sBAAQL,WACnB,SAASK,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,OAAO,QAAQ,EACfC,SAAS,EACTC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,UAAUV,qBAAqB,EAC/BW,aAAaZ,wBAAwB,EACrCa,OAAO,EACPC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,QAAQ,EACR,GAAGC,WACJ,GAAGb;IACJ,MAAM,EAAEc,cAAc,EAAE,GAAGd;IAE3B,qBACE,KAACL;QACE,GAAGkB,SAAS;QACbZ,KAAKA;QACLC,MAAMA;QACNa,MAAK;QACLR,SAASA;QACTC,YAAYA;QACZC,SAASA;QACTC,WAAWA;QACXC,cAAcA;QACdR,WAAWL,MAAM;YACfM;YACAC;YACAC;YACAQ;YACAX;QACF;kBAECS;;AAGP,GACA"}

package/dist/sheet/_sheet.scss

@@ -103,19 +103,31 @@ $variables: (
 
         @if not $disable-position-left {
           &--left {
-            @include utils.auto-rtl(left, 0) {
+            @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
+
+            left: 0;
+
+            @include utils.rtl {
               @include set-var(transform-offscreen, translate3d(100%, 0, 0));
+
+              left: auto;
+              right: 0;
             }
-            @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
           }
         }
 
         @if not $disable-position-right {
           &--right {
-            @include utils.auto-rtl(right, 0) {
+            @include set-var(transform-offscreen, translate3d(100%, 0, 0));
+
+            right: 0;
+
+            @include utils.rtl {
               @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
+
+              left: 0;
+              right: auto;
             }
-            @include set-var(transform-offscreen, translate3d(100%, 0, 0));
           }
         }
 
@@ -144,11 +156,11 @@ $variables: (
         }
 
         &--media-width {
+          @include set-var(width, get-var(touch-width));
+
           @include media-queries.tablet-media {
             @include set-var(width, get-var(static-width));
           }
-
-          @include set-var(width, get-var(touch-width));
         }
 
         &--viewport-height {

package/dist/sheet/styles.d.ts

@@ -1,3 +1,18 @@
+import { type CSSTransitionClassNames, type TransitionTimeout } from "../transition/types.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 declare const DEFAULT_SHEET_TIMEOUT: Readonly<TransitionTimeout>;
+export declare const DEFAULT_SHEET_CLASSNAMES: Readonly<CSSTransitionClassNames>;
 /**
  * The location that the sheet should be located within the viewport.
  */
@@ -50,7 +65,21 @@ export interface BaseSheetClassNameOptions {
  * @internal
  */
 export interface SheetClassNameOptions extends BaseSheetClassNameOptions {
+    /**
+     * Set this to `true` if the sheet is rendered, but not visible.
+     *
+     * This isn't actually used since it is hard coded in {@link DEFAULT_SHEET_CLASSNAMES}.
+     *
+     * @defaultValue `false`
+     */
     offscreen?: boolean;
+    /**
+     * Set this to `true` to disable the overlay behind the sheet and any
+     * additional box-shadow that would be applied to the sheet.
+     *
+     * @see {@link BaseDialogProps.disableOverlay}
+     * @defaultValue `false`
+     */
     disableOverlay?: boolean;
 }
 /** @since 6.0.0 */

package/dist/sheet/styles.js

@@ -1,5 +1,18 @@
 import { cnb } from "cnbuilder";
 import { bem } from "../utils/bem.js";
+export const DEFAULT_SHEET_TIMEOUT = {
+    enter: 200,
+    exit: 150
+};
+export const DEFAULT_SHEET_CLASSNAMES = {
+    appear: "rmd-sheet--offscreen",
+    appearActive: "rmd-sheet--enter rmd-sheet--visible",
+    enter: "rmd-sheet--offscreen",
+    enterActive: "rmd-sheet--enter rmd-sheet--visible",
+    exit: "rmd-sheet--exit",
+    exitActive: "rmd-sheet--offscreen",
+    exitDone: "rmd-sheet--offscreen rmd-sheet--hidden"
+};
 const styles = bem("rmd-sheet");
 /** @since 6.0.0 */ export function sheet(options) {
     const { position = "left", horizontalSize = "media", verticalSize = "recommended", offscreen = false, disableOverlay, className } = options;

package/dist/sheet/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/sheet/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-sheet\");\n\n/**\n * The location that the sheet should be located within the viewport.\n */\nexport type SheetPosition = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/**\n * The size to use for sheets that have been positioned left or right. The\n * default supported values are:\n *\n * - `\"none\"` - the size is based on content, but is still limited to the\n *   viewport width so that the horizontal scrolling will not occur within the\n *   page. No limits added to sizing.\n * - `\"touch\"` - the `width` is set to be the entire viewport width minus a\n *   touchable area and is normally recommended for mobile devices.\n * - `\"static\"` - the `width` is set to a static `16rem` and generally used for\n *   landscape tablets and desktops.\n * - `\"media\"` - automatically switches between \"touch\" and \"static\" based on\n *   css media queries. (this is the default)\n */\nexport type SheetHorizontalSize = \"none\" | \"media\" | \"touch\" | \"static\";\n\n/**\n * The size to use for sheets that have been positioned top or bottom. The\n * supported sizes are:\n *\n * - `\"none\"` - the size is based on content and is limited to the viewport\n *   height\n * - `\"touch\"` - the size is based on content and is limited to the viewport\n *   height minus a small touchable area\n * - `\"recommended\"` - the material design recommended sizing that forces a\n *   `max-height` of 50vh and `min-height` of 3.5rem\n */\nexport type SheetVerticalSize = \"none\" | \"touch\" | \"recommended\";\n\n/** @since 6.0.0 */\nexport interface BaseSheetClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"left\"`\n   */\n  position?: SheetPosition;\n\n  /**\n   * @defaultValue `\"media\"`\n   */\n  horizontalSize?: SheetHorizontalSize;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  verticalSize?: SheetVerticalSize;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface SheetClassNameOptions extends BaseSheetClassNameOptions {\n  offscreen?: boolean;\n  disableOverlay?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function sheet(options: SheetClassNameOptions): string {\n  const {\n    position = \"left\",\n    horizontalSize = \"media\",\n    verticalSize = \"recommended\",\n    offscreen = false,\n    disableOverlay,\n    className,\n  } = options;\n  const horizontal = position === \"left\" || position === \"right\";\n\n  return cnb(\n    styles({\n      horizontal,\n      vertical: !horizontal,\n      raised: !disableOverlay,\n      offscreen,\n      [position]: true,\n      \"media-width\": horizontal && horizontalSize === \"media\",\n      \"touch-width\": horizontal && horizontalSize === \"touch\",\n      \"static-width\": horizontal && horizontalSize === \"static\",\n      \"viewport-height\": !horizontal && verticalSize === \"none\",\n      \"touchable-height\": !horizontal && verticalSize === \"touch\",\n      \"recommended-height\": !horizontal && verticalSize === \"recommended\",\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","sheet","options","position","horizontalSize","verticalSize","offscreen","disableOverlay","className","horizontal","vertical","raised"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAiEnB,iBAAiB,GACjB,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,YAAY,KAAK,EACjBC,cAAc,EACdC,SAAS,EACV,GAAGN;IACJ,MAAMO,aAAaN,aAAa,UAAUA,aAAa;IAEvD,OAAOL,IACLE,OAAO;QACLS;QACAC,UAAU,CAACD;QACXE,QAAQ,CAACJ;QACTD;QACA,CAACH,SAAS,EAAE;QACZ,eAAeM,cAAcL,mBAAmB;QAChD,eAAeK,cAAcL,mBAAmB;QAChD,gBAAgBK,cAAcL,mBAAmB;QACjD,mBAAmB,CAACK,cAAcJ,iBAAiB;QACnD,oBAAoB,CAACI,cAAcJ,iBAAiB;QACpD,sBAAsB,CAACI,cAAcJ,iBAAiB;IACxD,IACAG;AAEJ"}
+{"version":3,"sources":["../../src/sheet/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type BaseDialogProps } from \"../dialog/Dialog.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-sheet-height\"?: string | number;\n    \"--rmd-sheet-width\"?: string | number;\n    \"--rmd-sheet-max-height\"?: string | number;\n    \"--rmd-sheet-touch-width\"?: string | number;\n    \"--rmd-sheet-touch-max-height\"?: string | number;\n    \"--rmd-sheet-static-width\"?: string | number;\n    \"--rmd-sheet-transform-offscreen\"?: string | number;\n    \"--rmd-sheet-z-index\"?: number;\n  }\n}\n\nexport const DEFAULT_SHEET_TIMEOUT: Readonly<TransitionTimeout> = {\n  enter: 200,\n  exit: 150,\n};\n\nexport const DEFAULT_SHEET_CLASSNAMES: Readonly<CSSTransitionClassNames> = {\n  appear: \"rmd-sheet--offscreen\",\n  appearActive: \"rmd-sheet--enter rmd-sheet--visible\",\n  enter: \"rmd-sheet--offscreen\",\n  enterActive: \"rmd-sheet--enter rmd-sheet--visible\",\n  exit: \"rmd-sheet--exit\",\n  exitActive: \"rmd-sheet--offscreen\",\n  exitDone: \"rmd-sheet--offscreen rmd-sheet--hidden\",\n};\n\nconst styles = bem(\"rmd-sheet\");\n\n/**\n * The location that the sheet should be located within the viewport.\n */\nexport type SheetPosition = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/**\n * The size to use for sheets that have been positioned left or right. The\n * default supported values are:\n *\n * - `\"none\"` - the size is based on content, but is still limited to the\n *   viewport width so that the horizontal scrolling will not occur within the\n *   page. No limits added to sizing.\n * - `\"touch\"` - the `width` is set to be the entire viewport width minus a\n *   touchable area and is normally recommended for mobile devices.\n * - `\"static\"` - the `width` is set to a static `16rem` and generally used for\n *   landscape tablets and desktops.\n * - `\"media\"` - automatically switches between \"touch\" and \"static\" based on\n *   css media queries. (this is the default)\n */\nexport type SheetHorizontalSize = \"none\" | \"media\" | \"touch\" | \"static\";\n\n/**\n * The size to use for sheets that have been positioned top or bottom. The\n * supported sizes are:\n *\n * - `\"none\"` - the size is based on content and is limited to the viewport\n *   height\n * - `\"touch\"` - the size is based on content and is limited to the viewport\n *   height minus a small touchable area\n * - `\"recommended\"` - the material design recommended sizing that forces a\n *   `max-height` of 50vh and `min-height` of 3.5rem\n */\nexport type SheetVerticalSize = \"none\" | \"touch\" | \"recommended\";\n\n/** @since 6.0.0 */\nexport interface BaseSheetClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"left\"`\n   */\n  position?: SheetPosition;\n\n  /**\n   * @defaultValue `\"media\"`\n   */\n  horizontalSize?: SheetHorizontalSize;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  verticalSize?: SheetVerticalSize;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface SheetClassNameOptions extends BaseSheetClassNameOptions {\n  /**\n   * Set this to `true` if the sheet is rendered, but not visible.\n   *\n   * This isn't actually used since it is hard coded in {@link DEFAULT_SHEET_CLASSNAMES}.\n   *\n   * @defaultValue `false`\n   */\n  offscreen?: boolean;\n\n  /**\n   * Set this to `true` to disable the overlay behind the sheet and any\n   * additional box-shadow that would be applied to the sheet.\n   *\n   * @see {@link BaseDialogProps.disableOverlay}\n   * @defaultValue `false`\n   */\n  disableOverlay?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function sheet(options: SheetClassNameOptions): string {\n  const {\n    position = \"left\",\n    horizontalSize = \"media\",\n    verticalSize = \"recommended\",\n    offscreen = false,\n    disableOverlay,\n    className,\n  } = options;\n  const horizontal = position === \"left\" || position === \"right\";\n\n  return cnb(\n    styles({\n      horizontal,\n      vertical: !horizontal,\n      raised: !disableOverlay,\n      offscreen,\n      [position]: true,\n      \"media-width\": horizontal && horizontalSize === \"media\",\n      \"touch-width\": horizontal && horizontalSize === \"touch\",\n      \"static-width\": horizontal && horizontalSize === \"static\",\n      \"viewport-height\": !horizontal && verticalSize === \"none\",\n      \"touchable-height\": !horizontal && verticalSize === \"touch\",\n      \"recommended-height\": !horizontal && verticalSize === \"recommended\",\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","DEFAULT_SHEET_TIMEOUT","enter","exit","DEFAULT_SHEET_CLASSNAMES","appear","appearActive","enterActive","exitActive","exitDone","styles","sheet","options","position","horizontalSize","verticalSize","offscreen","disableOverlay","className","horizontal","vertical","raised"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAKhC,SAASC,GAAG,QAAQ,kBAAkB;AAkBtC,OAAO,MAAMC,wBAAqD;IAChEC,OAAO;IACPC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,2BAA8D;IACzEC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbJ,MAAM;IACNK,YAAY;IACZC,UAAU;AACZ,EAAE;AAEF,MAAMC,SAASV,IAAI;AAgFnB,iBAAiB,GACjB,OAAO,SAASW,MAAMC,OAA8B;IAClD,MAAM,EACJC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,YAAY,KAAK,EACjBC,cAAc,EACdC,SAAS,EACV,GAAGN;IACJ,MAAMO,aAAaN,aAAa,UAAUA,aAAa;IAEvD,OAAOd,IACLW,OAAO;QACLS;QACAC,UAAU,CAACD;QACXE,QAAQ,CAACJ;QACTD;QACA,CAACH,SAAS,EAAE;QACZ,eAAeM,cAAcL,mBAAmB;QAChD,eAAeK,cAAcL,mBAAmB;QAChD,gBAAgBK,cAAcL,mBAAmB;QACjD,mBAAmB,CAACK,cAAcJ,iBAAiB;QACnD,oBAAoB,CAACI,cAAcJ,iBAAiB;QACpD,sBAAsB,CAACI,cAAcJ,iBAAiB;IACxD,IACAG;AAEJ"}

package/dist/snackbar/ToastActionButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ButtonProps } from "../button/Button.js";
 import { type ButtonTheme } from "../button/buttonStyles.js";
 /**

package/dist/snackbar/ToastCloseButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ButtonProps } from "../button/Button.js";
 import { type ButtonType } from "../button/buttonStyles.js";
 /**

package/dist/snackbar/ToastManager.js

@@ -441,22 +441,32 @@ var _queue = /*#__PURE__*/ new WeakMap(), _timers = /*#__PURE__*/ new WeakMap(),
 /**
  * @see {@link ToastManager.addToast}
  * @since 6.0.0
- */ export const addToast = (toast)=>toastManager.addToast(toast);
+ */ export const addToast = (toast)=>{
+    toastManager.addToast(toast);
+};
 /**
  * @see {@link ToastManager.startRemoveTimeout}
  * @since 6.0.0
- */ export const startRemoveToastTimeout = (toastId)=>toastManager.startRemoveTimeout(toastId);
+ */ export const startRemoveToastTimeout = (toastId)=>{
+    toastManager.startRemoveTimeout(toastId);
+};
 /**
  * @see {@link ToastManager.popToast}
  * @since 6.0.0
- */ export const popToast = ()=>toastManager.popToast();
+ */ export const popToast = ()=>{
+    toastManager.popToast();
+};
 /**
  * @see {@link ToastManager.removeToast}
  * @since 6.0.0
- */ export const removeToast = (toastId, transition)=>toastManager.removeToast(toastId, transition);
+ */ export const removeToast = (toastId, transition)=>{
+    toastManager.removeToast(toastId, transition);
+};
 /**
  * @see {@link ToastManager.clearToasts}
  * @since 6.0.0
- */ export const clearToasts = ()=>toastManager.clearToasts();
+ */ export const clearToasts = ()=>{
+    toastManager.clearToasts();
+};
 
 //# sourceMappingURL=ToastManager.js.map