@react-md/core 6.0.1 → 6.0.2

package/dist/icon/FontIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/FontIcon.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type FontIconClassNameOptions, icon } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the\n * `inline` and `theme` props.\n */\nexport interface FontIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    FontIconClassNameOptions {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /**\n   * Any children to render to create the font icon. This is required for\n   * material-icons. For example:\n   *\n   * ```tsx\n   * <FontIcon>clear</FontIcon>\n   * ```\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `FontIcon` component is used for rendering a font-icon library's icon.\n * The default is to use the `material-icons` library, but others can be used as\n * well.\n *\n * @see {@link https://next.react-md.dev/components/icon | Icon Demos}\n * @since 6.0.0 Switched from `<i>` to `<span>` element and removed\n * the `forceSize`/`forceFontSize` props.\n */\nexport const FontIcon = forwardRef<HTMLElement, FontIconProps>(\n  function FontIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      iconClassName = \"material-icons\",\n      dense = false,\n      theme,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"font\",\n          dense,\n          theme,\n          className,\n          iconClassName,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","icon","FontIcon","props","ref","ariaHidden","iconClassName","dense","theme","className","children","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAAwCC,IAAI,QAAQ,cAAc;AAuBlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,gBAAgB,gBAAgB,EAChCC,QAAQ,KAAK,EACbC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACS;QACE,GAAGD,SAAS;QACbE,eAAaR;QACbD,KAAKA;QACLK,WAAWR,KAAK;YACda,MAAM;YACNP;YACAC;YACAC;YACAH;QACF;kBAECI;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/FontIcon.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type FontIconClassNameOptions, icon } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the\n * `inline` and `theme` props.\n */\nexport interface FontIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    FontIconClassNameOptions {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /**\n   * Any children to render to create the font icon. This is required for\n   * material-icons. For example:\n   *\n   * ```tsx\n   * <FontIcon>clear</FontIcon>\n   * ```\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `FontIcon` component is used for rendering a font-icon library's icon.\n * The default is to use the `material-icons` library, but others can be used as\n * well.\n *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @since 6.0.0 Switched from `<i>` to `<span>` element and removed\n * the `forceSize`/`forceFontSize` props.\n */\nexport const FontIcon = forwardRef<HTMLElement, FontIconProps>(\n  function FontIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      iconClassName = \"material-icons\",\n      dense = false,\n      theme,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"font\",\n          dense,\n          theme,\n          className,\n          iconClassName,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","icon","FontIcon","props","ref","ariaHidden","iconClassName","dense","theme","className","children","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAAwCC,IAAI,QAAQ,cAAc;AAuBlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,gBAAgB,gBAAgB,EAChCC,QAAQ,KAAK,EACbC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACS;QACE,GAAGD,SAAS;QACbE,eAAaR;QACbD,KAAKA;QACLK,WAAWR,KAAK;YACda,MAAM;YACNP;YACAC;YACAC;YACAH;QACF;kBAECI;;AAGP,GACA"}

package/dist/icon/IconRotator.d.ts

@@ -30,6 +30,6 @@ export interface IconRotatorProps extends IconRotatorBaseProps {
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
  *
- * @see {@link https://next.react-md.dev/components/icon-rotator | IconRotator Demos}
+ * @see {@link https://react-md.dev/components/icon-rotator | IconRotator Demos}
  */
 export declare const IconRotator: import("react").ForwardRefExoticComponent<IconRotatorProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/icon/IconRotator.js

@@ -6,7 +6,7 @@ import { iconRotator } from "./styles.js";
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
  *
- * @see {@link https://next.react-md.dev/components/icon-rotator | IconRotator Demos}
+ * @see {@link https://react-md.dev/components/icon-rotator | IconRotator Demos}
  */ export const IconRotator = /*#__PURE__*/ forwardRef(function IconRotator(props, ref) {
     const { className: propClassName, rotated, children, forceIconWrap = false, disableTransition = false, ...remaining } = props;
     const className = iconRotator({

package/dist/icon/IconRotator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/IconRotator.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\n\nimport { type IconRotatorClassNameOptions, iconRotator } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed `animate` prop and added `disableTransition`\n */\nexport interface IconRotatorBaseProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    IconRotatorClassNameOptions {\n  /**\n   * An optional style to apply to the surrounding span when the `forceIconWrap`\n   * prop is enabled or the children is not a single react element.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the child icon should be \"forcefully\" wrapped in a `<span>`\n   * element. This should be enabled if you have a custom icon that does not\n   * pass the `className` prop down.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n}\n\nexport interface IconRotatorProps extends IconRotatorBaseProps {\n  /**\n   * The icon that should be rotated. If this is a valid React Element, the\n   * class names will be cloned into that icon, otherwise the icon will be\n   * wrapped in a span with the correct class names applied.\n   */\n  children: ReactNode;\n}\n\n/**\n * The `IconRotator` is a simple component that is used to rotate an icon from a\n * one degrees to another.\n *\n * @see {@link https://next.react-md.dev/components/icon-rotator | IconRotator Demos}\n */\nexport const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(\n  function IconRotator(props, ref) {\n    const {\n      className: propClassName,\n      rotated,\n      children,\n      forceIconWrap = false,\n      disableTransition = false,\n      ...remaining\n    } = props;\n\n    const className = iconRotator({\n      rotated,\n      className: propClassName,\n      disableTransition,\n    });\n    if (!forceIconWrap && isValidElement<{ className?: string }>(children)) {\n      const child = Children.only(children);\n      return cloneElement(child, {\n        className: cnb(className, child.props.className),\n      });\n    }\n\n    return (\n      <span {...remaining} ref={ref} className={className}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","Children","cloneElement","forwardRef","isValidElement","iconRotator","IconRotator","props","ref","className","propClassName","rotated","children","forceIconWrap","disableTransition","remaining","child","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAEEC,QAAQ,EAGRC,YAAY,EACZC,UAAU,EACVC,cAAc,QACT,QAAQ;AAEf,SAA2CC,WAAW,QAAQ,cAAc;AAiC5E;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,WAAWC,aAAa,EACxBC,OAAO,EACPC,QAAQ,EACRC,gBAAgB,KAAK,EACrBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGR;IAEJ,MAAME,YAAYJ,YAAY;QAC5BM;QACAF,WAAWC;QACXI;IACF;IACA,IAAI,CAACD,+BAAiBT,eAAuCQ,WAAW;QACtE,MAAMI,QAAQf,SAASgB,IAAI,CAACL;QAC5B,qBAAOV,aAAac,OAAO;YACzBP,WAAWT,IAAIS,WAAWO,MAAMT,KAAK,CAACE,SAAS;QACjD;IACF;IAEA,qBACE,KAACS;QAAM,GAAGH,SAAS;QAAEP,KAAKA;QAAKC,WAAWA;kBACvCG;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/IconRotator.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\n\nimport { type IconRotatorClassNameOptions, iconRotator } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed `animate` prop and added `disableTransition`\n */\nexport interface IconRotatorBaseProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    IconRotatorClassNameOptions {\n  /**\n   * An optional style to apply to the surrounding span when the `forceIconWrap`\n   * prop is enabled or the children is not a single react element.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the child icon should be \"forcefully\" wrapped in a `<span>`\n   * element. This should be enabled if you have a custom icon that does not\n   * pass the `className` prop down.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n}\n\nexport interface IconRotatorProps extends IconRotatorBaseProps {\n  /**\n   * The icon that should be rotated. If this is a valid React Element, the\n   * class names will be cloned into that icon, otherwise the icon will be\n   * wrapped in a span with the correct class names applied.\n   */\n  children: ReactNode;\n}\n\n/**\n * The `IconRotator` is a simple component that is used to rotate an icon from a\n * one degrees to another.\n *\n * @see {@link https://react-md.dev/components/icon-rotator | IconRotator Demos}\n */\nexport const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(\n  function IconRotator(props, ref) {\n    const {\n      className: propClassName,\n      rotated,\n      children,\n      forceIconWrap = false,\n      disableTransition = false,\n      ...remaining\n    } = props;\n\n    const className = iconRotator({\n      rotated,\n      className: propClassName,\n      disableTransition,\n    });\n    if (!forceIconWrap && isValidElement<{ className?: string }>(children)) {\n      const child = Children.only(children);\n      return cloneElement(child, {\n        className: cnb(className, child.props.className),\n      });\n    }\n\n    return (\n      <span {...remaining} ref={ref} className={className}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","Children","cloneElement","forwardRef","isValidElement","iconRotator","IconRotator","props","ref","className","propClassName","rotated","children","forceIconWrap","disableTransition","remaining","child","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAEEC,QAAQ,EAGRC,YAAY,EACZC,UAAU,EACVC,cAAc,QACT,QAAQ;AAEf,SAA2CC,WAAW,QAAQ,cAAc;AAiC5E;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,WAAWC,aAAa,EACxBC,OAAO,EACPC,QAAQ,EACRC,gBAAgB,KAAK,EACrBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGR;IAEJ,MAAME,YAAYJ,YAAY;QAC5BM;QACAF,WAAWC;QACXI;IACF;IACA,IAAI,CAACD,+BAAiBT,eAAuCQ,WAAW;QACtE,MAAMI,QAAQf,SAASgB,IAAI,CAACL;QAC5B,qBAAOV,aAAac,OAAO;YACzBP,WAAWT,IAAIS,WAAWO,MAAMT,KAAK,CAACE,SAAS;QACjD;IACF;IAEA,qBACE,KAACS;QAAM,GAAGH,SAAS;QAAEP,KAAKA;QAAKC,WAAWA;kBACvCG;;AAGP,GACA"}

package/dist/icon/MaterialIcon.d.ts

@@ -26,8 +26,8 @@ export interface MaterialIconProps extends HTMLAttributes<HTMLSpanElement>, Part
  * <MaterialIcon name="wifi" family="two-tone" dense theme="warning" />
  * ```
  *
- * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
- * @see {@link https://next.react-md.dev/components/material-icons|Available Material Icons}
+ * @see {@link https://react-md.dev/components/icon | Icon Demos}
+ * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}
  * @since 6.0.0
  */
 export declare const MaterialIcon: import("react").ForwardRefExoticComponent<MaterialIconProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/icon/MaterialIcon.js

@@ -15,8 +15,8 @@ import { icon } from "./styles.js";
  * <MaterialIcon name="wifi" family="two-tone" dense theme="warning" />
  * ```
  *
- * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
- * @see {@link https://next.react-md.dev/components/material-icons|Available Material Icons}
+ * @see {@link https://react-md.dev/components/icon | Icon Demos}
+ * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}
  * @since 6.0.0
  */ export const MaterialIcon = /*#__PURE__*/ forwardRef(function MaterialIcon(props, ref) {
     const { "aria-hidden": ariaHidden = true, name, family = MATERIAL_CONFIG.iconFamily, theme, dense, className, ...remaining } = props;

package/dist/icon/MaterialIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialIcon.tsx"],"sourcesContent":["import { type AriaAttributes, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type MaterialIconFamily, type MaterialIconName } from \"./material.js\";\nimport { MATERIAL_CONFIG } from \"./materialConfig.js\";\nimport { type MaterialIconClassNameOptions, icon } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport interface MaterialIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    Partial<MaterialIconClassNameOptions> {\n  /**\n   * The icon name to use\n   */\n  name: MaterialIconName;\n\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /** @defaultValue `MATERIAL_CONFIG.iconFamily` */\n  family?: MaterialIconFamily;\n  children?: never;\n}\n\n/**\n * The `MaterialIcon` component is used for rendering a material icon using the\n * Google Fonts stylesheet (handled separately). This is mostly a convenience\n * wrapper around the `FontIcon` that will catch typos for the supported icon\n * names.\n *\n * @example Simple Example\n * ```tsx\n * <MaterialIcon name=\"3k\" />\n * <MaterialIcon name=\"favorite\" theme=\"primary\" />\n * <MaterialIcon name=\"wifi\" family=\"two-tone\" dense theme=\"warning\" />\n * ```\n *\n * @see {@link https://next.react-md.dev/components/icon | Icon Demos}\n * @see {@link https://next.react-md.dev/components/material-icons|Available Material Icons}\n * @since 6.0.0\n */\nexport const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(\n  function MaterialIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      name,\n      family = MATERIAL_CONFIG.iconFamily,\n      theme,\n      dense,\n      className,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"material\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {name}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","MATERIAL_CONFIG","icon","MaterialIcon","props","ref","ariaHidden","name","family","iconFamily","theme","dense","className","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAAmDA,UAAU,QAAQ,QAAQ;AAG7E,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAA4CC,IAAI,QAAQ,cAAc;AAmBtE;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,IAAI,EACJC,SAASP,gBAAgBQ,UAAU,EACnCC,KAAK,EACLC,KAAK,EACLC,SAAS,EACT,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACU;QACE,GAAGD,SAAS;QACbE,eAAaT;QACbD,KAAKA;QACLO,WAAWV,KAAK;YACdc,MAAM;YACNR;YACAE;YACAC;YACAC;QACF;kBAECL;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/MaterialIcon.tsx"],"sourcesContent":["import { type AriaAttributes, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type MaterialIconFamily, type MaterialIconName } from \"./material.js\";\nimport { MATERIAL_CONFIG } from \"./materialConfig.js\";\nimport { type MaterialIconClassNameOptions, icon } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport interface MaterialIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    Partial<MaterialIconClassNameOptions> {\n  /**\n   * The icon name to use\n   */\n  name: MaterialIconName;\n\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /** @defaultValue `MATERIAL_CONFIG.iconFamily` */\n  family?: MaterialIconFamily;\n  children?: never;\n}\n\n/**\n * The `MaterialIcon` component is used for rendering a material icon using the\n * Google Fonts stylesheet (handled separately). This is mostly a convenience\n * wrapper around the `FontIcon` that will catch typos for the supported icon\n * names.\n *\n * @example Simple Example\n * ```tsx\n * <MaterialIcon name=\"3k\" />\n * <MaterialIcon name=\"favorite\" theme=\"primary\" />\n * <MaterialIcon name=\"wifi\" family=\"two-tone\" dense theme=\"warning\" />\n * ```\n *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}\n * @since 6.0.0\n */\nexport const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(\n  function MaterialIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      name,\n      family = MATERIAL_CONFIG.iconFamily,\n      theme,\n      dense,\n      className,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"material\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {name}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","MATERIAL_CONFIG","icon","MaterialIcon","props","ref","ariaHidden","name","family","iconFamily","theme","dense","className","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAAmDA,UAAU,QAAQ,QAAQ;AAG7E,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAA4CC,IAAI,QAAQ,cAAc;AAmBtE;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,IAAI,EACJC,SAASP,gBAAgBQ,UAAU,EACnCC,KAAK,EACLC,KAAK,EACLC,SAAS,EACT,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACU;QACE,GAAGD,SAAS;QACbE,eAAaT;QACbD,KAAKA;QACLO,WAAWV,KAAK;YACdc,MAAM;YACNR;YACAE;YACAC;YACAC;QACF;kBAECL;;AAGP,GACA"}

package/dist/icon/MaterialSymbol.d.ts

@@ -49,8 +49,8 @@ export interface MaterialSymbolProps extends HTMLAttributes<HTMLSpanElement>, Ma
  * root.render(<App />);
  * ```
  *
- * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
- * @see {@link https://next.react-md.dev/components/material-icons|Available Material Icons}
+ * @see {@link https://react-md.dev/components/icon | Icon Demos}
+ * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}
  * @since 6.0.0
  */
 export declare const MaterialSymbol: import("react").ForwardRefExoticComponent<MaterialSymbolProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/icon/MaterialSymbol.js

@@ -32,8 +32,8 @@ import { icon } from "./styles.js";
  * root.render(<App />);
  * ```
  *
- * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
- * @see {@link https://next.react-md.dev/components/material-icons|Available Material Icons}
+ * @see {@link https://react-md.dev/components/icon | Icon Demos}
+ * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}
  * @since 6.0.0
  */ export const MaterialSymbol = /*#__PURE__*/ forwardRef(function MaterialSymbol(props, ref) {
     const { "aria-hidden": ariaHidden = true, className, name: symbol, style: propStyle, family: propFamily, fill, weight, grade, opticalSize, theme, dense, ...remaining } = props;

package/dist/icon/MaterialSymbol.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialSymbol.tsx"],"sourcesContent":["import { type AriaAttributes, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type MaterialSymbolName } from \"./material.js\";\nimport {\n  type MaterialSymbolCustomization,\n  type MaterialSymbolFill,\n  type MaterialSymbolGrade,\n  type MaterialSymbolOpticalSize,\n  type MaterialSymbolWeight,\n  getFontVariationSettings,\n} from \"./materialConfig.js\";\nimport { type MaterialSymbolClassNameOptions, icon } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-symbol-fill\"?: MaterialSymbolFill;\n    \"--rmd-symbol-wght\"?: MaterialSymbolWeight;\n    \"--rmd-symbol-grad\"?: MaterialSymbolGrade;\n    \"--rmd-symbol-opsz\"?: MaterialSymbolOpticalSize;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialSymbolProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    MaterialSymbolCustomization,\n    Partial<MaterialSymbolClassNameOptions> {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialSymbolName;\n  children?: never;\n}\n\n/**\n * This is a convenience component that provides autocomplete for all the\n * available material symbols via the `name` prop.\n *\n * Note: You might notice IDE slowdowns for files that use this component since\n * there are so many icons available. If it becomes an issue, just stop using\n * this component and define the icons inline instead.\n *\n * @example Simple Example\n * ```tsx\n * import { MaterialSymbol } from \"@react-md/core/icon/MaterialSymbol\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <MaterialSymbol symbol=\"close\" />\n *       <MaterialSymbol symbol=\"tune\" type=\"outline\" />\n *\n *       <MaterialSymbol symbol=\"add\" type=\"round\" />\n *       <MaterialSymbol symbol=\"air\" type=\"sharp\" />\n *     </>\n *   );\n * }\n *\n * const root = createRoot(document.getElementById(\"root\"));\n * root.render(<App />);\n * ```\n *\n * @see {@link https://next.react-md.dev/components/icon | Icon Demos}\n * @see {@link https://next.react-md.dev/components/material-icons|Available Material Icons}\n * @since 6.0.0\n */\nexport const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(\n  function MaterialSymbol(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      name: symbol,\n      style: propStyle,\n      family: propFamily,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      theme,\n      dense,\n      ...remaining\n    } = props;\n    const { style, family } = getFontVariationSettings({\n      style: propStyle,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      family: propFamily,\n    });\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        style={style}\n        className={icon({\n          type: \"symbol\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {symbol}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","getFontVariationSettings","icon","MaterialSymbol","props","ref","ariaHidden","className","name","symbol","style","propStyle","family","propFamily","fill","weight","grade","opticalSize","theme","dense","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAAmDA,UAAU,QAAQ,QAAQ;AAG7E,SAMEC,wBAAwB,QACnB,sBAAsB;AAC7B,SAA8CC,IAAI,QAAQ,cAAc;AAwBxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,MAAMC,+BAAiBH,WAC5B,SAASG,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,MAAMC,MAAM,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,KAAK,EACL,GAAGC,WACJ,GAAGhB;IACJ,MAAM,EAAEM,KAAK,EAAEE,MAAM,EAAE,GAAGX,yBAAyB;QACjDS,OAAOC;QACPG;QACAC;QACAC;QACAC;QACAL,QAAQC;IACV;IAEA,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbE,eAAahB;QACbD,KAAKA;QACLK,OAAOA;QACPH,WAAWL,KAAK;YACdqB,MAAM;YACNX;YACAM;YACAC;YACAZ;QACF;kBAECE;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/MaterialSymbol.tsx"],"sourcesContent":["import { type AriaAttributes, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type MaterialSymbolName } from \"./material.js\";\nimport {\n  type MaterialSymbolCustomization,\n  type MaterialSymbolFill,\n  type MaterialSymbolGrade,\n  type MaterialSymbolOpticalSize,\n  type MaterialSymbolWeight,\n  getFontVariationSettings,\n} from \"./materialConfig.js\";\nimport { type MaterialSymbolClassNameOptions, icon } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-symbol-fill\"?: MaterialSymbolFill;\n    \"--rmd-symbol-wght\"?: MaterialSymbolWeight;\n    \"--rmd-symbol-grad\"?: MaterialSymbolGrade;\n    \"--rmd-symbol-opsz\"?: MaterialSymbolOpticalSize;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialSymbolProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    MaterialSymbolCustomization,\n    Partial<MaterialSymbolClassNameOptions> {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialSymbolName;\n  children?: never;\n}\n\n/**\n * This is a convenience component that provides autocomplete for all the\n * available material symbols via the `name` prop.\n *\n * Note: You might notice IDE slowdowns for files that use this component since\n * there are so many icons available. If it becomes an issue, just stop using\n * this component and define the icons inline instead.\n *\n * @example Simple Example\n * ```tsx\n * import { MaterialSymbol } from \"@react-md/core/icon/MaterialSymbol\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <MaterialSymbol symbol=\"close\" />\n *       <MaterialSymbol symbol=\"tune\" type=\"outline\" />\n *\n *       <MaterialSymbol symbol=\"add\" type=\"round\" />\n *       <MaterialSymbol symbol=\"air\" type=\"sharp\" />\n *     </>\n *   );\n * }\n *\n * const root = createRoot(document.getElementById(\"root\"));\n * root.render(<App />);\n * ```\n *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}\n * @since 6.0.0\n */\nexport const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(\n  function MaterialSymbol(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      name: symbol,\n      style: propStyle,\n      family: propFamily,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      theme,\n      dense,\n      ...remaining\n    } = props;\n    const { style, family } = getFontVariationSettings({\n      style: propStyle,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      family: propFamily,\n    });\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        style={style}\n        className={icon({\n          type: \"symbol\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {symbol}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","getFontVariationSettings","icon","MaterialSymbol","props","ref","ariaHidden","className","name","symbol","style","propStyle","family","propFamily","fill","weight","grade","opticalSize","theme","dense","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAAmDA,UAAU,QAAQ,QAAQ;AAG7E,SAMEC,wBAAwB,QACnB,sBAAsB;AAC7B,SAA8CC,IAAI,QAAQ,cAAc;AAwBxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,MAAMC,+BAAiBH,WAC5B,SAASG,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,MAAMC,MAAM,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,KAAK,EACL,GAAGC,WACJ,GAAGhB;IACJ,MAAM,EAAEM,KAAK,EAAEE,MAAM,EAAE,GAAGX,yBAAyB;QACjDS,OAAOC;QACPG;QACAC;QACAC;QACAC;QACAL,QAAQC;IACV;IAEA,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbE,eAAahB;QACbD,KAAKA;QACLK,OAAOA;QACPH,WAAWL,KAAK;YACdqB,MAAM;YACNX;YACAM;YACAC;YACAZ;QACF;kBAECE;;AAGP,GACA"}

package/dist/icon/SVGIcon.d.ts

@@ -68,6 +68,6 @@ export interface SVGIconProps extends HTMLAttributes<SVGSVGElement>, SVGIconClas
  * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a
  * sprite map as an icon.
  *
- * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
+ * @see {@link https://react-md.dev/components/icon | Icon Demos}
  */
 export declare const SVGIcon: import("react").ForwardRefExoticComponent<SVGIconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/icon/SVGIcon.js

@@ -5,7 +5,7 @@ import { icon } from "./styles.js";
  * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a
  * sprite map as an icon.
  *
- * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
+ * @see {@link https://react-md.dev/components/icon | Icon Demos}
  */ export const SVGIcon = /*#__PURE__*/ forwardRef(function SVGIcon(props, ref) {
     const { "aria-hidden": ariaHidden = true, focusable = "false", use, xmlns = use ? "http://www.w3.org/2000/svg" : undefined, viewBox = "0 0 24 24", dense = false, className, theme, inline, children: propChildren, ...remaining } = props;
     let children = propChildren;

package/dist/icon/SVGIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/SVGIcon.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type SVGIconClassNameOptions, icon } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added the `inline` and `theme` props.\n */\nexport interface SVGIconProps\n  extends HTMLAttributes<SVGSVGElement>,\n    SVGIconClassNameOptions {\n  /**\n   * Boolean if the SVG should gain the `focusable` attribute. This is disabled\n   * by default since IE11 and Edge actually default this to true and keyboard's\n   * will tab focus all SVGs.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: \"false\" | \"true\" | boolean;\n\n  /**\n   * The `viewBox` attribute allows you to specify that a given set of graphics\n   * stretch to fit a particular container element.\n   *\n   * The value of the `viewBox` attribute is a list of four numbers min-x,\n   * min-y, width and height, separated by white space and/or a comma, which\n   * specify a rectangle in user space which should be mapped to the bounds of\n   * the viewport established by the given element, taking into account\n   * attribute `preserveAspectRatio`.\n   *\n   * Negative values for width or height are not permitted and a value of zero\n   * disables rendering of the element. An optional `viewbox` for the SVG.\n   *\n   * For example, if the SVG element is 250 (width) by 200 (height) and you\n   * provide `viewBox=\"0 0 25 20\"`, the coordinates inside the SVG will go from\n   * the top left corner (0, 0) to the bottom right (25, 20) and each unit will\n   * be worth `10px`.\n   *\n   * @defaultValue `\"0 0 24 24\"`\n   */\n  viewBox?: string;\n\n  /**\n   * An optional `xmlns` string to provide. The `use` prop will not work without\n   * this prop defined.\n   *\n   *\n   * Note: The default value will be `undefined` unless the {@link use} prop is\n   * defined.\n   *\n   * @defaultValue `\"http://www.w3.org/2000/svg\"`\n   */\n  xmlns?: string;\n\n  /**\n   * This should be a link to a part of an SVG sprite map. So normally one of\n   * the following:\n   * - `'#some-custom-svg'`\n   * - `'/images/spritemap.svg#some-custom-svg'`\n   *\n   * This prop **should not** be used with the `children` prop as only one will\n   * be rendered.\n   *\n   *\n   * NOTE: IE **does not support** external SVGs. Please see the demo for more\n   * details.\n   */\n  use?: string;\n\n  /**\n   * Any `<svg>` children to render to create your icon. This can not be used\n   * with the `use` prop.\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a\n * sprite map as an icon.\n *\n * @see {@link https://next.react-md.dev/components/icon | Icon Demos}\n */\nexport const SVGIcon = forwardRef<SVGSVGElement, SVGIconProps>(\n  function SVGIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      focusable = \"false\",\n      use,\n      xmlns = use ? \"http://www.w3.org/2000/svg\" : undefined,\n      viewBox = \"0 0 24 24\",\n      dense = false,\n      className,\n      theme,\n      inline,\n      children: propChildren,\n      ...remaining\n    } = props;\n\n    let children = propChildren;\n    if (!children && use) {\n      children = <use xlinkHref={use} />;\n    }\n\n    return (\n      <svg\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"svg\",\n          dense,\n          theme,\n          inline,\n          className,\n        })}\n        focusable={focusable}\n        xmlns={xmlns}\n        viewBox={viewBox}\n      >\n        {children}\n      </svg>\n    );\n  }\n);\n"],"names":["forwardRef","icon","SVGIcon","props","ref","ariaHidden","focusable","use","xmlns","undefined","viewBox","dense","className","theme","inline","children","propChildren","remaining","xlinkHref","svg","aria-hidden","type"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAAuCC,IAAI,QAAQ,cAAc;AAyEjE;;;;;CAKC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,YAAY,OAAO,EACnBC,GAAG,EACHC,QAAQD,MAAM,+BAA+BE,SAAS,EACtDC,UAAU,WAAW,EACrBC,QAAQ,KAAK,EACbC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGd;IAEJ,IAAIY,WAAWC;IACf,IAAI,CAACD,YAAYR,KAAK;QACpBQ,yBAAW,KAACR;YAAIW,WAAWX;;IAC7B;IAEA,qBACE,KAACY;QACE,GAAGF,SAAS;QACbG,eAAaf;QACbD,KAAKA;QACLQ,WAAWX,KAAK;YACdoB,MAAM;YACNV;YACAE;YACAC;YACAF;QACF;QACAN,WAAWA;QACXE,OAAOA;QACPE,SAASA;kBAERK;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/SVGIcon.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type SVGIconClassNameOptions, icon } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added the `inline` and `theme` props.\n */\nexport interface SVGIconProps\n  extends HTMLAttributes<SVGSVGElement>,\n    SVGIconClassNameOptions {\n  /**\n   * Boolean if the SVG should gain the `focusable` attribute. This is disabled\n   * by default since IE11 and Edge actually default this to true and keyboard's\n   * will tab focus all SVGs.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: \"false\" | \"true\" | boolean;\n\n  /**\n   * The `viewBox` attribute allows you to specify that a given set of graphics\n   * stretch to fit a particular container element.\n   *\n   * The value of the `viewBox` attribute is a list of four numbers min-x,\n   * min-y, width and height, separated by white space and/or a comma, which\n   * specify a rectangle in user space which should be mapped to the bounds of\n   * the viewport established by the given element, taking into account\n   * attribute `preserveAspectRatio`.\n   *\n   * Negative values for width or height are not permitted and a value of zero\n   * disables rendering of the element. An optional `viewbox` for the SVG.\n   *\n   * For example, if the SVG element is 250 (width) by 200 (height) and you\n   * provide `viewBox=\"0 0 25 20\"`, the coordinates inside the SVG will go from\n   * the top left corner (0, 0) to the bottom right (25, 20) and each unit will\n   * be worth `10px`.\n   *\n   * @defaultValue `\"0 0 24 24\"`\n   */\n  viewBox?: string;\n\n  /**\n   * An optional `xmlns` string to provide. The `use` prop will not work without\n   * this prop defined.\n   *\n   *\n   * Note: The default value will be `undefined` unless the {@link use} prop is\n   * defined.\n   *\n   * @defaultValue `\"http://www.w3.org/2000/svg\"`\n   */\n  xmlns?: string;\n\n  /**\n   * This should be a link to a part of an SVG sprite map. So normally one of\n   * the following:\n   * - `'#some-custom-svg'`\n   * - `'/images/spritemap.svg#some-custom-svg'`\n   *\n   * This prop **should not** be used with the `children` prop as only one will\n   * be rendered.\n   *\n   *\n   * NOTE: IE **does not support** external SVGs. Please see the demo for more\n   * details.\n   */\n  use?: string;\n\n  /**\n   * Any `<svg>` children to render to create your icon. This can not be used\n   * with the `use` prop.\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a\n * sprite map as an icon.\n *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\n */\nexport const SVGIcon = forwardRef<SVGSVGElement, SVGIconProps>(\n  function SVGIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      focusable = \"false\",\n      use,\n      xmlns = use ? \"http://www.w3.org/2000/svg\" : undefined,\n      viewBox = \"0 0 24 24\",\n      dense = false,\n      className,\n      theme,\n      inline,\n      children: propChildren,\n      ...remaining\n    } = props;\n\n    let children = propChildren;\n    if (!children && use) {\n      children = <use xlinkHref={use} />;\n    }\n\n    return (\n      <svg\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"svg\",\n          dense,\n          theme,\n          inline,\n          className,\n        })}\n        focusable={focusable}\n        xmlns={xmlns}\n        viewBox={viewBox}\n      >\n        {children}\n      </svg>\n    );\n  }\n);\n"],"names":["forwardRef","icon","SVGIcon","props","ref","ariaHidden","focusable","use","xmlns","undefined","viewBox","dense","className","theme","inline","children","propChildren","remaining","xlinkHref","svg","aria-hidden","type"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAAuCC,IAAI,QAAQ,cAAc;AAyEjE;;;;;CAKC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,YAAY,OAAO,EACnBC,GAAG,EACHC,QAAQD,MAAM,+BAA+BE,SAAS,EACtDC,UAAU,WAAW,EACrBC,QAAQ,KAAK,EACbC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGd;IAEJ,IAAIY,WAAWC;IACf,IAAI,CAACD,YAAYR,KAAK;QACpBQ,yBAAW,KAACR;YAAIW,WAAWX;;IAC7B;IAEA,qBACE,KAACY;QACE,GAAGF,SAAS;QACbG,eAAaf;QACbD,KAAKA;QACLQ,WAAWX,KAAK;YACdoB,MAAM;YACNV;YACAE;YACAC;YACAF;QACF;QACAN,WAAWA;QACXE,OAAOA;QACPE,SAASA;kBAERK;;AAGP,GACA"}

package/dist/icon/TextIconSpacing.d.ts

@@ -120,6 +120,6 @@ export interface TextIconSpacingProps {
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/text-icon-spacing | TextIconSpacing Demos}
+ * @see {@link https://react-md.dev/components/text-icon-spacing | TextIconSpacing Demos}
  */
 export declare function TextIconSpacing(props: TextIconSpacingProps): ReactElement;

package/dist/icon/TextIconSpacing.js

@@ -35,7 +35,7 @@ import { Children, cloneElement, isValidElement } from "react";
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/text-icon-spacing | TextIconSpacing Demos}
+ * @see {@link https://react-md.dev/components/text-icon-spacing | TextIconSpacing Demos}
  */ export function TextIconSpacing(props) {
     const { className, icon: propIcon, children = null, stacked = false, iconAfter = false, flexReverse = false, forceIconWrap = false, beforeClassName = "rmd-icon--before", afterClassName = "rmd-icon--after", aboveClassName = "rmd-icon--above", belowClassName = "rmd-icon--below" } = props;
     if (!propIcon) {

package/dist/icon/TextIconSpacing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/TextIconSpacing.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  Children,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\n\nexport interface TextIconSpacingProps {\n  /**\n   * An optional className to apply to the surrounding `<span>` when the\n   * `forceIconWrap` prop is enabled or the icon is not a valid React Element.\n   * If the `forceIconWrap` prop is not enabled, it will be cloned into the icon\n   * instead.\n   */\n  className?: string;\n\n  /**\n   * An optional icon to display with a text button. This is invalid for icon\n   * buttons. If this is a single element, a new class name will be cloned into\n   * the element to get correct spacing so if you have a custom icon element,\n   * you **must** also pass that class name down. If you are using one of the\n   * react-md icon component packages, this is handled automatically.\n   *\n   * If this is not a valid react element, the icon will be wrapped in a\n   * `<span>` instead with the class names applied.\n   */\n  icon?: ReactElement<{ className?: string }> | ReactNode;\n\n  /**\n   * Boolean if the icon should appear after the text instead of before.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * The children to render before or after the provided icon. This is defaulted\n   * to `null` so that providing a `null` icon will correctly render without\n   * React crashing.\n   *\n   * @defaultValue `null`\n   */\n  children?: ReactNode;\n\n  /**\n   * The class name to use for an icon that is placed before text.\n   *\n   * @defaultValue `\"rmd-icon--before\"`\n   */\n  beforeClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed after text.\n   *\n   * @defaultValue `\"rmd-icon--after\"`\n   */\n  afterClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed before above the text.\n   * This is used when the `stacked` prop is enabled and the `iconAfter` prop is\n   * disabled or omitted.\n   *\n   * @defaultValue `\"rmd-icon--above\"`\n   */\n  aboveClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed before above the text.\n   * This is used when the `stacked` prop is enabled and the `iconAfter` prop is\n   * enabled.\n   *\n   * @defaultValue `\"rmd-icon--below\"`\n   */\n  belowClassName?: string;\n\n  /**\n   * Boolean if the icon should be forced into a `<span>` with the class names\n   * applied instead of attempting to clone into the provided icon.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n\n  /**\n   * Boolean if the icon and text should be stacked instead of inline. Note:\n   * You'll normally want to update the container element to have\n   * `display: flex` and `flex-direction: column` for this to work.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Boolean if the icon and content are in a `column-reverse` or `row-reverse`\n   * `flex-direction`. This will swap the different classnames as needed.\n   *\n   * @since 2.5.0\n   * @defaultValue `false`\n   */\n  flexReverse?: boolean;\n}\n\n/**\n * Note: This component **must** be rendered within a flex container unless the\n * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.\n *\n * @example Simple Example\n * ```tsx\n * import { FontIcon } from \"@react-md/core/icon/FontIcon\";\n * import { TextIconSpacing } from \"@react-md/core/icon/TextIconSpacing\"\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextIconSpacing icon={<FontIcon>favorite</FontIcon>}>\n *       Favorite\n *     </TextIconSpacing>\n *   );\n * }\n * ```\n *\n * @example Stacked Example\n * ```tsx\n * import { FontIcon } from \"@react-md/core/icon/FontIcon\";\n * import { TextIconSpacing } from \"@react-md/core/icon/TextIconSpacing\"\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextIconSpacing icon={<FontIcon>favorite</FontIcon>} stacked>\n *       Favorite\n *     </TextIconSpacing>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/text-icon-spacing | TextIconSpacing Demos}\n */\nexport function TextIconSpacing(props: TextIconSpacingProps): ReactElement {\n  const {\n    className,\n    icon: propIcon,\n    children = null,\n    stacked = false,\n    iconAfter = false,\n    flexReverse = false,\n    forceIconWrap = false,\n    beforeClassName = \"rmd-icon--before\",\n    afterClassName = \"rmd-icon--after\",\n    aboveClassName = \"rmd-icon--above\",\n    belowClassName = \"rmd-icon--below\",\n  } = props;\n\n  if (!propIcon) {\n    return <>{children}</>;\n  }\n\n  const isAfter = flexReverse ? !iconAfter : iconAfter;\n  const baseClassName = cnb(\n    {\n      [beforeClassName]: !stacked && !isAfter,\n      [afterClassName]: !stacked && isAfter,\n      [aboveClassName]: stacked && !isAfter,\n      [belowClassName]: stacked && isAfter,\n    },\n    className\n  );\n\n  let iconEl = propIcon;\n  let content = children;\n  if (!forceIconWrap && isValidElement<{ className?: string }>(propIcon)) {\n    const icon = Children.only(propIcon);\n    iconEl = cloneElement(icon, {\n      className: cnb(baseClassName, icon.props.className),\n    });\n  } else if (propIcon) {\n    iconEl = (\n      <span className={cnb(\"rmd-text-icon-spacing\", baseClassName)}>\n        {propIcon}\n      </span>\n    );\n  }\n\n  if (iconEl) {\n    content = (\n      <>\n        {!iconAfter && iconEl}\n        {children}\n        {iconAfter && iconEl}\n      </>\n    );\n  }\n\n  return <>{content}</>;\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","TextIconSpacing","props","className","icon","propIcon","children","stacked","iconAfter","flexReverse","forceIconWrap","beforeClassName","afterClassName","aboveClassName","belowClassName","isAfter","baseClassName","iconEl","content","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,EAGRC,YAAY,EACZC,cAAc,QACT,QAAQ;AAkGf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,SAAS,EACTC,MAAMC,QAAQ,EACdC,WAAW,IAAI,EACfC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,gBAAgB,KAAK,EACrBC,kBAAkB,kBAAkB,EACpCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,iBAAiB,EACnC,GAAGZ;IAEJ,IAAI,CAACG,UAAU;QACb,qBAAO;sBAAGC;;IACZ;IAEA,MAAMS,UAAUN,cAAc,CAACD,YAAYA;IAC3C,MAAMQ,gBAAgBnB,IACpB;QACE,CAACc,gBAAgB,EAAE,CAACJ,WAAW,CAACQ;QAChC,CAACH,eAAe,EAAE,CAACL,WAAWQ;QAC9B,CAACF,eAAe,EAAEN,WAAW,CAACQ;QAC9B,CAACD,eAAe,EAAEP,WAAWQ;IAC/B,GACAZ;IAGF,IAAIc,SAASZ;IACb,IAAIa,UAAUZ;IACd,IAAI,CAACI,+BAAiBV,eAAuCK,WAAW;QACtE,MAAMD,OAAON,SAASqB,IAAI,CAACd;QAC3BY,uBAASlB,aAAaK,MAAM;YAC1BD,WAAWN,IAAImB,eAAeZ,KAAKF,KAAK,CAACC,SAAS;QACpD;IACF,OAAO,IAAIE,UAAU;QACnBY,uBACE,KAACG;YAAKjB,WAAWN,IAAI,yBAAyBmB;sBAC3CX;;IAGP;IAEA,IAAIY,QAAQ;QACVC,wBACE;;gBACG,CAACV,aAAaS;gBACdX;gBACAE,aAAaS;;;IAGpB;IAEA,qBAAO;kBAAGC;;AACZ"}
+{"version":3,"sources":["../../src/icon/TextIconSpacing.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  Children,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\n\nexport interface TextIconSpacingProps {\n  /**\n   * An optional className to apply to the surrounding `<span>` when the\n   * `forceIconWrap` prop is enabled or the icon is not a valid React Element.\n   * If the `forceIconWrap` prop is not enabled, it will be cloned into the icon\n   * instead.\n   */\n  className?: string;\n\n  /**\n   * An optional icon to display with a text button. This is invalid for icon\n   * buttons. If this is a single element, a new class name will be cloned into\n   * the element to get correct spacing so if you have a custom icon element,\n   * you **must** also pass that class name down. If you are using one of the\n   * react-md icon component packages, this is handled automatically.\n   *\n   * If this is not a valid react element, the icon will be wrapped in a\n   * `<span>` instead with the class names applied.\n   */\n  icon?: ReactElement<{ className?: string }> | ReactNode;\n\n  /**\n   * Boolean if the icon should appear after the text instead of before.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * The children to render before or after the provided icon. This is defaulted\n   * to `null` so that providing a `null` icon will correctly render without\n   * React crashing.\n   *\n   * @defaultValue `null`\n   */\n  children?: ReactNode;\n\n  /**\n   * The class name to use for an icon that is placed before text.\n   *\n   * @defaultValue `\"rmd-icon--before\"`\n   */\n  beforeClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed after text.\n   *\n   * @defaultValue `\"rmd-icon--after\"`\n   */\n  afterClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed before above the text.\n   * This is used when the `stacked` prop is enabled and the `iconAfter` prop is\n   * disabled or omitted.\n   *\n   * @defaultValue `\"rmd-icon--above\"`\n   */\n  aboveClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed before above the text.\n   * This is used when the `stacked` prop is enabled and the `iconAfter` prop is\n   * enabled.\n   *\n   * @defaultValue `\"rmd-icon--below\"`\n   */\n  belowClassName?: string;\n\n  /**\n   * Boolean if the icon should be forced into a `<span>` with the class names\n   * applied instead of attempting to clone into the provided icon.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n\n  /**\n   * Boolean if the icon and text should be stacked instead of inline. Note:\n   * You'll normally want to update the container element to have\n   * `display: flex` and `flex-direction: column` for this to work.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Boolean if the icon and content are in a `column-reverse` or `row-reverse`\n   * `flex-direction`. This will swap the different classnames as needed.\n   *\n   * @since 2.5.0\n   * @defaultValue `false`\n   */\n  flexReverse?: boolean;\n}\n\n/**\n * Note: This component **must** be rendered within a flex container unless the\n * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.\n *\n * @example Simple Example\n * ```tsx\n * import { FontIcon } from \"@react-md/core/icon/FontIcon\";\n * import { TextIconSpacing } from \"@react-md/core/icon/TextIconSpacing\"\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextIconSpacing icon={<FontIcon>favorite</FontIcon>}>\n *       Favorite\n *     </TextIconSpacing>\n *   );\n * }\n * ```\n *\n * @example Stacked Example\n * ```tsx\n * import { FontIcon } from \"@react-md/core/icon/FontIcon\";\n * import { TextIconSpacing } from \"@react-md/core/icon/TextIconSpacing\"\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextIconSpacing icon={<FontIcon>favorite</FontIcon>} stacked>\n *       Favorite\n *     </TextIconSpacing>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/text-icon-spacing | TextIconSpacing Demos}\n */\nexport function TextIconSpacing(props: TextIconSpacingProps): ReactElement {\n  const {\n    className,\n    icon: propIcon,\n    children = null,\n    stacked = false,\n    iconAfter = false,\n    flexReverse = false,\n    forceIconWrap = false,\n    beforeClassName = \"rmd-icon--before\",\n    afterClassName = \"rmd-icon--after\",\n    aboveClassName = \"rmd-icon--above\",\n    belowClassName = \"rmd-icon--below\",\n  } = props;\n\n  if (!propIcon) {\n    return <>{children}</>;\n  }\n\n  const isAfter = flexReverse ? !iconAfter : iconAfter;\n  const baseClassName = cnb(\n    {\n      [beforeClassName]: !stacked && !isAfter,\n      [afterClassName]: !stacked && isAfter,\n      [aboveClassName]: stacked && !isAfter,\n      [belowClassName]: stacked && isAfter,\n    },\n    className\n  );\n\n  let iconEl = propIcon;\n  let content = children;\n  if (!forceIconWrap && isValidElement<{ className?: string }>(propIcon)) {\n    const icon = Children.only(propIcon);\n    iconEl = cloneElement(icon, {\n      className: cnb(baseClassName, icon.props.className),\n    });\n  } else if (propIcon) {\n    iconEl = (\n      <span className={cnb(\"rmd-text-icon-spacing\", baseClassName)}>\n        {propIcon}\n      </span>\n    );\n  }\n\n  if (iconEl) {\n    content = (\n      <>\n        {!iconAfter && iconEl}\n        {children}\n        {iconAfter && iconEl}\n      </>\n    );\n  }\n\n  return <>{content}</>;\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","TextIconSpacing","props","className","icon","propIcon","children","stacked","iconAfter","flexReverse","forceIconWrap","beforeClassName","afterClassName","aboveClassName","belowClassName","isAfter","baseClassName","iconEl","content","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,EAGRC,YAAY,EACZC,cAAc,QACT,QAAQ;AAkGf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,SAAS,EACTC,MAAMC,QAAQ,EACdC,WAAW,IAAI,EACfC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,gBAAgB,KAAK,EACrBC,kBAAkB,kBAAkB,EACpCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,iBAAiB,EACnC,GAAGZ;IAEJ,IAAI,CAACG,UAAU;QACb,qBAAO;sBAAGC;;IACZ;IAEA,MAAMS,UAAUN,cAAc,CAACD,YAAYA;IAC3C,MAAMQ,gBAAgBnB,IACpB;QACE,CAACc,gBAAgB,EAAE,CAACJ,WAAW,CAACQ;QAChC,CAACH,eAAe,EAAE,CAACL,WAAWQ;QAC9B,CAACF,eAAe,EAAEN,WAAW,CAACQ;QAC9B,CAACD,eAAe,EAAEP,WAAWQ;IAC/B,GACAZ;IAGF,IAAIc,SAASZ;IACb,IAAIa,UAAUZ;IACd,IAAI,CAACI,+BAAiBV,eAAuCK,WAAW;QACtE,MAAMD,OAAON,SAASqB,IAAI,CAACd;QAC3BY,uBAASlB,aAAaK,MAAM;YAC1BD,WAAWN,IAAImB,eAAeZ,KAAKF,KAAK,CAACC,SAAS;QACpD;IACF,OAAO,IAAIE,UAAU;QACnBY,uBACE,KAACG;YAAKjB,WAAWN,IAAI,yBAAyBmB;sBAC3CX;;IAGP;IAEA,IAAIY,QAAQ;QACVC,wBACE;;gBACG,CAACV,aAAaS;gBACdX;gBACAE,aAAaS;;;IAGpB;IAEA,qBAAO;kBAAGC;;AACZ"}

package/dist/layout/LayoutAppBar.d.ts

@@ -43,7 +43,7 @@ export interface LayoutAppBarProps extends AppBarProps {
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and
  * `LayoutAppBarTitle` since they no longer exist. The only purpose of this
  * component is to dynamically set the `--rmd-layout-header-height` variable.

package/dist/layout/LayoutAppBar.js

@@ -35,7 +35,7 @@ import { useLayoutAppBarHeight } from "./useLayoutAppBarHeight.js";
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and
  * `LayoutAppBarTitle` since they no longer exist. The only purpose of this
  * component is to dynamically set the `--rmd-layout-header-height` variable.

package/dist/layout/LayoutAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutAppBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport {\n  AppBar,\n  type AppBarProps,\n  type CustomAppBarComponent,\n} from \"../app-bar/AppBar.js\";\nimport {\n  SkipToMainContent,\n  type SkipToMainContentProps,\n} from \"../link/SkipToMainContent.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport { type CssPosition, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useLayoutAppBarHeight } from \"./useLayoutAppBarHeight.js\";\n\n/**\n * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props\n */\nexport interface LayoutAppBarProps extends AppBarProps {\n  /** @defaultValue `\"header\"` */\n  as?: CustomAppBarComponent;\n\n  /** @defaultValue `\"fixed\"` */\n  position?: CssPosition;\n\n  /**\n   * Any additional props to pass to the {@link SkipToMainContent} component.\n   */\n  skipProps?: PropsWithRef<SkipToMainContentProps, HTMLAnchorElement>;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to dynamically update the `--rmd-layout-header-offset`\n * based on the current height of this app bar. If you are concerned about\n * javascript bundle size, it is recommended to configure this variable in SCSS\n * instead.\n *\n * @example Static Height\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n * }\n * ```\n *\n * @example Media Query Height Changes\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n *   @include everything.tablet-media {\n *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);\n *   }\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and\n * `LayoutAppBarTitle` since they no longer exist. The only purpose of this\n * component is to dynamically set the `--rmd-layout-header-height` variable.\n */\nexport const LayoutAppBar = forwardRef<HTMLDivElement, LayoutAppBarProps>(\n  function LayoutAppBar(props, ref) {\n    const {\n      as = \"header\",\n      id: propId,\n      position = \"fixed\",\n      skipProps,\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"layout-header\");\n    const { appBarRef, variables } = useLayoutAppBarHeight(ref);\n    useCSSVariables(variables);\n\n    return (\n      <AppBar\n        {...remaining}\n        id={id}\n        as={as}\n        ref={appBarRef}\n        position={position}\n      >\n        <SkipToMainContent {...skipProps} />\n        {children}\n      </AppBar>\n    );\n  }\n);\n"],"names":["forwardRef","AppBar","SkipToMainContent","useCSSVariables","useEnsuredId","useLayoutAppBarHeight","LayoutAppBar","props","ref","as","id","propId","position","skipProps","children","remaining","appBarRef","variables"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SACEC,MAAM,QAGD,uBAAuB;AAC9B,SACEC,iBAAiB,QAEZ,+BAA+B;AACtC,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,qBAAqB,QAAQ,6BAA6B;AAkBnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,MAAMC,6BAAeN,WAC1B,SAASM,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,KAAK,QAAQ,EACbC,IAAIC,MAAM,EACVC,WAAW,OAAO,EAClBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMG,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAE,GAAGZ,sBAAsBG;IACvDL,gBAAgBc;IAEhB,qBACE,MAAChB;QACE,GAAGc,SAAS;QACbL,IAAIA;QACJD,IAAIA;QACJD,KAAKQ;QACLJ,UAAUA;;0BAEV,KAACV;gBAAmB,GAAGW,SAAS;;YAC/BC;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/LayoutAppBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport {\n  AppBar,\n  type AppBarProps,\n  type CustomAppBarComponent,\n} from \"../app-bar/AppBar.js\";\nimport {\n  SkipToMainContent,\n  type SkipToMainContentProps,\n} from \"../link/SkipToMainContent.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport { type CssPosition, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useLayoutAppBarHeight } from \"./useLayoutAppBarHeight.js\";\n\n/**\n * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props\n */\nexport interface LayoutAppBarProps extends AppBarProps {\n  /** @defaultValue `\"header\"` */\n  as?: CustomAppBarComponent;\n\n  /** @defaultValue `\"fixed\"` */\n  position?: CssPosition;\n\n  /**\n   * Any additional props to pass to the {@link SkipToMainContent} component.\n   */\n  skipProps?: PropsWithRef<SkipToMainContentProps, HTMLAnchorElement>;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to dynamically update the `--rmd-layout-header-offset`\n * based on the current height of this app bar. If you are concerned about\n * javascript bundle size, it is recommended to configure this variable in SCSS\n * instead.\n *\n * @example Static Height\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n * }\n * ```\n *\n * @example Media Query Height Changes\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n *   @include everything.tablet-media {\n *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);\n *   }\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and\n * `LayoutAppBarTitle` since they no longer exist. The only purpose of this\n * component is to dynamically set the `--rmd-layout-header-height` variable.\n */\nexport const LayoutAppBar = forwardRef<HTMLDivElement, LayoutAppBarProps>(\n  function LayoutAppBar(props, ref) {\n    const {\n      as = \"header\",\n      id: propId,\n      position = \"fixed\",\n      skipProps,\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"layout-header\");\n    const { appBarRef, variables } = useLayoutAppBarHeight(ref);\n    useCSSVariables(variables);\n\n    return (\n      <AppBar\n        {...remaining}\n        id={id}\n        as={as}\n        ref={appBarRef}\n        position={position}\n      >\n        <SkipToMainContent {...skipProps} />\n        {children}\n      </AppBar>\n    );\n  }\n);\n"],"names":["forwardRef","AppBar","SkipToMainContent","useCSSVariables","useEnsuredId","useLayoutAppBarHeight","LayoutAppBar","props","ref","as","id","propId","position","skipProps","children","remaining","appBarRef","variables"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SACEC,MAAM,QAGD,uBAAuB;AAC9B,SACEC,iBAAiB,QAEZ,+BAA+B;AACtC,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,qBAAqB,QAAQ,6BAA6B;AAkBnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,MAAMC,6BAAeN,WAC1B,SAASM,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,KAAK,QAAQ,EACbC,IAAIC,MAAM,EACVC,WAAW,OAAO,EAClBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMG,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAE,GAAGZ,sBAAsBG;IACvDL,gBAAgBc;IAEhB,qBACE,MAAChB;QACE,GAAGc,SAAS;QACbL,IAAIA;QACJD,IAAIA;QACJD,KAAKQ;QACLJ,UAAUA;;0BAEV,KAACV;gBAAmB,GAAGW,SAAS;;YAC/BC;;;AAGP,GACA"}

package/dist/layout/LayoutNav.d.ts

@@ -106,7 +106,7 @@ export interface LayoutNavProps extends HTMLAttributes<HTMLDivElement>, BaseShee
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
 export declare const LayoutNav: import("react").ForwardRefExoticComponent<LayoutNavProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/layout/LayoutNav.js

@@ -83,7 +83,7 @@ import { layoutNav } from "./layoutNavStyles.js";
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */ export const LayoutNav = /*#__PURE__*/ forwardRef(function LayoutNav(props, ref) {
     const { as: Component = "nav", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = Component == "nav" && !ariaLabelledBy ? "Navigation" : undefined, expanded, children, className, timeout = DEFAULT_SHEET_TIMEOUT, classNames = DEFAULT_SHEET_CLASSNAMES, appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExited, onExiting, appBarOffset, ...remaining } = props;

package/dist/layout/LayoutNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutNav.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type BaseSheetClassNameOptions,\n  DEFAULT_SHEET_CLASSNAMES,\n  DEFAULT_SHEET_TIMEOUT,\n  sheet,\n} from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionActions,\n  type TransitionCallbacks,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { layoutNav } from \"./layoutNavStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutNavProps\n  extends HTMLAttributes<HTMLDivElement>,\n    BaseSheetClassNameOptions,\n    TransitionCallbacks,\n    TransitionActions {\n  children: ReactNode;\n\n  /**\n   * The component to render as.\n   *\n   * @defaultValue `\"nav\"`\n   */\n  as?: \"nav\" | \"div\";\n\n  /**\n   * Set this to `true` to display the navigation.\n   */\n  expanded: boolean;\n\n  /**\n   * Set this to `true` to force the navigation to appear below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /** @defaultValue {@link DEFAULT_SHEET_TIMEOUT} */\n  timeout?: TransitionTimeout;\n  /** @defaultValue {@link DEFAULT_SHEET_CLASSNAMES} */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a persistent navigation on the left of the\n * page. There is some built-in functionality to support resizing with the\n * `LayoutWindowSplitter` and expandable layouts. Do not use this component for\n * temporary navigation and instead use a `Sheet`.\n *\n * @example Full Height Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: true,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Toggleable Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { toggled: expanded, toggle } = useToggle();\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: expanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           onClick={toggle}\n *           buttonType=\"icon\"\n *         >\n *           <MenuIcon />\n *         </Button>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset={expanded} appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(\n  function LayoutNav(props, ref) {\n    const {\n      as: Component = \"nav\",\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = Component == \"nav\" && !ariaLabelledBy\n        ? \"Navigation\"\n        : undefined,\n      expanded,\n      children,\n      className,\n      timeout = DEFAULT_SHEET_TIMEOUT,\n      classNames = DEFAULT_SHEET_CLASSNAMES,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const { elementProps } = useCSSTransition({\n      nodeRef: ref,\n      timeout,\n      className: cnb(\n        layoutNav({ appBarOffset }),\n        sheet({\n          className,\n          raised: false,\n          horizontalSize: \"none\",\n        })\n      ),\n      classNames,\n      enter,\n      exit,\n      appear,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      exitedHidden: true,\n      transitionIn: expanded,\n    });\n\n    return (\n      <Component\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...remaining}\n        {...elementProps}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","useCSSTransition","layoutNav","LayoutNav","props","ref","as","Component","ariaLabelledBy","ariaLabel","undefined","expanded","children","className","timeout","classNames","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExited","onExiting","appBarOffset","remaining","elementProps","nodeRef","raised","horizontalSize","exitedHidden","transitionIn","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAEEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QACA,qBAAqB;AAO5B,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,SAAS,QAAQ,uBAAuB;AAsCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,YAAY,KAAK,EACrB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,aAAa,SAAS,CAACC,iBAC7C,eACAE,SAAS,EACbC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAUf,qBAAqB,EAC/BgB,aAAajB,wBAAwB,EACrCkB,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGtB;IACJ,MAAM,EAAEuB,YAAY,EAAE,GAAG1B,iBAAiB;QACxC2B,SAASvB;QACTS;QACAD,WAAWjB,IACTM,UAAU;YAAEuB;QAAa,IACzBzB,MAAM;YACJa;YACAgB,QAAQ;YACRC,gBAAgB;QAClB;QAEFf;QACAE;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO,cAAc;QACdC,cAAcrB;IAChB;IAEA,qBACE,KAACJ;QACC0B,cAAYxB;QACZyB,mBAAiB1B;QAChB,GAAGkB,SAAS;QACZ,GAAGC,YAAY;kBAEff;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/LayoutNav.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type BaseSheetClassNameOptions,\n  DEFAULT_SHEET_CLASSNAMES,\n  DEFAULT_SHEET_TIMEOUT,\n  sheet,\n} from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionActions,\n  type TransitionCallbacks,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { layoutNav } from \"./layoutNavStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutNavProps\n  extends HTMLAttributes<HTMLDivElement>,\n    BaseSheetClassNameOptions,\n    TransitionCallbacks,\n    TransitionActions {\n  children: ReactNode;\n\n  /**\n   * The component to render as.\n   *\n   * @defaultValue `\"nav\"`\n   */\n  as?: \"nav\" | \"div\";\n\n  /**\n   * Set this to `true` to display the navigation.\n   */\n  expanded: boolean;\n\n  /**\n   * Set this to `true` to force the navigation to appear below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /** @defaultValue {@link DEFAULT_SHEET_TIMEOUT} */\n  timeout?: TransitionTimeout;\n  /** @defaultValue {@link DEFAULT_SHEET_CLASSNAMES} */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a persistent navigation on the left of the\n * page. There is some built-in functionality to support resizing with the\n * `LayoutWindowSplitter` and expandable layouts. Do not use this component for\n * temporary navigation and instead use a `Sheet`.\n *\n * @example Full Height Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: true,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Toggleable Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { toggled: expanded, toggle } = useToggle();\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: expanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           onClick={toggle}\n *           buttonType=\"icon\"\n *         >\n *           <MenuIcon />\n *         </Button>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset={expanded} appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(\n  function LayoutNav(props, ref) {\n    const {\n      as: Component = \"nav\",\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = Component == \"nav\" && !ariaLabelledBy\n        ? \"Navigation\"\n        : undefined,\n      expanded,\n      children,\n      className,\n      timeout = DEFAULT_SHEET_TIMEOUT,\n      classNames = DEFAULT_SHEET_CLASSNAMES,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const { elementProps } = useCSSTransition({\n      nodeRef: ref,\n      timeout,\n      className: cnb(\n        layoutNav({ appBarOffset }),\n        sheet({\n          className,\n          raised: false,\n          horizontalSize: \"none\",\n        })\n      ),\n      classNames,\n      enter,\n      exit,\n      appear,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      exitedHidden: true,\n      transitionIn: expanded,\n    });\n\n    return (\n      <Component\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...remaining}\n        {...elementProps}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","useCSSTransition","layoutNav","LayoutNav","props","ref","as","Component","ariaLabelledBy","ariaLabel","undefined","expanded","children","className","timeout","classNames","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExited","onExiting","appBarOffset","remaining","elementProps","nodeRef","raised","horizontalSize","exitedHidden","transitionIn","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAEEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QACA,qBAAqB;AAO5B,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,SAAS,QAAQ,uBAAuB;AAsCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,YAAY,KAAK,EACrB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,aAAa,SAAS,CAACC,iBAC7C,eACAE,SAAS,EACbC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAUf,qBAAqB,EAC/BgB,aAAajB,wBAAwB,EACrCkB,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGtB;IACJ,MAAM,EAAEuB,YAAY,EAAE,GAAG1B,iBAAiB;QACxC2B,SAASvB;QACTS;QACAD,WAAWjB,IACTM,UAAU;YAAEuB;QAAa,IACzBzB,MAAM;YACJa;YACAgB,QAAQ;YACRC,gBAAgB;QAClB;QAEFf;QACAE;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO,cAAc;QACdC,cAAcrB;IAChB;IAEA,qBACE,KAACJ;QACC0B,cAAYxB;QACZyB,mBAAiB1B;QAChB,GAAGkB,SAAS;QACZ,GAAGC,YAAY;kBAEff;;AAGP,GACA"}

package/dist/layout/LayoutWindowSplitter.d.ts

@@ -68,7 +68,7 @@ export interface LayoutWindowSplitterProps extends WindowSplitterWidgetProps<HTM
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
 export declare const LayoutWindowSplitter: import("react").ForwardRefExoticComponent<Omit<LayoutWindowSplitterProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/layout/LayoutWindowSplitter.js

@@ -60,7 +60,7 @@ import { layoutWindowSplitter } from "./layoutWindowSplitterStyles.js";
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */ export const LayoutWindowSplitter = /*#__PURE__*/ forwardRef(function LayoutWindowSplitter(props, ref) {
     const { "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = ariaLabelledBy ? undefined : "Resize Navigation", appBarOffset, disableResponsive, className, navWidth, ...remaining } = props;

package/dist/layout/LayoutWindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutWindowSplitter.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useMemo } from \"react\";\n\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport {\n  type BaseWindowSplitterProps,\n  WindowSplitter,\n} from \"../window-splitter/WindowSplitter.js\";\nimport { type WindowSplitterWidgetProps } from \"../window-splitter/useWindowSplitter.js\";\nimport {\n  type LayoutWindowSplitterClassNameOptions,\n  layoutWindowSplitter,\n} from \"./layoutWindowSplitterStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterProps\n  extends WindowSplitterWidgetProps<HTMLButtonElement>,\n    Omit<\n      BaseWindowSplitterProps,\n      keyof WindowSplitterWidgetProps<HTMLButtonElement>\n    >,\n    LayoutWindowSplitterClassNameOptions {\n  /** @defaultValue `\"Resize Navigation\"` */\n  \"aria-label\"?: string;\n\n  /**\n   * The current navigation width (in px).\n   */\n  navWidth: number;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to resize the `LayoutNav` component.\n *\n * @see {@link useResizableExpandableLayout} for a default implementation for\n * this component.\n *\n * @example Dynamic Resizing\n * ```tsx\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { LayoutWindowSplitter } from \"@react-md/core/layout/LayoutWindowSplitter\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { NoSsr } from \"@react-md/core/NoSsr\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useWindowSize } from \"@react-md/core/useWindowSize\";\n * import type { ReactElement, PropsWithChildren } from \"react\"\n *\n * function MyWindowSplitter(): ReactElement {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const min = 96;\n *   const max = Math.max(600, width * .7);\n *\n *   const { value, splitterProps } = useWindowSplitter({\n *     min,\n *     max,\n *     defaultValue: 256,\n *   });\n *\n *   return (\n *     <LayoutWindowSplitter\n *       aria-controls=\"layout-nav-id\"\n *       {...splitterProps}\n *       value={value}\n *     />\n *   );\n * }\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   return (\n *     <>\n *       <LayoutNav id=\"layout-nav\" {...otherProps}>\n *         <YourNavigation />\n *       </LayoutNav>\n *       // only required when using SSR\n *       <NoSsr>\n *         <MyWindowSplitter />\n *       </NoSsr>\n *       <Main navOffset>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport const LayoutWindowSplitter = forwardRef<\n  HTMLButtonElement,\n  LayoutWindowSplitterProps\n>(function LayoutWindowSplitter(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = ariaLabelledBy ? undefined : \"Resize Navigation\",\n    appBarOffset,\n    disableResponsive,\n    className,\n    navWidth,\n    ...remaining\n  } = props;\n\n  useCSSVariables<DefinedCSSVariableName>(\n    useMemo(\n      () => [{ name: \"--rmd-layout-size\", value: `${navWidth}px` }],\n      [navWidth]\n    )\n  );\n\n  return (\n    <WindowSplitter\n      {...remaining}\n      ref={ref}\n      aria-label={ariaLabel as string}\n      aria-labelledby={ariaLabelledBy}\n      className={layoutWindowSplitter({\n        appBarOffset,\n        disableResponsive,\n        className,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","useMemo","useCSSVariables","WindowSplitter","layoutWindowSplitter","LayoutWindowSplitter","props","ref","ariaLabelledBy","ariaLabel","undefined","appBarOffset","disableResponsive","className","navWidth","remaining","name","value","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAG5C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAEEC,cAAc,QACT,uCAAuC;AAE9C,SAEEC,oBAAoB,QACf,kCAAkC;AAqBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DC,GACD,OAAO,MAAMC,qCAAuBL,WAGlC,SAASK,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,mBAAmB,EAC1EC,YAAY,EACZC,iBAAiB,EACjBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJJ,gBACED,QACE,IAAM;YAAC;gBAAEe,MAAM;gBAAqBC,OAAO,GAAGH,SAAS,EAAE,CAAC;YAAC;SAAE,EAC7D;QAACA;KAAS;IAId,qBACE,KAACX;QACE,GAAGY,SAAS;QACbR,KAAKA;QACLW,cAAYT;QACZU,mBAAiBX;QACjBK,WAAWT,qBAAqB;YAC9BO;YACAC;YACAC;QACF;;AAGN,GAAG"}
+{"version":3,"sources":["../../src/layout/LayoutWindowSplitter.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useMemo } from \"react\";\n\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport {\n  type BaseWindowSplitterProps,\n  WindowSplitter,\n} from \"../window-splitter/WindowSplitter.js\";\nimport { type WindowSplitterWidgetProps } from \"../window-splitter/useWindowSplitter.js\";\nimport {\n  type LayoutWindowSplitterClassNameOptions,\n  layoutWindowSplitter,\n} from \"./layoutWindowSplitterStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterProps\n  extends WindowSplitterWidgetProps<HTMLButtonElement>,\n    Omit<\n      BaseWindowSplitterProps,\n      keyof WindowSplitterWidgetProps<HTMLButtonElement>\n    >,\n    LayoutWindowSplitterClassNameOptions {\n  /** @defaultValue `\"Resize Navigation\"` */\n  \"aria-label\"?: string;\n\n  /**\n   * The current navigation width (in px).\n   */\n  navWidth: number;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to resize the `LayoutNav` component.\n *\n * @see {@link useResizableExpandableLayout} for a default implementation for\n * this component.\n *\n * @example Dynamic Resizing\n * ```tsx\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { LayoutWindowSplitter } from \"@react-md/core/layout/LayoutWindowSplitter\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { NoSsr } from \"@react-md/core/NoSsr\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useWindowSize } from \"@react-md/core/useWindowSize\";\n * import type { ReactElement, PropsWithChildren } from \"react\"\n *\n * function MyWindowSplitter(): ReactElement {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const min = 96;\n *   const max = Math.max(600, width * .7);\n *\n *   const { value, splitterProps } = useWindowSplitter({\n *     min,\n *     max,\n *     defaultValue: 256,\n *   });\n *\n *   return (\n *     <LayoutWindowSplitter\n *       aria-controls=\"layout-nav-id\"\n *       {...splitterProps}\n *       value={value}\n *     />\n *   );\n * }\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   return (\n *     <>\n *       <LayoutNav id=\"layout-nav\" {...otherProps}>\n *         <YourNavigation />\n *       </LayoutNav>\n *       // only required when using SSR\n *       <NoSsr>\n *         <MyWindowSplitter />\n *       </NoSsr>\n *       <Main navOffset>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport const LayoutWindowSplitter = forwardRef<\n  HTMLButtonElement,\n  LayoutWindowSplitterProps\n>(function LayoutWindowSplitter(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = ariaLabelledBy ? undefined : \"Resize Navigation\",\n    appBarOffset,\n    disableResponsive,\n    className,\n    navWidth,\n    ...remaining\n  } = props;\n\n  useCSSVariables<DefinedCSSVariableName>(\n    useMemo(\n      () => [{ name: \"--rmd-layout-size\", value: `${navWidth}px` }],\n      [navWidth]\n    )\n  );\n\n  return (\n    <WindowSplitter\n      {...remaining}\n      ref={ref}\n      aria-label={ariaLabel as string}\n      aria-labelledby={ariaLabelledBy}\n      className={layoutWindowSplitter({\n        appBarOffset,\n        disableResponsive,\n        className,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","useMemo","useCSSVariables","WindowSplitter","layoutWindowSplitter","LayoutWindowSplitter","props","ref","ariaLabelledBy","ariaLabel","undefined","appBarOffset","disableResponsive","className","navWidth","remaining","name","value","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAG5C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAEEC,cAAc,QACT,uCAAuC;AAE9C,SAEEC,oBAAoB,QACf,kCAAkC;AAqBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DC,GACD,OAAO,MAAMC,qCAAuBL,WAGlC,SAASK,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,mBAAmB,EAC1EC,YAAY,EACZC,iBAAiB,EACjBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJJ,gBACED,QACE,IAAM;YAAC;gBAAEe,MAAM;gBAAqBC,OAAO,GAAGH,SAAS,EAAE,CAAC;YAAC;SAAE,EAC7D;QAACA;KAAS;IAId,qBACE,KAACX;QACE,GAAGY,SAAS;QACbR,KAAKA;QACLW,cAAYT;QACZU,mBAAiBX;QACjBK,WAAWT,qBAAqB;YAC9BO;YACAC;YACAC;QACF;;AAGN,GAAG"}

package/dist/layout/Main.d.ts

@@ -44,7 +44,7 @@ export interface MainProps extends HTMLAttributes<HTMLElement>, MainClassNameOpt
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0 Renamed from `LayoutMain` removed a lot of
  * functionality to keep this component simple.
  */

package/dist/layout/Main.js

@@ -30,7 +30,7 @@ import { useMainTabIndex } from "./useMainTabIndex.js";
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0 Renamed from `LayoutMain` removed a lot of
  * functionality to keep this component simple.
  */ export const Main = /*#__PURE__*/ forwardRef(function Main(props, ref) {

package/dist/layout/Main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/Main.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n} from \"react\";\n\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type MainClassNameOptions, main } from \"./mainStyles.js\";\nimport { useMainTabIndex } from \"./useMainTabIndex.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomMainElement = ElementType<\n  HTMLAttributes<HTMLElement> & {\n    ref: Ref<HTMLElement>;\n    className?: string;\n    tabIndex?: number;\n  }\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MainProps\n  extends HTMLAttributes<HTMLElement>,\n    MainClassNameOptions {\n  /**\n   * @defaultValue `\"main\"`\n   */\n  as?: CustomMainElement;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is really only used to dynamically set the `tabIndex` to `-1`\n * while using a keyboard for the `SkipToMainContent` component's focus behavior\n * to work correctly. If you don't need that functionality, use the {@link main}\n * style utility instead.\n *\n * @example Styles Only\n * ```tsx\n * import { main as mainStyles } from \"@react-md/core/layout/mainStyles\":\n *\n * function MyCustomMainElement({ children }) {\n *   return (\n *     <main\n *       className={mainStyles({\n *         navOffset: true,\n *         appBarOffset: true,\n *       })}\n *     >\n *       {children}\n *     </main>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0 Renamed from `LayoutMain` removed a lot of\n * functionality to keep this component simple.\n */\nexport const Main = forwardRef<HTMLElement, MainProps>(\n  function Main(props, ref) {\n    const {\n      as: Component = \"main\",\n      id: propId,\n      className,\n      children,\n      tabIndex: propTabIndex,\n      navOffset,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"main\");\n    const tabIndex = useMainTabIndex(propTabIndex);\n\n    return (\n      <Component\n        {...remaining}\n        id={id}\n        ref={ref}\n        className={main({ navOffset, appBarOffset, className })}\n        tabIndex={tabIndex}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","main","useMainTabIndex","Main","props","ref","as","Component","id","propId","className","children","tabIndex","propTabIndex","navOffset","appBarOffset","remaining"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,QACL,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAAoCC,IAAI,QAAQ,kBAAkB;AAClE,SAASC,eAAe,QAAQ,uBAAuB;AA0BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,qBAAOJ,WAClB,SAASI,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,IAAIC,YAAY,MAAM,EACtBC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,UAAUC,YAAY,EACtBC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGZ;IACJ,MAAMI,KAAKR,aAAaS,QAAQ;IAChC,MAAMG,WAAWV,gBAAgBW;IAEjC,qBACE,KAACN;QACE,GAAGS,SAAS;QACbR,IAAIA;QACJH,KAAKA;QACLK,WAAWT,KAAK;YAAEa;YAAWC;YAAcL;QAAU;QACrDE,UAAUA;kBAETD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/Main.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n} from \"react\";\n\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type MainClassNameOptions, main } from \"./mainStyles.js\";\nimport { useMainTabIndex } from \"./useMainTabIndex.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomMainElement = ElementType<\n  HTMLAttributes<HTMLElement> & {\n    ref: Ref<HTMLElement>;\n    className?: string;\n    tabIndex?: number;\n  }\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MainProps\n  extends HTMLAttributes<HTMLElement>,\n    MainClassNameOptions {\n  /**\n   * @defaultValue `\"main\"`\n   */\n  as?: CustomMainElement;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is really only used to dynamically set the `tabIndex` to `-1`\n * while using a keyboard for the `SkipToMainContent` component's focus behavior\n * to work correctly. If you don't need that functionality, use the {@link main}\n * style utility instead.\n *\n * @example Styles Only\n * ```tsx\n * import { main as mainStyles } from \"@react-md/core/layout/mainStyles\":\n *\n * function MyCustomMainElement({ children }) {\n *   return (\n *     <main\n *       className={mainStyles({\n *         navOffset: true,\n *         appBarOffset: true,\n *       })}\n *     >\n *       {children}\n *     </main>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0 Renamed from `LayoutMain` removed a lot of\n * functionality to keep this component simple.\n */\nexport const Main = forwardRef<HTMLElement, MainProps>(\n  function Main(props, ref) {\n    const {\n      as: Component = \"main\",\n      id: propId,\n      className,\n      children,\n      tabIndex: propTabIndex,\n      navOffset,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"main\");\n    const tabIndex = useMainTabIndex(propTabIndex);\n\n    return (\n      <Component\n        {...remaining}\n        id={id}\n        ref={ref}\n        className={main({ navOffset, appBarOffset, className })}\n        tabIndex={tabIndex}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","main","useMainTabIndex","Main","props","ref","as","Component","id","propId","className","children","tabIndex","propTabIndex","navOffset","appBarOffset","remaining"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,QACL,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAAoCC,IAAI,QAAQ,kBAAkB;AAClE,SAASC,eAAe,QAAQ,uBAAuB;AA0BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,qBAAOJ,WAClB,SAASI,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,IAAIC,YAAY,MAAM,EACtBC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,UAAUC,YAAY,EACtBC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGZ;IACJ,MAAMI,KAAKR,aAAaS,QAAQ;IAChC,MAAMG,WAAWV,gBAAgBW;IAEjC,qBACE,KAACN;QACE,GAAGS,SAAS;QACbR,IAAIA;QACJH,KAAKA;QACLK,WAAWT,KAAK;YAAEa;YAAWC;YAAcL;QAAU;QACrDE,UAAUA;kBAETD;;AAGP,GACA"}

package/dist/layout/useExpandableLayout.d.ts

@@ -180,7 +180,7 @@ export interface ExpandableLayoutImplementation extends TemporaryLayoutImplement
  *   );
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  * @see {@link useResizableLayout}
  */

package/dist/layout/useExpandableLayout.js

@@ -106,7 +106,7 @@ import { useTemporaryLayout } from "./useTemporaryLayout.js";
  *   );
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  * @see {@link useResizableLayout}
  */ export function useExpandableLayout(options) {

package/dist/layout/useExpandableLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useExpandableLayout.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type AppSize } from \"../media-queries/appSize.js\";\nimport { useMediaQuery } from \"../media-queries/useMediaQuery.js\";\nimport { type CSSTransitionElementProps } from \"../transition/types.js\";\nimport { type CssPosition, type UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { type LayoutNavProps } from \"./LayoutNav.js\";\nimport {\n  type HorizontalLayoutTransitionOptions,\n  useHorizontalLayoutTransition,\n} from \"./useHorizontalLayoutTransition.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useResizableLayout } from \"./useResizableLayout.js\";\nimport {\n  type ProvidedLayoutNavToggleProps,\n  type ProvidedTemporaryLayoutAppBarProps,\n  type ProvidedTemporaryLayoutMainProps,\n  type TemporaryLayoutImplementation,\n  type TemporaryLayoutOptions,\n  useTemporaryLayout,\n} from \"./useTemporaryLayout.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutOptions extends TemporaryLayoutOptions {\n  /** @defaultValue `\"fixed\"` */\n  appBarPosition?: CssPosition;\n\n  /** @defaultValue `false` */\n  defaultExpanded?: UseStateInitializer<boolean>;\n\n  /**\n   * Set this to `true` if the expandable navigation should be the full height\n   * of the screen. This will also update the app bar so that it is not covered\n   * by the navigation. The default behavior is to place the navigation below\n   * the fixed header.\n   *\n   * Set this to `\"static\"` to make the navigation span the full height of the\n   * screen and hide the button until the screen shrinks to the temporary\n   * layout type.\n   *\n   * @defaultValue `false`\n   */\n  fullHeightNav?: boolean | \"static\";\n\n  /** @see {@link HorizontalLayoutTransitionOptions} */\n  transitionProps?: Omit<HorizontalLayoutTransitionOptions, \"transitionIn\">;\n\n  /**\n   * The default behavior is to use the temporary layout until the\n   * {@link AppSize.isTablet} is `true`. Set this to `\"desktop\"` to use the\n   * temporary layout until {@link AppSize.isDesktop} is `true`. Otherwise,\n   * provide a media query string to use the temporary layout until the media\n   * query matches\n   *\n   * @example Custom Media Query\n   * ```tsx\n   * useExpandableLayout({\n   *   ...options,\n   *   // display the expandable layout once the min-width is at least 1201px\n   *   temporaryUntil: \"screen and (min-width: 1201px)\",\n   * });\n   * ```\n   *\n   * @defaultValue `\"tablet\"`\n   */\n  temporaryUntil?: \"tablet\" | \"desktop\" | (string & {});\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutMainProps\n  extends ProvidedTemporaryLayoutMainProps,\n    CSSTransitionElementProps<HTMLElement> {}\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutNavProps = Pick<\n  LayoutNavProps,\n  \"expanded\" | \"appBarOffset\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps &\n  Partial<CSSTransitionElementProps<HTMLElement>>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedExpandableLayoutNavToggleProps\n  extends ProvidedLayoutNavToggleProps {\n  className: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutImplementation\n  extends TemporaryLayoutImplementation {\n  temporary: boolean;\n  persistent: boolean;\n  expanded: boolean;\n  expandNavigation: () => void;\n  collapseNavigation: () => void;\n  toggleNavigation: () => void;\n  appBarProps: ProvidedLayoutAppBarProps;\n  mainProps: ProvidedLayoutMainProps;\n  navToggleProps: ProvidedExpandableLayoutNavToggleProps;\n  expandableNavProps: ProvidedLayoutNavProps;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useExpandableLayout } from \"@react-md/core/layout/useExpandableLayout\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { type ReactElement, type ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation\";\n *\n * export interface LayoutProps {\n *   children: ReactNode;\n * }\n *\n * export function Layout(props: LayoutProps): ReactElement {\n *   const { children } = props;\n *\n *   // choose whichever one for your app\n *   // nextjs app dir\n *   const pathname = usePathname();\n *   // nextjs pages\n *   const { pathname } = useRouter();\n *   // react router\n *   const { pathname } = useHistory();\n *\n *   const {\n *     temporary,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n *       <LayoutNav {...expandableNavProps}>\n *         <CustomNavigation />\n *       </LayoutNav>\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * }\n * ```\n *\n * If you have a large navigation panel, you can conditionally render the\n * `LayoutNav` with the `persistent` boolean returned by the hook which will\n * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.\n *\n * @example Safely Conditionally Rendering\n * ```diff\n *   const {\n *     temporary,\n * +   persistent,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n * -     <LayoutNav {...expandableNavProps}>\n * -       <CustomNavigation />\n * -     </LayoutNav>\n * +     {persistent && (\n * +       <LayoutNav {...expandableNavProps}>\n * +         <CustomNavigation />\n * +       </LayoutNav>\n * +     )}\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * ```\n *\n * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n * @see {@link useResizableLayout}\n */\nexport function useExpandableLayout(\n  options: ExpandableLayoutOptions\n): ExpandableLayoutImplementation {\n  const {\n    fullHeightNav = false,\n    temporaryUntil = \"tablet\",\n    transitionProps,\n    defaultExpanded = fullHeightNav === \"static\",\n    ...temporaryOptions\n  } = options;\n\n  const ssr = useSsr();\n  const {\n    appBarProps,\n    mainProps,\n    navToggleProps,\n    temporaryNavProps,\n    hideTemporaryNav,\n    showTemporaryNav,\n    visible,\n  } = useTemporaryLayout(temporaryOptions);\n\n  const {\n    toggled: expanded,\n    enable: expandNavigation,\n    disable: collapseNavigation,\n    toggle: toggleNavigation,\n  } = useToggle(defaultExpanded);\n  const { elementProps } = useHorizontalLayoutTransition({\n    ...transitionProps,\n    transitionIn: expanded,\n  });\n  const { isPhone, isDesktop } = useAppSize();\n  const isAppSizeMatch =\n    temporaryUntil === \"tablet\" || temporaryUntil === \"desktop\";\n  const matches = useMediaQuery(temporaryUntil, isAppSizeMatch);\n  const temporary = isAppSizeMatch\n    ? isPhone || (temporaryUntil === \"desktop\" && !isDesktop)\n    : !matches;\n\n  return {\n    visible,\n    temporary,\n    persistent: ssr || !temporary,\n    hideTemporaryNav,\n    showTemporaryNav,\n    expanded,\n    expandNavigation,\n    collapseNavigation,\n    toggleNavigation,\n    appBarProps: {\n      ...appBarProps,\n      ...(fullHeightNav ? elementProps : {}),\n    },\n    mainProps: {\n      ...mainProps,\n      ...elementProps,\n    },\n    temporaryNavProps,\n    expandableNavProps: {\n      expanded,\n      appBarOffset: !fullHeightNav,\n    },\n    navToggleProps: {\n      ...navToggleProps,\n      onClick() {\n        if (temporary) {\n          showTemporaryNav();\n        } else {\n          toggleNavigation();\n        }\n      },\n      className: cnb(fullHeightNav === \"static\" && \"rmd-layout-nav-toggle\"),\n    },\n  };\n}\n"],"names":["cnb","useSsr","useAppSize","useMediaQuery","useToggle","useHorizontalLayoutTransition","useTemporaryLayout","useExpandableLayout","options","fullHeightNav","temporaryUntil","transitionProps","defaultExpanded","temporaryOptions","ssr","appBarProps","mainProps","navToggleProps","temporaryNavProps","hideTemporaryNav","showTemporaryNav","visible","toggled","expanded","enable","expandNavigation","disable","collapseNavigation","toggle","toggleNavigation","elementProps","transitionIn","isPhone","isDesktop","isAppSizeMatch","matches","temporary","persistent","expandableNavProps","appBarOffset","onClick","className"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,UAAU,QAAQ,sCAAsC;AAGjE,SAASC,aAAa,QAAQ,oCAAoC;AAGlE,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAEEC,6BAA6B,QACxB,qCAAqC;AAG5C,SAMEC,kBAAkB,QACb,0BAA0B;AAgGjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuGC,GACD,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EACJC,gBAAgB,KAAK,EACrBC,iBAAiB,QAAQ,EACzBC,eAAe,EACfC,kBAAkBH,kBAAkB,QAAQ,EAC5C,GAAGI,kBACJ,GAAGL;IAEJ,MAAMM,MAAMb;IACZ,MAAM,EACJc,WAAW,EACXC,SAAS,EACTC,cAAc,EACdC,iBAAiB,EACjBC,gBAAgB,EAChBC,gBAAgB,EAChBC,OAAO,EACR,GAAGf,mBAAmBO;IAEvB,MAAM,EACJS,SAASC,QAAQ,EACjBC,QAAQC,gBAAgB,EACxBC,SAASC,kBAAkB,EAC3BC,QAAQC,gBAAgB,EACzB,GAAGzB,UAAUQ;IACd,MAAM,EAAEkB,YAAY,EAAE,GAAGzB,8BAA8B;QACrD,GAAGM,eAAe;QAClBoB,cAAcR;IAChB;IACA,MAAM,EAAES,OAAO,EAAEC,SAAS,EAAE,GAAG/B;IAC/B,MAAMgC,iBACJxB,mBAAmB,YAAYA,mBAAmB;IACpD,MAAMyB,UAAUhC,cAAcO,gBAAgBwB;IAC9C,MAAME,YAAYF,iBACdF,WAAYtB,mBAAmB,aAAa,CAACuB,YAC7C,CAACE;IAEL,OAAO;QACLd;QACAe;QACAC,YAAYvB,OAAO,CAACsB;QACpBjB;QACAC;QACAG;QACAE;QACAE;QACAE;QACAd,aAAa;YACX,GAAGA,WAAW;YACd,GAAIN,gBAAgBqB,eAAe,CAAC,CAAC;QACvC;QACAd,WAAW;YACT,GAAGA,SAAS;YACZ,GAAGc,YAAY;QACjB;QACAZ;QACAoB,oBAAoB;YAClBf;YACAgB,cAAc,CAAC9B;QACjB;QACAQ,gBAAgB;YACd,GAAGA,cAAc;YACjBuB;gBACE,IAAIJ,WAAW;oBACbhB;gBACF,OAAO;oBACLS;gBACF;YACF;YACAY,WAAWzC,IAAIS,kBAAkB,YAAY;QAC/C;IACF;AACF"}
+{"version":3,"sources":["../../src/layout/useExpandableLayout.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type AppSize } from \"../media-queries/appSize.js\";\nimport { useMediaQuery } from \"../media-queries/useMediaQuery.js\";\nimport { type CSSTransitionElementProps } from \"../transition/types.js\";\nimport { type CssPosition, type UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { type LayoutNavProps } from \"./LayoutNav.js\";\nimport {\n  type HorizontalLayoutTransitionOptions,\n  useHorizontalLayoutTransition,\n} from \"./useHorizontalLayoutTransition.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useResizableLayout } from \"./useResizableLayout.js\";\nimport {\n  type ProvidedLayoutNavToggleProps,\n  type ProvidedTemporaryLayoutAppBarProps,\n  type ProvidedTemporaryLayoutMainProps,\n  type TemporaryLayoutImplementation,\n  type TemporaryLayoutOptions,\n  useTemporaryLayout,\n} from \"./useTemporaryLayout.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutOptions extends TemporaryLayoutOptions {\n  /** @defaultValue `\"fixed\"` */\n  appBarPosition?: CssPosition;\n\n  /** @defaultValue `false` */\n  defaultExpanded?: UseStateInitializer<boolean>;\n\n  /**\n   * Set this to `true` if the expandable navigation should be the full height\n   * of the screen. This will also update the app bar so that it is not covered\n   * by the navigation. The default behavior is to place the navigation below\n   * the fixed header.\n   *\n   * Set this to `\"static\"` to make the navigation span the full height of the\n   * screen and hide the button until the screen shrinks to the temporary\n   * layout type.\n   *\n   * @defaultValue `false`\n   */\n  fullHeightNav?: boolean | \"static\";\n\n  /** @see {@link HorizontalLayoutTransitionOptions} */\n  transitionProps?: Omit<HorizontalLayoutTransitionOptions, \"transitionIn\">;\n\n  /**\n   * The default behavior is to use the temporary layout until the\n   * {@link AppSize.isTablet} is `true`. Set this to `\"desktop\"` to use the\n   * temporary layout until {@link AppSize.isDesktop} is `true`. Otherwise,\n   * provide a media query string to use the temporary layout until the media\n   * query matches\n   *\n   * @example Custom Media Query\n   * ```tsx\n   * useExpandableLayout({\n   *   ...options,\n   *   // display the expandable layout once the min-width is at least 1201px\n   *   temporaryUntil: \"screen and (min-width: 1201px)\",\n   * });\n   * ```\n   *\n   * @defaultValue `\"tablet\"`\n   */\n  temporaryUntil?: \"tablet\" | \"desktop\" | (string & {});\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutMainProps\n  extends ProvidedTemporaryLayoutMainProps,\n    CSSTransitionElementProps<HTMLElement> {}\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutNavProps = Pick<\n  LayoutNavProps,\n  \"expanded\" | \"appBarOffset\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps &\n  Partial<CSSTransitionElementProps<HTMLElement>>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedExpandableLayoutNavToggleProps\n  extends ProvidedLayoutNavToggleProps {\n  className: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutImplementation\n  extends TemporaryLayoutImplementation {\n  temporary: boolean;\n  persistent: boolean;\n  expanded: boolean;\n  expandNavigation: () => void;\n  collapseNavigation: () => void;\n  toggleNavigation: () => void;\n  appBarProps: ProvidedLayoutAppBarProps;\n  mainProps: ProvidedLayoutMainProps;\n  navToggleProps: ProvidedExpandableLayoutNavToggleProps;\n  expandableNavProps: ProvidedLayoutNavProps;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useExpandableLayout } from \"@react-md/core/layout/useExpandableLayout\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { type ReactElement, type ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation\";\n *\n * export interface LayoutProps {\n *   children: ReactNode;\n * }\n *\n * export function Layout(props: LayoutProps): ReactElement {\n *   const { children } = props;\n *\n *   // choose whichever one for your app\n *   // nextjs app dir\n *   const pathname = usePathname();\n *   // nextjs pages\n *   const { pathname } = useRouter();\n *   // react router\n *   const { pathname } = useHistory();\n *\n *   const {\n *     temporary,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n *       <LayoutNav {...expandableNavProps}>\n *         <CustomNavigation />\n *       </LayoutNav>\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * }\n * ```\n *\n * If you have a large navigation panel, you can conditionally render the\n * `LayoutNav` with the `persistent` boolean returned by the hook which will\n * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.\n *\n * @example Safely Conditionally Rendering\n * ```diff\n *   const {\n *     temporary,\n * +   persistent,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n * -     <LayoutNav {...expandableNavProps}>\n * -       <CustomNavigation />\n * -     </LayoutNav>\n * +     {persistent && (\n * +       <LayoutNav {...expandableNavProps}>\n * +         <CustomNavigation />\n * +       </LayoutNav>\n * +     )}\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n * @see {@link useResizableLayout}\n */\nexport function useExpandableLayout(\n  options: ExpandableLayoutOptions\n): ExpandableLayoutImplementation {\n  const {\n    fullHeightNav = false,\n    temporaryUntil = \"tablet\",\n    transitionProps,\n    defaultExpanded = fullHeightNav === \"static\",\n    ...temporaryOptions\n  } = options;\n\n  const ssr = useSsr();\n  const {\n    appBarProps,\n    mainProps,\n    navToggleProps,\n    temporaryNavProps,\n    hideTemporaryNav,\n    showTemporaryNav,\n    visible,\n  } = useTemporaryLayout(temporaryOptions);\n\n  const {\n    toggled: expanded,\n    enable: expandNavigation,\n    disable: collapseNavigation,\n    toggle: toggleNavigation,\n  } = useToggle(defaultExpanded);\n  const { elementProps } = useHorizontalLayoutTransition({\n    ...transitionProps,\n    transitionIn: expanded,\n  });\n  const { isPhone, isDesktop } = useAppSize();\n  const isAppSizeMatch =\n    temporaryUntil === \"tablet\" || temporaryUntil === \"desktop\";\n  const matches = useMediaQuery(temporaryUntil, isAppSizeMatch);\n  const temporary = isAppSizeMatch\n    ? isPhone || (temporaryUntil === \"desktop\" && !isDesktop)\n    : !matches;\n\n  return {\n    visible,\n    temporary,\n    persistent: ssr || !temporary,\n    hideTemporaryNav,\n    showTemporaryNav,\n    expanded,\n    expandNavigation,\n    collapseNavigation,\n    toggleNavigation,\n    appBarProps: {\n      ...appBarProps,\n      ...(fullHeightNav ? elementProps : {}),\n    },\n    mainProps: {\n      ...mainProps,\n      ...elementProps,\n    },\n    temporaryNavProps,\n    expandableNavProps: {\n      expanded,\n      appBarOffset: !fullHeightNav,\n    },\n    navToggleProps: {\n      ...navToggleProps,\n      onClick() {\n        if (temporary) {\n          showTemporaryNav();\n        } else {\n          toggleNavigation();\n        }\n      },\n      className: cnb(fullHeightNav === \"static\" && \"rmd-layout-nav-toggle\"),\n    },\n  };\n}\n"],"names":["cnb","useSsr","useAppSize","useMediaQuery","useToggle","useHorizontalLayoutTransition","useTemporaryLayout","useExpandableLayout","options","fullHeightNav","temporaryUntil","transitionProps","defaultExpanded","temporaryOptions","ssr","appBarProps","mainProps","navToggleProps","temporaryNavProps","hideTemporaryNav","showTemporaryNav","visible","toggled","expanded","enable","expandNavigation","disable","collapseNavigation","toggle","toggleNavigation","elementProps","transitionIn","isPhone","isDesktop","isAppSizeMatch","matches","temporary","persistent","expandableNavProps","appBarOffset","onClick","className"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,UAAU,QAAQ,sCAAsC;AAGjE,SAASC,aAAa,QAAQ,oCAAoC;AAGlE,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAEEC,6BAA6B,QACxB,qCAAqC;AAG5C,SAMEC,kBAAkB,QACb,0BAA0B;AAgGjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuGC,GACD,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EACJC,gBAAgB,KAAK,EACrBC,iBAAiB,QAAQ,EACzBC,eAAe,EACfC,kBAAkBH,kBAAkB,QAAQ,EAC5C,GAAGI,kBACJ,GAAGL;IAEJ,MAAMM,MAAMb;IACZ,MAAM,EACJc,WAAW,EACXC,SAAS,EACTC,cAAc,EACdC,iBAAiB,EACjBC,gBAAgB,EAChBC,gBAAgB,EAChBC,OAAO,EACR,GAAGf,mBAAmBO;IAEvB,MAAM,EACJS,SAASC,QAAQ,EACjBC,QAAQC,gBAAgB,EACxBC,SAASC,kBAAkB,EAC3BC,QAAQC,gBAAgB,EACzB,GAAGzB,UAAUQ;IACd,MAAM,EAAEkB,YAAY,EAAE,GAAGzB,8BAA8B;QACrD,GAAGM,eAAe;QAClBoB,cAAcR;IAChB;IACA,MAAM,EAAES,OAAO,EAAEC,SAAS,EAAE,GAAG/B;IAC/B,MAAMgC,iBACJxB,mBAAmB,YAAYA,mBAAmB;IACpD,MAAMyB,UAAUhC,cAAcO,gBAAgBwB;IAC9C,MAAME,YAAYF,iBACdF,WAAYtB,mBAAmB,aAAa,CAACuB,YAC7C,CAACE;IAEL,OAAO;QACLd;QACAe;QACAC,YAAYvB,OAAO,CAACsB;QACpBjB;QACAC;QACAG;QACAE;QACAE;QACAE;QACAd,aAAa;YACX,GAAGA,WAAW;YACd,GAAIN,gBAAgBqB,eAAe,CAAC,CAAC;QACvC;QACAd,WAAW;YACT,GAAGA,SAAS;YACZ,GAAGc,YAAY;QACjB;QACAZ;QACAoB,oBAAoB;YAClBf;YACAgB,cAAc,CAAC9B;QACjB;QACAQ,gBAAgB;YACd,GAAGA,cAAc;YACjBuB;gBACE,IAAIJ,WAAW;oBACbhB;gBACF,OAAO;oBACLS;gBACF;YACF;YACAY,WAAWzC,IAAIS,kBAAkB,YAAY;QAC/C;IACF;AACF"}

package/dist/layout/useHorizontalLayoutTransition.d.ts

@@ -63,7 +63,7 @@ export interface HorizontalLayoutTransitionOptions extends PreconfiguredCSSTrans
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
 export declare function useHorizontalLayoutTransition<E extends HTMLElement = HTMLElement>(options: HorizontalLayoutTransitionOptions): CSSTransitionHookReturnValue<E>;

package/dist/layout/useHorizontalLayoutTransition.js

@@ -50,7 +50,7 @@ import { useCSSTransition } from "../transition/useCSSTransition.js";
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */ export function useHorizontalLayoutTransition(options) {
     return useCSSTransition({

package/dist/layout/useHorizontalLayoutTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useHorizontalLayoutTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { DEFAULT_SHEET_TIMEOUT } from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionHookReturnValue,\n  type PreconfiguredCSSTransitionOptions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\n\n/**\n * @since 6.0.0\n */\nexport const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES = {\n  appearDone: \"rmd-layout-h--active\",\n  enter: \"rmd-layout-h--enter\",\n  enterActive: \"rmd-layout-h--active\",\n  enterDone: \"rmd-layout-h--active\",\n  exit: \"rmd-layout-h--exit\",\n} as const satisfies CSSTransitionClassNames;\n\n/**\n * @since 6.0.0\n */\nexport interface HorizontalLayoutTransitionOptions\n  extends PreconfiguredCSSTransitionOptions<HTMLElement> {\n  /**\n   * @see {@link DEFAULT_SHEET_TIMEOUT}\n   * @defaultValue `DEFAULT_SHEET_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n  /**\n   * @see {@link DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES}\n   * @defaultValue `DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @example\n * ```tsx\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * interface Props {\n *   title: ReactNode;\n *   children: ReactNode;\n * }\n *\n * export default function Example({ title, children }: Props): ReactElement {\n *   const { toggled: staticNavExpanded, toggle: toggleStaticNav } = useToggle();\n *   const { elementProps, className } = useHorizontalLayoutTransition({\n *     transitionIn: staticNavExpanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar className={className}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           buttonType=\"icon\"\n *           onClick={toggleStaticNav}\n *         >\n *           <MenuOutlinedIcon />\n *         '</Button>\n *         {title}\n *       </LayoutAppBar>\n *       <Main {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport function useHorizontalLayoutTransition<\n  E extends HTMLElement = HTMLElement,\n>(options: HorizontalLayoutTransitionOptions): CSSTransitionHookReturnValue<E> {\n  return useCSSTransition({\n    timeout: DEFAULT_SHEET_TIMEOUT,\n    classNames: DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES,\n    ...options,\n    className: cnb(\"rmd-layout-h\", options.className),\n  });\n}\n"],"names":["cnb","DEFAULT_SHEET_TIMEOUT","useCSSTransition","DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES","appearDone","enter","enterActive","enterDone","exit","useHorizontalLayoutTransition","options","timeout","classNames","className"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,qBAAqB,QAAQ,qBAAqB;AAO3D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE;;CAEC,GACD,OAAO,MAAMC,kDAAkD;IAC7DC,YAAY;IACZC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;AACR,EAA6C;AAmB7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,SAASC,8BAEdC,OAA0C;IAC1C,OAAOR,iBAAiB;QACtBS,SAASV;QACTW,YAAYT;QACZ,GAAGO,OAAO;QACVG,WAAWb,IAAI,gBAAgBU,QAAQG,SAAS;IAClD;AACF"}
+{"version":3,"sources":["../../src/layout/useHorizontalLayoutTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { DEFAULT_SHEET_TIMEOUT } from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionHookReturnValue,\n  type PreconfiguredCSSTransitionOptions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\n\n/**\n * @since 6.0.0\n */\nexport const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES = {\n  appearDone: \"rmd-layout-h--active\",\n  enter: \"rmd-layout-h--enter\",\n  enterActive: \"rmd-layout-h--active\",\n  enterDone: \"rmd-layout-h--active\",\n  exit: \"rmd-layout-h--exit\",\n} as const satisfies CSSTransitionClassNames;\n\n/**\n * @since 6.0.0\n */\nexport interface HorizontalLayoutTransitionOptions\n  extends PreconfiguredCSSTransitionOptions<HTMLElement> {\n  /**\n   * @see {@link DEFAULT_SHEET_TIMEOUT}\n   * @defaultValue `DEFAULT_SHEET_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n  /**\n   * @see {@link DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES}\n   * @defaultValue `DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @example\n * ```tsx\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * interface Props {\n *   title: ReactNode;\n *   children: ReactNode;\n * }\n *\n * export default function Example({ title, children }: Props): ReactElement {\n *   const { toggled: staticNavExpanded, toggle: toggleStaticNav } = useToggle();\n *   const { elementProps, className } = useHorizontalLayoutTransition({\n *     transitionIn: staticNavExpanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar className={className}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           buttonType=\"icon\"\n *           onClick={toggleStaticNav}\n *         >\n *           <MenuOutlinedIcon />\n *         '</Button>\n *         {title}\n *       </LayoutAppBar>\n *       <Main {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport function useHorizontalLayoutTransition<\n  E extends HTMLElement = HTMLElement,\n>(options: HorizontalLayoutTransitionOptions): CSSTransitionHookReturnValue<E> {\n  return useCSSTransition({\n    timeout: DEFAULT_SHEET_TIMEOUT,\n    classNames: DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES,\n    ...options,\n    className: cnb(\"rmd-layout-h\", options.className),\n  });\n}\n"],"names":["cnb","DEFAULT_SHEET_TIMEOUT","useCSSTransition","DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES","appearDone","enter","enterActive","enterDone","exit","useHorizontalLayoutTransition","options","timeout","classNames","className"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,qBAAqB,QAAQ,qBAAqB;AAO3D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE;;CAEC,GACD,OAAO,MAAMC,kDAAkD;IAC7DC,YAAY;IACZC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;AACR,EAA6C;AAmB7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,SAASC,8BAEdC,OAA0C;IAC1C,OAAOR,iBAAiB;QACtBS,SAASV;QACTW,YAAYT;QACZ,GAAGO,OAAO;QACVG,WAAWb,IAAI,gBAAgBU,QAAQG,SAAS;IAClD;AACF"}

package/dist/layout/useLayoutAppBarHeight.d.ts

@@ -56,7 +56,7 @@ export interface LayoutAppBarHeightResult {
  * };
  * ```
  *
- * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
 export declare function useLayoutAppBarHeight(ref?: Ref<HTMLDivElement>): LayoutAppBarHeightResult;