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

package/dist/navigation/useNavigationExpansion.js

@@ -0,0 +1,79 @@
+"use client";
+import { useEffect, useMemo, useRef } from "react";
+import { useReadonlySet } from "../useReadonlySet.js";
+import { getPartsFromPathname } from "./utils.js";
+/**
+ * Used to create the `data` prop for the `Navigation` component and handling
+ * the expansion of items.
+ *
+ * @example Main Usage
+ * ```tsx
+ * "use client";
+ * import { Navigation } from "@react-md/core/navigation/Navigation";
+ * import { useNavigationExpansion } from "@react-md/core/navigation/useNavigationExpansion";
+ * import Link from "next/link";
+ * import { usePathname } from "next/navigation.js";
+ * import { type ReactElement } from "react";
+ *
+ * import { navItems } from "./navItems.js";
+ *
+ * export function Example(): ReactElement {
+ *   const pathname = usePathname();
+ *   const { data } = useNavigationExpansion({
+ *     pathname,
+ *     linkComponent: Link,
+ *   });
+ *
+ *   return <Navigation data={data} items={navItems} />;
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
+ * @since 6.0.0
+ */ export function useNavigationExpansion(options) {
+    const { pathname, linkComponent, defaultExpandedItems, disableFollowingPathname } = options;
+    const { value: expandedItems, setValue: setExpandedItems, toggleValue: toggleExpandedItem } = useReadonlySet({
+        defaultValue: defaultExpandedItems ?? (()=>new Set(getPartsFromPathname(pathname)))
+    });
+    const prevPathname = useRef(pathname);
+    useEffect(()=>{
+        if (disableFollowingPathname || pathname === prevPathname.current) {
+            return;
+        }
+        prevPathname.current = pathname;
+        setExpandedItems((prev)=>{
+            const next = new Set([
+                ...prev,
+                ...getPartsFromPathname(pathname)
+            ]);
+            if (next.size === prev.size) {
+                return prev;
+            }
+            return next;
+        });
+    }, [
+        disableFollowingPathname,
+        pathname,
+        setExpandedItems
+    ]);
+    const data = useMemo(()=>({
+            pathname,
+            linkComponent,
+            expandedItems,
+            toggleExpandedItem
+        }), [
+        expandedItems,
+        linkComponent,
+        pathname,
+        toggleExpandedItem
+    ]);
+    return {
+        data,
+        expandedItems,
+        setExpandedItems,
+        toggleExpandedItem
+    };
+}
+
+//# sourceMappingURL=useNavigationExpansion.js.map

package/dist/navigation/useNavigationExpansion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/navigation/useNavigationExpansion.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport {\n  type NavigationExpansion,\n  type NavigationLinkComponent,\n  type NavigationRenderData,\n} from \"./types.js\";\nimport { getPartsFromPathname } from \"./utils.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationExpansionOptions {\n  pathname: string;\n  linkComponent: NavigationLinkComponent;\n\n  /**\n   * An optional list or set of items that should be expanded before the user\n   * interacts with the navigation items.\n   *\n   * The default implementation works well with the `DefaultNavigationRenderer`\n   * by allowing all \"folders\" (or groups) of items to be expanded by the\n   * `pathname`.\n   *\n   * ```ts\n   * const navItems: readonly NavigationItem[] = [\n   *   {\n   *     type: \"route\",\n   *     href: \"/\",\n   *     children: \"Home\",\n   *   },\n   *   {\n   *     type: \"group\",\n   *     href: \"/group-1\",\n   *     children: \"Group 1\",\n   *     items: [\n   *       {\n   *         type: \"group\",\n   *         href: \"/subgroup-1\",\n   *         children: \"Subgroup 1\",\n   *         items: [\n   *           {\n   *             type: \"route\",\n   *             href: \"/route\",\n   *             children: \"Group 1 > Subgroup 1 > Route\"\n   *           },\n   *         ],\n   *       },\n   *       {\n   *         type: \"route\",\n   *         href: \"/route\",\n   *         children: \"Group 1 > Route\",\n   *       },\n   *     ],\n   *   },\n   * ];\n   * ```\n   *\n   * - `pathname === \"/\"` - No groups expanded\n   *   - Resolves as `new Set([\"/\"])`\n   * - `pathname === \"/group-1/subgroup-1/route\"` - \"Group 1\" and \"Subgroup 1\"\n   *   are expanded\n   *   - Resolves as `new Set([\"/\", \"/group-1\", \"/group-1/route\"])`\n   */\n  defaultExpandedItems?: UseStateInitializer<\n    ReadonlySet<string> | readonly string[]\n  >;\n\n  /**\n   * The default behavior is to update the `expandedItems` set as the `pathname`\n   * updates to capture anytime the user might navigate to outer routes outside\n   * of the `Navigation` component. i.e. Click a link within the page.\n   *\n   * Set this to `true` to disable this behavior.\n   *\n   * @defaultValue `false`\n   */\n  disableFollowingPathname?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationExpansionImplementation extends NavigationExpansion {\n  data: NavigationRenderData;\n  setExpandedItems: UseStateSetter<ReadonlySet<string>>;\n}\n\n/**\n * Used to create the `data` prop for the `Navigation` component and handling\n * the expansion of items.\n *\n * @example Main Usage\n * ```tsx\n * \"use client\";\n * import { Navigation } from \"@react-md/core/navigation/Navigation\";\n * import { useNavigationExpansion } from \"@react-md/core/navigation/useNavigationExpansion\";\n * import Link from \"next/link\";\n * import { usePathname } from \"next/navigation.js\";\n * import { type ReactElement } from \"react\";\n *\n * import { navItems } from \"./navItems.js\";\n *\n * export function Example(): ReactElement {\n *   const pathname = usePathname();\n *   const { data } = useNavigationExpansion({\n *     pathname,\n *     linkComponent: Link,\n *   });\n *\n *   return <Navigation data={data} items={navItems} />;\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}\n * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport function useNavigationExpansion(\n  options: NavigationExpansionOptions\n): NavigationExpansionImplementation {\n  const {\n    pathname,\n    linkComponent,\n    defaultExpandedItems,\n    disableFollowingPathname,\n  } = options;\n  const {\n    value: expandedItems,\n    setValue: setExpandedItems,\n    toggleValue: toggleExpandedItem,\n  } = useReadonlySet({\n    defaultValue:\n      defaultExpandedItems ?? (() => new Set(getPartsFromPathname(pathname))),\n  });\n\n  const prevPathname = useRef(pathname);\n  useEffect(() => {\n    if (disableFollowingPathname || pathname === prevPathname.current) {\n      return;\n    }\n\n    prevPathname.current = pathname;\n    setExpandedItems((prev) => {\n      const next = new Set([...prev, ...getPartsFromPathname(pathname)]);\n      if (next.size === prev.size) {\n        return prev;\n      }\n\n      return next;\n    });\n  }, [disableFollowingPathname, pathname, setExpandedItems]);\n\n  const data = useMemo<NavigationRenderData>(\n    () => ({\n      pathname,\n      linkComponent,\n      expandedItems,\n      toggleExpandedItem,\n    }),\n    [expandedItems, linkComponent, pathname, toggleExpandedItem]\n  );\n\n  return {\n    data,\n    expandedItems,\n    setExpandedItems,\n    toggleExpandedItem,\n  };\n}\n"],"names":["useEffect","useMemo","useRef","useReadonlySet","getPartsFromPathname","useNavigationExpansion","options","pathname","linkComponent","defaultExpandedItems","disableFollowingPathname","value","expandedItems","setValue","setExpandedItems","toggleValue","toggleExpandedItem","defaultValue","Set","prevPathname","current","prev","next","size","data"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAGnD,SAASC,cAAc,QAAQ,uBAAuB;AAMtD,SAASC,oBAAoB,QAAQ,aAAa;AAiFlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,uBACdC,OAAmC;IAEnC,MAAM,EACJC,QAAQ,EACRC,aAAa,EACbC,oBAAoB,EACpBC,wBAAwB,EACzB,GAAGJ;IACJ,MAAM,EACJK,OAAOC,aAAa,EACpBC,UAAUC,gBAAgB,EAC1BC,aAAaC,kBAAkB,EAChC,GAAGb,eAAe;QACjBc,cACER,wBAAyB,CAAA,IAAM,IAAIS,IAAId,qBAAqBG,UAAS;IACzE;IAEA,MAAMY,eAAejB,OAAOK;IAC5BP,UAAU;QACR,IAAIU,4BAA4BH,aAAaY,aAAaC,OAAO,EAAE;YACjE;QACF;QAEAD,aAAaC,OAAO,GAAGb;QACvBO,iBAAiB,CAACO;YAChB,MAAMC,OAAO,IAAIJ,IAAI;mBAAIG;mBAASjB,qBAAqBG;aAAU;YACjE,IAAIe,KAAKC,IAAI,KAAKF,KAAKE,IAAI,EAAE;gBAC3B,OAAOF;YACT;YAEA,OAAOC;QACT;IACF,GAAG;QAACZ;QAA0BH;QAAUO;KAAiB;IAEzD,MAAMU,OAAOvB,QACX,IAAO,CAAA;YACLM;YACAC;YACAI;YACAI;QACF,CAAA,GACA;QAACJ;QAAeJ;QAAeD;QAAUS;KAAmB;IAG9D,OAAO;QACLQ;QACAZ;QACAE;QACAE;IACF;AACF"}

package/dist/navigation/useTableOfContentsHeadings.d.ts

@@ -0,0 +1,41 @@
+import { type TableOfContentsHeadings, type TableOfContentsHeadingsOptions } from "./types.js";
+/**
+ * This will find all headings that have an `id` that are not part of a `<nav>`
+ * element since that should normally be a table of contents component.
+ *
+ * @since 6.0.0
+ */
+export declare const DEFAULT_HEADING_SELECTOR = "main :where(:not(nav *)):where(h1[id],h2[id],h3[id],h4[id],h5[id],h6[id])";
+/**
+ * This only works for heading elements since it is pretty much:
+ * `return parseInt(element.tagName.substring(1))`
+ *
+ * @since 6.0.0
+ */
+export declare const DEFAULT_GET_HEADING_DEPTH: (element: Element) => number;
+/**
+ * @since 6.0.0
+ */
+export declare const DEFAULT_GET_HEADING_TEXT: (element: Element) => string;
+/**
+ * The `useTableOfContentsHeadings` should normally be used with the
+ * `useActiveHeadingId` hook to generate a table of contents for the current
+ * page.
+ *
+ * @example Example Usage
+ * ```tsx
+ * import { useActiveHeadingId } from "@react-md/core/navigation/useActiveHeadingId";
+ * import { useTableOfContentsHeadings } from "@react-md/core/navigation/useTableOfContentsHeadings";
+ *
+ * function Example() {
+ *   const headings = useTableOfContentsHeadings();
+ *   const activeHeadingId = useActiveHeadingId({ headings });
+ *
+ *   return <TableOfContents headings={headings} activeHeadingId={activeHeadingId} />;
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/hooks/use-table-of-contents-headings | useTableOfContentsHeadings Demos}
+ * @since 6.0.0
+ */
+export declare function useTableOfContentsHeadings(options?: TableOfContentsHeadingsOptions): TableOfContentsHeadings;

package/dist/navigation/useTableOfContentsHeadings.js

@@ -0,0 +1,68 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useSsr } from "../SsrProvider.js";
+import { getTableOfContentsHeadings } from "./getTableOfContentsHeadings.js";
+/**
+ * This will find all headings that have an `id` that are not part of a `<nav>`
+ * element since that should normally be a table of contents component.
+ *
+ * @since 6.0.0
+ */ export const DEFAULT_HEADING_SELECTOR = "main :where(:not(nav *)):where(h1[id],h2[id],h3[id],h4[id],h5[id],h6[id])";
+/**
+ * This only works for heading elements since it is pretty much:
+ * `return parseInt(element.tagName.substring(1))`
+ *
+ * @since 6.0.0
+ */ export const DEFAULT_GET_HEADING_DEPTH = (element)=>{
+    const depth = parseInt(element.tagName.substring(1));
+    return Number.isNaN(depth) ? 0 : depth;
+};
+/**
+ * @since 6.0.0
+ */ export const DEFAULT_GET_HEADING_TEXT = (element)=>element.textContent || "";
+/**
+ * The `useTableOfContentsHeadings` should normally be used with the
+ * `useActiveHeadingId` hook to generate a table of contents for the current
+ * page.
+ *
+ * @example Example Usage
+ * ```tsx
+ * import { useActiveHeadingId } from "@react-md/core/navigation/useActiveHeadingId";
+ * import { useTableOfContentsHeadings } from "@react-md/core/navigation/useTableOfContentsHeadings";
+ *
+ * function Example() {
+ *   const headings = useTableOfContentsHeadings();
+ *   const activeHeadingId = useActiveHeadingId({ headings });
+ *
+ *   return <TableOfContents headings={headings} activeHeadingId={activeHeadingId} />;
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/hooks/use-table-of-contents-headings | useTableOfContentsHeadings Demos}
+ * @since 6.0.0
+ */ export function useTableOfContentsHeadings(options = {}) {
+    const { selector = DEFAULT_HEADING_SELECTOR, getDepth = DEFAULT_GET_HEADING_DEPTH, getHeadingText = DEFAULT_GET_HEADING_TEXT } = options;
+    const ssr = useSsr();
+    const [headings, setHeadings] = useState(()=>getTableOfContentsHeadings({
+            ssr,
+            selector,
+            getDepth,
+            getHeadingText
+        }));
+    useEffect(()=>{
+        setHeadings(getTableOfContentsHeadings({
+            ssr,
+            selector,
+            getDepth,
+            getHeadingText
+        }));
+    }, [
+        getDepth,
+        getHeadingText,
+        selector,
+        ssr
+    ]);
+    return headings;
+}
+
+//# sourceMappingURL=useTableOfContentsHeadings.js.map

package/dist/navigation/useTableOfContentsHeadings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/navigation/useTableOfContentsHeadings.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { getTableOfContentsHeadings } from \"./getTableOfContentsHeadings.js\";\nimport {\n  type TableOfContentsHeadings,\n  type TableOfContentsHeadingsOptions,\n} from \"./types.js\";\n\n/**\n * This will find all headings that have an `id` that are not part of a `<nav>`\n * element since that should normally be a table of contents component.\n *\n * @since 6.0.0\n */\nexport const DEFAULT_HEADING_SELECTOR =\n  \"main :where(:not(nav *)):where(h1[id],h2[id],h3[id],h4[id],h5[id],h6[id])\";\n\n/**\n * This only works for heading elements since it is pretty much:\n * `return parseInt(element.tagName.substring(1))`\n *\n * @since 6.0.0\n */\nexport const DEFAULT_GET_HEADING_DEPTH = (element: Element): number => {\n  const depth = parseInt(element.tagName.substring(1));\n  return Number.isNaN(depth) ? 0 : depth;\n};\n\n/**\n * @since 6.0.0\n */\nexport const DEFAULT_GET_HEADING_TEXT = (element: Element): string =>\n  element.textContent || \"\";\n\n/**\n * The `useTableOfContentsHeadings` should normally be used with the\n * `useActiveHeadingId` hook to generate a table of contents for the current\n * page.\n *\n * @example Example Usage\n * ```tsx\n * import { useActiveHeadingId } from \"@react-md/core/navigation/useActiveHeadingId\";\n * import { useTableOfContentsHeadings } from \"@react-md/core/navigation/useTableOfContentsHeadings\";\n *\n * function Example() {\n *   const headings = useTableOfContentsHeadings();\n *   const activeHeadingId = useActiveHeadingId({ headings });\n *\n *   return <TableOfContents headings={headings} activeHeadingId={activeHeadingId} />;\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/hooks/use-table-of-contents-headings | useTableOfContentsHeadings Demos}\n * @since 6.0.0\n */\nexport function useTableOfContentsHeadings(\n  options: TableOfContentsHeadingsOptions = {}\n): TableOfContentsHeadings {\n  const {\n    selector = DEFAULT_HEADING_SELECTOR,\n    getDepth = DEFAULT_GET_HEADING_DEPTH,\n    getHeadingText = DEFAULT_GET_HEADING_TEXT,\n  } = options;\n  const ssr = useSsr();\n  const [headings, setHeadings] = useState(() =>\n    getTableOfContentsHeadings({\n      ssr,\n      selector,\n      getDepth,\n      getHeadingText,\n    })\n  );\n  useEffect(() => {\n    setHeadings(\n      getTableOfContentsHeadings({ ssr, selector, getDepth, getHeadingText })\n    );\n  }, [getDepth, getHeadingText, selector, ssr]);\n\n  return headings;\n}\n"],"names":["useEffect","useState","useSsr","getTableOfContentsHeadings","DEFAULT_HEADING_SELECTOR","DEFAULT_GET_HEADING_DEPTH","element","depth","parseInt","tagName","substring","Number","isNaN","DEFAULT_GET_HEADING_TEXT","textContent","useTableOfContentsHeadings","options","selector","getDepth","getHeadingText","ssr","headings","setHeadings"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE5C,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,0BAA0B,QAAQ,kCAAkC;AAM7E;;;;;CAKC,GACD,OAAO,MAAMC,2BACX,4EAA4E;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC,MAAMC,QAAQC,SAASF,QAAQG,OAAO,CAACC,SAAS,CAAC;IACjD,OAAOC,OAAOC,KAAK,CAACL,SAAS,IAAIA;AACnC,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMM,2BAA2B,CAACP,UACvCA,QAAQQ,WAAW,IAAI,GAAG;AAE5B;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASC,2BACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAWb,wBAAwB,EACnCc,WAAWb,yBAAyB,EACpCc,iBAAiBN,wBAAwB,EAC1C,GAAGG;IACJ,MAAMI,MAAMlB;IACZ,MAAM,CAACmB,UAAUC,YAAY,GAAGrB,SAAS,IACvCE,2BAA2B;YACzBiB;YACAH;YACAC;YACAC;QACF;IAEFnB,UAAU;QACRsB,YACEnB,2BAA2B;YAAEiB;YAAKH;YAAUC;YAAUC;QAAe;IAEzE,GAAG;QAACD;QAAUC;QAAgBF;QAAUG;KAAI;IAE5C,OAAOC;AACT"}

package/dist/navigation/utils.d.ts

@@ -0,0 +1,13 @@
+import { type NavigationItem } from "./types.js";
+/**
+ * @since 6.0.0
+ */
+export declare function getHrefFromParents(parents: readonly NavigationItem[]): string;
+/**
+ * @since 6.0.0
+ */
+export declare function getNavigationGroupId(group: NavigationItem, parents: readonly NavigationItem[]): string;
+/**
+ * @since 6.0.0
+ */
+export declare function getPartsFromPathname(pathname: string): ReadonlySet<string>;

package/dist/navigation/utils.js

@@ -0,0 +1,36 @@
+/**
+ * @since 6.0.0
+ */ export function getHrefFromParents(parents) {
+    return parents.reduce((result, parent)=>{
+        if ("href" in parent && parent.href) {
+            const { href } = parent;
+            return result + href;
+        }
+        return result;
+    }, "");
+}
+/**
+ * @since 6.0.0
+ */ export function getNavigationGroupId(group, parents) {
+    if ("id" in group && typeof group.id === "string" && group.id) {
+        return group.id;
+    }
+    return getHrefFromParents(parents);
+}
+/**
+ * @since 6.0.0
+ */ export function getPartsFromPathname(pathname) {
+    // remove trailing slashes just in case there aren't rewrites in place
+    const href = pathname.replace(/\/{2,}/g, "/").replace(/\/+$/, "");
+    const parts = href.split("/");
+    const set = new Set();
+    let prefix = "";
+    for (const part of parts){
+        const slashed = `/${part}`;
+        prefix = prefix === "/" ? slashed : prefix + slashed;
+        set.add(prefix);
+    }
+    return set;
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/navigation/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/navigation/utils.ts"],"sourcesContent":["import { type NavigationItem } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport function getHrefFromParents(parents: readonly NavigationItem[]): string {\n  return parents.reduce<string>((result, parent) => {\n    if (\"href\" in parent && parent.href) {\n      const { href } = parent;\n      return result + href;\n    }\n\n    return result;\n  }, \"\");\n}\n\n/**\n * @since 6.0.0\n */\nexport function getNavigationGroupId(\n  group: NavigationItem,\n  parents: readonly NavigationItem[]\n): string {\n  if (\"id\" in group && typeof group.id === \"string\" && group.id) {\n    return group.id;\n  }\n\n  return getHrefFromParents(parents);\n}\n\n/**\n * @since 6.0.0\n */\nexport function getPartsFromPathname(pathname: string): ReadonlySet<string> {\n  // remove trailing slashes just in case there aren't rewrites in place\n  const href = pathname.replace(/\\/{2,}/g, \"/\").replace(/\\/+$/, \"\");\n  const parts = href.split(\"/\");\n  const set = new Set<string>();\n  let prefix = \"\";\n  for (const part of parts) {\n    const slashed = `/${part}`;\n    prefix = prefix === \"/\" ? slashed : prefix + slashed;\n    set.add(prefix);\n  }\n\n  return set;\n}\n"],"names":["getHrefFromParents","parents","reduce","result","parent","href","getNavigationGroupId","group","id","getPartsFromPathname","pathname","replace","parts","split","set","Set","prefix","part","slashed","add"],"mappings":"AAEA;;CAEC,GACD,OAAO,SAASA,mBAAmBC,OAAkC;IACnE,OAAOA,QAAQC,MAAM,CAAS,CAACC,QAAQC;QACrC,IAAI,UAAUA,UAAUA,OAAOC,IAAI,EAAE;YACnC,MAAM,EAAEA,IAAI,EAAE,GAAGD;YACjB,OAAOD,SAASE;QAClB;QAEA,OAAOF;IACT,GAAG;AACL;AAEA;;CAEC,GACD,OAAO,SAASG,qBACdC,KAAqB,EACrBN,OAAkC;IAElC,IAAI,QAAQM,SAAS,OAAOA,MAAMC,EAAE,KAAK,YAAYD,MAAMC,EAAE,EAAE;QAC7D,OAAOD,MAAMC,EAAE;IACjB;IAEA,OAAOR,mBAAmBC;AAC5B;AAEA;;CAEC,GACD,OAAO,SAASQ,qBAAqBC,QAAgB;IACnD,sEAAsE;IACtE,MAAML,OAAOK,SAASC,OAAO,CAAC,WAAW,KAAKA,OAAO,CAAC,QAAQ;IAC9D,MAAMC,QAAQP,KAAKQ,KAAK,CAAC;IACzB,MAAMC,MAAM,IAAIC;IAChB,IAAIC,SAAS;IACb,KAAK,MAAMC,QAAQL,MAAO;QACxB,MAAMM,UAAU,CAAC,CAAC,EAAED,MAAM;QAC1BD,SAASA,WAAW,MAAME,UAAUF,SAASE;QAC7CJ,IAAIK,GAAG,CAACH;IACV;IAEA,OAAOF;AACT"}

package/dist/objectFit.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @since 6.0.0
+ */
+export interface ObjectFitOptions {
+    className?: string;
+    /**
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit}
+     * @defaultValue `aspectRatio ? "fill" : "contain"`
+     */
+    fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+    /**
+     * Set this to a custom aspect ratio to use.
+     *
+     * @example Valid Aspect Ratios
+     * ```tsx
+     * aspectRatio: "16-9",
+     * aspectRatio: "9-16",
+     * aspectRatio: "3-4",
+     * aspectRatio: "4-3",
+     * aspectRatio: "1-1",
+     * ```
+     *
+     * These values are based on the `$object-fit-aspect-ratios` map.
+     *
+     * @defaultValue `""`
+     */
+    aspectRatio?: `${number}-${number}`;
+}
+/**
+ * This is a utility className helper function that should be applied to
+ * `<img>` and `<video>` elements to make them responsive to their content box
+ * container.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { objectFit } from "@react-md/core/objectFit";
+ *
+ * export function Example() {
+ *   return (
+ *     <img
+ *       alt=""
+ *       src="https://example.com/example.png"
+ *       className={objectFit()}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example Setting Aspect Ratio
+ * ```tsx
+ * import { objectFit } from "@react-md/core/objectFit";
+ *
+ * export function Example() {
+ *   return (
+ *     <img
+ *       alt=""
+ *       src="https://example.com/example.png"
+ *       className={objectFit({
+ *         aspectRatio: "16-9",
+ *       })}
+ *     />
+ *   );
+ * }
+ *
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function objectFit(options?: ObjectFitOptions): string;

package/dist/objectFit.js

@@ -0,0 +1,52 @@
+import { cnb } from "cnbuilder";
+import { bem } from "./utils/bem.js";
+const styles = bem("rmd-object-fit");
+/**
+ * This is a utility className helper function that should be applied to
+ * `<img>` and `<video>` elements to make them responsive to their content box
+ * container.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { objectFit } from "@react-md/core/objectFit";
+ *
+ * export function Example() {
+ *   return (
+ *     <img
+ *       alt=""
+ *       src="https://example.com/example.png"
+ *       className={objectFit()}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example Setting Aspect Ratio
+ * ```tsx
+ * import { objectFit } from "@react-md/core/objectFit";
+ *
+ * export function Example() {
+ *   return (
+ *     <img
+ *       alt=""
+ *       src="https://example.com/example.png"
+ *       className={objectFit({
+ *         aspectRatio: "16-9",
+ *       })}
+ *     />
+ *   );
+ * }
+ *
+ * ```
+ *
+ * @since 6.0.0
+ */ export function objectFit(options = {}) {
+    const { className, fit: propFit, aspectRatio = "" } = options;
+    const fit = propFit ?? (aspectRatio ? "fill" : "contain");
+    return cnb(styles({
+        [fit]: fit !== "contain",
+        [aspectRatio]: !!aspectRatio
+    }), className);
+}
+
+//# sourceMappingURL=objectFit.js.map

package/dist/objectFit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/objectFit.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"./utils/bem.js\";\n\nconst styles = bem(\"rmd-object-fit\");\n\n/**\n * @since 6.0.0\n */\nexport interface ObjectFitOptions {\n  className?: string;\n\n  /**\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit}\n   * @defaultValue `aspectRatio ? \"fill\" : \"contain\"`\n   */\n  fit?: \"contain\" | \"cover\" | \"fill\" | \"none\" | \"scale-down\";\n\n  /**\n   * Set this to a custom aspect ratio to use.\n   *\n   * @example Valid Aspect Ratios\n   * ```tsx\n   * aspectRatio: \"16-9\",\n   * aspectRatio: \"9-16\",\n   * aspectRatio: \"3-4\",\n   * aspectRatio: \"4-3\",\n   * aspectRatio: \"1-1\",\n   * ```\n   *\n   * These values are based on the `$object-fit-aspect-ratios` map.\n   *\n   * @defaultValue `\"\"`\n   */\n  aspectRatio?: `${number}-${number}`;\n}\n\n/**\n * This is a utility className helper function that should be applied to\n * `<img>` and `<video>` elements to make them responsive to their content box\n * container.\n *\n * @example Simple Example\n * ```tsx\n * import { objectFit } from \"@react-md/core/objectFit\";\n *\n * export function Example() {\n *   return (\n *     <img\n *       alt=\"\"\n *       src=\"https://example.com/example.png\"\n *       className={objectFit()}\n *     />\n *   );\n * }\n * ```\n *\n * @example Setting Aspect Ratio\n * ```tsx\n * import { objectFit } from \"@react-md/core/objectFit\";\n *\n * export function Example() {\n *   return (\n *     <img\n *       alt=\"\"\n *       src=\"https://example.com/example.png\"\n *       className={objectFit({\n *         aspectRatio: \"16-9\",\n *       })}\n *     />\n *   );\n * }\n *\n * ```\n *\n * @since 6.0.0\n */\nexport function objectFit(options: ObjectFitOptions = {}): string {\n  const { className, fit: propFit, aspectRatio = \"\" } = options;\n  const fit = propFit ?? (aspectRatio ? \"fill\" : \"contain\");\n\n  return cnb(\n    styles({\n      [fit]: fit !== \"contain\",\n      [aspectRatio]: !!aspectRatio,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","objectFit","options","className","fit","propFit","aspectRatio"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,iBAAiB;AAErC,MAAMC,SAASD,IAAI;AAiCnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASE,UAAUC,UAA4B,CAAC,CAAC;IACtD,MAAM,EAAEC,SAAS,EAAEC,KAAKC,OAAO,EAAEC,cAAc,EAAE,EAAE,GAAGJ;IACtD,MAAME,MAAMC,WAAYC,CAAAA,cAAc,SAAS,SAAQ;IAEvD,OAAOR,IACLE,OAAO;QACL,CAACI,IAAI,EAAEA,QAAQ;QACf,CAACE,YAAY,EAAE,CAAC,CAACA;IACnB,IACAH;AAEJ"}

package/dist/overlay/Overlay.d.ts

@@ -1,18 +1,25 @@
 import { type HTMLAttributes } from "react";
 import { type BoxAlignItems, type BoxJustifyContent } from "../box/styles.js";
 import { type CSSTransitionComponentProps, type TransitionActions } from "../transition/types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-overlay-background-color"?: string;
+        "--rmd-overlay-z-index"?: number;
+    }
+}
 /**
- * @remarks \@since 6.0.0 Added `align` and `justify` props.
+ * @since 6.0.0 Added `align` and `justify` props.
+ * @since 6.0.0 Renamed `hidden` to `noOpacity`.
  */
 export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, CSSTransitionComponentProps, TransitionActions {
     /**
      * @defaultValue `"center"`
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     align?: BoxAlignItems;
     /**
      * @defaultValue `"center"`
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     justify?: BoxJustifyContent;
     /**
@@ -45,10 +52,11 @@ export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, CSSTransi
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { Button, Overlay, useToggle } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Overlay } from "@react-md/core/overlay/Overlay";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -63,7 +71,8 @@ export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, CSSTransi
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Removed the `onRequestClose` prop in favor of using
+ * @see {@link https://next.react-md.dev/components/overlay | Overlay Demos}
+ * @since 6.0.0 Removed the `onRequestClose` prop in favor of using
  * the `onClick` prop instead.
  */
 export declare const Overlay: import("react").ForwardRefExoticComponent<OverlayProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/overlay/Overlay.js

@@ -1,17 +1,18 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Portal } from "../portal/Portal.js";
 import { useSsr } from "../SsrProvider.js";
+import { Portal } from "../portal/Portal.js";
 import { useCSSTransition } from "../transition/useCSSTransition.js";
-import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./overlayStyles.js";
+import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./styles.js";
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { Button, Overlay, useToggle } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Overlay } from "@react-md/core/overlay/Overlay";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -26,7 +27,8 @@ import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Removed the `onRequestClose` prop in favor of using
+ * @see {@link https://next.react-md.dev/components/overlay | Overlay Demos}
+ * @since 6.0.0 Removed the `onRequestClose` prop in favor of using
  * the `onClick` prop instead.
  */ export const Overlay = /*#__PURE__*/ forwardRef(function Overlay(props, nodeRef) {
     const { children, className, visible, noOpacity = false, clickable = !noOpacity, temporary = true, timeout = DEFAULT_OVERLAY_TIMEOUT, classNames = DEFAULT_OVERLAY_CLASSNAMES, disableTransition = false, align = "center", justify = "center", appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExiting, onExited, exitedHidden = true, disablePortal: propDisablePortal = false, ...remaining } = props;

package/dist/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type BoxAlignItems, type BoxJustifyContent } from \"../box/styles.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport {\n  DEFAULT_OVERLAY_CLASSNAMES,\n  DEFAULT_OVERLAY_TIMEOUT,\n  overlay,\n} from \"./overlayStyles.js\";\n\n/**\n * @remarks \\@since 6.0.0 Added `align` and `justify` props.\n */\nexport interface OverlayProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    CSSTransitionComponentProps,\n    TransitionActions {\n  /**\n   * @defaultValue `\"center\"`\n   * @remarks \\@since 6.0.0\n   */\n  align?: BoxAlignItems;\n\n  /**\n   * @defaultValue `\"center\"`\n   * @remarks \\@since 6.0.0\n   */\n  justify?: BoxJustifyContent;\n\n  /**\n   * Set this to `true` for when the overlay should be visible. Toggling this\n   * value will trigger the enter/exit animation.\n   */\n  visible: boolean;\n\n  /**\n   * Set this to `true` if the overlay should be rendered with an `opacity: 0`\n   * and disabling the animation. This is useful if you'd like a \"close on\n   * outside click\" behavior.\n   *\n   * @defaultValue `false`\n   */\n  noOpacity?: boolean;\n\n  /**\n   * @see {@link OverlayClassNameOptions.clickable}\n   * @defaultValue `!noOpacity`\n   */\n  clickable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Button, Overlay, useToggle } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggle, disable, toggled: visible } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Overlay visible={visible} onClick={disable} />\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Removed the `onRequestClose` prop in favor of using\n * the `onClick` prop instead.\n */\nexport const Overlay = forwardRef<HTMLSpanElement, OverlayProps>(\n  function Overlay(props, nodeRef) {\n    const {\n      children,\n      className,\n      visible,\n      noOpacity = false,\n      clickable = !noOpacity,\n      temporary = true,\n      timeout = DEFAULT_OVERLAY_TIMEOUT,\n      classNames = DEFAULT_OVERLAY_CLASSNAMES,\n      disableTransition = false,\n      align = \"center\",\n      justify = \"center\",\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      exitedHidden = true,\n      disablePortal: propDisablePortal = false,\n      ...remaining\n    } = props;\n\n    const ssr = useSsr();\n    const { elementProps, rendered, disablePortal } = useCSSTransition({\n      nodeRef,\n      transitionIn: visible,\n      timeout: noOpacity ? 0 : timeout,\n      classNames: noOpacity ? \"\" : classNames,\n      className: overlay({\n        visible,\n        clickable,\n        align,\n        justify,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n    });\n\n    return (\n      <Portal disabled={disablePortal}>\n        {rendered && (\n          <span {...remaining} {...elementProps}>\n            {children}\n          </span>\n        )}\n      </Portal>\n    );\n  }\n);\n"],"names":["forwardRef","Portal","useSsr","useCSSTransition","DEFAULT_OVERLAY_CLASSNAMES","DEFAULT_OVERLAY_TIMEOUT","overlay","Overlay","props","nodeRef","children","className","visible","noOpacity","clickable","temporary","timeout","classNames","disableTransition","align","justify","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disablePortal","propDisablePortal","remaining","ssr","elementProps","rendered","transitionIn","disabled","span"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AAExD,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,MAAM,QAAQ,oBAAoB;AAK3C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SACEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,qBAAqB;AAqD5B;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,wBAAUP,WACrB,SAASO,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,YAAY,KAAK,EACjBC,YAAY,CAACD,SAAS,EACtBE,YAAY,IAAI,EAChBC,UAAUX,uBAAuB,EACjCY,aAAab,0BAA0B,EACvCc,oBAAoB,KAAK,EACzBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,eAAe,IAAI,EACnBC,eAAeC,oBAAoB,KAAK,EACxC,GAAGC,WACJ,GAAGzB;IAEJ,MAAM0B,MAAMhC;IACZ,MAAM,EAAEiC,YAAY,EAAEC,QAAQ,EAAEL,aAAa,EAAE,GAAG5B,iBAAiB;QACjEM;QACA4B,cAAczB;QACdI,SAASH,YAAY,IAAIG;QACzBC,YAAYJ,YAAY,KAAKI;QAC7BN,WAAWL,QAAQ;YACjBM;YACAE;YACAK;YACAC;YACAT;QACF;QACAU,QAAQA,UAAU,CAACH,qBAAqB,CAACgB;QACzCZ,OAAOA,SAAS,CAACJ;QACjBK,MAAMA,QAAQ,CAACL;QACfM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd;QACAe;QACAC,eAAeC;IACjB;IAEA,qBACE,KAAC/B;QAAOqC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX,GACA"}
+{"version":3,"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { type BoxAlignItems, type BoxJustifyContent } from \"../box/styles.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport {\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport {\n  DEFAULT_OVERLAY_CLASSNAMES,\n  DEFAULT_OVERLAY_TIMEOUT,\n  overlay,\n} from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-overlay-background-color\"?: string;\n    \"--rmd-overlay-z-index\"?: number;\n  }\n}\n\n/**\n * @since 6.0.0 Added `align` and `justify` props.\n * @since 6.0.0 Renamed `hidden` to `noOpacity`.\n */\nexport interface OverlayProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    CSSTransitionComponentProps,\n    TransitionActions {\n  /**\n   * @defaultValue `\"center\"`\n   * @since 6.0.0\n   */\n  align?: BoxAlignItems;\n\n  /**\n   * @defaultValue `\"center\"`\n   * @since 6.0.0\n   */\n  justify?: BoxJustifyContent;\n\n  /**\n   * Set this to `true` for when the overlay should be visible. Toggling this\n   * value will trigger the enter/exit animation.\n   */\n  visible: boolean;\n\n  /**\n   * Set this to `true` if the overlay should be rendered with an `opacity: 0`\n   * and disabling the animation. This is useful if you'd like a \"close on\n   * outside click\" behavior.\n   *\n   * @defaultValue `false`\n   */\n  noOpacity?: boolean;\n\n  /**\n   * @see {@link OverlayClassNameOptions.clickable}\n   * @defaultValue `!noOpacity`\n   */\n  clickable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Overlay } from \"@react-md/core/overlay/Overlay\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggle, disable, toggled: visible } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Overlay visible={visible} onClick={disable} />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/overlay | Overlay Demos}\n * @since 6.0.0 Removed the `onRequestClose` prop in favor of using\n * the `onClick` prop instead.\n */\nexport const Overlay = forwardRef<HTMLSpanElement, OverlayProps>(\n  function Overlay(props, nodeRef) {\n    const {\n      children,\n      className,\n      visible,\n      noOpacity = false,\n      clickable = !noOpacity,\n      temporary = true,\n      timeout = DEFAULT_OVERLAY_TIMEOUT,\n      classNames = DEFAULT_OVERLAY_CLASSNAMES,\n      disableTransition = false,\n      align = \"center\",\n      justify = \"center\",\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      exitedHidden = true,\n      disablePortal: propDisablePortal = false,\n      ...remaining\n    } = props;\n\n    const ssr = useSsr();\n    const { elementProps, rendered, disablePortal } = useCSSTransition({\n      nodeRef,\n      transitionIn: visible,\n      timeout: noOpacity ? 0 : timeout,\n      classNames: noOpacity ? \"\" : classNames,\n      className: overlay({\n        visible,\n        clickable,\n        align,\n        justify,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n    });\n\n    return (\n      <Portal disabled={disablePortal}>\n        {rendered && (\n          <span {...remaining} {...elementProps}>\n            {children}\n          </span>\n        )}\n      </Portal>\n    );\n  }\n);\n"],"names":["forwardRef","useSsr","Portal","useCSSTransition","DEFAULT_OVERLAY_CLASSNAMES","DEFAULT_OVERLAY_TIMEOUT","overlay","Overlay","props","nodeRef","children","className","visible","noOpacity","clickable","temporary","timeout","classNames","disableTransition","align","justify","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disablePortal","propDisablePortal","remaining","ssr","elementProps","rendered","transitionIn","disabled","span"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,MAAM,QAAQ,oBAAoB;AAE3C,SAASC,MAAM,QAAQ,sBAAsB;AAK7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SACEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,cAAc;AA6DrB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,wBAAUP,WACrB,SAASO,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,YAAY,KAAK,EACjBC,YAAY,CAACD,SAAS,EACtBE,YAAY,IAAI,EAChBC,UAAUX,uBAAuB,EACjCY,aAAab,0BAA0B,EACvCc,oBAAoB,KAAK,EACzBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,eAAe,IAAI,EACnBC,eAAeC,oBAAoB,KAAK,EACxC,GAAGC,WACJ,GAAGzB;IAEJ,MAAM0B,MAAMjC;IACZ,MAAM,EAAEkC,YAAY,EAAEC,QAAQ,EAAEL,aAAa,EAAE,GAAG5B,iBAAiB;QACjEM;QACA4B,cAAczB;QACdI,SAASH,YAAY,IAAIG;QACzBC,YAAYJ,YAAY,KAAKI;QAC7BN,WAAWL,QAAQ;YACjBM;YACAE;YACAK;YACAC;YACAT;QACF;QACAU,QAAQA,UAAU,CAACH,qBAAqB,CAACgB;QACzCZ,OAAOA,SAAS,CAACJ;QACjBK,MAAMA,QAAQ,CAACL;QACfM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd;QACAe;QACAC,eAAeC;IACjB;IAEA,qBACE,KAAC9B;QAAOoC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX,GACA"}