@payloadcms/ui 3.84.0 → 4.0.0-internal.38b7f1d

package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.server.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { DEFAULT_HIERARCHY_TREE_LIMIT, getInitialTreeData } from 'payload';
+import { PREFERENCE_KEYS } from 'payload/shared';
+import React from 'react';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
+import { HierarchySidebarTab } from '../../../exports/client/index.js';
+import { TagIcon } from '../../../icons/Tag/index.js';
+import { RenderServerComponent } from '../../RenderServerComponent/index.js';
+export const HierarchySidebarTabServer = async ({
+  hierarchyCollectionSlug,
+  i18n,
+  payload,
+  req,
+  searchParams,
+  user
+}) => {
+  if (!user) {
+    return null;
+  }
+  let initialData = null;
+  let initialExpandedNodes = [];
+  let initialSelectedFilters = [];
+  let selectedNodeId = null;
+  let parentFieldName = 'parent';
+  let treeLimit;
+  let typeFieldName;
+  let useAsTitle;
+  let collectionSpecificOptions = [];
+  let baseFilter = null;
+  // Get collection config and render icon (outside try block - doesn't need async)
+  const collectionConfig = payload.collections[hierarchyCollectionSlug]?.config;
+  const hierarchyConfig = collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object' ? collectionConfig.hierarchy : undefined;
+  const IconComponent = hierarchyConfig?.admin?.components?.Icon;
+  const icon = IconComponent ? RenderServerComponent({
+    Component: IconComponent,
+    importMap: payload.importMap,
+    key: `hierarchy-sidebar-icon-${hierarchyCollectionSlug}`
+  }) : /*#__PURE__*/_jsx(TagIcon, {
+    color: "muted"
+  });
+  try {
+    // Get selected node from URL (?parent=<id>)
+    selectedNodeId = searchParams?.parent ? String(searchParams.parent) : null;
+    // STEP 1: Load user's expanded node preferences
+    const preferenceKey = `${PREFERENCE_KEYS.HIERARCHY_TREE}-${hierarchyCollectionSlug}`;
+    const {
+      docs: preferenceDocs
+    } = await payload.find({
+      collection: 'payload-preferences',
+      limit: 1,
+      overrideAccess: false,
+      user,
+      where: {
+        and: [{
+          key: {
+            equals: preferenceKey
+          }
+        }, {
+          'user.value': {
+            equals: user.id
+          }
+        }, {
+          'user.relationTo': {
+            equals: user.collection
+          }
+        }]
+      }
+    });
+    const preferences = preferenceDocs[0];
+    if (preferences?.value?.expandedNodes) {
+      initialExpandedNodes = preferences.value.expandedNodes;
+    }
+    if (preferences?.value?.selectedFilters) {
+      initialSelectedFilters = preferences.value.selectedFilters;
+    }
+    // STEP 2: Get remaining config values
+    parentFieldName = hierarchyConfig?.parentFieldName;
+    treeLimit = hierarchyConfig?.admin?.treeLimit;
+    typeFieldName = hierarchyConfig?.collectionSpecific && typeof hierarchyConfig.collectionSpecific === 'object' ? hierarchyConfig.collectionSpecific.fieldName : undefined;
+    useAsTitle = collectionConfig?.admin?.useAsTitle;
+    // STEP 2.5: Build collection-specific options from related collections
+    if (hierarchyConfig.collectionSpecific && hierarchyConfig?.relatedCollections) {
+      collectionSpecificOptions = Object.keys(hierarchyConfig.relatedCollections).map(slug => {
+        const relatedConfig = payload.collections[slug]?.config;
+        const label = relatedConfig?.labels?.plural ?? slug;
+        return {
+          label: getTranslation(label, i18n),
+          value: slug
+        };
+      }).sort((a, b) => a.label.localeCompare(b.label));
+    }
+    // Track the immediate parent of the selected node (for ensuring siblings are loaded)
+    let selectedNodeParentId = null;
+    // If there's a selected node, ensure its ancestor chain is expanded
+    if (selectedNodeId) {
+      // Walk up the parent chain to root
+      const ancestorIds = [];
+      let currentNodeId = selectedNodeId;
+      let isFirstIteration = true;
+      while (currentNodeId) {
+        try {
+          const node = await payload.findByID({
+            id: currentNodeId,
+            collection: hierarchyCollectionSlug,
+            depth: 0,
+            overrideAccess: false,
+            user
+          });
+          const parentId = node?.[parentFieldName];
+          // Capture the immediate parent of the selected node
+          if (isFirstIteration) {
+            selectedNodeParentId = parentId ?? null;
+            isFirstIteration = false;
+          }
+          if (parentId) {
+            ancestorIds.push(parentId);
+            currentNodeId = parentId;
+          } else {
+            currentNodeId = null;
+          }
+        } catch {
+          break;
+        }
+      }
+      // Merge ancestor IDs with existing expanded nodes
+      const expandedSet = new Set(initialExpandedNodes);
+      ancestorIds.forEach(id => expandedSet.add(id));
+      initialExpandedNodes = Array.from(expandedSet);
+    }
+    const baseFilterFn = collectionConfig?.admin?.baseFilter ?? collectionConfig?.admin?.baseListFilter;
+    if (baseFilterFn && req) {
+      baseFilter = (await baseFilterFn({
+        limit: DEFAULT_HIERARCHY_TREE_LIMIT,
+        page: 1,
+        req,
+        sort: 'id'
+      })) ?? null;
+    }
+    initialData = await getInitialTreeData({
+      baseFilter,
+      collectionSlug: hierarchyCollectionSlug,
+      expandedNodeIds: initialExpandedNodes,
+      ...(initialSelectedFilters.length > 0 && {
+        filterByCollections: initialSelectedFilters
+      }),
+      ...(treeLimit !== undefined && {
+        limit: treeLimit
+      }),
+      payload,
+      selectedNodeId,
+      selectedNodeParentId,
+      user: req.user
+    });
+  } catch (error) {
+    payload.logger.warn({
+      err: error,
+      msg: `Failed to fetch hierarchy data for ${hierarchyCollectionSlug}`
+    });
+    // Fall back to client-side fetching if server fetch fails
+  }
+  return /*#__PURE__*/_jsx(HierarchySidebarTab, {
+    baseFilter: baseFilter,
+    collectionSpecificOptions: collectionSpecificOptions,
+    hierarchyCollectionSlug: hierarchyCollectionSlug,
+    icon: icon,
+    initialData: initialData,
+    initialExpandedNodes: initialExpandedNodes,
+    initialSelectedFilters: initialSelectedFilters,
+    parentFieldName: parentFieldName,
+    selectedNodeId: selectedNodeId,
+    treeLimit: treeLimit,
+    typeFieldName: typeFieldName,
+    useAsTitle: useAsTitle
+  });
+};
+//# sourceMappingURL=HierarchySidebarTab.server.js.map

package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchySidebarTab.server.js","names":["getTranslation","DEFAULT_HIERARCHY_TREE_LIMIT","getInitialTreeData","PREFERENCE_KEYS","React","HierarchySidebarTab","TagIcon","RenderServerComponent","HierarchySidebarTabServer","hierarchyCollectionSlug","i18n","payload","req","searchParams","user","initialData","initialExpandedNodes","initialSelectedFilters","selectedNodeId","parentFieldName","treeLimit","typeFieldName","useAsTitle","collectionSpecificOptions","baseFilter","collectionConfig","collections","config","hierarchyConfig","hierarchy","undefined","IconComponent","admin","components","Icon","icon","Component","importMap","key","_jsx","color","parent","String","preferenceKey","HIERARCHY_TREE","docs","preferenceDocs","find","collection","limit","overrideAccess","where","and","equals","id","preferences","value","expandedNodes","selectedFilters","collectionSpecific","fieldName","relatedCollections","Object","keys","map","slug","relatedConfig","label","labels","plural","sort","a","b","localeCompare","selectedNodeParentId","ancestorIds","currentNodeId","isFirstIteration","node","findByID","depth","parentId","push","expandedSet","Set","forEach","add","Array","from","baseFilterFn","baseListFilter","page","collectionSlug","expandedNodeIds","length","filterByCollections","error","logger","warn","err","msg"],"sources":["../../../../src/elements/Hierarchy/Tree/HierarchySidebarTab.server.tsx"],"sourcesContent":["import type { SidebarTabServerProps, Where } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { DEFAULT_HIERARCHY_TREE_LIMIT, getInitialTreeData } from 'payload'\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React from 'react'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary\nimport { HierarchySidebarTab } from '../../../exports/client/index.js'\nimport { TagIcon } from '../../../icons/Tag/index.js'\nimport { RenderServerComponent } from '../../RenderServerComponent/index.js'\n\nexport type HierarchySidebarTabServerProps = {\n  hierarchyCollectionSlug: string\n} & SidebarTabServerProps\n\nexport const HierarchySidebarTabServer: React.FC<HierarchySidebarTabServerProps> = async ({\n  hierarchyCollectionSlug,\n  i18n,\n  payload,\n  req,\n  searchParams,\n  user,\n}) => {\n  if (!user) {\n    return null\n  }\n\n  let initialData = null\n  let initialExpandedNodes: (number | string)[] = []\n  let initialSelectedFilters: string[] = []\n  let selectedNodeId: null | string = null\n  let parentFieldName = 'parent'\n  let treeLimit: number | undefined\n  let typeFieldName: string | undefined\n  let useAsTitle: string | undefined\n  let collectionSpecificOptions: { label: string; value: string }[] = []\n  let baseFilter: null | Where = null\n\n  // Get collection config and render icon (outside try block - doesn't need async)\n  const collectionConfig = payload.collections[hierarchyCollectionSlug]?.config\n  const hierarchyConfig =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy\n      : undefined\n\n  const IconComponent = hierarchyConfig?.admin?.components?.Icon\n  const icon = IconComponent ? (\n    RenderServerComponent({\n      Component: IconComponent,\n      importMap: payload.importMap,\n      key: `hierarchy-sidebar-icon-${hierarchyCollectionSlug}`,\n    })\n  ) : (\n    <TagIcon color=\"muted\" />\n  )\n\n  try {\n    // Get selected node from URL (?parent=<id>)\n    selectedNodeId = searchParams?.parent ? String(searchParams.parent) : null\n\n    // STEP 1: Load user's expanded node preferences\n    const preferenceKey = `${PREFERENCE_KEYS.HIERARCHY_TREE}-${hierarchyCollectionSlug}`\n\n    const { docs: preferenceDocs } = await payload.find({\n      collection: 'payload-preferences',\n      limit: 1,\n      overrideAccess: false,\n      user,\n      where: {\n        and: [\n          { key: { equals: preferenceKey } },\n          { 'user.value': { equals: user.id } },\n          { 'user.relationTo': { equals: user.collection } },\n        ],\n      },\n    })\n\n    const preferences = preferenceDocs[0]\n\n    if (preferences?.value?.expandedNodes) {\n      initialExpandedNodes = preferences.value.expandedNodes\n    }\n\n    if (preferences?.value?.selectedFilters) {\n      initialSelectedFilters = preferences.value.selectedFilters\n    }\n\n    // STEP 2: Get remaining config values\n    parentFieldName = hierarchyConfig?.parentFieldName\n    treeLimit = hierarchyConfig?.admin?.treeLimit\n    typeFieldName =\n      hierarchyConfig?.collectionSpecific && typeof hierarchyConfig.collectionSpecific === 'object'\n        ? hierarchyConfig.collectionSpecific.fieldName\n        : undefined\n    useAsTitle = collectionConfig?.admin?.useAsTitle\n\n    // STEP 2.5: Build collection-specific options from related collections\n    if (hierarchyConfig.collectionSpecific && hierarchyConfig?.relatedCollections) {\n      collectionSpecificOptions = Object.keys(hierarchyConfig.relatedCollections)\n        .map((slug) => {\n          const relatedConfig = payload.collections[slug]?.config\n          const label = relatedConfig?.labels?.plural ?? slug\n\n          return {\n            label: getTranslation(label, i18n),\n            value: slug,\n          }\n        })\n        .sort((a, b) => a.label.localeCompare(b.label))\n    }\n\n    // Track the immediate parent of the selected node (for ensuring siblings are loaded)\n    let selectedNodeParentId: null | number | string = null\n\n    // If there's a selected node, ensure its ancestor chain is expanded\n    if (selectedNodeId) {\n      // Walk up the parent chain to root\n      const ancestorIds: (number | string)[] = []\n      let currentNodeId: null | number | string = selectedNodeId\n      let isFirstIteration = true\n\n      while (currentNodeId) {\n        try {\n          const node = await payload.findByID({\n            id: currentNodeId,\n            collection: hierarchyCollectionSlug,\n            depth: 0,\n            overrideAccess: false,\n            user,\n          })\n\n          const parentId = node?.[parentFieldName]\n\n          // Capture the immediate parent of the selected node\n          if (isFirstIteration) {\n            selectedNodeParentId = parentId ?? null\n            isFirstIteration = false\n          }\n\n          if (parentId) {\n            ancestorIds.push(parentId)\n            currentNodeId = parentId\n          } else {\n            currentNodeId = null\n          }\n        } catch {\n          // Node not found or access denied\n          break\n        }\n      }\n\n      // Merge ancestor IDs with existing expanded nodes\n      const expandedSet = new Set(initialExpandedNodes)\n      ancestorIds.forEach((id) => expandedSet.add(id))\n      initialExpandedNodes = Array.from(expandedSet)\n    }\n\n    const baseFilterFn =\n      collectionConfig?.admin?.baseFilter ?? collectionConfig?.admin?.baseListFilter\n    if (baseFilterFn && req) {\n      baseFilter =\n        (await baseFilterFn({ limit: DEFAULT_HIERARCHY_TREE_LIMIT, page: 1, req, sort: 'id' })) ??\n        null\n    }\n\n    initialData = await getInitialTreeData({\n      baseFilter,\n      collectionSlug: hierarchyCollectionSlug,\n      expandedNodeIds: initialExpandedNodes,\n      ...(initialSelectedFilters.length > 0 && { filterByCollections: initialSelectedFilters }),\n      ...(treeLimit !== undefined && { limit: treeLimit }),\n      payload,\n      selectedNodeId,\n      selectedNodeParentId,\n      user: req.user,\n    })\n  } catch (error) {\n    payload.logger.warn({\n      err: error,\n      msg: `Failed to fetch hierarchy data for ${hierarchyCollectionSlug}`,\n    })\n    // Fall back to client-side fetching if server fetch fails\n  }\n\n  return (\n    <HierarchySidebarTab\n      baseFilter={baseFilter}\n      collectionSpecificOptions={collectionSpecificOptions}\n      hierarchyCollectionSlug={hierarchyCollectionSlug}\n      icon={icon}\n      initialData={initialData}\n      initialExpandedNodes={initialExpandedNodes}\n      initialSelectedFilters={initialSelectedFilters}\n      parentFieldName={parentFieldName}\n      selectedNodeId={selectedNodeId}\n      treeLimit={treeLimit}\n      typeFieldName={typeFieldName}\n      useAsTitle={useAsTitle}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/Tree/LoadMore/LoadMoreButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type LoadMoreButtonProps = {
+    id: string;
+    onLoadMore: (() => Promise<void>) | (() => void);
+};
+export declare const LoadMoreButton: React.FC<LoadMoreButtonProps>;
+export {};
+//# sourceMappingURL=LoadMoreButton.d.ts.map

package/dist/elements/Hierarchy/Tree/LoadMore/LoadMoreButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadMoreButton.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/Tree/LoadMore/LoadMoreButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAKlD,KAAK,mBAAmB,GAAG;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;CACjD,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyBxD,CAAA"}

package/dist/elements/Hierarchy/Tree/LoadMore/LoadMoreButton.js

@@ -0,0 +1,36 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useRef } from 'react';
+import { useTranslation } from '../../../../providers/Translation/index.js';
+import { useFocusableItem } from '../TreeFocusContext.js';
+export const LoadMoreButton = ({
+  id,
+  onLoadMore
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const buttonRef = useRef(null);
+  const {
+    handleFocus,
+    tabIndex
+  } = useFocusableItem({
+    id,
+    type: 'load-more',
+    ref: buttonRef
+  });
+  const handleClick = useCallback(async () => {
+    await onLoadMore();
+  }, [onLoadMore]);
+  return /*#__PURE__*/_jsx("button", {
+    className: "tree__load-more-button",
+    onClick: handleClick,
+    onFocus: handleFocus,
+    ref: buttonRef,
+    tabIndex: tabIndex,
+    type: "button",
+    children: t('general:loadMore')
+  });
+};
+//# sourceMappingURL=LoadMoreButton.js.map

package/dist/elements/Hierarchy/Tree/LoadMore/LoadMoreButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadMoreButton.js","names":["React","useCallback","useRef","useTranslation","useFocusableItem","LoadMoreButton","id","onLoadMore","t","buttonRef","handleFocus","tabIndex","type","ref","handleClick","_jsx","className","onClick","onFocus"],"sources":["../../../../../src/elements/Hierarchy/Tree/LoadMore/LoadMoreButton.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef } from 'react'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { useFocusableItem } from '../TreeFocusContext.js'\n\ntype LoadMoreButtonProps = {\n  id: string\n  onLoadMore: (() => Promise<void>) | (() => void)\n}\n\nexport const LoadMoreButton: React.FC<LoadMoreButtonProps> = ({ id, onLoadMore }) => {\n  const { t } = useTranslation()\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const { handleFocus, tabIndex } = useFocusableItem({\n    id,\n    type: 'load-more',\n    ref: buttonRef,\n  })\n\n  const handleClick = useCallback(async () => {\n    await onLoadMore()\n  }, [onLoadMore])\n\n  return (\n    <button\n      className=\"tree__load-more-button\"\n      onClick={handleClick}\n      onFocus={handleFocus}\n      ref={buttonRef}\n      tabIndex={tabIndex}\n      type=\"button\"\n    >\n      {t('general:loadMore')}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,IAASC,WAAW,EAAEC,MAAM,QAAQ;AAE3C,SAASC,cAAc,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ;AAOjC,OAAO,MAAMC,cAAA,GAAgDA,CAAC;EAAEC,EAAE;EAAEC;AAAU,CAAE;EAC9E,MAAM;IAAEC;EAAC,CAAE,GAAGL,cAAA;EACd,MAAMM,SAAA,GAAYP,MAAA,CAA0B;EAC5C,MAAM;IAAEQ,WAAW;IAAEC;EAAQ,CAAE,GAAGP,gBAAA,CAAiB;IACjDE,EAAA;IACAM,IAAA,EAAM;IACNC,GAAA,EAAKJ;EACP;EAEA,MAAMK,WAAA,GAAcb,WAAA,CAAY;IAC9B,MAAMM,UAAA;EACR,GAAG,CAACA,UAAA,CAAW;EAEf,oBACEQ,IAAA,CAAC;IACCC,SAAA,EAAU;IACVC,OAAA,EAASH,WAAA;IACTI,OAAA,EAASR,WAAA;IACTG,GAAA,EAAKJ,SAAA;IACLE,QAAA,EAAUA,QAAA;IACVC,IAAA,EAAK;cAEJJ,CAAA,CAAE;;AAGT","ignoreList":[]}

package/dist/elements/Hierarchy/Tree/LoadMore/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.scss';
+type LoadMoreProps = {
+    currentCount: number;
+    depth: number;
+    id: string;
+    onLoadMore: (() => Promise<void>) | (() => void);
+    totalDocs: number;
+};
+export declare const LoadMore: React.FC<LoadMoreProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Hierarchy/Tree/LoadMore/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/Tree/LoadMore/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAErB,KAAK,aAAa,GAAG;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAChD,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiB5C,CAAA"}

package/dist/elements/Hierarchy/Tree/LoadMore/index.js

@@ -0,0 +1,29 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { LoadMoreRow } from '../../../LoadMoreRow/index.js';
+import { LoadMoreButton } from './LoadMoreButton.js';
+import './index.scss';
+export const LoadMore = ({
+  id,
+  currentCount,
+  depth,
+  onLoadMore,
+  totalDocs
+}) => {
+  return /*#__PURE__*/_jsx(LoadMoreRow, {
+    className: "tree__load-more",
+    currentCount: currentCount,
+    hasMore: currentCount < totalDocs,
+    loadMoreButton: /*#__PURE__*/_jsx(LoadMoreButton, {
+      id: id,
+      onLoadMore: onLoadMore
+    }),
+    style: {
+      '--tree-depth': depth
+    },
+    totalDocs: totalDocs
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Hierarchy/Tree/LoadMore/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","LoadMoreRow","LoadMoreButton","LoadMore","id","currentCount","depth","onLoadMore","totalDocs","_jsx","className","hasMore","loadMoreButton","style"],"sources":["../../../../../src/elements/Hierarchy/Tree/LoadMore/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { LoadMoreRow } from '../../../LoadMoreRow/index.js'\nimport { LoadMoreButton } from './LoadMoreButton.js'\nimport './index.scss'\n\ntype LoadMoreProps = {\n  currentCount: number\n  depth: number\n  id: string\n  onLoadMore: (() => Promise<void>) | (() => void)\n  totalDocs: number\n}\n\nexport const LoadMore: React.FC<LoadMoreProps> = ({\n  id,\n  currentCount,\n  depth,\n  onLoadMore,\n  totalDocs,\n}) => {\n  return (\n    <LoadMoreRow\n      className=\"tree__load-more\"\n      currentCount={currentCount}\n      hasMore={currentCount < totalDocs}\n      loadMoreButton={<LoadMoreButton id={id} onLoadMore={onLoadMore} />}\n      style={{ '--tree-depth': depth } as React.CSSProperties}\n      totalDocs={totalDocs}\n    />\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAUP,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAChDC,EAAE;EACFC,YAAY;EACZC,KAAK;EACLC,UAAU;EACVC;AAAS,CACV;EACC,oBACEC,IAAA,CAACR,WAAA;IACCS,SAAA,EAAU;IACVL,YAAA,EAAcA,YAAA;IACdM,OAAA,EAASN,YAAA,GAAeG,SAAA;IACxBI,cAAA,eAAgBH,IAAA,CAACP,cAAA;MAAeE,EAAA,EAAIA,EAAA;MAAIG,UAAA,EAAYA;;IACpDM,KAAA,EAAO;MAAE,gBAAgBP;IAAM;IAC/BE,SAAA,EAAWA;;AAGjB","ignoreList":[]}

package/dist/elements/Hierarchy/Tree/LoadMore/index.scss

@@ -0,0 +1,26 @@
+// Tree-specific overrides for the shared LoadMoreRow component
+
+.tree__load-more.load-more-row {
+  padding: var(--tree-node-padding-y) var(--tree-node-padding-x);
+  padding-left: calc(var(--tree-depth, 0) * var(--tree-indent));
+  height: var(--tree-node-content-height);
+  position: relative;
+  margin-bottom: var(--tree-row-gap);
+  padding-top: 0;
+
+  .load-more-row__connector {
+    margin-left: 2px;
+  }
+}
+
+// Tree-specific button styling (uses native button for focus management)
+.tree__load-more-button {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--theme-text);
+  font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+}

package/dist/elements/Hierarchy/Tree/TreeConnector.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type TreeConnectorProps = {
+    className?: string;
+};
+export declare const TreeConnector: React.FC<TreeConnectorProps>;
+export {};
+//# sourceMappingURL=TreeConnector.d.ts.map

package/dist/elements/Hierarchy/Tree/TreeConnector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeConnector.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Tree/TreeConnector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,kBAAkB,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkBtD,CAAA"}

package/dist/elements/Hierarchy/Tree/TreeConnector.js

@@ -0,0 +1,23 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export const TreeConnector = ({
+  className
+}) => {
+  return /*#__PURE__*/_jsx("svg", {
+    className: className,
+    fill: "none",
+    height: "9",
+    viewBox: "0 0 9 9",
+    width: "9",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M7.59062 7.83333H3.16667C2.45942 7.83333 1.78115 7.55238 1.28105 7.05229C0.780951 6.55219 0.5 5.87391 0.5 5.16667V0.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+};
+//# sourceMappingURL=TreeConnector.js.map

package/dist/elements/Hierarchy/Tree/TreeConnector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeConnector.js","names":["React","TreeConnector","className","_jsx","fill","height","viewBox","width","xmlns","d","stroke","strokeLinecap","strokeLinejoin"],"sources":["../../../../src/elements/Hierarchy/Tree/TreeConnector.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\ntype TreeConnectorProps = {\n  className?: string\n}\n\nexport const TreeConnector: React.FC<TreeConnectorProps> = ({ className }) => {\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      width=\"9\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7.59062 7.83333H3.16667C2.45942 7.83333 1.78115 7.55238 1.28105 7.05229C0.780951 6.55219 0.5 5.87391 0.5 5.16667V0.5\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAMlB,OAAO,MAAMC,aAAA,GAA8CA,CAAC;EAAEC;AAAS,CAAE;EACvE,oBACEC,IAAA,CAAC;IACCD,SAAA,EAAWA,SAAA;IACXE,IAAA,EAAK;IACLC,MAAA,EAAO;IACPC,OAAA,EAAQ;IACRC,KAAA,EAAM;IACNC,KAAA,EAAM;cAEN,aAAAL,IAAA,CAAC;MACCM,CAAA,EAAE;MACFC,MAAA,EAAO;MACPC,aAAA,EAAc;MACdC,cAAA,EAAe;;;AAIvB","ignoreList":[]}

package/dist/elements/Hierarchy/Tree/TreeFocusContext.d.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+type FocusableItem = {
+    id: string;
+    ref: React.RefObject<HTMLElement>;
+    type: 'load-more' | 'node';
+};
+type TreeFocusContextType = {
+    focusedId: null | string;
+    moveFocus: (direction: 'down' | 'up') => void;
+    registerItem: (item: FocusableItem) => void;
+    setFocusedId: (id: null | string) => void;
+    unregisterItem: (id: string) => void;
+};
+export declare const TreeFocusProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useTreeFocus: () => TreeFocusContextType;
+export declare const useFocusableItem: ({ id, type, ref, }: {
+    id: string;
+    ref: React.RefObject<HTMLElement>;
+    type: "load-more" | "node";
+}) => {
+    handleFocus: () => void;
+    isFocused: boolean;
+    tabIndex: number;
+};
+export {};
+//# sourceMappingURL=TreeFocusContext.d.ts.map

package/dist/elements/Hierarchy/Tree/TreeFocusContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeFocusContext.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Tree/TreeFocusContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,KAAK,aAAa,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACjC,IAAI,EAAE,WAAW,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,SAAS,EAAE,IAAI,GAAG,MAAM,CAAA;IACxB,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,YAAY,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IAC3C,YAAY,EAAE,CAAC,EAAE,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;IACzC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC,CAAA;AAID,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAgFrE,CAAA;AAED,eAAO,MAAM,YAAY,4BAMxB,CAAA;AAED,eAAO,MAAM,gBAAgB,uBAI1B;IACD,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACjC,IAAI,EAAE,WAAW,GAAG,MAAM,CAAA;CAC3B;;;;CAwBA,CAAA"}

package/dist/elements/Hierarchy/Tree/TreeFocusContext.js

@@ -0,0 +1,149 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use, useCallback, useEffect, useRef, useState } from 'react';
+const TreeFocusContext = /*#__PURE__*/createContext(undefined);
+export const TreeFocusProvider = ({
+  children
+}) => {
+  const [focusedId, setFocusedIdState] = useState(null);
+  const itemsRef = useRef(new Map());
+  const setFocusedId = useCallback(id => {
+    setFocusedIdState(id);
+    if (id) {
+      const item = itemsRef.current.get(id);
+      if (item?.ref.current && document.activeElement !== item.ref.current) {
+        item.ref.current.focus();
+      }
+    }
+  }, []);
+  const registerItem = useCallback(item_0 => {
+    itemsRef.current.set(item_0.id, item_0);
+  }, []);
+  const unregisterItem = useCallback(id_0 => {
+    itemsRef.current.delete(id_0);
+  }, []);
+  const moveFocus = useCallback(direction => {
+    const items = Array.from(itemsRef.current.values());
+    if (items.length === 0) {
+      return;
+    }
+    // Sort items by their DOM position to ensure correct navigation order
+    const sortedItems = items.filter(item_1 => item_1.ref.current).sort((a, b) => {
+      const aElement = a.ref.current;
+      const bElement = b.ref.current;
+      if (!aElement || !bElement) {
+        return 0;
+      }
+      const position = aElement.compareDocumentPosition(bElement);
+      if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+      }
+      if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+      }
+      return 0;
+    });
+    const currentIndex = focusedId ? sortedItems.findIndex(item_2 => item_2.id === focusedId) : -1;
+    let nextIndex;
+    if (direction === 'down') {
+      nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, sortedItems.length - 1);
+    } else {
+      nextIndex = Math.max(currentIndex - 1, 0);
+    }
+    const nextItem = sortedItems[nextIndex];
+    if (nextItem && nextItem.ref.current) {
+      nextItem.ref.current.focus();
+      setFocusedId(nextItem.id);
+    }
+  }, [focusedId, setFocusedId]);
+  return /*#__PURE__*/_jsx(TreeFocusContext, {
+    value: {
+      focusedId,
+      moveFocus,
+      registerItem,
+      setFocusedId,
+      unregisterItem
+    },
+    children: children
+  });
+};
+export const useTreeFocus = () => {
+  const context = use(TreeFocusContext);
+  if (!context) {
+    throw new Error('useTreeFocus must be used within TreeFocusProvider');
+  }
+  return context;
+};
+export const useFocusableItem = t0 => {
+  const $ = _c(14);
+  const {
+    id,
+    type,
+    ref
+  } = t0;
+  const {
+    focusedId,
+    registerItem,
+    setFocusedId,
+    unregisterItem
+  } = useTreeFocus();
+  const isFocused = focusedId === id;
+  const isFirstItemEver = focusedId === null;
+  let t1;
+  let t2;
+  if ($[0] !== id || $[1] !== ref || $[2] !== registerItem || $[3] !== type || $[4] !== unregisterItem) {
+    t1 = () => {
+      registerItem({
+        id,
+        type,
+        ref
+      });
+      return () => {
+        unregisterItem(id);
+      };
+    };
+    t2 = [id, ref, type, registerItem, unregisterItem];
+    $[0] = id;
+    $[1] = ref;
+    $[2] = registerItem;
+    $[3] = type;
+    $[4] = unregisterItem;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[7] !== id || $[8] !== setFocusedId) {
+    t3 = () => {
+      setFocusedId(id);
+    };
+    $[7] = id;
+    $[8] = setFocusedId;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const handleFocus = t3;
+  const tabIndex = isFocused ? 0 : isFirstItemEver ? 0 : -1;
+  let t4;
+  if ($[10] !== handleFocus || $[11] !== isFocused || $[12] !== tabIndex) {
+    t4 = {
+      handleFocus,
+      isFocused,
+      tabIndex
+    };
+    $[10] = handleFocus;
+    $[11] = isFocused;
+    $[12] = tabIndex;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
+};
+//# sourceMappingURL=TreeFocusContext.js.map

package/dist/elements/Hierarchy/Tree/TreeFocusContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeFocusContext.js","names":["c","_c","createContext","use","useCallback","useEffect","useRef","useState","TreeFocusContext","undefined","TreeFocusProvider","children","focusedId","setFocusedIdState","itemsRef","Map","setFocusedId","id","item","current","get","ref","document","activeElement","focus","registerItem","set","unregisterItem","delete","moveFocus","direction","items","Array","from","values","length","sortedItems","filter","sort","a","b","aElement","bElement","position","compareDocumentPosition","Node","DOCUMENT_POSITION_FOLLOWING","DOCUMENT_POSITION_PRECEDING","currentIndex","findIndex","nextIndex","Math","min","max","nextItem","_jsx","value","useTreeFocus","context","Error","useFocusableItem","t0","$","type","isFocused","isFirstItemEver","t1","t2","t3","handleFocus","tabIndex","t4"],"sources":["../../../../src/elements/Hierarchy/Tree/TreeFocusContext.tsx"],"sourcesContent":["'use client'\n\nimport type React from 'react'\n\nimport { createContext, use, useCallback, useEffect, useRef, useState } from 'react'\n\ntype FocusableItem = {\n  id: string\n  ref: React.RefObject<HTMLElement>\n  type: 'load-more' | 'node'\n}\n\ntype TreeFocusContextType = {\n  focusedId: null | string\n  moveFocus: (direction: 'down' | 'up') => void\n  registerItem: (item: FocusableItem) => void\n  setFocusedId: (id: null | string) => void\n  unregisterItem: (id: string) => void\n}\n\nconst TreeFocusContext = createContext<TreeFocusContextType | undefined>(undefined)\n\nexport const TreeFocusProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [focusedId, setFocusedIdState] = useState<null | string>(null)\n  const itemsRef = useRef<Map<string, FocusableItem>>(new Map())\n\n  const setFocusedId = useCallback((id: null | string) => {\n    setFocusedIdState(id)\n    if (id) {\n      const item = itemsRef.current.get(id)\n      if (item?.ref.current && document.activeElement !== item.ref.current) {\n        item.ref.current.focus()\n      }\n    }\n  }, [])\n\n  const registerItem = useCallback((item: FocusableItem) => {\n    itemsRef.current.set(item.id, item)\n  }, [])\n\n  const unregisterItem = useCallback((id: string) => {\n    itemsRef.current.delete(id)\n  }, [])\n\n  const moveFocus = useCallback(\n    (direction: 'down' | 'up') => {\n      const items = Array.from(itemsRef.current.values())\n      if (items.length === 0) {\n        return\n      }\n\n      // Sort items by their DOM position to ensure correct navigation order\n      const sortedItems = items\n        .filter((item) => item.ref.current)\n        .sort((a, b) => {\n          const aElement = a.ref.current\n          const bElement = b.ref.current\n          if (!aElement || !bElement) {\n            return 0\n          }\n\n          const position = aElement.compareDocumentPosition(bElement)\n          if (position & Node.DOCUMENT_POSITION_FOLLOWING) {\n            return -1\n          }\n          if (position & Node.DOCUMENT_POSITION_PRECEDING) {\n            return 1\n          }\n          return 0\n        })\n\n      const currentIndex = focusedId ? sortedItems.findIndex((item) => item.id === focusedId) : -1\n\n      let nextIndex: number\n      if (direction === 'down') {\n        nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, sortedItems.length - 1)\n      } else {\n        nextIndex = Math.max(currentIndex - 1, 0)\n      }\n\n      const nextItem = sortedItems[nextIndex]\n      if (nextItem && nextItem.ref.current) {\n        nextItem.ref.current.focus()\n        setFocusedId(nextItem.id)\n      }\n    },\n    [focusedId, setFocusedId],\n  )\n\n  return (\n    <TreeFocusContext\n      value={{\n        focusedId,\n        moveFocus,\n        registerItem,\n        setFocusedId,\n        unregisterItem,\n      }}\n    >\n      {children}\n    </TreeFocusContext>\n  )\n}\n\nexport const useTreeFocus = () => {\n  const context = use(TreeFocusContext)\n  if (!context) {\n    throw new Error('useTreeFocus must be used within TreeFocusProvider')\n  }\n  return context\n}\n\nexport const useFocusableItem = ({\n  id,\n  type,\n  ref,\n}: {\n  id: string\n  ref: React.RefObject<HTMLElement>\n  type: 'load-more' | 'node'\n}) => {\n  const { focusedId, registerItem, setFocusedId, unregisterItem } = useTreeFocus()\n  const isFocused = focusedId === id\n  const isFirstItemEver = focusedId === null\n\n  useEffect(() => {\n    registerItem({ id, type, ref })\n    return () => {\n      unregisterItem(id)\n    }\n  }, [id, ref, type, registerItem, unregisterItem])\n\n  const handleFocus = useCallback(() => {\n    setFocusedId(id)\n  }, [id, setFocusedId])\n\n  // Roving tabindex: focused item gets 0, first item (when nothing focused) gets 0, all others get -1\n  const tabIndex = isFocused ? 0 : isFirstItemEver ? 0 : -1\n\n  return {\n    handleFocus,\n    isFocused,\n    tabIndex,\n  }\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,aAAa,EAAEC,GAAG,EAAEC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAgB7E,MAAMC,gBAAA,gBAAmBN,aAAA,CAAgDO,SAAA;AAEzE,OAAO,MAAMC,iBAAA,GAA6DA,CAAC;EAAEC;AAAQ,CAAE;EACrF,MAAM,CAACC,SAAA,EAAWC,iBAAA,CAAkB,GAAGN,QAAA,CAAwB;EAC/D,MAAMO,QAAA,GAAWR,MAAA,CAAmC,IAAIS,GAAA;EAExD,MAAMC,YAAA,GAAeZ,WAAA,CAAaa,EAAA;IAChCJ,iBAAA,CAAkBI,EAAA;IAClB,IAAIA,EAAA,EAAI;MACN,MAAMC,IAAA,GAAOJ,QAAA,CAASK,OAAO,CAACC,GAAG,CAACH,EAAA;MAClC,IAAIC,IAAA,EAAMG,GAAA,CAAIF,OAAA,IAAWG,QAAA,CAASC,aAAa,KAAKL,IAAA,CAAKG,GAAG,CAACF,OAAO,EAAE;QACpED,IAAA,CAAKG,GAAG,CAACF,OAAO,CAACK,KAAK;MACxB;IACF;EACF,GAAG,EAAE;EAEL,MAAMC,YAAA,GAAerB,WAAA,CAAac,MAAA;IAChCJ,QAAA,CAASK,OAAO,CAACO,GAAG,CAACR,MAAA,CAAKD,EAAE,EAAEC,MAAA;EAChC,GAAG,EAAE;EAEL,MAAMS,cAAA,GAAiBvB,WAAA,CAAaa,IAAA;IAClCH,QAAA,CAASK,OAAO,CAACS,MAAM,CAACX,IAAA;EAC1B,GAAG,EAAE;EAEL,MAAMY,SAAA,GAAYzB,WAAA,CACf0B,SAAA;IACC,MAAMC,KAAA,GAAQC,KAAA,CAAMC,IAAI,CAACnB,QAAA,CAASK,OAAO,CAACe,MAAM;IAChD,IAAIH,KAAA,CAAMI,MAAM,KAAK,GAAG;MACtB;IACF;IAEA;IACA,MAAMC,WAAA,GAAcL,KAAA,CACjBM,MAAM,CAAEnB,MAAA,IAASA,MAAA,CAAKG,GAAG,CAACF,OAAO,EACjCmB,IAAI,CAAC,CAACC,CAAA,EAAGC,CAAA;MACR,MAAMC,QAAA,GAAWF,CAAA,CAAElB,GAAG,CAACF,OAAO;MAC9B,MAAMuB,QAAA,GAAWF,CAAA,CAAEnB,GAAG,CAACF,OAAO;MAC9B,IAAI,CAACsB,QAAA,IAAY,CAACC,QAAA,EAAU;QAC1B,OAAO;MACT;MAEA,MAAMC,QAAA,GAAWF,QAAA,CAASG,uBAAuB,CAACF,QAAA;MAClD,IAAIC,QAAA,GAAWE,IAAA,CAAKC,2BAA2B,EAAE;QAC/C,OAAO,CAAC;MACV;MACA,IAAIH,QAAA,GAAWE,IAAA,CAAKE,2BAA2B,EAAE;QAC/C,OAAO;MACT;MACA,OAAO;IACT;IAEF,MAAMC,YAAA,GAAepC,SAAA,GAAYwB,WAAA,CAAYa,SAAS,CAAE/B,MAAA,IAASA,MAAA,CAAKD,EAAE,KAAKL,SAAA,IAAa,CAAC;IAE3F,IAAIsC,SAAA;IACJ,IAAIpB,SAAA,KAAc,QAAQ;MACxBoB,SAAA,GAAYF,YAAA,KAAiB,CAAC,IAAI,IAAIG,IAAA,CAAKC,GAAG,CAACJ,YAAA,GAAe,GAAGZ,WAAA,CAAYD,MAAM,GAAG;IACxF,OAAO;MACLe,SAAA,GAAYC,IAAA,CAAKE,GAAG,CAACL,YAAA,GAAe,GAAG;IACzC;IAEA,MAAMM,QAAA,GAAWlB,WAAW,CAACc,SAAA,CAAU;IACvC,IAAII,QAAA,IAAYA,QAAA,CAASjC,GAAG,CAACF,OAAO,EAAE;MACpCmC,QAAA,CAASjC,GAAG,CAACF,OAAO,CAACK,KAAK;MAC1BR,YAAA,CAAasC,QAAA,CAASrC,EAAE;IAC1B;EACF,GACA,CAACL,SAAA,EAAWI,YAAA,CAAa;EAG3B,oBACEuC,IAAA,CAAC/C,gBAAA;IACCgD,KAAA,EAAO;MACL5C,SAAA;MACAiB,SAAA;MACAJ,YAAA;MACAT,YAAA;MACAW;IACF;cAEChB;;AAGP;AAEA,OAAO,MAAM8C,YAAA,GAAeA,CAAA;EAC1B,MAAMC,OAAA,GAAUvD,GAAA,CAAIK,gBAAA;EACpB,IAAI,CAACkD,OAAA,EAAS;IACZ,MAAM,IAAIC,KAAA,CAAM;EAClB;EACA,OAAOD,OAAA;AACT;AAEA,OAAO,MAAME,gBAAA,GAAmBC,EAAA;EAAA,MAAAC,CAAA,GAAA7D,EAAA;EAAC;IAAAgB,EAAA;IAAA8C,IAAA;IAAA1C;EAAA,IAAAwC,EAQhC;EACC;IAAAjD,SAAA;IAAAa,YAAA;IAAAT,YAAA;IAAAW;EAAA,IAAkE8B,YAAA;EAClE,MAAAO,SAAA,GAAkBpD,SAAA,KAAcK,EAAA;EAChC,MAAAgD,eAAA,GAAwBrD,SAAA,SAAc;EAAA,IAAAsD,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAL,CAAA,QAAA7C,EAAA,IAAA6C,CAAA,QAAAzC,GAAA,IAAAyC,CAAA,QAAArC,YAAA,IAAAqC,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAnC,cAAA;IAE5BuC,EAAA,GAAAA,CAAA;MACRzC,YAAA;QAAAR,EAAA;QAAA8C,IAAA;QAAA1C;MAAA,CAA6B;MAAA;QAE3BM,cAAA,CAAeV,EAAA;MAAA;IAAA;IAEhBkD,EAAA,IAAClD,EAAA,EAAII,GAAA,EAAK0C,IAAA,EAAMtC,YAAA,EAAcE,cAAA;IAAemC,CAAA,MAAA7C,EAAA;IAAA6C,CAAA,MAAAzC,GAAA;IAAAyC,CAAA,MAAArC,YAAA;IAAAqC,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAnC,cAAA;IAAAmC,CAAA,MAAAI,EAAA;IAAAJ,CAAA,MAAAK,EAAA;EAAA;IAAAD,EAAA,GAAAJ,CAAA;IAAAK,EAAA,GAAAL,CAAA;EAAA;EALhDzD,SAAA,CAAU6D,EAKV,EAAGC,EAA6C;EAAA,IAAAC,EAAA;EAAA,IAAAN,CAAA,QAAA7C,EAAA,IAAA6C,CAAA,QAAA9C,YAAA;IAEhBoD,EAAA,GAAAA,CAAA;MAC9BpD,YAAA,CAAaC,EAAA;IAAA;IACf6C,CAAA,MAAA7C,EAAA;IAAA6C,CAAA,MAAA9C,YAAA;IAAA8C,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAFA,MAAAO,WAAA,GAAoBD,EAEC;EAGrB,MAAAE,QAAA,GAAiBN,SAAA,OAAgBC,eAAA,SAAuB;EAAA,IAAAM,EAAA;EAAA,IAAAT,CAAA,SAAAO,WAAA,IAAAP,CAAA,SAAAE,SAAA,IAAAF,CAAA,SAAAQ,QAAA;IAEjDC,EAAA;MAAAF,WAAA;MAAAL,SAAA;MAAAM;IAAA;IAIPR,CAAA,OAAAO,WAAA;IAAAP,CAAA,OAAAE,SAAA;IAAAF,CAAA,OAAAQ,QAAA;IAAAR,CAAA,OAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAAA,OAJOS,EAIP;AAAA,CACF","ignoreList":[]}

package/dist/elements/Hierarchy/Tree/TreeNode/index.css

@@ -0,0 +1,63 @@
+@import '../../../../elements/SidebarRow/index.css';
+
+@layer payload-default {
+  .tree-node {
+    border-radius: var(--radius-medium);
+
+    .tree-node {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  .tree-node__content {
+    padding: var(--tree-node-padding-y) var(--spacer-2);
+    padding-left: calc(
+      (var(--tree-depth, 0) * var(--tree-indent)) + (var(--spacer-1) * var(--tree-depth)) +
+        var(--spacer-1)
+    );
+    transition: background-color 100ms ease;
+    font-size: var(--tree-font-size);
+    line-height: var(--tree-node-content-height);
+    margin-bottom: var(--tree-row-gap);
+  }
+
+  .tree-node__toggle {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+    color: var(--color-icon-tertiary);
+    width: var(--tree-chevron-width);
+    height: var(--tree-chevron-width);
+    flex-shrink: 0;
+    border-radius: var(--radius-medium);
+
+    &:hover {
+      color: var(--color-icon);
+    }
+  }
+
+  .tree-node__toggle-spacer {
+    width: calc(var(--tree-chevron-width) + var(--tree-chevron-spacing));
+    flex-shrink: 0;
+  }
+
+  .tree-node__title {
+    padding-left: var(--spacer-1);
+  }
+
+  .tree-node__loading {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .tree-node__children {
+    /* Children are rendered with depth variable set */
+  }
+}