@react-md/core 1.0.0-next.1 → 1.0.0-next.10

package/dist/layout/_layout.scss

@@ -29,126 +29,122 @@ $enter-timing-function: sheet.$enter-timing-function !default;
 $leave-duration: sheet.$leave-duration !default;
 $leave-timing-function: sheet.$leave-timing-function !default;
 
-$var-lookup: (
-  size: (
-    var: --rmd-layout-size,
-    value: $navigation-static-width,
-  ),
-  header-height: (
-    var: --rmd-layout-header-height,
-    value: $header-height,
-  ),
-);
+$variables: (size, header-height);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "layout var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "layout");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "layout var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "layout")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    .rmd-layout-main {
-      display: block;
-      outline: none;
-
-      &::before {
-        @include utils.pseudo-element(
-          $fixed: true,
-          $z-index: $main-focus-z-index,
-          $inset: get-var(header-height) 0 interaction.get-var(focus-width)
-        );
-        @include interaction.focus-styles($box-shadow: true);
-
-        opacity: 0;
-        transition: opacity
-          transition.$linear-duration
-          transition.$linear-timing-function;
-      }
+    @include set-var(size, $navigation-static-width);
+    @include set-var(header-height, $header-height);
+  }
+}
 
-      &:focus::before {
-        opacity: 1;
-      }
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(layout, $disable-layer) {
+      .rmd-layout-main {
+        display: block;
+        outline: none;
+
+        &::before {
+          @include utils.pseudo-element(
+            $fixed: true,
+            $z-index: $main-focus-z-index,
+            $inset: get-var(header-height) 0 interaction.get-var(focus-width)
+          );
+          @include interaction.focus-styles($box-shadow: true);
+
+          opacity: 0;
+          transition: opacity transition.$linear-duration
+            transition.$linear-timing-function;
+        }
 
-      &--offset-v {
-        @include use-var(padding-top, header-height);
-      }
-    }
+        &:focus::before {
+          opacity: 1;
+        }
 
-    /// I decided to go with an "SSR-first" approach by having the nav element
-    /// always be rendered, but use media queries to show it for tablets and
-    /// above. This makes it so there is less javascript to dynamically switch
-    /// between layout types as you resize the browser.
-    .rmd-layout-nav {
-      @include sheet.set-var(width, get-var(size));
-      @include media-queries.media($navigation-breakpoint) {
-        // use grid so that you can easily have a header + tree that fills the remaining space
-        display: grid;
+        &--offset-v {
+          @include use-var(padding-top, header-height);
+        }
       }
 
-      container: $navigation-container-name;
-      display: none;
-      z-index: $navigation-z-index;
+      /// I decided to go with an "SSR-first" approach by having the nav element
+      /// always be rendered, but use media queries to show it for tablets and
+      /// above. This makes it so there is less javascript to dynamically switch
+      /// between layout types as you resize the browser.
+      .rmd-layout-nav {
+        @include sheet.set-var(width, get-var(size));
+        @include media-queries.media($navigation-breakpoint) {
+          // use grid so that you can easily have a header + tree that fills the remaining space
+          display: grid;
+        }
 
-      &--offset-v {
-        @include use-var(top, header-height);
+        container: $navigation-container-name;
+        display: none;
+        z-index: $navigation-z-index;
+
+        &--offset-v {
+          @include use-var(top, header-height);
+        }
       }
-    }
 
-    /// This class is used to transition when the nav expands/collapses on
-    /// larger screen sizes
-    .rmd-layout-h {
-      will-change: margin;
+      /// This class is used to transition when the nav expands/collapses on
+      /// larger screen sizes
+      .rmd-layout-h {
+        will-change: margin;
 
-      &--active {
-        @include media-queries.media($navigation-breakpoint) {
-          @include utils.auto-rtl(margin-left, get-var(size));
+        &--active {
+          @include media-queries.media($navigation-breakpoint) {
+            @include utils.auto-rtl(margin-left, get-var(size));
 
-          &::before {
-            @include utils.auto-rtl(left, get-var(size));
+            &::before {
+              @include utils.auto-rtl(left, get-var(size));
+            }
           }
         }
-      }
 
-      &--enter {
-        transition: margin $enter-duration $enter-timing-function;
-      }
+        &--enter {
+          transition: margin $enter-duration $enter-timing-function;
+        }
 
-      &--exit {
-        transition: margin $leave-duration $leave-timing-function;
+        &--exit {
+          transition: margin $leave-duration $leave-timing-function;
+        }
       }
-    }
 
-    @if not $disable-resizable {
-      .rmd-layout-splitter {
-        @include window-splitter.set-var(position, get-var(size));
-
-        &--offset-v {
-          @include window-splitter.set-var(top, get-var(header-height));
-        }
+      @if not $disable-resizable {
+        .rmd-layout-splitter {
+          @include window-splitter.set-var(position, get-var(size));
 
-        &--responsive {
-          @include media-queries.media($navigation-breakpoint) {
-            display: inline-block;
+          &--offset-v {
+            @include window-splitter.set-var(top, get-var(header-height));
           }
 
-          display: none;
+          &--responsive {
+            @include media-queries.media($navigation-breakpoint) {
+              display: inline-block;
+            }
+
+            display: none;
+          }
         }
       }
     }

package/dist/layout/useLayoutAppBarHeight.js

@@ -1,6 +1,6 @@
 "use client";
-import { useCallback, useMemo, useState } from "react";
-import { useResizeObserver } from "../useResizeObserver.js";
+import { useMemo } from "react";
+import { useElementSize } from "../useElementSize.js";
 /**
  * @example
  * Main Usage
@@ -51,16 +51,12 @@ import { useResizeObserver } from "../useResizeObserver.js";
  *
  * @remarks \@since 6.0.0
  */ export function useLayoutAppBarHeight(ref) {
-    const [height, setHeight] = useState();
-    const targetRef = useResizeObserver({
+    const { height, elementRef } = useElementSize({
         ref,
-        onUpdate: useCallback((entry)=>{
-            setHeight(entry.borderBoxSize[0].blockSize);
-        }, []),
         disableWidth: true
     });
     const variables = useMemo(()=>{
-        if (typeof height !== "number") {
+        if (Number.isNaN(height)) {
             return [];
         }
         return [
@@ -75,7 +71,7 @@ import { useResizeObserver } from "../useResizeObserver.js";
     return {
         height,
         variables,
-        appBarRef: targetRef
+        appBarRef: elementRef
     };
 }
 

package/dist/layout/useLayoutAppBarHeight.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useLayoutAppBarHeight.ts"],"sourcesContent":["\"use client\";\nimport type { Ref, RefCallback } from \"react\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { DefinedCSSVariableName } from \"../theme/types.js\";\nimport type { CSSVariable } from \"../theme/useCSSVariables.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-layout-size\"?: string;\n    \"--rmd-layout-header-height\"?: string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface LayoutAppBarHeightResult {\n  height: number | undefined;\n  variables: readonly CSSVariable<DefinedCSSVariableName>[];\n  appBarRef: RefCallback<HTMLDivElement>;\n}\n\n/**\n * @example\n * Main Usage\n * ```tsx\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import {\n *   AppBar,\n *   useCSSVariables,\n *   useLayoutAppBarHeight\n * } from \"@react-md/core\";\n *\n * export function LayoutHeader({ children }: PropsWithChildren): ReactElement {\n *   const { appBarRef, variables } = useLayoutAppBarHeight();\n *   useCSSVariables(variables);\n *\n *   return (\n *     <AppBar ref={appBarRef} {...customProps}>\n *       <CustomChildren />\n *     </AppBar>\n *   );\n * };\n * ```\n *\n * @example\n * Inline Variables\n * ```tsx\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import {\n *   AppBar,\n *   useCSSVariables,\n *   useLayoutAppBarHeight\n * } from \"@react-md/core\";\n *\n * export function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { appBarRef, variables } = useLayoutAppBarHeight();\n *   const inlineStyle = useCSSVariables(variables, true);\n *\n *   return (\n *     <div style={inlineStyle}>\n *       <AppBar ref={appBarRef} {...customProps}>\n *         <CustomChildren />\n *       </AppBar>\n *       {children}\n *     </div>\n *   );\n * };\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useLayoutAppBarHeight(\n  ref?: Ref<HTMLDivElement>\n): LayoutAppBarHeightResult {\n  const [height, setHeight] = useState<number | undefined>();\n  const targetRef = useResizeObserver({\n    ref,\n    onUpdate: useCallback((entry) => {\n      setHeight(entry.borderBoxSize[0].blockSize);\n    }, []),\n    disableWidth: true,\n  });\n  const variables = useMemo<CSSVariable<DefinedCSSVariableName>[]>(() => {\n    if (typeof height !== \"number\") {\n      return [];\n    }\n\n    return [{ name: \"--rmd-layout-header-height\", value: `${height}px` }];\n  }, [height]);\n\n  return {\n    height,\n    variables,\n    appBarRef: targetRef,\n  };\n}\n"],"names":["useCallback","useMemo","useState","useResizeObserver","useLayoutAppBarHeight","ref","height","setHeight","targetRef","onUpdate","entry","borderBoxSize","blockSize","disableWidth","variables","name","value","appBarRef"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAGvD,SAASC,iBAAiB,QAAQ,0BAA0B;AAkB5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,SAASC,sBACdC,GAAyB;IAEzB,MAAM,CAACC,QAAQC,UAAU,GAAGL;IAC5B,MAAMM,YAAYL,kBAAkB;QAClCE;QACAI,UAAUT,YAAY,CAACU;YACrBH,UAAUG,MAAMC,aAAa,CAAC,EAAE,CAACC,SAAS;QAC5C,GAAG,EAAE;QACLC,cAAc;IAChB;IACA,MAAMC,YAAYb,QAA+C;QAC/D,IAAI,OAAOK,WAAW,UAAU;YAC9B,OAAO,EAAE;QACX;QAEA,OAAO;YAAC;gBAAES,MAAM;gBAA8BC,OAAO,CAAC,EAAEV,OAAO,EAAE,CAAC;YAAC;SAAE;IACvE,GAAG;QAACA;KAAO;IAEX,OAAO;QACLA;QACAQ;QACAG,WAAWT;IACb;AACF"}
+{"version":3,"sources":["../../src/layout/useLayoutAppBarHeight.ts"],"sourcesContent":["\"use client\";\nimport type { Ref, RefCallback } from \"react\";\nimport { useMemo } from \"react\";\nimport type { DefinedCSSVariableName } from \"../theme/types.js\";\nimport type { CSSVariable } from \"../theme/useCSSVariables.js\";\nimport { useElementSize } from \"../useElementSize.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-layout-size\"?: string;\n    \"--rmd-layout-header-height\"?: string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface LayoutAppBarHeightResult {\n  height: number | undefined;\n  variables: readonly CSSVariable<DefinedCSSVariableName>[];\n  appBarRef: RefCallback<HTMLDivElement>;\n}\n\n/**\n * @example\n * Main Usage\n * ```tsx\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import {\n *   AppBar,\n *   useCSSVariables,\n *   useLayoutAppBarHeight\n * } from \"@react-md/core\";\n *\n * export function LayoutHeader({ children }: PropsWithChildren): ReactElement {\n *   const { appBarRef, variables } = useLayoutAppBarHeight();\n *   useCSSVariables(variables);\n *\n *   return (\n *     <AppBar ref={appBarRef} {...customProps}>\n *       <CustomChildren />\n *     </AppBar>\n *   );\n * };\n * ```\n *\n * @example\n * Inline Variables\n * ```tsx\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import {\n *   AppBar,\n *   useCSSVariables,\n *   useLayoutAppBarHeight\n * } from \"@react-md/core\";\n *\n * export function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { appBarRef, variables } = useLayoutAppBarHeight();\n *   const inlineStyle = useCSSVariables(variables, true);\n *\n *   return (\n *     <div style={inlineStyle}>\n *       <AppBar ref={appBarRef} {...customProps}>\n *         <CustomChildren />\n *       </AppBar>\n *       {children}\n *     </div>\n *   );\n * };\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useLayoutAppBarHeight(\n  ref?: Ref<HTMLDivElement>\n): LayoutAppBarHeightResult {\n  const { height, elementRef } = useElementSize({\n    ref,\n    disableWidth: true,\n  });\n  const variables = useMemo<CSSVariable<DefinedCSSVariableName>[]>(() => {\n    if (Number.isNaN(height)) {\n      return [];\n    }\n\n    return [{ name: \"--rmd-layout-header-height\", value: `${height}px` }];\n  }, [height]);\n\n  return {\n    height,\n    variables,\n    appBarRef: elementRef,\n  };\n}\n"],"names":["useMemo","useElementSize","useLayoutAppBarHeight","ref","height","elementRef","disableWidth","variables","Number","isNaN","name","value","appBarRef"],"mappings":"AAAA;AAEA,SAASA,OAAO,QAAQ,QAAQ;AAGhC,SAASC,cAAc,QAAQ,uBAAuB;AAkBtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,SAASC,sBACdC,GAAyB;IAEzB,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAE,GAAGJ,eAAe;QAC5CE;QACAG,cAAc;IAChB;IACA,MAAMC,YAAYP,QAA+C;QAC/D,IAAIQ,OAAOC,KAAK,CAACL,SAAS;YACxB,OAAO,EAAE;QACX;QAEA,OAAO;YAAC;gBAAEM,MAAM;gBAA8BC,OAAO,CAAC,EAAEP,OAAO,EAAE,CAAC;YAAC;SAAE;IACvE,GAAG;QAACA;KAAO;IAEX,OAAO;QACLA;QACAG;QACAK,WAAWP;IACb;AACF"}

package/dist/link/_link.scss

@@ -26,40 +26,24 @@ $skip-to-main-styles: (
   z-index: $skip-to-main-z-index,
 ) !default;
 $skip-to-main-active-styles: (
-  outline: 0.25rem dashed #000,
+  outline: 0.25rem dashed currentcolor,
 ) !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-link-color,
-    value: $color,
-  ),
-  visited-color: (
-    var: --rmd-link-visited-color,
-    value: $visited-color,
-  ),
-  hover-color: (
-    var: --rmd-link-hover-color,
-    value: $hover-color,
-  ),
-);
+$variables: (color, visited-color, hover-color);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "link var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "link");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "link var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "link")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -80,58 +64,82 @@ $var-lookup: (
   #{$property}: get-var(size) inset get-var(color);
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    .rmd-link {
-      // can't use the normal @include interaction.surface since links are
-      // rendered inline and the `::before`/`::after` pseudo selectors only work
-      // nicely with block-like elements
-      @include utils.keyboard-only {
-        &:focus {
-          @include interaction.focus-styles($disable-background: true);
-        }
-      }
-      @include interaction.outline($outline-offset: false);
-      @include use-var(color);
+    @include set-var(color, $color);
+    @include set-var(visited-color, $visited-color);
+    @include set-var(hover-color, $hover-color);
+  }
+}
 
-      transition: color $transition-duration;
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(link, $disable-layer) {
+      .rmd-link {
+        @include interaction.outline($outline-offset: false);
+        @include use-var(color);
 
-      &:visited {
-        @include set-var(color, get-var(visited-color));
-      }
+        transition: color $transition-duration;
 
-      &:hover {
-        @include set-var(color, get-var(hover-color));
-      }
+        &:visited {
+          @include set-var(color, get-var(visited-color));
+        }
 
-      @if not $disable-flex {
-        &--flex {
-          @include icon.use-var(gap, spacing);
+        &:hover {
+          @include set-var(color, get-var(hover-color));
+        }
 
-          align-items: center;
-          display: inline-flex;
+        // can't use the normal @include interaction.surface since links are
+        // rendered inline and the `::before`/`::after` pseudo selectors only work
+        // nicely with block-like elements
+        @if utils.$disable-focus-visible {
+          @include utils.keyboard-only {
+            &:focus {
+              @include interaction.focus-styles($disable-background: true);
+            }
+          }
+        } @else {
+          &:focus-visible {
+            @include interaction.focus-styles($disable-background: true);
+          }
         }
-      }
 
-      @if not $disable-skip-to-main {
-        &--skip {
-          @include utils.map-to-styles(
-            map.remove(
-              typography.$headline-6-styles,
-              font-size,
-              font-weight,
-              letter-spacing
-            )
-          );
-          @include utils.sr-only(true, null);
+        @if not $disable-flex {
+          &--flex {
+            @include icon.use-var(gap, spacing);
+
+            align-items: center;
+            display: inline-flex;
+          }
         }
 
-        &--skip-styled {
-          @include utils.map-to-styles($skip-to-main-styles);
-          @include utils.keyboard-only {
-            &:focus,
-            &:active {
-              @include utils.map-to-styles($skip-to-main-active-styles);
+        @if not $disable-skip-to-main {
+          &--skip {
+            @include utils.map-to-styles(
+              map.remove(
+                typography.$headline-6-styles,
+                font-size,
+                font-weight,
+                letter-spacing
+              )
+            );
+            @include utils.sr-only(true, null);
+          }
+
+          &--skip-styled {
+            @include utils.map-to-styles($skip-to-main-styles);
+
+            @if utils.$disable-focus-visible {
+              @include utils.keyboard-only {
+                &:focus,
+                &:active {
+                  @include utils.map-to-styles($skip-to-main-active-styles);
+                }
+              }
+            } @else {
+              &:focus-visible {
+                @include utils.map-to-styles($skip-to-main-active-styles);
+              }
             }
           }
         }

package/dist/list/ListItem.d.ts

@@ -9,12 +9,17 @@ declare module "react" {
         "--rmd-list-item-medium-height"?: string | number;
         "--rmd-list-item-large-height"?: string | number;
         "--rmd-list-item-extra-large-height"?: string | number;
-        "--rmd-list-item-three-line-height"?: string | number;
+        "--rmd-list-item-multiline-clamp"?: string | number;
+        "--rmd-list-item-multiline-height"?: string | number;
         "--rmd-list-item-media-size"?: string | number;
         "--rmd-list-item-media-spacing"?: string | number;
-        "--rmd-list-item-text-three-line-height"?: string | number;
+        "--rmd-list-item-text-multiline-height"?: string | number;
     }
 }
+/**
+ * @remarks \@since 6.0.0 Renamed `threeLines` to `multiline` since it can
+ * support more than three lines of text.
+ */
 export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemChildrenProps {
     /**
      * @defaultValue `"button"`
@@ -32,7 +37,7 @@ export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemCh
     /**
      * @defaultValue `false`
      */
-    threeLines?: boolean;
+    multiline?: boolean;
     /**
      * @defaultValue `false`
      */

package/dist/list/ListItem.js

@@ -71,7 +71,7 @@ import { listItem } from "./listItemStyles.js";
  * }
  * ```
  */ export const ListItem = /*#__PURE__*/ forwardRef(function ListItem(props, ref) {
-    const { className, textProps, textClassName, secondaryTextClassName, primaryText, secondaryText, secondaryTextProps, disableTextChildren = false, height: propHeight = "auto", leftAddon, leftAddonType = "icon", leftAddonPosition = "middle", leftAddonClassName, leftAddonForceWrap, rightAddon, rightAddonType = "icon", rightAddonPosition = "middle", rightAddonClassName, rightAddonForceWrap, disableLeftAddonCenteredMedia = false, disableRightAddonCenteredMedia = false, threeLines = false, disabled = false, disabledOpacity = false, role = "button", onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, tabIndex: propTabIndex, children: propChildren, presentational = role === "presentation", ...remaining } = props;
+    const { className, textProps, textClassName, secondaryTextClassName, primaryText, secondaryText, secondaryTextProps, disableTextChildren = false, height: propHeight, leftAddon, leftAddonType, leftAddonPosition, leftAddonClassName, leftAddonForceWrap, rightAddon, rightAddonType, rightAddonPosition, rightAddonClassName, rightAddonForceWrap, disableLeftAddonSpacing, disableLeftAddonCenteredMedia, disableRightAddonCenteredMedia, multiline = false, disabled = false, disabledOpacity = false, role = "button", onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, tabIndex: propTabIndex, children: propChildren, presentational = role === "presentation", ...remaining } = props;
     let tabIndex = propTabIndex;
     if (!presentational && typeof tabIndex === "undefined") {
         tabIndex = disabled ? -1 : 0;
@@ -111,13 +111,13 @@ import { listItem } from "./listItemStyles.js";
             height,
             disabled,
             disabledOpacity,
-            threeLines,
+            multiline,
             clickable: !presentational,
             pressedClassName
         }),
         children: [
             /*#__PURE__*/ _jsx(ListItemChildren, {
-                threeLines: threeLines,
+                multiline: multiline,
                 textClassName: textClassName,
                 secondaryTextClassName: secondaryTextClassName,
                 disableTextChildren: disableTextChildren,
@@ -135,6 +135,7 @@ import { listItem } from "./listItemStyles.js";
                 rightAddonPosition: rightAddonPosition,
                 rightAddonClassName: rightAddonClassName,
                 rightAddonForceWrap: rightAddonForceWrap,
+                disableLeftAddonSpacing: disableLeftAddonSpacing,
                 disableLeftAddonCenteredMedia: disableLeftAddonCenteredMedia,
                 disableRightAddonCenteredMedia: disableRightAddonCenteredMedia,
                 children: children

package/dist/list/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/ListItem.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport { ListItemChildren } from \"./ListItemChildren.js\";\nimport { listItem } from \"./listItemStyles.js\";\nimport { type ListItemChildrenProps, type ListItemHeight } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-list-item-keyline\"?: string | number;\n    \"--rmd-list-item-padding-h\"?: string | number;\n    \"--rmd-list-item-padding-v\"?: string | number;\n    \"--rmd-list-item-height\"?: string | number;\n    \"--rmd-list-item-medium-height\"?: string | number;\n    \"--rmd-list-item-large-height\"?: string | number;\n    \"--rmd-list-item-extra-large-height\"?: string | number;\n    \"--rmd-list-item-three-line-height\"?: string | number;\n    \"--rmd-list-item-media-size\"?: string | number;\n    \"--rmd-list-item-media-spacing\"?: string | number;\n    \"--rmd-list-item-text-three-line-height\"?: string | number;\n  }\n}\n\nexport interface ListItemProps\n  extends HTMLAttributes<HTMLLIElement>,\n    ListItemChildrenProps {\n  /**\n   * @defaultValue `\"button\"`\n   */\n  role?: HTMLAttributes<HTMLLIElement>[\"role\"];\n\n  /**\n   * @defaultValue `disabled ? -1 : 0`\n   */\n  tabIndex?: number;\n\n  /**\n   * @see {@link ListItemHeight}\n   * @defaultValue `\"auto\"`\n   */\n  height?: ListItemHeight;\n\n  /**\n   * @defaultValue `false`\n   */\n  threeLines?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Note: This does nothing if the `disabled` prop is not enabled.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 2.4.3\n   */\n  disabledOpacity?: boolean;\n\n  /**\n   * Set this to `false` if the list item should not gain the interaction\n   * states: hover, focus, press, etc. This is kind of like being disabled\n   * without the disabled styles being applied.\n   *\n   * @defaultValue `role === \"presentation\"`\n   */\n  presentational?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * The `ListItem` is used to create a clickable/focusable button within a\n * `List` and removes the normal `<li>` styles.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { List, ListItem } from \"@react-md/core\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 1\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *         secondaryText={<span>Some <strong>additional</strong> content.</span>}\n *       >\n *         Item 2\n *       </ListItem>\n *     </List>\n *   );\n *   );\n * }\n * ```\n *\n * @example\n * Applying Addons Example\n * ```tsx\n * import { List, ListItem } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem leftAddon={<FavoriteIcon />}>\n *         Item 1\n *       </ListItem>\n *       <ListItem rightAddon={<FavoriteIcon />}>\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         leftAddon={<FavoriteIcon />}\n *         rightAddon={<img alt=\"\" src=\"/some-image.png\" />}\n *         rightAddonType=\"media\"\n *       >\n *         Item 3\n *       </ListItem>\n *     </List>\n *   );\n *   );\n * }\n * ```\n */\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(\n  function ListItem(props, ref) {\n    const {\n      className,\n      textProps,\n      textClassName,\n      secondaryTextClassName,\n      primaryText,\n      secondaryText,\n      secondaryTextProps,\n      disableTextChildren = false,\n      height: propHeight = \"auto\",\n      leftAddon,\n      leftAddonType = \"icon\",\n      leftAddonPosition = \"middle\",\n      leftAddonClassName,\n      leftAddonForceWrap,\n      rightAddon,\n      rightAddonType = \"icon\",\n      rightAddonPosition = \"middle\",\n      rightAddonClassName,\n      rightAddonForceWrap,\n      disableLeftAddonCenteredMedia = false,\n      disableRightAddonCenteredMedia = false,\n      threeLines = false,\n      disabled = false,\n      disabledOpacity = false,\n      role = \"button\",\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      tabIndex: propTabIndex,\n      children: propChildren,\n      presentational = role === \"presentation\",\n      ...remaining\n    } = props;\n\n    let tabIndex = propTabIndex;\n    if (!presentational && typeof tabIndex === \"undefined\") {\n      tabIndex = disabled ? -1 : 0;\n    }\n\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled: disabled || presentational,\n    });\n    const children = useHigherContrastChildren(\n      propChildren,\n      !disableTextChildren\n    );\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <li\n        {...remaining}\n        {...handlers}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        className={listItem({\n          className,\n          height,\n          disabled,\n          disabledOpacity,\n          threeLines,\n          clickable: !presentational,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          threeLines={threeLines}\n          textClassName={textClassName}\n          secondaryTextClassName={secondaryTextClassName}\n          disableTextChildren={disableTextChildren}\n          primaryText={primaryText}\n          textProps={textProps}\n          secondaryText={secondaryText}\n          secondaryTextProps={secondaryTextProps}\n          leftAddon={leftAddon}\n          leftAddonType={leftAddonType}\n          leftAddonPosition={leftAddonPosition}\n          leftAddonClassName={leftAddonClassName}\n          leftAddonForceWrap={leftAddonForceWrap}\n          rightAddon={rightAddon}\n          rightAddonType={rightAddonType}\n          rightAddonPosition={rightAddonPosition}\n          rightAddonClassName={rightAddonClassName}\n          rightAddonForceWrap={rightAddonForceWrap}\n          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","getListItemHeight","ListItemChildren","listItem","ListItem","props","ref","className","textProps","textClassName","secondaryTextClassName","primaryText","secondaryText","secondaryTextProps","disableTextChildren","height","propHeight","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","threeLines","disabled","disabledOpacity","role","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","tabIndex","propTabIndex","children","propChildren","presentational","remaining","pressedClassName","ripples","handlers","li","aria-disabled","undefined","clickable"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAkE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,MAAMC,yBAAWN,WACtB,SAASM,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,sBAAsB,KAAK,EAC3BC,QAAQC,aAAa,MAAM,EAC3BC,SAAS,EACTC,gBAAgB,MAAM,EACtBC,oBAAoB,QAAQ,EAC5BC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,iBAAiB,MAAM,EACvBC,qBAAqB,QAAQ,EAC7BC,mBAAmB,EACnBC,mBAAmB,EACnBC,gCAAgC,KAAK,EACrCC,iCAAiC,KAAK,EACtCC,aAAa,KAAK,EAClBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,OAAO,QAAQ,EACfC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,iBAAiBhB,SAAS,cAAc,EACxC,GAAGiB,WACJ,GAAG5C;IAEJ,IAAIuC,WAAWC;IACf,IAAI,CAACG,kBAAkB,OAAOJ,aAAa,aAAa;QACtDA,WAAWd,WAAW,CAAC,IAAI;IAC7B;IAEA,MAAM,EAAEoB,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGrD,sBAAsB;QACpEkC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAb,UAAUA,YAAYkB;IACxB;IACA,MAAMF,WAAW9C,0BACf+C,cACA,CAACjC;IAGH,MAAMC,SAASd,kBAAkB;QAC/Bc,QAAQC;QACRC;QACAC;QACAI;QACAC;QACAX;IACF;IAEA,qBACE,MAACyC;QACE,GAAGJ,SAAS;QACZ,GAAGG,QAAQ;QACZE,iBAAexB,YAAYyB;QAC3BjD,KAAKA;QACL0B,MAAMA;QACNY,UAAUA;QACVrC,WAAWJ,SAAS;YAClBI;YACAQ;YACAe;YACAC;YACAF;YACA2B,WAAW,CAACR;YACZE;QACF;;0BAEA,KAAChD;gBACC2B,YAAYA;gBACZpB,eAAeA;gBACfC,wBAAwBA;gBACxBI,qBAAqBA;gBACrBH,aAAaA;gBACbH,WAAWA;gBACXI,eAAeA;gBACfC,oBAAoBA;gBACpBI,WAAWA;gBACXC,eAAeA;gBACfC,mBAAmBA;gBACnBC,oBAAoBA;gBACpBC,oBAAoBA;gBACpBC,YAAYA;gBACZC,gBAAgBA;gBAChBC,oBAAoBA;gBACpBC,qBAAqBA;gBACrBC,qBAAqBA;gBACrBC,+BAA+BA;gBAC/BC,gCAAgCA;0BAE/BkB;;YAEFK;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/list/ListItem.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport { ListItemChildren } from \"./ListItemChildren.js\";\nimport { listItem } from \"./listItemStyles.js\";\nimport { type ListItemChildrenProps, type ListItemHeight } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-list-item-keyline\"?: string | number;\n    \"--rmd-list-item-padding-h\"?: string | number;\n    \"--rmd-list-item-padding-v\"?: string | number;\n    \"--rmd-list-item-height\"?: string | number;\n    \"--rmd-list-item-medium-height\"?: string | number;\n    \"--rmd-list-item-large-height\"?: string | number;\n    \"--rmd-list-item-extra-large-height\"?: string | number;\n    \"--rmd-list-item-multiline-clamp\"?: string | number;\n    \"--rmd-list-item-multiline-height\"?: string | number;\n    \"--rmd-list-item-media-size\"?: string | number;\n    \"--rmd-list-item-media-spacing\"?: string | number;\n    \"--rmd-list-item-text-multiline-height\"?: string | number;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0 Renamed `threeLines` to `multiline` since it can\n * support more than three lines of text.\n */\nexport interface ListItemProps\n  extends HTMLAttributes<HTMLLIElement>,\n    ListItemChildrenProps {\n  /**\n   * @defaultValue `\"button\"`\n   */\n  role?: HTMLAttributes<HTMLLIElement>[\"role\"];\n\n  /**\n   * @defaultValue `disabled ? -1 : 0`\n   */\n  tabIndex?: number;\n\n  /**\n   * @see {@link ListItemHeight}\n   * @defaultValue `\"auto\"`\n   */\n  height?: ListItemHeight;\n\n  /**\n   * @defaultValue `false`\n   */\n  multiline?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Note: This does nothing if the `disabled` prop is not enabled.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 2.4.3\n   */\n  disabledOpacity?: boolean;\n\n  /**\n   * Set this to `false` if the list item should not gain the interaction\n   * states: hover, focus, press, etc. This is kind of like being disabled\n   * without the disabled styles being applied.\n   *\n   * @defaultValue `role === \"presentation\"`\n   */\n  presentational?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * The `ListItem` is used to create a clickable/focusable button within a\n * `List` and removes the normal `<li>` styles.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { List, ListItem } from \"@react-md/core\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 1\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *         secondaryText={<span>Some <strong>additional</strong> content.</span>}\n *       >\n *         Item 2\n *       </ListItem>\n *     </List>\n *   );\n *   );\n * }\n * ```\n *\n * @example\n * Applying Addons Example\n * ```tsx\n * import { List, ListItem } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem leftAddon={<FavoriteIcon />}>\n *         Item 1\n *       </ListItem>\n *       <ListItem rightAddon={<FavoriteIcon />}>\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         leftAddon={<FavoriteIcon />}\n *         rightAddon={<img alt=\"\" src=\"/some-image.png\" />}\n *         rightAddonType=\"media\"\n *       >\n *         Item 3\n *       </ListItem>\n *     </List>\n *   );\n *   );\n * }\n * ```\n */\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(\n  function ListItem(props, ref) {\n    const {\n      className,\n      textProps,\n      textClassName,\n      secondaryTextClassName,\n      primaryText,\n      secondaryText,\n      secondaryTextProps,\n      disableTextChildren = false,\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      leftAddonPosition,\n      leftAddonClassName,\n      leftAddonForceWrap,\n      rightAddon,\n      rightAddonType,\n      rightAddonPosition,\n      rightAddonClassName,\n      rightAddonForceWrap,\n      disableLeftAddonSpacing,\n      disableLeftAddonCenteredMedia,\n      disableRightAddonCenteredMedia,\n      multiline = false,\n      disabled = false,\n      disabledOpacity = false,\n      role = \"button\",\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      tabIndex: propTabIndex,\n      children: propChildren,\n      presentational = role === \"presentation\",\n      ...remaining\n    } = props;\n\n    let tabIndex = propTabIndex;\n    if (!presentational && typeof tabIndex === \"undefined\") {\n      tabIndex = disabled ? -1 : 0;\n    }\n\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled: disabled || presentational,\n    });\n    const children = useHigherContrastChildren(\n      propChildren,\n      !disableTextChildren\n    );\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <li\n        {...remaining}\n        {...handlers}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        className={listItem({\n          className,\n          height,\n          disabled,\n          disabledOpacity,\n          multiline,\n          clickable: !presentational,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          multiline={multiline}\n          textClassName={textClassName}\n          secondaryTextClassName={secondaryTextClassName}\n          disableTextChildren={disableTextChildren}\n          primaryText={primaryText}\n          textProps={textProps}\n          secondaryText={secondaryText}\n          secondaryTextProps={secondaryTextProps}\n          leftAddon={leftAddon}\n          leftAddonType={leftAddonType}\n          leftAddonPosition={leftAddonPosition}\n          leftAddonClassName={leftAddonClassName}\n          leftAddonForceWrap={leftAddonForceWrap}\n          rightAddon={rightAddon}\n          rightAddonType={rightAddonType}\n          rightAddonPosition={rightAddonPosition}\n          rightAddonClassName={rightAddonClassName}\n          rightAddonForceWrap={rightAddonForceWrap}\n          disableLeftAddonSpacing={disableLeftAddonSpacing}\n          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","getListItemHeight","ListItemChildren","listItem","ListItem","props","ref","className","textProps","textClassName","secondaryTextClassName","primaryText","secondaryText","secondaryTextProps","disableTextChildren","height","propHeight","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonSpacing","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","multiline","disabled","disabledOpacity","role","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","tabIndex","propTabIndex","children","propChildren","presentational","remaining","pressedClassName","ripples","handlers","li","aria-disabled","undefined","clickable"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAuE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,MAAMC,yBAAWN,WACtB,SAASM,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,sBAAsB,KAAK,EAC3BC,QAAQC,UAAU,EAClBC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,8BAA8B,EAC9BC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,OAAO,QAAQ,EACfC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,iBAAiBhB,SAAS,cAAc,EACxC,GAAGiB,WACJ,GAAG7C;IAEJ,IAAIwC,WAAWC;IACf,IAAI,CAACG,kBAAkB,OAAOJ,aAAa,aAAa;QACtDA,WAAWd,WAAW,CAAC,IAAI;IAC7B;IAEA,MAAM,EAAEoB,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGtD,sBAAsB;QACpEmC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAb,UAAUA,YAAYkB;IACxB;IACA,MAAMF,WAAW/C,0BACfgD,cACA,CAAClC;IAGH,MAAMC,SAASd,kBAAkB;QAC/Bc,QAAQC;QACRC;QACAC;QACAI;QACAC;QACAX;IACF;IAEA,qBACE,MAAC0C;QACE,GAAGJ,SAAS;QACZ,GAAGG,QAAQ;QACZE,iBAAexB,YAAYyB;QAC3BlD,KAAKA;QACL2B,MAAMA;QACNY,UAAUA;QACVtC,WAAWJ,SAAS;YAClBI;YACAQ;YACAgB;YACAC;YACAF;YACA2B,WAAW,CAACR;YACZE;QACF;;0BAEA,KAACjD;gBACC4B,WAAWA;gBACXrB,eAAeA;gBACfC,wBAAwBA;gBACxBI,qBAAqBA;gBACrBH,aAAaA;gBACbH,WAAWA;gBACXI,eAAeA;gBACfC,oBAAoBA;gBACpBI,WAAWA;gBACXC,eAAeA;gBACfC,mBAAmBA;gBACnBC,oBAAoBA;gBACpBC,oBAAoBA;gBACpBC,YAAYA;gBACZC,gBAAgBA;gBAChBC,oBAAoBA;gBACpBC,qBAAqBA;gBACrBC,qBAAqBA;gBACrBC,yBAAyBA;gBACzBC,+BAA+BA;gBAC/BC,gCAAgCA;0BAE/BkB;;YAEFK;;;AAGP,GACA"}

package/dist/list/ListItemAddon.js

@@ -9,7 +9,7 @@ import { listItemAddon } from "./listItemStyles.js";
  *
  * @internal
  */ export function ListItemAddon(props) {
-    const { className, children, addon, addonAfter = false, type = "icon", position = "middle", forceAddonWrap, disableCenteredMedia = false, ...remaining } = props;
+    const { className, children, addon, addonAfter, type = "icon", position, forceAddonWrap, disableCenteredMedia, disableBeforeSpacing, ...remaining } = props;
     const isMedia = type === "media" || type === "large-media";
     return /*#__PURE__*/ _jsx(TextIconSpacing, {
         ...remaining,
@@ -20,6 +20,7 @@ import { listItemAddon } from "./listItemStyles.js";
             position,
             className,
             addonAfter,
+            disableBeforeSpacing,
             disableCenteredMedia
         }),
         iconAfter: addonAfter,

package/dist/list/ListItemAddon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/ListItemAddon.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport {\n  TextIconSpacing,\n  type TextIconSpacingProps,\n} from \"../icon/TextIconSpacing.js\";\nimport {\n  listItemAddon,\n  type ListItemAddonClassNameOptions,\n} from \"./listItemStyles.js\";\n\nexport interface ListItemAddonProps\n  extends Omit<TextIconSpacingProps, \"icon\" | \"iconAfter\" | \"forceIconWrap\">,\n    ListItemAddonClassNameOptions {\n  /**\n   * The addon that should be rendered.\n   */\n  addon: ReactNode;\n\n  /**\n   * @defaultValue `type === \"media\" || type === \"large-media\"`\n   */\n  forceAddonWrap?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * The `ListItemAddon` is used to create an addon to the left or right of the\n * text/children of a `ListItem`.\n *\n * @internal\n */\nexport function ListItemAddon(props: ListItemAddonProps): ReactElement {\n  const {\n    className,\n    children,\n    addon,\n    addonAfter = false,\n    type = \"icon\",\n    position = \"middle\",\n    forceAddonWrap,\n    disableCenteredMedia = false,\n    ...remaining\n  } = props;\n\n  const isMedia = type === \"media\" || type === \"large-media\";\n\n  return (\n    <TextIconSpacing\n      {...remaining}\n      icon={addon}\n      forceIconWrap={forceAddonWrap ?? isMedia}\n      className={listItemAddon({\n        type,\n        position,\n        className,\n        addonAfter,\n        disableCenteredMedia,\n      })}\n      iconAfter={addonAfter}\n    >\n      {children}\n    </TextIconSpacing>\n  );\n}\n"],"names":["TextIconSpacing","listItemAddon","ListItemAddon","props","className","children","addon","addonAfter","type","position","forceAddonWrap","disableCenteredMedia","remaining","isMedia","icon","forceIconWrap","iconAfter"],"mappings":";AACA,SACEA,eAAe,QAEV,6BAA6B;AACpC,SACEC,aAAa,QAER,sBAAsB;AAgB7B;;;;;;;CAOC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,aAAa,KAAK,EAClBC,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBC,cAAc,EACdC,uBAAuB,KAAK,EAC5B,GAAGC,WACJ,GAAGT;IAEJ,MAAMU,UAAUL,SAAS,WAAWA,SAAS;IAE7C,qBACE,KAACR;QACE,GAAGY,SAAS;QACbE,MAAMR;QACNS,eAAeL,kBAAkBG;QACjCT,WAAWH,cAAc;YACvBO;YACAC;YACAL;YACAG;YACAI;QACF;QACAK,WAAWT;kBAEVF;;AAGP"}
+{"version":3,"sources":["../../src/list/ListItemAddon.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport {\n  TextIconSpacing,\n  type TextIconSpacingProps,\n} from \"../icon/TextIconSpacing.js\";\nimport {\n  listItemAddon,\n  type ListItemAddonClassNameOptions,\n} from \"./listItemStyles.js\";\n\nexport interface ListItemAddonProps\n  extends Omit<TextIconSpacingProps, \"icon\" | \"iconAfter\" | \"forceIconWrap\">,\n    ListItemAddonClassNameOptions {\n  /**\n   * The addon that should be rendered.\n   */\n  addon: ReactNode;\n\n  /**\n   * @defaultValue `type === \"media\" || type === \"large-media\"`\n   */\n  forceAddonWrap?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * The `ListItemAddon` is used to create an addon to the left or right of the\n * text/children of a `ListItem`.\n *\n * @internal\n */\nexport function ListItemAddon(props: ListItemAddonProps): ReactElement {\n  const {\n    className,\n    children,\n    addon,\n    addonAfter,\n    type = \"icon\",\n    position,\n    forceAddonWrap,\n    disableCenteredMedia,\n    disableBeforeSpacing,\n    ...remaining\n  } = props;\n\n  const isMedia = type === \"media\" || type === \"large-media\";\n\n  return (\n    <TextIconSpacing\n      {...remaining}\n      icon={addon}\n      forceIconWrap={forceAddonWrap ?? isMedia}\n      className={listItemAddon({\n        type,\n        position,\n        className,\n        addonAfter,\n        disableBeforeSpacing,\n        disableCenteredMedia,\n      })}\n      iconAfter={addonAfter}\n    >\n      {children}\n    </TextIconSpacing>\n  );\n}\n"],"names":["TextIconSpacing","listItemAddon","ListItemAddon","props","className","children","addon","addonAfter","type","position","forceAddonWrap","disableCenteredMedia","disableBeforeSpacing","remaining","isMedia","icon","forceIconWrap","iconAfter"],"mappings":";AACA,SACEA,eAAe,QAEV,6BAA6B;AACpC,SACEC,aAAa,QAER,sBAAsB;AAgB7B;;;;;;;CAOC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,OAAO,MAAM,EACbC,QAAQ,EACRC,cAAc,EACdC,oBAAoB,EACpBC,oBAAoB,EACpB,GAAGC,WACJ,GAAGV;IAEJ,MAAMW,UAAUN,SAAS,WAAWA,SAAS;IAE7C,qBACE,KAACR;QACE,GAAGa,SAAS;QACbE,MAAMT;QACNU,eAAeN,kBAAkBI;QACjCV,WAAWH,cAAc;YACvBO;YACAC;YACAL;YACAG;YACAK;YACAD;QACF;QACAM,WAAWV;kBAEVF;;AAGP"}

package/dist/list/ListItemChildren.js

@@ -37,7 +37,7 @@ import { ListItemText } from "./ListItemText.js";
  * }
  * ```
  */ export function ListItemChildren(props) {
-    const { threeLines, textProps, textClassName, secondaryTextClassName, disableTextChildren, primaryText, secondaryText, secondaryTextProps, leftAddon, leftAddonType = "icon", leftAddonPosition = "middle", leftAddonClassName, leftAddonForceWrap, disableLeftAddonCenteredMedia, rightAddon, rightAddonType = "icon", rightAddonPosition = "middle", rightAddonClassName, rightAddonForceWrap, disableRightAddonCenteredMedia, children: propChildren } = props;
+    const { multiline, textProps, textClassName, secondaryTextClassName, disableTextChildren, primaryText, secondaryText, secondaryTextProps, leftAddon, leftAddonType = "icon", leftAddonPosition = "middle", leftAddonClassName, leftAddonForceWrap, disableLeftAddonSpacing, disableLeftAddonCenteredMedia, rightAddon, rightAddonType = "icon", rightAddonPosition = "middle", rightAddonClassName, rightAddonForceWrap, disableRightAddonCenteredMedia, children: propChildren } = props;
     const stringifiedChildren = typeof propChildren === "number" ? `${propChildren}` : propChildren;
     let children = stringifiedChildren;
     if (primaryText || secondaryText || !disableTextChildren) {
@@ -46,7 +46,7 @@ import { ListItemText } from "./ListItemText.js";
             className: textClassName,
             secondaryText: secondaryText,
             secondaryTextProps: secondaryTextProps,
-            secondaryTextClamped: threeLines,
+            secondaryTextClamped: multiline,
             secondaryTextClassName: secondaryTextClassName,
             children: !disableTextChildren && children || primaryText
         });
@@ -57,6 +57,7 @@ import { ListItemText } from "./ListItemText.js";
         position: leftAddonPosition,
         className: leftAddonClassName,
         forceAddonWrap: leftAddonForceWrap,
+        disableBeforeSpacing: disableLeftAddonSpacing,
         disableCenteredMedia: disableLeftAddonCenteredMedia,
         children: children
     });