@react-md/core 1.0.0-next.2 → 1.0.0-next.4

package/dist/src/layout/useExpandableLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layout/useExpandableLayout.ts"],"sourcesContent":["\"use client\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport type { CSSTransitionElementProps } from \"../transition/types.js\";\nimport type { CssPosition, UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport type { LayoutNavProps } from \"./LayoutNav.js\";\nimport type { HorizontalLayoutTransitionOptions } from \"./useHorizontalLayoutTransition.js\";\nimport { useHorizontalLayoutTransition } from \"./useHorizontalLayoutTransition.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type { useResizableLayout } from \"./useResizableLayout.js\";\nimport type {\n  ProvidedTemporaryLayoutAppBarProps,\n  ProvidedTemporaryLayoutMainProps,\n  TemporaryLayoutImplementation,\n  TemporaryLayoutOptions,\n} from \"./useTemporaryLayout.js\";\nimport { useTemporaryLayout } from \"./useTemporaryLayout.js\";\n\n/**\n * @remarks \\@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   * @defaultValue `false`\n   */\n  fullHeightNav?: boolean;\n\n  /** @see {@link HorizontalLayoutTransitionOptions} */\n  transitionProps?: Omit<HorizontalLayoutTransitionOptions, \"transitionIn\">;\n\n  /**\n   * Set this to `\"desktop\"` if you want to use the temporary navigation until\n   * the viewport is at least desktop width instead of tablet.\n   *\n   * @defaultValue `\"tablet\"`\n   */\n  temporaryUntil?: \"tablet\" | \"desktop\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedLayoutMainProps\n  extends ProvidedTemporaryLayoutMainProps,\n    CSSTransitionElementProps<HTMLElement> {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ProvidedLayoutNavProps = Pick<\n  LayoutNavProps,\n  \"expanded\" | \"appBarOffset\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps &\n  Partial<CSSTransitionElementProps<HTMLElement>>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ExpandableLayoutImplementation\n  extends TemporaryLayoutImplementation {\n  temporary: boolean;\n  expanded: boolean;\n  expandNavigation(): void;\n  collapseNavigation(): void;\n  toggleNavigation(): void;\n  appBarProps: ProvidedLayoutAppBarProps;\n  mainProps: ProvidedLayoutMainProps;\n  expandableNavProps: ProvidedLayoutNavProps;\n}\n\n/**\n * @example\n * Main USage\n * ```tsx\n * import {\n *   AppBarTitle,\n *   Button,\n *   LayoutAppBar,\n *   LayoutNav,\n *   Main,\n *   Sheet,\n *   useExpandableLayout,\n * } from \"@react-md/core\";\n * import type { ReactElement, 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 * @remarks \\@since 6.0.0\n * @see {@link useResizableLayout}\n */\nexport function useExpandableLayout(\n  options: ExpandableLayoutOptions\n): ExpandableLayoutImplementation {\n  const {\n    defaultExpanded = false,\n    fullHeightNav = false,\n    transitionProps,\n    temporaryUntil = \"tablet\",\n    ...temporaryOptions\n  } = options;\n\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 temporary = isPhone || (temporaryUntil === \"desktop\" && !isDesktop);\n\n  return {\n    visible,\n    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    },\n  };\n}\n"],"names":["useAppSize","useToggle","useHorizontalLayoutTransition","useTemporaryLayout","useExpandableLayout","options","defaultExpanded","fullHeightNav","transitionProps","temporaryUntil","temporaryOptions","appBarProps","mainProps","navToggleProps","temporaryNavProps","hideTemporaryNav","showTemporaryNav","visible","toggled","expanded","enable","expandNavigation","disable","collapseNavigation","toggle","toggleNavigation","elementProps","transitionIn","isPhone","isDesktop","temporary","expandableNavProps","appBarOffset","onClick"],"mappings":"AAAA;AACA,SAASA,UAAU,QAAQ,sCAAsC;AAGjE,SAASC,SAAS,QAAQ,kBAAkB;AAG5C,SAASC,6BAA6B,QAAQ,qCAAqC;AASnF,SAASC,kBAAkB,QAAQ,0BAA0B;AAsE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EACJC,kBAAkB,KAAK,EACvBC,gBAAgB,KAAK,EACrBC,eAAe,EACfC,iBAAiB,QAAQ,EACzB,GAAGC,kBACJ,GAAGL;IAEJ,MAAM,EACJM,WAAW,EACXC,SAAS,EACTC,cAAc,EACdC,iBAAiB,EACjBC,gBAAgB,EAChBC,gBAAgB,EAChBC,OAAO,EACR,GAAGd,mBAAmBO;IAEvB,MAAM,EACJQ,SAASC,QAAQ,EACjBC,QAAQC,gBAAgB,EACxBC,SAASC,kBAAkB,EAC3BC,QAAQC,gBAAgB,EACzB,GAAGxB,UAAUK;IACd,MAAM,EAAEoB,YAAY,EAAE,GAAGxB,8BAA8B;QACrD,GAAGM,eAAe;QAClBmB,cAAcR;IAChB;IACA,MAAM,EAAES,OAAO,EAAEC,SAAS,EAAE,GAAG7B;IAC/B,MAAM8B,YAAYF,WAAYnB,mBAAmB,aAAa,CAACoB;IAE/D,OAAO;QACLZ;QACAa;QACAf;QACAC;QACAG;QACAE;QACAE;QACAE;QACAd,aAAa;YACX,GAAGA,WAAW;YACd,GAAIJ,gBAAgBmB,eAAe,CAAC,CAAC;QACvC;QACAd,WAAW;YACT,GAAGA,SAAS;YACZ,GAAGc,YAAY;QACjB;QACAZ;QACAiB,oBAAoB;YAClBZ;YACAa,cAAc,CAACzB;QACjB;QACAM,gBAAgB;YACd,GAAGA,cAAc;YACjBoB;gBACE,IAAIH,WAAW;oBACbd;gBACF,OAAO;oBACLS;gBACF;YACF;QACF;IACF;AACF"}

package/dist/src/layout/useHorizontalLayoutTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layout/useHorizontalLayoutTransition.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { DEFAULT_SHEET_TIMEOUT } from \"../sheet/Sheet.js\";\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\n\n/**\n * @remarks \\@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} satisfies Readonly<CSSTransitionClassNames>;\n\n/**\n * @remarks \\@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, Main, useHorizontalLayoutTransition } from \"@react-md/core\";\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 * @remarks \\@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;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,qBAAqB,QAAQ,oBAAoB;AAO1D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE;;CAEC,GACD,OAAO,MAAMC,kDAAkD;IAC7DC,YAAY;IACZC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;AACR,EAA8C;AAmB9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,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/src/layout/useLayoutAppBarHeight.js

@@ -0,0 +1,78 @@
+"use client";
+import { useMemo } from "react";
+import { useElementSize } from "../useElementSize.js";
+/**
+ * @example
+ * Main Usage
+ * ```tsx
+ * import type { PropsWithChildren, ReactElement } from "react";
+ * import {
+ *   AppBar,
+ *   useCSSVariables,
+ *   useLayoutAppBarHeight
+ * } from "@react-md/core";
+ *
+ * export function LayoutHeader({ children }: PropsWithChildren): ReactElement {
+ *   const { appBarRef, variables } = useLayoutAppBarHeight();
+ *   useCSSVariables(variables);
+ *
+ *   return (
+ *     <AppBar ref={appBarRef} {...customProps}>
+ *       <CustomChildren />
+ *     </AppBar>
+ *   );
+ * };
+ * ```
+ *
+ * @example
+ * Inline Variables
+ * ```tsx
+ * import type { PropsWithChildren, ReactElement } from "react";
+ * import {
+ *   AppBar,
+ *   useCSSVariables,
+ *   useLayoutAppBarHeight
+ * } from "@react-md/core";
+ *
+ * export function Layout({ children }: PropsWithChildren): ReactElement {
+ *   const { appBarRef, variables } = useLayoutAppBarHeight();
+ *   const inlineStyle = useCSSVariables(variables, true);
+ *
+ *   return (
+ *     <div style={inlineStyle}>
+ *       <AppBar ref={appBarRef} {...customProps}>
+ *         <CustomChildren />
+ *       </AppBar>
+ *       {children}
+ *     </div>
+ *   );
+ * };
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */ export function useLayoutAppBarHeight(ref) {
+    const { height, elementRef } = useElementSize({
+        ref,
+        disableWidth: true
+    });
+    const variables = useMemo(()=>{
+        if (Number.isNaN(height)) {
+            return [];
+        }
+        return [
+            {
+                name: "--rmd-layout-header-height",
+                value: `${height}px`
+            }
+        ];
+    }, [
+        height
+    ]);
+    return {
+        height,
+        variables,
+        appBarRef: elementRef
+    };
+}
+
+//# sourceMappingURL=useLayoutAppBarHeight.js.map

package/dist/src/layout/useLayoutAppBarHeight.js.map

@@ -0,0 +1 @@
+{"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/src/layout/useLayoutTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layout/useLayoutTree.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo } from \"react\";\nimport type { TreeProps } from \"../tree/Tree.js\";\nimport type {\n  DefaultTreeItemNode,\n  TreeData,\n  TreeItemDefaultIds,\n  TreeItemNode,\n} from \"../tree/types.js\";\nimport type { TreeImplementation } from \"../tree/useTree.js\";\nimport { useTreeExpansion } from \"../tree/useTreeExpansion.js\";\nimport { getTreeItemsFrom } from \"../tree/utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n */\nconst getParentIds = (\n  itemId: string,\n  navItems: TreeData<TreeItemNode>\n): readonly string[] =>\n  getTreeItemsFrom(navItems, itemId).map(({ itemId }) => itemId);\n\n/**\n * @remarks \\@since 6.0.0 Removed the `linkComponent` option.\n */\nexport interface LayoutTreeOptions<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> {\n  /**\n   * The current pathname which is used as the tree `itemId`.\n   */\n  pathname: string;\n\n  /**\n   * @example\n   * ```tsx\n   * const navItems = {\n   *   \"/\": {\n   *     itemId: \"/\",\n   *     parentId: null,\n   *     children: \"Home\",\n   *     leftAddon: <HomeIcon />,\n   *     to: \"/\",\n   *   },\n   *   \"/route-1\": {\n   *     itemId: \"/route-1\",\n   *     parentId: null,\n   *     children: \"Route 1\",\n   *     leftAddon: <TvIcon />,\n   *     to: \"/route-1\",\n   *   },\n   *   \"/route-2\": {\n   *     itemId: \"/route-2\",\n   *     parentId: null,\n   *     children: \"Route 2\",\n   *     leftAddon: <AppsIcon />,\n   *     to: \"/route-2\",\n   *   },\n   *   \"/route-3\": {\n   *     itemId: \"/route-3\",\n   *     parentId: null,\n   *     children: \"Route 3\",\n   *     leftAddon: <BookIcon />,\n   *     to: \"/route-3\",\n   *   },\n   * } satisfies TreeData;\n   * ```\n   */\n  navItems: TreeData<T>;\n\n  /**\n   * @defaultValue `getParentIds(pathname, navItems)`\n   */\n  defaultExpandedIds?: TreeItemDefaultIds;\n}\n\n/**\n * @remarks \\@since 6.0.0 Renamed from `LayoutNavigationState`, removed the\n * `linkComponent`, and remap `navItems` to `data` so it can be passed to the\n * `Tree` component.\n */\nexport interface LayoutTreeImplementation<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> extends Pick<TreeProps<T>, \"data\">,\n    TreeImplementation {}\n\n/**\n * Before considering to use a `Tree` for site navigation, it is important to\n * understand:\n * - There is a lot of functionality required to implement the tree widget so\n *   your bundle size will increase\n * - A pattern more suited for typical site navigation with expandable groups of\n *   links is the disclosure pattern.\n * - @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/\n *\n * This is a pretty reasonable default implementation for having a navigation\n * tree within the Layout component. The way it'll work is that the current\n * route will be the only selected item within the tree. When the pathname\n * changes, the selectedIds will be updated to only be the current pathname once\n * again.\n *\n * This means that you can use whatever routing library or history provider that\n * ensures that your layout re-renders on a path change.\n *\n * @example\n * ```tsx\n * import { Tree, useLayoutTree } from \"@react-md/core\";\n * import type { TreeData } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * // choose your routing library...\n * import { Link, useLocation } from \"react-router\";\n *\n * const navItems = {\n *   \"/\": {\n *     itemId: \"/\",\n *     parentId: null,\n *     children: \"Home\",\n *     leftAddon: <HomeIcon />,\n *     to: \"/\",\n *   },\n *   \"/route-1\": {\n *     itemId: \"/route-1\",\n *     parentId: null,\n *     children: \"Route 1\",\n *     leftAddon: <TvIcon />,\n *     to: \"/route-1\",\n *   },\n *   \"/route-2\": {\n *     itemId: \"/route-2\",\n *     parentId: null,\n *     children: \"Route 2\",\n *     leftAddon: <AppsIcon />,\n *     to: \"/route-2\",\n *   },\n *   \"/route-3\": {\n *     itemId: \"/route-3\",\n *     parentId: null,\n *     children: \"Route 3\",\n *     leftAddon: <BookIcon />,\n *     to: \"/route-3\",\n *   },\n * } satisfies TreeData;\n *\n * function Example(): ReactElement {\n *   const { pathname } = useLocation();\n *   const tree = useLayoutTree({\n *     navItems,\n *     pathname,\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Navigation\"\n *       linkComponent={Link}\n *     />\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Renamed from `useLayoutNavigation`.\n */\nexport function useLayoutTree(\n  options: LayoutTreeOptions\n): LayoutTreeImplementation {\n  const { defaultExpandedIds, navItems, pathname } = options;\n\n  const selectedIds = useMemo(() => new Set([pathname]), [pathname]);\n  const { expandedIds, expandMultipleTreeItems, toggleTreeItemExpansion } =\n    useTreeExpansion(\n      defaultExpandedIds ?? (() => getParentIds(pathname, navItems))\n    );\n\n  useEffect(() => {\n    expandMultipleTreeItems((prevExpandedIds) => {\n      const nextExpandedIds = new Set([\n        ...prevExpandedIds,\n        ...getParentIds(pathname, navItems),\n      ]);\n\n      return nextExpandedIds;\n    });\n  }, [expandMultipleTreeItems, pathname, navItems]);\n\n  return {\n    data: navItems,\n    multiSelect: false,\n    selectedIds,\n    expandedIds,\n    expandMultipleTreeItems,\n    toggleTreeItemExpansion,\n    toggleTreeItemSelection: noop,\n    selectMultipleTreeItems: noop,\n  };\n}\n"],"names":["useEffect","useMemo","useTreeExpansion","getTreeItemsFrom","noop","getParentIds","itemId","navItems","map","useLayoutTree","options","defaultExpandedIds","pathname","selectedIds","Set","expandedIds","expandMultipleTreeItems","toggleTreeItemExpansion","prevExpandedIds","nextExpandedIds","data","multiSelect","toggleTreeItemSelection","selectMultipleTreeItems"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAS3C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;CAEC,GACD,MAAMC,eAAe,CACnBC,QACAC,WAEAJ,iBAAiBI,UAAUD,QAAQE,GAAG,CAAC,CAAC,EAAEF,MAAM,EAAE,GAAKA;AAkEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EC,GACD,OAAO,SAASG,cACdC,OAA0B;IAE1B,MAAM,EAAEC,kBAAkB,EAAEJ,QAAQ,EAAEK,QAAQ,EAAE,GAAGF;IAEnD,MAAMG,cAAcZ,QAAQ,IAAM,IAAIa,IAAI;YAACF;SAAS,GAAG;QAACA;KAAS;IACjE,MAAM,EAAEG,WAAW,EAAEC,uBAAuB,EAAEC,uBAAuB,EAAE,GACrEf,iBACES,sBAAuB,CAAA,IAAMN,aAAaO,UAAUL,SAAQ;IAGhEP,UAAU;QACRgB,wBAAwB,CAACE;YACvB,MAAMC,kBAAkB,IAAIL,IAAI;mBAC3BI;mBACAb,aAAaO,UAAUL;aAC3B;YAED,OAAOY;QACT;IACF,GAAG;QAACH;QAAyBJ;QAAUL;KAAS;IAEhD,OAAO;QACLa,MAAMb;QACNc,aAAa;QACbR;QACAE;QACAC;QACAC;QACAK,yBAAyBlB;QACzBmB,yBAAyBnB;IAC3B;AACF"}

package/dist/src/layout/useLayoutWindowSplitter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layout/useLayoutWindowSplitter.ts"],"sourcesContent":["\"use client\";\nimport { type UncontrolledDraggableOptions } from \"../draggable/useDraggable.js\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport { useWindowSize } from \"../useWindowSize.js\";\nimport {\n  useWindowSplitter,\n  type WindowSplitterImplementation,\n  type WindowSplitterOptions,\n  type WindowSplitterWidgetProps,\n} from \"../window-splitter/useWindowSplitter.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface LayoutWindowSplitterOptions\n  extends Omit<WindowSplitterOptions, \"min\" | \"max\"> {\n  /**\n   * @see {@link WindowSplitterOptions.min}\n   * @defaultValue `96`\n   */\n  min?: number;\n\n  /**\n   * This is the minimum max value that can be allowed while resizing the\n   * browser. I don't know the best way to describe it, but the `max` value is\n   * determined by:\n   *\n   * ```ts\n   * const { width } = useWindowSize({ disableHeight: true });\n   * const max = Math.max(maxMinimum, width * windowPercentage);\n   * ```\n   *\n   * @defaultValue `600`\n   */\n  maxMinimum?: number;\n\n  /**\n   * This will be multiplied by the current window's width to determine the\n   * dynamic max value for the window splitter.\n   *\n   * @see {@link maxMinimum}\n   * @defaultValue `0.45`\n   */\n  windowPercentage?: number;\n\n  /** @defaultValue `256` */\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedLayoutWindowSplitterProps\n  extends WindowSplitterWidgetProps<HTMLButtonElement> {\n  /** @defaultValue {@link WindowSplitterImplementation.value} */\n  navWidth: number;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface LayoutWindowSplitterImplementation\n  extends WindowSplitterImplementation {\n  splitterProps: ProvidedLayoutWindowSplitterProps;\n}\n\n/**\n * A custom window splitter implementation to be used with the\n * `LayoutWindowSplitter` that will dynamically configure the max width to be a\n * percentage of the current window's width.\n *\n * Note: This will automatically save the width in local storage as\n * `\"navWidth\"`. See the example below if you do not want to use local storage.\n *\n * @example\n * Without this hook\n * ```tsx\n * import { useWindowSize, useWindowSplitter } from \"@react-md/core\";\n * import type { ProvidedLayoutWindowSplitterProps } from \"@react-md/core\";\n *\n * export function useMyLayoutWindowSplitter(): ProvidedLayoutWindowSplitterProps {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const { splitterProps, value } = useWindowSplitter({\n *     min: 96,\n *     max: Math.max(maxMinimum, width * 0.45),\n *     maxMinimum: 600,\n *   });\n *\n *   return {\n *     ...splitterProps,\n *     navWidth: value,\n *   };\n * }\n *\n * function MyLayout() {\n *   const splitterProps = useMyLayoutWindowSplitter();\n *\n *   return (\n *     <LayoutWindowSplitter\n *       {...splitterProps}\n *       aria-controls=\"layout-nav-id\"\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link useResizableLayout} For a pre-built solution.\n * @remarks \\@since 6.0.0\n */\nexport function useLayoutWindowSplitter(\n  options: LayoutWindowSplitterOptions = {}\n): LayoutWindowSplitterImplementation {\n  const {\n    min = 96,\n    maxMinimum = 600,\n    windowPercentage = 0.45,\n    defaultValue = 256,\n    ...remaining\n  } = options;\n  const { width } = useWindowSize({ disableHeight: true });\n  const implementation = useWindowSplitter({\n    min,\n    max: Math.max(maxMinimum, width * windowPercentage),\n    defaultValue,\n    // type cast so it doesn't complain about defaultValue being provided with\n    // value. That's mostly for public api usage\n    ...(remaining as UncontrolledDraggableOptions),\n  });\n\n  return {\n    ...implementation,\n    splitterProps: {\n      ...implementation.splitterProps,\n      navWidth: implementation.value,\n    },\n  };\n}\n"],"names":["useWindowSize","useWindowSplitter","useLayoutWindowSplitter","options","min","maxMinimum","windowPercentage","defaultValue","remaining","width","disableHeight","implementation","max","Math","splitterProps","navWidth","value"],"mappings":"AAAA;AAGA,SAASA,aAAa,QAAQ,sBAAsB;AACpD,SACEC,iBAAiB,QAIZ,0CAA0C;AAyDjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,SAASC,wBACdC,UAAuC,CAAC,CAAC;IAEzC,MAAM,EACJC,MAAM,EAAE,EACRC,aAAa,GAAG,EAChBC,mBAAmB,IAAI,EACvBC,eAAe,GAAG,EAClB,GAAGC,WACJ,GAAGL;IACJ,MAAM,EAAEM,KAAK,EAAE,GAAGT,cAAc;QAAEU,eAAe;IAAK;IACtD,MAAMC,iBAAiBV,kBAAkB;QACvCG;QACAQ,KAAKC,KAAKD,GAAG,CAACP,YAAYI,QAAQH;QAClCC;QACA,0EAA0E;QAC1E,4CAA4C;QAC5C,GAAIC,SAAS;IACf;IAEA,OAAO;QACL,GAAGG,cAAc;QACjBG,eAAe;YACb,GAAGH,eAAeG,aAAa;YAC/BC,UAAUJ,eAAeK,KAAK;QAChC;IACF;AACF"}

package/dist/src/layout/useMainTabIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layout/useMainTabIndex.ts"],"sourcesContent":["\"use client\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\n\n/**\n * This hook is used to return a tab index of `-1` whenever the user is using a\n * keyboard for the `SkipToMainContent` to work correctly.\n *\n * @remarks \\@since 6.0.0\n */\nexport function useMainTabIndex(tabIndex?: number): number | undefined {\n  const keyboard = useUserInteractionMode() === \"keyboard\";\n  if (keyboard && typeof tabIndex === \"undefined\") {\n    tabIndex = -1;\n  }\n\n  return tabIndex;\n}\n"],"names":["useUserInteractionMode","useMainTabIndex","tabIndex","keyboard"],"mappings":"AAAA;AACA,SAASA,sBAAsB,QAAQ,gDAAgD;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,gBAAgBC,QAAiB;IAC/C,MAAMC,WAAWH,6BAA6B;IAC9C,IAAIG,YAAY,OAAOD,aAAa,aAAa;QAC/CA,WAAW,CAAC;IACd;IAEA,OAAOA;AACT"}

package/dist/src/layout/useResizableLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layout/useResizableLayout.ts"],"sourcesContent":["import { useEnsuredId } from \"../useEnsuredId.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { type LayoutWindowSplitterProps } from \"./LayoutWindowSplitter.js\";\nimport {\n  type ExpandableLayoutImplementation,\n  type ExpandableLayoutOptions,\n  type ProvidedLayoutNavProps,\n} from \"./useExpandableLayout.js\";\nimport { useExpandableLayout } from \"./useExpandableLayout.js\";\nimport {\n  useLayoutWindowSplitter,\n  type LayoutWindowSplitterOptions,\n} from \"./useLayoutWindowSplitter.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ResizableLayoutOptions\n  extends ExpandableLayoutOptions,\n    LayoutWindowSplitterOptions {\n  /**\n   * This id will be used as the `aria-controls` prop for the\n   * `LayoutWindowSplitter` and should be applied to the `LayoutNav` as an `id`.\n   *\n   * @defaultValue `\"layout-nav\" + useId()`\n   */\n  navId?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedResizableLayoutNavProps\n  extends ProvidedLayoutNavProps {\n  id: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ResizableLayoutImplementation\n  extends ExpandableLayoutImplementation {\n  expandableNavProps: ProvidedResizableLayoutNavProps;\n  windowSplitterProps: LayoutWindowSplitterProps;\n}\n\n/**\n * @example\n * Main USage\n * ```tsx\n * import {\n *   AppBarTitle,\n *   Button,\n *   LayoutAppBar,\n *   LayoutNav,\n *   LayoutWindowSplitter,\n *   Main,\n *   Sheet,\n *   useResizableLayout,\n * } from \"@react-md/core\";\n * import type { ReactElement, 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 *     isPhone,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useResizableLayout({ 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 *       <LayoutWindowSplitter {...windowSplitterProps} />\n *       {isPhone && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   }\n * }\n * ```\n * @remarks \\@since 6.0.0\n */\nexport function useResizableLayout(\n  options: ResizableLayoutOptions\n): ResizableLayoutImplementation {\n  const {\n    navId: propNavId,\n    pathname,\n    appBarPosition = \"fixed\",\n    fullHeightNav = false,\n    defaultVisible,\n    defaultExpanded,\n    ...splitterOptions\n  } = options;\n  const navId = useEnsuredId(propNavId, \"layout-nav\");\n  const { splitterProps, ...windowSplitter } =\n    useLayoutWindowSplitter(splitterOptions);\n  const expandableLayout = useExpandableLayout({\n    pathname,\n    appBarPosition,\n    fullHeightNav,\n    defaultExpanded,\n    defaultVisible,\n  });\n  const { expandableNavProps, expanded } = expandableLayout;\n\n  return {\n    ...expandableLayout,\n    ...windowSplitter,\n    expandableNavProps: {\n      id: navId,\n      ...expandableNavProps,\n    },\n    windowSplitterProps: {\n      ...splitterProps,\n      \"aria-controls\": navId,\n      appBarOffset: !fullHeightNav,\n      className: (!expanded && DISPLAY_NONE_CLASS) || undefined,\n    },\n  };\n}\n"],"names":["useEnsuredId","DISPLAY_NONE_CLASS","useExpandableLayout","useLayoutWindowSplitter","useResizableLayout","options","navId","propNavId","pathname","appBarPosition","fullHeightNav","defaultVisible","defaultExpanded","splitterOptions","splitterProps","windowSplitter","expandableLayout","expandableNavProps","expanded","id","windowSplitterProps","appBarOffset","className","undefined"],"mappings":"AAAA,SAASA,YAAY,QAAQ,qBAAqB;AAClD,SAASC,kBAAkB,QAAQ,+BAA+B;AAOlE,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,SACEC,uBAAuB,QAElB,+BAA+B;AAkCtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,SAASC,mBACdC,OAA+B;IAE/B,MAAM,EACJC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,iBAAiB,OAAO,EACxBC,gBAAgB,KAAK,EACrBC,cAAc,EACdC,eAAe,EACf,GAAGC,iBACJ,GAAGR;IACJ,MAAMC,QAAQN,aAAaO,WAAW;IACtC,MAAM,EAAEO,aAAa,EAAE,GAAGC,gBAAgB,GACxCZ,wBAAwBU;IAC1B,MAAMG,mBAAmBd,oBAAoB;QAC3CM;QACAC;QACAC;QACAE;QACAD;IACF;IACA,MAAM,EAAEM,kBAAkB,EAAEC,QAAQ,EAAE,GAAGF;IAEzC,OAAO;QACL,GAAGA,gBAAgB;QACnB,GAAGD,cAAc;QACjBE,oBAAoB;YAClBE,IAAIb;YACJ,GAAGW,kBAAkB;QACvB;QACAG,qBAAqB;YACnB,GAAGN,aAAa;YAChB,iBAAiBR;YACjBe,cAAc,CAACX;YACfY,WAAW,AAAC,CAACJ,YAAYjB,sBAAuBsB;QAClD;IACF;AACF"}

package/dist/src/layout/useTemporaryLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layout/useTemporaryLayout.ts"],"sourcesContent":["\"use client\";\nimport type { PropsWithChildren } from \"react\";\nimport { useEffect } from \"react\";\nimport type { AppBarProps } from \"../app-bar/AppBar.js\";\nimport type { ButtonProps } from \"../button/Button.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport type { SheetProps } from \"../sheet/Sheet.js\";\nimport type { CssPosition, UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport type { MainProps } from \"./Main.js\";\n\nexport interface TemporaryLayoutOptions {\n  /**\n   * This is used to automatically hide the temporary navigation whenever the\n   * route changes. Set this to `null` if you want to handle closing yourself.\n   */\n  pathname: string | null;\n\n  /** @defaultValue `\"fixed\"` */\n  appBarPosition?: CssPosition;\n\n  /** @defaultValue `false` */\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ProvidedLayoutNavToggleProps = PropsWithChildren<\n  Pick<Required<ButtonProps>, \"aria-label\" | \"buttonType\" | \"onClick\">\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ProvidedTemporaryLayoutNavProps = Pick<\n  Required<SheetProps>,\n  \"aria-label\" | \"visible\" | \"onRequestClose\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ProvidedTemporaryLayoutMainProps = Required<\n  Pick<MainProps, \"appBarOffset\">\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ProvidedTemporaryLayoutAppBarProps = Required<\n  Pick<AppBarProps, \"position\">\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TemporaryLayoutImplementation {\n  visible: boolean;\n  showTemporaryNav(): void;\n  hideTemporaryNav(): void;\n  appBarProps: ProvidedTemporaryLayoutAppBarProps;\n  mainProps: ProvidedTemporaryLayoutMainProps;\n  navToggleProps: ProvidedLayoutNavToggleProps;\n  temporaryNavProps: ProvidedTemporaryLayoutNavProps;\n}\n\n/**\n * @example\n * ```tsx\n * import {\n *   AppBar,\n *   AppBarTitle,\n *   Button,\n *   Main,\n *   Sheet,\n *   useTemporaryLayout,\n * } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation.jsx\";\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 *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *   } = useTemporaryLayout({ pathname });\n *\n *   return (\n *     <>\n *       <AppBar position=\"fixed\">\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </AppBar>\n *       <Main {...mainProps}>{children}</Main>\n *       <Sheet {...temporaryNavProps}>\n *         <CustomNavigation />\n *       </Sheet>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useTemporaryLayout(\n  options: TemporaryLayoutOptions\n): TemporaryLayoutImplementation {\n  const {\n    pathname,\n    defaultVisible = false,\n    appBarPosition = \"fixed\",\n  } = options;\n\n  const menuIcon = getIcon(\"menu\");\n  const {\n    toggled: visible,\n    enable: showTemporaryNav,\n    disable: hideTemporaryNav,\n  } = useToggle(defaultVisible);\n\n  // hide the temporary nav whenever the route changes\n  useEffect(() => {\n    if (pathname !== null) {\n      hideTemporaryNav();\n    }\n  }, [hideTemporaryNav, pathname]);\n\n  return {\n    visible,\n    showTemporaryNav,\n    hideTemporaryNav,\n    appBarProps: {\n      position: appBarPosition,\n    },\n    mainProps: {\n      appBarOffset: appBarPosition !== \"static\",\n    },\n    temporaryNavProps: {\n      \"aria-label\": \"Navigation\",\n      visible,\n      onRequestClose: hideTemporaryNav,\n    },\n    navToggleProps: {\n      \"aria-label\": \"Navigation\",\n      buttonType: \"icon\",\n      children: menuIcon,\n      onClick() {\n        showTemporaryNav();\n      },\n    },\n  };\n}\n"],"names":["useEffect","getIcon","useToggle","useTemporaryLayout","options","pathname","defaultVisible","appBarPosition","menuIcon","toggled","visible","enable","showTemporaryNav","disable","hideTemporaryNav","appBarProps","position","mainProps","appBarOffset","temporaryNavProps","onRequestClose","navToggleProps","buttonType","children","onClick"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAQ;AAGlC,SAASC,OAAO,QAAQ,wBAAwB;AAGhD,SAASC,SAAS,QAAQ,kBAAkB;AA2D5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDC,GACD,OAAO,SAASC,mBACdC,OAA+B;IAE/B,MAAM,EACJC,QAAQ,EACRC,iBAAiB,KAAK,EACtBC,iBAAiB,OAAO,EACzB,GAAGH;IAEJ,MAAMI,WAAWP,QAAQ;IACzB,MAAM,EACJQ,SAASC,OAAO,EAChBC,QAAQC,gBAAgB,EACxBC,SAASC,gBAAgB,EAC1B,GAAGZ,UAAUI;IAEd,oDAAoD;IACpDN,UAAU;QACR,IAAIK,aAAa,MAAM;YACrBS;QACF;IACF,GAAG;QAACA;QAAkBT;KAAS;IAE/B,OAAO;QACLK;QACAE;QACAE;QACAC,aAAa;YACXC,UAAUT;QACZ;QACAU,WAAW;YACTC,cAAcX,mBAAmB;QACnC;QACAY,mBAAmB;YACjB,cAAc;YACdT;YACAU,gBAAgBN;QAClB;QACAO,gBAAgB;YACd,cAAc;YACdC,YAAY;YACZC,UAAUf;YACVgB;gBACEZ;YACF;QACF;IACF;AACF"}

package/dist/src/link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/link/Link.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n} from \"react\";\nimport { link, type LinkClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-link-color\"?: string;\n    \"--rmd-link-visited-color\"?: string;\n    \"--rmd-link-hover-color\"?: string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type CustomLinkComponent =\n  | ForwardRefExoticComponent<{ href: string }>\n  | ForwardRefExoticComponent<{ to: string }>\n  | \"a\";\n\n/**\n * @remarks\n * \\@since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * \\@since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * \\@since 6.0.0 The `href` prop is required.\n * \\@since 6.0.0 Removed the `flexCentered` prop since it is now the default\n * styles.\n */\nexport interface LinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    LinkClassNameOptions {\n  /**\n   * All links **must** have a valid href.\n   */\n  href: string;\n\n  /**\n   * Set this to `true` if your link contains icons that should be centered and\n   * spaced with additional text. This is not used by default so that links can\n   * correctly line wrap while rendered within paragraphs of text.\n   *\n   * @defaultValue `false`\n   */\n  flex?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Link, Typography } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Element(): ReactElement {\n *   return (\n *     <Typography>\n *       Here is a paragraph of text with a {\" \"}\n *       <Link href=\"/some-url\">link to some content</Link>.\n *     </Typography>\n *   );\n * }\n * ```\n *\n *\n * @remarks\n * \\@since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * \\@since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * \\@since 6.0.0 The `href` prop is required.\n * \\@since 6.0.0 Removed the `flexCentered` prop since it is now the default\n * styles.\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  function Link(props, ref) {\n    const { className, flex, children, ...remaining } = props;\n\n    return (\n      <a {...remaining} ref={ref} className={link({ flex, className })}>\n        {children}\n      </a>\n    );\n  }\n);\n"],"names":["forwardRef","link","Link","props","ref","className","flex","children","remaining","a"],"mappings":";AAAA,SACEA,UAAU,QAGL,QAAQ;AACf,SAASC,IAAI,QAAmC,cAAc;AA8C9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEpD,qBACE,KAACM;QAAG,GAAGD,SAAS;QAAEJ,KAAKA;QAAKC,WAAWJ,KAAK;YAAEK;YAAMD;QAAU;kBAC3DE;;AAGP,GACA"}

package/dist/src/link/SkipToMainContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/link/SkipToMainContent.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useEffect, useRef, type ReactNode } from \"react\";\nimport { Link, type LinkProps } from \"./Link.js\";\nimport {\n  skipToMainContent,\n  type SKipToMainContentClassNameOptions,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst getMainElement = (mainId: string): HTMLElement | null =>\n  mainId\n    ? document.getElementById(mainId)\n    : document.querySelector<HTMLElement>('main,[role=\"main\"]');\n\n/**\n * @remarks\n * \\@since 6.0.0 The {@link mainId} is optional\n */\nexport interface SkipToMainContentProps\n  extends Omit<LinkProps, \"href\">,\n    SKipToMainContentClassNameOptions {\n  id?: string;\n\n  /**\n   * An optional id for the main element. When this is not provided, the main\n   * element will be found by:\n   *\n   * ```ts\n   * document.querySelector('main,[role=\"main\"]');\n   * ```\n   */\n  mainId?: string;\n\n  /**\n   * @defaultValue `\"Skip to main content\"`\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @remarks\n * \\@since 6.0.0 Throws an error after rendering if no main element can be found\n * with the provided `mainId` in development mode. The previous behavior would\n * only log an error after being clicked.\n */\nexport const SkipToMainContent = forwardRef<\n  HTMLAnchorElement,\n  SkipToMainContentProps\n>(function SkipToMainContent(props, ref) {\n  const {\n    id = \"skip-to-main\",\n    className,\n    children = \"Skip to main content\",\n    mainId = \"\",\n    onClick = noop,\n    unstyled = false,\n    ...remaining\n  } = props;\n\n  const mainNodeRef = useRef<HTMLElement | null>(null);\n  // want to warn the developer about missing main element in development\n  // immediately to help prevent errors, but in production this can be lazy\n  // initialized only once a keyboard user focuses and clicks this element\n  if (process.env.NODE_ENV !== \"production\") {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      mainNodeRef.current = getMainElement(mainId);\n\n      if (!mainNodeRef.current) {\n        const foundMainId = document.querySelector('main,[role=\"main\"]')?.id;\n        let message = `Unable to find a main element to focus`;\n        if (mainId) {\n          message += ` with an id of \"${mainId}\"`;\n\n          if (foundMainId) {\n            message += ` but a main element was found with an id of \"${foundMainId}\".`;\n          }\n        }\n        if (!foundMainId) {\n          message +=\n            '. There should be at least one <main> element or an element with role=\"main\" on the page for accessibility.';\n        }\n\n        throw new Error(message);\n      }\n    }, [mainId]);\n  }\n\n  return (\n    <Link\n      {...remaining}\n      id={id}\n      ref={ref}\n      href={`#${mainId}`}\n      onClick={(event) => {\n        onClick(event);\n        if (event.isPropagationStopped()) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        // see comment above useEffect\n        mainNodeRef.current ||= getMainElement(mainId);\n        mainNodeRef.current?.focus();\n      }}\n      className={skipToMainContent({\n        unstyled,\n        className,\n      })}\n    >\n      {children}\n    </Link>\n  );\n});\n"],"names":["forwardRef","useEffect","useRef","Link","skipToMainContent","noop","getMainElement","mainId","document","getElementById","querySelector","SkipToMainContent","props","ref","id","className","children","onClick","unstyled","remaining","mainNodeRef","process","env","NODE_ENV","current","foundMainId","message","Error","href","event","isPropagationStopped","preventDefault","stopPropagation","focus"],"mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAwB,QAAQ;AACtE,SAASC,IAAI,QAAwB,YAAY;AACjD,SACEC,iBAAiB,QAEZ,cAAc;AAErB,MAAMC,OAAO;AACX,aAAa;AACf;AAEA,MAAMC,iBAAiB,CAACC,SACtBA,SACIC,SAASC,cAAc,CAACF,UACxBC,SAASE,aAAa,CAAc;AA2B1C;;;;;;;CAOC,GACD,OAAO,MAAMC,kCAAoBX,WAG/B,SAASW,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,KAAK,cAAc,EACnBC,SAAS,EACTC,WAAW,sBAAsB,EACjCT,SAAS,EAAE,EACXU,UAAUZ,IAAI,EACda,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGP;IAEJ,MAAMQ,cAAclB,OAA2B;IAC/C,uEAAuE;IACvE,yEAAyE;IACzE,wEAAwE;IACxE,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtDtB,UAAU;YACRmB,YAAYI,OAAO,GAAGlB,eAAeC;YAErC,IAAI,CAACa,YAAYI,OAAO,EAAE;gBACxB,MAAMC,cAAcjB,SAASE,aAAa,CAAC,uBAAuBI;gBAClE,IAAIY,UAAU,CAAC,sCAAsC,CAAC;gBACtD,IAAInB,QAAQ;oBACVmB,WAAW,CAAC,gBAAgB,EAAEnB,OAAO,CAAC,CAAC;oBAEvC,IAAIkB,aAAa;wBACfC,WAAW,CAAC,6CAA6C,EAAED,YAAY,EAAE,CAAC;oBAC5E;gBACF;gBACA,IAAI,CAACA,aAAa;oBAChBC,WACE;gBACJ;gBAEA,MAAM,IAAIC,MAAMD;YAClB;QACF,GAAG;YAACnB;SAAO;IACb;IAEA,qBACE,KAACJ;QACE,GAAGgB,SAAS;QACbL,IAAIA;QACJD,KAAKA;QACLe,MAAM,CAAC,CAAC,EAAErB,OAAO,CAAC;QAClBU,SAAS,CAACY;YACRZ,QAAQY;YACR,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEAD,MAAME,cAAc;YACpBF,MAAMG,eAAe;YAErB,8BAA8B;YAC9BZ,YAAYI,OAAO,KAAKlB,eAAeC;YACvCa,YAAYI,OAAO,EAAES;QACvB;QACAlB,WAAWX,kBAAkB;YAC3Bc;YACAH;QACF;kBAECC;;AAGP,GAAG"}

package/dist/src/link/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/link/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-link\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface LinkClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  flex?: boolean;\n}\n\n/**\n * This really doesn't do much at this time since it only merges `rmd-link` with\n * the optional className. This was mostly added just for convention purposes.\n *\n * @remarks \\@since 6.0.0\n */\nexport function link(options: LinkClassNameOptions = {}): string {\n  const { flex, className } = options;\n\n  return cnb(styles({ flex }), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface SKipToMainContentClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  unstyled?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function skipToMainContent(\n  options: SKipToMainContentClassNameOptions = {}\n): string {\n  const { unstyled = false, className } = options;\n\n  return cnb(\n    styles({\n      skip: true,\n      \"skip-styled\": !unstyled,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","link","options","flex","className","skipToMainContent","unstyled","skip"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAUnB;;;;;CAKC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGF;IAE5B,OAAOJ,IAAIE,OAAO;QAAEG;IAAK,IAAIC;AAC/B;AAYA;;CAEC,GACD,OAAO,SAASC,kBACdH,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEI,WAAW,KAAK,EAAEF,SAAS,EAAE,GAAGF;IAExC,OAAOJ,IACLE,OAAO;QACLO,MAAM;QACN,eAAe,CAACD;IAClB,IACAF;AAEJ"}

package/dist/src/list/List.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/list/List.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-list-padding-h\"?: string | number;\n    \"--rmd-list-padding-v\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-list\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface ListClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  horizontal?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function list(options: ListClassNameOptions = {}): string {\n  const { dense = false, horizontal = false, className } = options;\n\n  return cnb(styles({ dense, horizontal }), className);\n}\n\nexport type ListElement = HTMLUListElement | HTMLOListElement;\n\nexport interface ListProps extends HTMLAttributes<ListElement> {\n  /**\n   * @defaultValue `\"none\"`\n   */\n  role?: HTMLAttributes<ListElement>[\"role\"];\n\n  /**\n   * Set to `true` to decrease the amount of padding and font size within the\n   * list.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to render as `<ol>` instead of `<ul>` when the children\n   * are in a specific order. For example: steps within a recipe.\n   *\n   * @defaultValue `false`\n   */\n  ordered?: boolean;\n\n  /**\n   * Set this to `true` to render horizontally instead of vertically.\n   *\n   * @defaultValue `false`\n   */\n  horizontal?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * The `List` component is used to render a collection of clickable actions\n * vertically or horizontally and does not include the default `ol`/`ul` styles.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { List, ListItem, ListItemLink } 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 *       >\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 3\n *       </ListItem>\n *       <ListItemLink href=\"/some-route\">Link Example</ListItemLink>\n *     </List>\n *   );\n * }\n * ```\n */\nexport const List = forwardRef<ListElement, ListProps>(\n  function List(props, ref) {\n    const {\n      className,\n      children,\n      role = \"none\",\n      dense = false,\n      ordered = false,\n      horizontal = false,\n      ...remaining\n    } = props;\n    const Component = (ordered ? \"ol\" : \"ul\") as \"ul\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        role={role}\n        className={list({\n          dense,\n          horizontal,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","list","options","dense","horizontal","className","List","props","ref","children","role","ordered","remaining","Component"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,QAAQ,KAAK,EAAEC,aAAa,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEzD,OAAOL,IAAIG,OAAO;QAAEG;QAAOC;IAAW,IAAIC;AAC5C;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMC,qBAAOR,WAClB,SAASQ,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJH,SAAS,EACTI,QAAQ,EACRC,OAAO,MAAM,EACbP,QAAQ,KAAK,EACbQ,UAAU,KAAK,EACfP,aAAa,KAAK,EAClB,GAAGQ,WACJ,GAAGL;IACJ,MAAMM,YAAaF,UAAU,OAAO;IACpC,qBACE,KAACE;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLE,MAAMA;QACNL,WAAWJ,KAAK;YACdE;YACAC;YACAC;QACF;kBAECI;;AAGP,GACA"}

package/dist/src/list/ListItem.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useElementInteraction } from "../interaction/useElementInteraction.js";
+import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
+import { getListItemHeight } from "./getListItemHeight.js";
+import { ListItemChildren } from "./ListItemChildren.js";
+import { listItem } from "./listItemStyles.js";
+/**
+ * **Client Component**
+ *
+ * The `ListItem` is used to create a clickable/focusable button within a
+ * `List` and removes the normal `<li>` styles.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { List, ListItem } from "@react-md/core";
+ * import type { ReactElement  } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <List>
+ *       <ListItem
+ *         onClick={() => {
+ *           // do something
+ *         }}
+ *       >
+ *         Item 1
+ *       </ListItem>
+ *       <ListItem
+ *         onClick={() => {
+ *           // do something
+ *         }}
+ *         secondaryText={<span>Some <strong>additional</strong> content.</span>}
+ *       >
+ *         Item 2
+ *       </ListItem>
+ *     </List>
+ *   );
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Applying Addons Example
+ * ```tsx
+ * import { List, ListItem } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ * import type { ReactElement  } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <List>
+ *       <ListItem leftAddon={<FavoriteIcon />}>
+ *         Item 1
+ *       </ListItem>
+ *       <ListItem rightAddon={<FavoriteIcon />}>
+ *         Item 2
+ *       </ListItem>
+ *       <ListItem
+ *         leftAddon={<FavoriteIcon />}
+ *         rightAddon={<img alt="" src="/some-image.png" />}
+ *         rightAddonType="media"
+ *       >
+ *         Item 3
+ *       </ListItem>
+ *     </List>
+ *   );
+ *   );
+ * }
+ * ```
+ */ export const ListItem = /*#__PURE__*/ forwardRef(function ListItem(props, ref) {
+    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;
+    }
+    const { pressedClassName, ripples, handlers } = useElementInteraction({
+        onBlur,
+        onClick,
+        onKeyDown,
+        onKeyUp,
+        onMouseDown,
+        onMouseUp,
+        onMouseLeave,
+        onDragStart,
+        onTouchStart,
+        onTouchEnd,
+        onTouchMove,
+        disabled: disabled || presentational
+    });
+    const children = useHigherContrastChildren(propChildren, !disableTextChildren);
+    const height = getListItemHeight({
+        height: propHeight,
+        leftAddon,
+        leftAddonType,
+        rightAddon,
+        rightAddonType,
+        secondaryText
+    });
+    return /*#__PURE__*/ _jsxs("li", {
+        ...remaining,
+        ...handlers,
+        "aria-disabled": disabled || undefined,
+        ref: ref,
+        role: role,
+        tabIndex: tabIndex,
+        className: listItem({
+            className,
+            height,
+            disabled,
+            disabledOpacity,
+            multiline,
+            clickable: !presentational,
+            pressedClassName
+        }),
+        children: [
+            /*#__PURE__*/ _jsx(ListItemChildren, {
+                multiline: multiline,
+                textClassName: textClassName,
+                secondaryTextClassName: secondaryTextClassName,
+                disableTextChildren: disableTextChildren,
+                primaryText: primaryText,
+                textProps: textProps,
+                secondaryText: secondaryText,
+                secondaryTextProps: secondaryTextProps,
+                leftAddon: leftAddon,
+                leftAddonType: leftAddonType,
+                leftAddonPosition: leftAddonPosition,
+                leftAddonClassName: leftAddonClassName,
+                leftAddonForceWrap: leftAddonForceWrap,
+                rightAddon: rightAddon,
+                rightAddonType: rightAddonType,
+                rightAddonPosition: rightAddonPosition,
+                rightAddonClassName: rightAddonClassName,
+                rightAddonForceWrap: rightAddonForceWrap,
+                disableLeftAddonSpacing: disableLeftAddonSpacing,
+                disableLeftAddonCenteredMedia: disableLeftAddonCenteredMedia,
+                disableRightAddonCenteredMedia: disableRightAddonCenteredMedia,
+                children: children
+            }),
+            ripples
+        ]
+    });
+});
+
+//# sourceMappingURL=ListItem.js.map

package/dist/src/list/ListItem.js.map

@@ -0,0 +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-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/src/list/ListItemAddon.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextIconSpacing } from "../icon/TextIconSpacing.js";
+import { listItemAddon } from "./listItemStyles.js";
+/**
+ * **Server Component**
+ *
+ * The `ListItemAddon` is used to create an addon to the left or right of the
+ * text/children of a `ListItem`.
+ *
+ * @internal
+ */ export function ListItemAddon(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,
+        icon: addon,
+        forceIconWrap: forceAddonWrap ?? isMedia,
+        className: listItemAddon({
+            type,
+            position,
+            className,
+            addonAfter,
+            disableBeforeSpacing,
+            disableCenteredMedia
+        }),
+        iconAfter: addonAfter,
+        children: children
+    });
+}
+
+//# sourceMappingURL=ListItemAddon.js.map

package/dist/src/list/ListItemAddon.js.map

@@ -0,0 +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,\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/src/list/ListItemChildren.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ListItemAddon } from "./ListItemAddon.js";
+import { ListItemText } from "./ListItemText.js";
+/**
+ * **Server Component**
+ *
+ * The `ListItemChildren` component is used to create a styled list item that
+ * can have optional addons to the left or right of the children in the form of
+ * icons, avatars, or media. The `children` can be replaced by the `primaryText`
+ * and `secondaryText` props to create stacked text spanning two or more lines
+ * with the default behavior of using `line-clamp` at three lines.
+ *
+ * Note: This will return a `React.Fragment` of the children and does not wrap
+ * in a DOM node for styling. The parent component should normally have
+ * `display: flex` for the styling to work.
+ *
+ * @example
+ * Custom Component Usage
+ * ```tsx
+ * import { ListItemChildren } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <div style={{ display: "flex" }}>
+ *       <ListItemChildren
+ *         leftAddon={<FavoriteIcon />}
+ *         rightAddon={<img alt="" src="/some-image.png" />}
+ *         rightAddonType="media"
+ *         secondaryText={<span>Some <strong>additional</strong> content.</span>}
+ *       >
+ *         Content
+ *       </ListItemChildren>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */ export function ListItemChildren(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) {
+        children = /*#__PURE__*/ _jsx(ListItemText, {
+            ...textProps,
+            className: textClassName,
+            secondaryText: secondaryText,
+            secondaryTextProps: secondaryTextProps,
+            secondaryTextClamped: multiline,
+            secondaryTextClassName: secondaryTextClassName,
+            children: !disableTextChildren && children || primaryText
+        });
+    }
+    children = /*#__PURE__*/ _jsx(ListItemAddon, {
+        addon: leftAddon,
+        type: leftAddonType,
+        position: leftAddonPosition,
+        className: leftAddonClassName,
+        forceAddonWrap: leftAddonForceWrap,
+        disableBeforeSpacing: disableLeftAddonSpacing,
+        disableCenteredMedia: disableLeftAddonCenteredMedia,
+        children: children
+    });
+    children = /*#__PURE__*/ _jsx(ListItemAddon, {
+        addon: rightAddon,
+        addonAfter: true,
+        type: rightAddonType,
+        position: rightAddonPosition,
+        className: rightAddonClassName,
+        forceAddonWrap: rightAddonForceWrap,
+        disableCenteredMedia: disableRightAddonCenteredMedia,
+        children: children
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            children,
+            primaryText && stringifiedChildren || null
+        ]
+    });
+}
+
+//# sourceMappingURL=ListItemChildren.js.map

package/dist/src/list/ListItemChildren.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/list/ListItemChildren.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport { ListItemAddon } from \"./ListItemAddon.js\";\nimport { ListItemText } from \"./ListItemText.js\";\nimport { type ListItemChildrenProps } from \"./types.js\";\n\n/**\n * **Server Component**\n *\n * The `ListItemChildren` component is used to create a styled list item that\n * can have optional addons to the left or right of the children in the form of\n * icons, avatars, or media. The `children` can be replaced by the `primaryText`\n * and `secondaryText` props to create stacked text spanning two or more lines\n * with the default behavior of using `line-clamp` at three lines.\n *\n * Note: This will return a `React.Fragment` of the children and does not wrap\n * in a DOM node for styling. The parent component should normally have\n * `display: flex` for the styling to work.\n *\n * @example\n * Custom Component Usage\n * ```tsx\n * import { ListItemChildren } 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 *     <div style={{ display: \"flex\" }}>\n *       <ListItemChildren\n *         leftAddon={<FavoriteIcon />}\n *         rightAddon={<img alt=\"\" src=\"/some-image.png\" />}\n *         rightAddonType=\"media\"\n *         secondaryText={<span>Some <strong>additional</strong> content.</span>}\n *       >\n *         Content\n *       </ListItemChildren>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function ListItemChildren(props: ListItemChildrenProps): ReactElement {\n  const {\n    multiline,\n    textProps,\n    textClassName,\n    secondaryTextClassName,\n    disableTextChildren,\n    primaryText,\n    secondaryText,\n    secondaryTextProps,\n    leftAddon,\n    leftAddonType = \"icon\",\n    leftAddonPosition = \"middle\",\n    leftAddonClassName,\n    leftAddonForceWrap,\n    disableLeftAddonSpacing,\n    disableLeftAddonCenteredMedia,\n    rightAddon,\n    rightAddonType = \"icon\",\n    rightAddonPosition = \"middle\",\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableRightAddonCenteredMedia,\n    children: propChildren,\n  } = props;\n\n  const stringifiedChildren =\n    typeof propChildren === \"number\" ? `${propChildren}` : propChildren;\n\n  let children = stringifiedChildren;\n  if (primaryText || secondaryText || !disableTextChildren) {\n    children = (\n      <ListItemText\n        {...textProps}\n        className={textClassName}\n        secondaryText={secondaryText}\n        secondaryTextProps={secondaryTextProps}\n        secondaryTextClamped={multiline}\n        secondaryTextClassName={secondaryTextClassName}\n      >\n        {(!disableTextChildren && children) || primaryText}\n      </ListItemText>\n    );\n  }\n\n  children = (\n    <ListItemAddon\n      addon={leftAddon}\n      type={leftAddonType}\n      position={leftAddonPosition}\n      className={leftAddonClassName}\n      forceAddonWrap={leftAddonForceWrap}\n      disableBeforeSpacing={disableLeftAddonSpacing}\n      disableCenteredMedia={disableLeftAddonCenteredMedia}\n    >\n      {children}\n    </ListItemAddon>\n  );\n  children = (\n    <ListItemAddon\n      addon={rightAddon}\n      addonAfter\n      type={rightAddonType}\n      position={rightAddonPosition}\n      className={rightAddonClassName}\n      forceAddonWrap={rightAddonForceWrap}\n      disableCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItemAddon>\n  );\n\n  return (\n    <>\n      {children}\n      {(primaryText && stringifiedChildren) || null}\n    </>\n  );\n}\n"],"names":["ListItemAddon","ListItemText","ListItemChildren","props","multiline","textProps","textClassName","secondaryTextClassName","disableTextChildren","primaryText","secondaryText","secondaryTextProps","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","disableLeftAddonSpacing","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableRightAddonCenteredMedia","children","propChildren","stringifiedChildren","className","secondaryTextClamped","addon","type","position","forceAddonWrap","disableBeforeSpacing","disableCenteredMedia","addonAfter"],"mappings":";AACA,SAASA,aAAa,QAAQ,qBAAqB;AACnD,SAASC,YAAY,QAAQ,oBAAoB;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,mBAAmB,EACnBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,SAAS,EACTC,gBAAgB,MAAM,EACtBC,oBAAoB,QAAQ,EAC5BC,kBAAkB,EAClBC,kBAAkB,EAClBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,UAAU,EACVC,iBAAiB,MAAM,EACvBC,qBAAqB,QAAQ,EAC7BC,mBAAmB,EACnBC,mBAAmB,EACnBC,8BAA8B,EAC9BC,UAAUC,YAAY,EACvB,GAAGvB;IAEJ,MAAMwB,sBACJ,OAAOD,iBAAiB,WAAW,CAAC,EAAEA,aAAa,CAAC,GAAGA;IAEzD,IAAID,WAAWE;IACf,IAAIlB,eAAeC,iBAAiB,CAACF,qBAAqB;QACxDiB,yBACE,KAACxB;YACE,GAAGI,SAAS;YACbuB,WAAWtB;YACXI,eAAeA;YACfC,oBAAoBA;YACpBkB,sBAAsBzB;YACtBG,wBAAwBA;sBAEvB,AAAC,CAACC,uBAAuBiB,YAAahB;;IAG7C;IAEAgB,yBACE,KAACzB;QACC8B,OAAOlB;QACPmB,MAAMlB;QACNmB,UAAUlB;QACVc,WAAWb;QACXkB,gBAAgBjB;QAChBkB,sBAAsBjB;QACtBkB,sBAAsBjB;kBAErBO;;IAGLA,yBACE,KAACzB;QACC8B,OAAOX;QACPiB,UAAU;QACVL,MAAMX;QACNY,UAAUX;QACVO,WAAWN;QACXW,gBAAgBV;QAChBY,sBAAsBX;kBAErBC;;IAIL,qBACE;;YACGA;YACChB,eAAekB,uBAAwB;;;AAG/C"}