@payloadcms/ui 3.80.0-internal-debug.7019cc9 → 3.80.0-internal.0311fce

package/dist/elements/HierarchyDrawer/fetchAncestorPath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetchAncestorPath.js","names":["formatAdminURL","qs","MAX_HIERARCHY_DEPTH","fetchAncestorPath","api","collectionSlug","itemId","parentFieldName","serverURL","queryString","stringify","depth","limit","select","where","id","equals","addQueryPrefix","url","apiRoute","path","response","fetch","credentials","ok","data","json","doc","docs","current","undefined","parentId","unshift"],"sources":["../../../src/elements/HierarchyDrawer/fetchAncestorPath.ts"],"sourcesContent":["import { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\n\ntype FetchAncestorPathArgs = {\n  api: string\n  collectionSlug: string\n  itemId: number | string\n  parentFieldName: string\n  serverURL: string\n}\n\nconst MAX_HIERARCHY_DEPTH = 20\n\n/**\n * Fetches the ancestor path for an item using a single API call with depth.\n * Returns array of ancestor IDs from root to item's parent.\n * Example: item at level 3 returns [grandparentId, parentId]\n */\nexport async function fetchAncestorPath({\n  api,\n  collectionSlug,\n  itemId,\n  parentFieldName,\n  serverURL,\n}: FetchAncestorPathArgs): Promise<(number | string)[]> {\n  const queryString = qs.stringify(\n    {\n      depth: MAX_HIERARCHY_DEPTH,\n      limit: 1,\n      select: { [parentFieldName]: true },\n      where: { id: { equals: itemId } },\n    },\n    { addQueryPrefix: true },\n  )\n\n  const url = formatAdminURL({\n    apiRoute: api,\n    path: `/${collectionSlug}${queryString}`,\n    serverURL,\n  })\n\n  const response = await fetch(url, { credentials: 'include' })\n\n  if (!response.ok) {\n    return []\n  }\n\n  const data = await response.json()\n  const doc = data.docs?.[0]\n\n  if (!doc) {\n    return []\n  }\n\n  // Walk the nested parent chain to build path from root to immediate parent\n  const path: (number | string)[] = []\n  let current = doc[parentFieldName]\n\n  while (current !== null && current !== undefined) {\n    // Parent could be an ID (number/string) or a populated object\n    const parentId = typeof current === 'object' ? current.id : current\n\n    if (parentId !== null && parentId !== undefined) {\n      path.unshift(parentId)\n    }\n\n    // Move to next parent (only if current is populated object)\n    current = typeof current === 'object' ? current[parentFieldName] : null\n  }\n\n  return path\n}\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ;AAC/B,YAAYC,EAAA,MAAQ;AAUpB,MAAMC,mBAAA,GAAsB;AAE5B;;;;;AAKA,OAAO,eAAeC,kBAAkB;EACtCC,GAAG;EACHC,cAAc;EACdC,MAAM;EACNC,eAAe;EACfC;AAAS,CACa;EACtB,MAAMC,WAAA,GAAcR,EAAA,CAAGS,SAAS,CAC9B;IACEC,KAAA,EAAOT,mBAAA;IACPU,KAAA,EAAO;IACPC,MAAA,EAAQ;MAAE,CAACN,eAAA,GAAkB;IAAK;IAClCO,KAAA,EAAO;MAAEC,EAAA,EAAI;QAAEC,MAAA,EAAQV;MAAO;IAAE;EAClC,GACA;IAAEW,cAAA,EAAgB;EAAK;EAGzB,MAAMC,GAAA,GAAMlB,cAAA,CAAe;IACzBmB,QAAA,EAAUf,GAAA;IACVgB,IAAA,EAAM,IAAIf,cAAA,GAAiBI,WAAA,EAAa;IACxCD;EACF;EAEA,MAAMa,QAAA,GAAW,MAAMC,KAAA,CAAMJ,GAAA,EAAK;IAAEK,WAAA,EAAa;EAAU;EAE3D,IAAI,CAACF,QAAA,CAASG,EAAE,EAAE;IAChB,OAAO,EAAE;EACX;EAEA,MAAMC,IAAA,GAAO,MAAMJ,QAAA,CAASK,IAAI;EAChC,MAAMC,GAAA,GAAMF,IAAA,CAAKG,IAAI,GAAG,EAAE;EAE1B,IAAI,CAACD,GAAA,EAAK;IACR,OAAO,EAAE;EACX;EAEA;EACA,MAAMP,IAAA,GAA4B,EAAE;EACpC,IAAIS,OAAA,GAAUF,GAAG,CAACpB,eAAA,CAAgB;EAElC,OAAOsB,OAAA,KAAY,QAAQA,OAAA,KAAYC,SAAA,EAAW;IAChD;IACA,MAAMC,QAAA,GAAW,OAAOF,OAAA,KAAY,WAAWA,OAAA,CAAQd,EAAE,GAAGc,OAAA;IAE5D,IAAIE,QAAA,KAAa,QAAQA,QAAA,KAAaD,SAAA,EAAW;MAC/CV,IAAA,CAAKY,OAAO,CAACD,QAAA;IACf;IAEA;IACAF,OAAA,GAAU,OAAOA,OAAA,KAAY,WAAWA,OAAO,CAACtB,eAAA,CAAgB,GAAG;EACrE;EAEA,OAAOa,IAAA;AACT","ignoreList":[]}

package/dist/elements/HierarchyDrawer/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { HierarchyDrawerTogglerProps, UseHierarchyDrawer } from './types.js';
+export * from './types.js';
+export declare const formatHierarchyDrawerSlug: ({ depth, uuid, }: {
+    depth: number;
+    uuid: string;
+}) => string;
+export declare const HierarchyDrawerToggler: React.FC<HierarchyDrawerTogglerProps>;
+/**
+ * Hook for using a hierarchy drawer for selecting hierarchy items.
+ *
+ * @example
+ * ```tsx
+ * const [HierarchyDrawer, HierarchyDrawerToggler, { closeDrawer, openDrawer }] = useHierarchyDrawer({
+ *   collectionSlug: 'categories',
+ * })
+ *
+ * return (
+ *   <>
+ *     <HierarchyDrawer
+ *       onSave={(selections) => console.log(selections)}
+ *       hasMany={true}
+ *     />
+ *     <HierarchyDrawerToggler>Select Categories</HierarchyDrawerToggler>
+ *   </>
+ * )
+ * ```
+ */
+export declare const useHierarchyDrawer: UseHierarchyDrawer;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/HierarchyDrawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HierarchyDrawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EAEV,2BAA2B,EAC3B,kBAAkB,EACnB,MAAM,YAAY,CAAA;AAEnB,cAAc,YAAY,CAAA;AAQ1B,eAAO,MAAM,yBAAyB,qBAGnC;IACD,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,KAAG,MAA6C,CAAA;AAEjD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAmBxE,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,kBAAkB,EAAE,kBA+GhC,CAAA"}

package/dist/elements/HierarchyDrawer/index.js

@@ -0,0 +1,146 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useModal } from '@faceless-ui/modal';
+import React, { useCallback, useId, useMemo, useRef } from 'react';
+export * from './types.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
+import { useHierarchy } from '../../providers/Hierarchy/index.js';
+import { DrawerToggler } from '../Drawer/index.js';
+import { baseClass, HierarchyDrawer } from './Drawer/index.js';
+export const formatHierarchyDrawerSlug = ({
+  depth,
+  uuid
+}) => `hierarchy-drawer_${depth}_${uuid}`;
+export const HierarchyDrawerToggler = ({
+  children,
+  className,
+  disabled,
+  drawerSlug,
+  onClick,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsx(DrawerToggler, {
+    className: [className, `${baseClass}__toggler`].filter(Boolean).join(' '),
+    disabled: disabled,
+    onClick: onClick,
+    slug: drawerSlug,
+    ...rest,
+    children: children
+  });
+};
+/**
+ * Hook for using a hierarchy drawer for selecting hierarchy items.
+ *
+ * @example
+ * ```tsx
+ * const [HierarchyDrawer, HierarchyDrawerToggler, { closeDrawer, openDrawer }] = useHierarchyDrawer({
+ *   collectionSlug: 'categories',
+ * })
+ *
+ * return (
+ *   <>
+ *     <HierarchyDrawer
+ *       onSave={(selections) => console.log(selections)}
+ *       hasMany={true}
+ *     />
+ *     <HierarchyDrawerToggler>Select Categories</HierarchyDrawerToggler>
+ *   </>
+ * )
+ * ```
+ */
+export const useHierarchyDrawer = ({
+  disabledIds,
+  filterByCollection: filterByCollectionProp,
+  hierarchyCollectionSlug,
+  Icon
+}) => {
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    allowedCollections
+  } = useHierarchy();
+  const collectionConfig = getEntityConfig({
+    collectionSlug: hierarchyCollectionSlug
+  });
+  const useAsTitle = collectionConfig?.admin?.useAsTitle;
+  const hierarchyConfig = collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object' ? collectionConfig.hierarchy : undefined;
+  const parentFieldName = hierarchyConfig?.parentFieldName;
+  // Use explicit prop if provided, otherwise fall back to allowedCollections from context
+  // - allowedCollections is null/undefined: no filtering (undefined)
+  // - allowedCollections is []: folder accepts everything, show only unrestricted destinations ([])
+  // - allowedCollections has values: show folders accepting those types
+  // Memoize to prevent new array references on every render
+  const filterByCollection = useMemo(() => {
+    if (filterByCollectionProp !== undefined) {
+      return filterByCollectionProp;
+    }
+    return allowedCollections !== null ? allowedCollections.map(c => c.slug) : undefined;
+  }, [filterByCollectionProp, allowedCollections]);
+  const drawerDepth = useEditDepth();
+  const uuid = useId();
+  const {
+    closeModal,
+    openModal,
+    toggleModal
+  } = useModal();
+  const drawerSlug = formatHierarchyDrawerSlug({
+    depth: drawerDepth,
+    uuid
+  });
+  // Store modal functions in refs to ensure stable callbacks
+  // This prevents re-renders when other modals (like DocumentDrawer) change state
+  const closeModalRef = useRef(closeModal);
+  const openModalRef = useRef(openModal);
+  const toggleModalRef = useRef(toggleModal);
+  closeModalRef.current = closeModal;
+  openModalRef.current = openModal;
+  toggleModalRef.current = toggleModal;
+  // Stable callbacks using refs - these will NEVER change
+  const toggleDrawer = useCallback(() => {
+    toggleModalRef.current(drawerSlug);
+  }, [drawerSlug]);
+  const closeDrawer = useCallback(() => {
+    closeModalRef.current(drawerSlug);
+  }, [drawerSlug]);
+  const openDrawer = useCallback(() => {
+    openModalRef.current(drawerSlug);
+  }, [drawerSlug]);
+  const MemoizedDrawer = useMemo(() => {
+    const DrawerComponent = props => /*#__PURE__*/_createElement(HierarchyDrawer, {
+      ...props,
+      closeDrawer: closeDrawer,
+      disabledIds: disabledIds,
+      drawerSlug: drawerSlug,
+      filterByCollection: filterByCollection,
+      hierarchyCollectionSlug: hierarchyCollectionSlug,
+      Icon: Icon,
+      key: drawerSlug,
+      parentFieldName: parentFieldName,
+      useAsTitle: useAsTitle
+    });
+    return DrawerComponent;
+  }, [drawerSlug, closeDrawer, disabledIds, filterByCollection, Icon, parentFieldName, hierarchyCollectionSlug, useAsTitle]);
+  const MemoizedDrawerToggler = useMemo(() => {
+    const TogglerComponent = props_0 => /*#__PURE__*/_jsx(HierarchyDrawerToggler, {
+      ...props_0,
+      drawerSlug: drawerSlug
+    });
+    return TogglerComponent;
+  }, [drawerSlug]);
+  const MemoizedDrawerState = useMemo(() => ({
+    closeDrawer,
+    drawerDepth,
+    drawerSlug,
+    // Note: Not tracking isDrawerOpen to prevent re-renders when other modals change state
+    // Consumers needing this can use useModal() directly
+    isDrawerOpen: false,
+    openDrawer,
+    toggleDrawer
+  }), [drawerDepth, drawerSlug, toggleDrawer, closeDrawer, openDrawer]);
+  return [MemoizedDrawer, MemoizedDrawerToggler, MemoizedDrawerState];
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/HierarchyDrawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useModal","React","useCallback","useId","useMemo","useRef","useConfig","useEditDepth","useHierarchy","DrawerToggler","baseClass","HierarchyDrawer","formatHierarchyDrawerSlug","depth","uuid","HierarchyDrawerToggler","children","className","disabled","drawerSlug","onClick","rest","_jsx","filter","Boolean","join","slug","useHierarchyDrawer","disabledIds","filterByCollection","filterByCollectionProp","hierarchyCollectionSlug","Icon","getEntityConfig","allowedCollections","collectionConfig","collectionSlug","useAsTitle","admin","hierarchyConfig","hierarchy","undefined","parentFieldName","map","c","drawerDepth","closeModal","openModal","toggleModal","closeModalRef","openModalRef","toggleModalRef","current","toggleDrawer","closeDrawer","openDrawer","MemoizedDrawer","DrawerComponent","props","_createElement","key","MemoizedDrawerToggler","TogglerComponent","MemoizedDrawerState","isDrawerOpen"],"sources":["../../../src/elements/HierarchyDrawer/index.tsx"],"sourcesContent":["'use client'\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useId, useMemo, useRef } from 'react'\n\nimport type {\n  HierarchyDrawerProps,\n  HierarchyDrawerTogglerProps,\n  UseHierarchyDrawer,\n} from './types.js'\n\nexport * from './types.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useHierarchy } from '../../providers/Hierarchy/index.js'\nimport { DrawerToggler } from '../Drawer/index.js'\nimport { baseClass, HierarchyDrawer } from './Drawer/index.js'\n\nexport const formatHierarchyDrawerSlug = ({\n  depth,\n  uuid,\n}: {\n  depth: number\n  uuid: string\n}): string => `hierarchy-drawer_${depth}_${uuid}`\n\nexport const HierarchyDrawerToggler: React.FC<HierarchyDrawerTogglerProps> = ({\n  children,\n  className,\n  disabled,\n  drawerSlug,\n  onClick,\n  ...rest\n}) => {\n  return (\n    <DrawerToggler\n      className={[className, `${baseClass}__toggler`].filter(Boolean).join(' ')}\n      disabled={disabled}\n      onClick={onClick}\n      slug={drawerSlug}\n      {...rest}\n    >\n      {children}\n    </DrawerToggler>\n  )\n}\n\n/**\n * Hook for using a hierarchy drawer for selecting hierarchy items.\n *\n * @example\n * ```tsx\n * const [HierarchyDrawer, HierarchyDrawerToggler, { closeDrawer, openDrawer }] = useHierarchyDrawer({\n *   collectionSlug: 'categories',\n * })\n *\n * return (\n *   <>\n *     <HierarchyDrawer\n *       onSave={(selections) => console.log(selections)}\n *       hasMany={true}\n *     />\n *     <HierarchyDrawerToggler>Select Categories</HierarchyDrawerToggler>\n *   </>\n * )\n * ```\n */\nexport const useHierarchyDrawer: UseHierarchyDrawer = ({\n  disabledIds,\n  filterByCollection: filterByCollectionProp,\n  hierarchyCollectionSlug,\n  Icon,\n}) => {\n  const { getEntityConfig } = useConfig()\n  const { allowedCollections } = useHierarchy()\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n\n  const useAsTitle = collectionConfig?.admin?.useAsTitle\n  const hierarchyConfig =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy\n      : undefined\n  const parentFieldName = hierarchyConfig?.parentFieldName\n\n  // Use explicit prop if provided, otherwise fall back to allowedCollections from context\n  // - allowedCollections is null/undefined: no filtering (undefined)\n  // - allowedCollections is []: folder accepts everything, show only unrestricted destinations ([])\n  // - allowedCollections has values: show folders accepting those types\n  // Memoize to prevent new array references on every render\n  const filterByCollection = useMemo(() => {\n    if (filterByCollectionProp !== undefined) {\n      return filterByCollectionProp\n    }\n    return allowedCollections !== null ? allowedCollections.map((c) => c.slug) : undefined\n  }, [filterByCollectionProp, allowedCollections])\n\n  const drawerDepth = useEditDepth()\n  const uuid = useId()\n  const { closeModal, openModal, toggleModal } = useModal()\n\n  const drawerSlug = formatHierarchyDrawerSlug({\n    depth: drawerDepth,\n    uuid,\n  })\n\n  // Store modal functions in refs to ensure stable callbacks\n  // This prevents re-renders when other modals (like DocumentDrawer) change state\n  const closeModalRef = useRef(closeModal)\n  const openModalRef = useRef(openModal)\n  const toggleModalRef = useRef(toggleModal)\n  closeModalRef.current = closeModal\n  openModalRef.current = openModal\n  toggleModalRef.current = toggleModal\n\n  // Stable callbacks using refs - these will NEVER change\n  const toggleDrawer = useCallback(() => {\n    toggleModalRef.current(drawerSlug)\n  }, [drawerSlug])\n\n  const closeDrawer = useCallback(() => {\n    closeModalRef.current(drawerSlug)\n  }, [drawerSlug])\n\n  const openDrawer = useCallback(() => {\n    openModalRef.current(drawerSlug)\n  }, [drawerSlug])\n\n  const MemoizedDrawer = useMemo(() => {\n    const DrawerComponent: React.FC<HierarchyDrawerProps> = (props) => (\n      <HierarchyDrawer\n        {...props}\n        closeDrawer={closeDrawer}\n        disabledIds={disabledIds}\n        drawerSlug={drawerSlug}\n        filterByCollection={filterByCollection}\n        hierarchyCollectionSlug={hierarchyCollectionSlug}\n        Icon={Icon}\n        key={drawerSlug}\n        parentFieldName={parentFieldName}\n        useAsTitle={useAsTitle}\n      />\n    )\n\n    return DrawerComponent\n  }, [\n    drawerSlug,\n    closeDrawer,\n    disabledIds,\n    filterByCollection,\n    Icon,\n    parentFieldName,\n    hierarchyCollectionSlug,\n    useAsTitle,\n  ])\n\n  const MemoizedDrawerToggler = useMemo(() => {\n    const TogglerComponent: React.FC<Omit<HierarchyDrawerTogglerProps, 'drawerSlug'>> = (props) => (\n      <HierarchyDrawerToggler {...props} drawerSlug={drawerSlug} />\n    )\n\n    return TogglerComponent\n  }, [drawerSlug])\n\n  const MemoizedDrawerState = useMemo(\n    () => ({\n      closeDrawer,\n      drawerDepth,\n      drawerSlug,\n      // Note: Not tracking isDrawerOpen to prevent re-renders when other modals change state\n      // Consumers needing this can use useModal() directly\n      isDrawerOpen: false,\n      openDrawer,\n      toggleDrawer,\n    }),\n    [drawerDepth, drawerSlug, toggleDrawer, closeDrawer, openDrawer],\n  )\n\n  return [MemoizedDrawer, MemoizedDrawerToggler, MemoizedDrawerState]\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/HierarchyDrawer/types.d.ts

@@ -0,0 +1,65 @@
+import type React from 'react';
+import type { HTMLAttributes } from 'react';
+export type SelectionWithPath = {
+    id: number | string;
+    path: Array<{
+        id: number | string;
+        title: string;
+    }>;
+};
+export type UseHierarchyDrawerArgs = {
+    /** IDs that should be disabled (e.g., items being moved can't be selected as destination) */
+    disabledIds?: Set<number | string>;
+    /**
+     * When provided, filters hierarchy items to only show those that accept these collections.
+     * Used with collectionSpecific hierarchy config.
+     */
+    filterByCollection?: string[];
+    hierarchyCollectionSlug: string;
+    Icon?: React.ReactNode;
+};
+export type HierarchyDrawerProps = {
+    readonly hasMany?: boolean;
+    readonly initialSelections?: (number | string)[];
+    readonly onMoveToRoot?: () => void;
+    readonly onSave: (params: {
+        closeDrawer: () => void;
+        selections: Map<number | string, SelectionWithPath>;
+    }) => void;
+    readonly showMoveToRoot?: boolean;
+};
+export type HierarchyDrawerInternalProps = {
+    readonly closeDrawer: () => void;
+    /** IDs that should be disabled (e.g., items being moved can't be selected as destination) */
+    readonly disabledIds?: Set<number | string>;
+    readonly drawerSlug: string;
+    /**
+     * When provided, filters hierarchy items to only show those that accept these collections.
+     * Used with collectionSpecific hierarchy config.
+     */
+    readonly filterByCollection?: string[];
+    readonly hierarchyCollectionSlug: string;
+    readonly Icon?: React.ReactNode;
+    readonly parentFieldName: string;
+    readonly useAsTitle?: string;
+} & HierarchyDrawerProps;
+export type HierarchyDrawerTogglerProps = {
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    drawerSlug?: string;
+} & HTMLAttributes<HTMLButtonElement>;
+export type UseHierarchyDrawer = (args: UseHierarchyDrawerArgs) => [
+    React.FC<HierarchyDrawerProps>,
+    React.FC<Omit<HierarchyDrawerTogglerProps, 'drawerSlug'>>,
+    {
+        closeDrawer: () => void;
+        drawerDepth: number;
+        drawerSlug: string;
+        isDrawerOpen: boolean;
+        openDrawer: () => void;
+        toggleDrawer: () => void;
+    }
+];
+export type { ColumnItemData } from '../HierarchyColumnBrowser/types.js';
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/HierarchyDrawer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/HierarchyDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,IAAI,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACpD,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,6FAA6F;IAC7F,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAClC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,uBAAuB,EAAE,MAAM,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAChD,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IAClC,QAAQ,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE;QACxB,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,UAAU,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,EAAE,iBAAiB,CAAC,CAAA;KACpD,KAAK,IAAI,CAAA;IACV,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,4BAA4B,GAAG;IACzC,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAA;IAChC,6FAA6F;IAC7F,QAAQ,CAAC,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAC3C,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IACtC,QAAQ,CAAC,uBAAuB,EAAE,MAAM,CAAA;IACxC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAC7B,GAAG,oBAAoB,CAAA;AAExB,MAAM,MAAM,2BAA2B,GAAG;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAErC,MAAM,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,sBAAsB,KAAK;IACjE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,2BAA2B,EAAE,YAAY,CAAC,CAAC;IACzD;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA;AAGD,YAAY,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA"}

package/dist/elements/HierarchyDrawer/types.js

@@ -0,0 +1,3 @@
+// Re-export column browser types for backwards compatibility
+export {};
+//# sourceMappingURL=types.js.map

package/dist/elements/HierarchyDrawer/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/HierarchyDrawer/types.ts"],"sourcesContent":["import type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nexport type SelectionWithPath = {\n  id: number | string\n  path: Array<{ id: number | string; title: string }>\n}\n\nexport type UseHierarchyDrawerArgs = {\n  /** IDs that should be disabled (e.g., items being moved can't be selected as destination) */\n  disabledIds?: Set<number | string>\n  /**\n   * When provided, filters hierarchy items to only show those that accept these collections.\n   * Used with collectionSpecific hierarchy config.\n   */\n  filterByCollection?: string[]\n  hierarchyCollectionSlug: string\n  Icon?: React.ReactNode\n}\n\nexport type HierarchyDrawerProps = {\n  readonly hasMany?: boolean\n  readonly initialSelections?: (number | string)[]\n  readonly onMoveToRoot?: () => void\n  readonly onSave: (params: {\n    closeDrawer: () => void\n    selections: Map<number | string, SelectionWithPath>\n  }) => void\n  readonly showMoveToRoot?: boolean\n}\n\nexport type HierarchyDrawerInternalProps = {\n  readonly closeDrawer: () => void\n  /** IDs that should be disabled (e.g., items being moved can't be selected as destination) */\n  readonly disabledIds?: Set<number | string>\n  readonly drawerSlug: string\n  /**\n   * When provided, filters hierarchy items to only show those that accept these collections.\n   * Used with collectionSpecific hierarchy config.\n   */\n  readonly filterByCollection?: string[]\n  readonly hierarchyCollectionSlug: string\n  readonly Icon?: React.ReactNode\n  readonly parentFieldName: string\n  readonly useAsTitle?: string\n} & HierarchyDrawerProps\n\nexport type HierarchyDrawerTogglerProps = {\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  drawerSlug?: string\n} & HTMLAttributes<HTMLButtonElement>\n\nexport type UseHierarchyDrawer = (args: UseHierarchyDrawerArgs) => [\n  React.FC<HierarchyDrawerProps>,\n  React.FC<Omit<HierarchyDrawerTogglerProps, 'drawerSlug'>>,\n  {\n    closeDrawer: () => void\n    drawerDepth: number\n    drawerSlug: string\n    isDrawerOpen: boolean\n    openDrawer: () => void\n    toggleDrawer: () => void\n  },\n]\n\n// Re-export column browser types for backwards compatibility\nexport type { ColumnItemData } from '../HierarchyColumnBrowser/types.js'\n"],"mappings":"AAmEA;AACA","ignoreList":[]}

package/dist/elements/HierarchyField/SelectedHierarchies.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './SelectedHierarchies.scss';
+export type SelectedHierarchiesProps = {
+    hierarchySlug: string;
+    Icon?: React.ReactNode;
+    onRemove: ({ id }: {
+        id: number | string;
+    }) => void;
+    readOnly?: boolean;
+    selectedIds: (number | string)[];
+};
+export declare const SelectedHierarchies: React.FC<SelectedHierarchiesProps>;
+//# sourceMappingURL=SelectedHierarchies.d.ts.map

package/dist/elements/HierarchyField/SelectedHierarchies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedHierarchies.d.ts","sourceRoot":"","sources":["../../../src/elements/HierarchyField/SelectedHierarchies.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAOnE,OAAO,4BAA4B,CAAA;AASnC,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAqIlE,CAAA"}

package/dist/elements/HierarchyField/SelectedHierarchies.js

@@ -0,0 +1,194 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { formatAdminURL } from 'payload/shared';
+import * as qs from 'qs-esm';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { XIcon } from '../../icons/X/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Pill } from '../Pill/index.js';
+import { Spinner } from '../Spinner/index.js';
+import './SelectedHierarchies.scss';
+const baseClass = 'selected-hierarchies';
+export const SelectedHierarchies = ({
+  hierarchySlug,
+  Icon,
+  onRemove,
+  readOnly = false,
+  selectedIds
+}) => {
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const [items, setItems] = useState([]);
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
+  const prevSelectedIdsRef = useRef('');
+  const {
+    routes: {
+      api
+    },
+    serverURL
+  } = config;
+  const collectionConfig = getEntityConfig({
+    collectionSlug: hierarchySlug
+  });
+  const selectedIdsKey = useMemo(() => selectedIds.slice().sort().join(','), [selectedIds]);
+  useEffect(() => {
+    if (!selectedIds || selectedIds.length === 0) {
+      setItems([]);
+      setIsInitialLoad(false);
+      return;
+    }
+    if (prevSelectedIdsRef.current === selectedIdsKey) {
+      return;
+    }
+    prevSelectedIdsRef.current = selectedIdsKey;
+    const fetchItems = async () => {
+      const useAsTitle = collectionConfig?.admin?.useAsTitle || 'id';
+      const query = {
+        depth: 0,
+        limit: selectedIds.length,
+        select: {
+          [useAsTitle]: true
+        },
+        where: {
+          id: {
+            in: selectedIds
+          }
+        }
+      };
+      const queryString = qs.stringify(query);
+      try {
+        const url = formatAdminURL({
+          apiRoute: api,
+          path: `/${hierarchySlug}?${queryString}`,
+          serverURL
+        });
+        const response = await fetch(url, {
+          credentials: 'include',
+          headers: {
+            'Accept-Language': i18n.language
+          }
+        });
+        if (response.ok) {
+          const data = await response.json();
+          const fetchedItems = data.docs.map(doc => {
+            const docId = doc.id;
+            const titleValue = doc[useAsTitle] ?? docId;
+            const title = typeof titleValue === 'string' || typeof titleValue === 'number' ? String(titleValue) : String(docId);
+            return {
+              id: docId,
+              title
+            };
+          });
+          // Order by selectedIds to preserve selection order
+          const orderedItems = selectedIds.map(id => fetchedItems.find(item => item.id === id)).filter(item_0 => item_0 !== undefined);
+          setItems(orderedItems);
+        }
+      } catch {
+        // Silently fail - items will remain empty
+      } finally {
+        setIsInitialLoad(false);
+      }
+    };
+    void fetchItems();
+  }, [selectedIds, selectedIdsKey, hierarchySlug, collectionConfig, serverURL, api, i18n.language]);
+  if (isInitialLoad) {
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__loading`,
+      children: /*#__PURE__*/_jsx(Spinner, {
+        size: "small"
+      })
+    });
+  }
+  if (items.length === 0) {
+    const label = collectionConfig?.labels?.plural;
+    const translatedLabel = label ? getTranslation(label, i18n) : hierarchySlug;
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__empty`,
+      children: t('general:noLabel', {
+        label: translatedLabel
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass,
+    children: /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__pills`,
+      children: items.map(item_1 => /*#__PURE__*/_jsx(SelectedPill, {
+        Icon: Icon,
+        item: item_1,
+        onRemove: onRemove,
+        readOnly: readOnly
+      }, item_1.id))
+    })
+  });
+};
+const SelectedPill = t0 => {
+  const $ = _c(9);
+  const {
+    Icon,
+    item,
+    onRemove,
+    readOnly
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== item.id || $[1] !== onRemove) {
+    t1 = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      onRemove({
+        id: item.id
+      });
+    };
+    $[0] = item.id;
+    $[1] = onRemove;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const handleRemove = t1;
+  let t2;
+  if ($[3] !== Icon || $[4] !== handleRemove || $[5] !== item.title || $[6] !== readOnly || $[7] !== t) {
+    t2 = _jsxs(Pill, {
+      className: `${baseClass}__pill`,
+      pillStyle: "light",
+      size: "small",
+      children: [Boolean(Icon) && _jsx("span", {
+        className: `${baseClass}__pill-icon`,
+        children: Icon
+      }), _jsx("span", {
+        className: `${baseClass}__pill-label`,
+        children: item.title
+      }), _jsx("button", {
+        "aria-label": t("general:remove"),
+        className: `${baseClass}__pill-remove`,
+        disabled: readOnly,
+        onClick: readOnly ? undefined : handleRemove,
+        type: "button",
+        children: _jsx(XIcon, {})
+      })]
+    });
+    $[3] = Icon;
+    $[4] = handleRemove;
+    $[5] = item.title;
+    $[6] = readOnly;
+    $[7] = t;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+};
+//# sourceMappingURL=SelectedHierarchies.js.map

package/dist/elements/HierarchyField/SelectedHierarchies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedHierarchies.js","names":["c","_c","getTranslation","formatAdminURL","qs","React","useEffect","useMemo","useRef","useState","XIcon","useConfig","useTranslation","Pill","Spinner","baseClass","SelectedHierarchies","hierarchySlug","Icon","onRemove","readOnly","selectedIds","config","getEntityConfig","i18n","t","items","setItems","isInitialLoad","setIsInitialLoad","prevSelectedIdsRef","routes","api","serverURL","collectionConfig","collectionSlug","selectedIdsKey","slice","sort","join","length","current","fetchItems","useAsTitle","admin","query","depth","limit","select","where","id","in","queryString","stringify","url","apiRoute","path","response","fetch","credentials","headers","language","ok","data","json","fetchedItems","docs","map","doc","docId","titleValue","title","String","orderedItems","find","item","filter","undefined","_jsx","className","size","label","labels","plural","translatedLabel","SelectedPill","t0","$","t1","e","preventDefault","stopPropagation","handleRemove","t2","_jsxs","pillStyle","children","Boolean","disabled","onClick","type"],"sources":["../../../src/elements/HierarchyField/SelectedHierarchies.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useEffect, useMemo, useRef, useState } from 'react'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { Spinner } from '../Spinner/index.js'\nimport './SelectedHierarchies.scss'\n\nconst baseClass = 'selected-hierarchies'\n\ntype HierarchyItem = {\n  id: number | string\n  title: string\n}\n\nexport type SelectedHierarchiesProps = {\n  hierarchySlug: string\n  Icon?: React.ReactNode\n  onRemove: ({ id }: { id: number | string }) => void\n  readOnly?: boolean\n  selectedIds: (number | string)[]\n}\n\nexport const SelectedHierarchies: React.FC<SelectedHierarchiesProps> = ({\n  hierarchySlug,\n  Icon,\n  onRemove,\n  readOnly = false,\n  selectedIds,\n}) => {\n  const { config, getEntityConfig } = useConfig()\n  const { i18n, t } = useTranslation()\n  const [items, setItems] = useState<HierarchyItem[]>([])\n  const [isInitialLoad, setIsInitialLoad] = useState(true)\n\n  const prevSelectedIdsRef = useRef<string>('')\n\n  const {\n    routes: { api },\n    serverURL,\n  } = config\n\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchySlug })\n\n  const selectedIdsKey = useMemo(() => selectedIds.slice().sort().join(','), [selectedIds])\n\n  useEffect(() => {\n    if (!selectedIds || selectedIds.length === 0) {\n      setItems([])\n      setIsInitialLoad(false)\n      return\n    }\n\n    if (prevSelectedIdsRef.current === selectedIdsKey) {\n      return\n    }\n    prevSelectedIdsRef.current = selectedIdsKey\n\n    const fetchItems = async () => {\n      const useAsTitle = collectionConfig?.admin?.useAsTitle || 'id'\n\n      const query = {\n        depth: 0,\n        limit: selectedIds.length,\n        select: {\n          [useAsTitle]: true,\n        },\n        where: {\n          id: {\n            in: selectedIds,\n          },\n        },\n      }\n\n      const queryString = qs.stringify(query)\n\n      try {\n        const url = formatAdminURL({\n          apiRoute: api,\n          path: `/${hierarchySlug}?${queryString}`,\n          serverURL,\n        })\n\n        const response = await fetch(url, {\n          credentials: 'include',\n          headers: {\n            'Accept-Language': i18n.language,\n          },\n        })\n\n        if (response.ok) {\n          const data = await response.json()\n          const fetchedItems: HierarchyItem[] = data.docs.map((doc: Record<string, unknown>) => {\n            const docId = doc.id as number | string\n            const titleValue = doc[useAsTitle] ?? docId\n            const title =\n              typeof titleValue === 'string' || typeof titleValue === 'number'\n                ? String(titleValue)\n                : String(docId)\n            return {\n              id: docId,\n              title,\n            }\n          })\n\n          // Order by selectedIds to preserve selection order\n          const orderedItems = selectedIds\n            .map((id) => fetchedItems.find((item) => item.id === id))\n            .filter((item): item is HierarchyItem => item !== undefined)\n\n          setItems(orderedItems)\n        }\n      } catch {\n        // Silently fail - items will remain empty\n      } finally {\n        setIsInitialLoad(false)\n      }\n    }\n\n    void fetchItems()\n  }, [selectedIds, selectedIdsKey, hierarchySlug, collectionConfig, serverURL, api, i18n.language])\n\n  if (isInitialLoad) {\n    return (\n      <div className={`${baseClass}__loading`}>\n        <Spinner size=\"small\" />\n      </div>\n    )\n  }\n\n  if (items.length === 0) {\n    const label = collectionConfig?.labels?.plural\n    const translatedLabel = label ? getTranslation(label, i18n) : hierarchySlug\n\n    return (\n      <div className={`${baseClass}__empty`}>\n        {t('general:noLabel', { label: translatedLabel })}\n      </div>\n    )\n  }\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__pills`}>\n        {items.map((item) => (\n          <SelectedPill\n            Icon={Icon}\n            item={item}\n            key={item.id}\n            onRemove={onRemove}\n            readOnly={readOnly}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n\ntype SelectedPillProps = {\n  Icon?: React.ReactNode\n  item: HierarchyItem\n  onRemove: ({ id }: { id: number | string }) => void\n  readOnly: boolean\n}\n\nconst SelectedPill: React.FC<SelectedPillProps> = ({ Icon, item, onRemove, readOnly }) => {\n  const { t } = useTranslation()\n\n  const handleRemove = (e: React.MouseEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    onRemove({ id: item.id })\n  }\n\n  return (\n    <Pill className={`${baseClass}__pill`} pillStyle=\"light\" size=\"small\">\n      {Boolean(Icon) && <span className={`${baseClass}__pill-icon`}>{Icon}</span>}\n      <span className={`${baseClass}__pill-label`}>{item.title}</span>\n      <button\n        aria-label={t('general:remove')}\n        className={`${baseClass}__pill-remove`}\n        disabled={readOnly}\n        onClick={readOnly ? undefined : handleRemove}\n        type=\"button\"\n      >\n        <XIcon />\n      </button>\n    </Pill>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/HierarchyField/SelectedHierarchies.scss

@@ -0,0 +1,78 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .selected-hierarchies {
+    &__pills {
+      display: flex;
+      flex-wrap: wrap;
+      gap: calc(var(--base) * 0.5);
+    }
+
+    &__pill {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(var(--base) * 0.25);
+      align-items: center;
+      background-color: var(--theme-elevation-50);
+      border: 1px solid var(--theme-elevation-150);
+      padding-inline-end: calc(var(--base) * 0.2);
+
+      .pill__label {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+    }
+
+    &__pill-label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 200px;
+    }
+
+    &__pill-remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      margin: 0;
+      border: none;
+      background: none;
+      border-radius: $style-radius-s;
+      color: inherit;
+      position: relative;
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+
+      &:hover {
+        background: var(--theme-elevation-200);
+      }
+
+      .icon {
+        width: calc(var(--base) * 0.8);
+        height: calc(var(--base) * 0.8);
+        color: var(--theme-elevation-500);
+      }
+    }
+
+    &__pill-tooltip {
+      white-space: nowrap;
+    }
+
+    &__empty {
+      color: var(--theme-elevation-500);
+      font-style: italic;
+      padding: calc(var(--base) * 0.25) 0;
+      height: 26px;
+    }
+
+    &__loading {
+      color: var(--theme-elevation-500);
+      padding: calc(var(--base) * 0.25) 0;
+      height: 26px;
+    }
+  }
+}

package/dist/elements/HierarchyField/index.client.d.ts

@@ -0,0 +1,8 @@
+import type { RelationshipFieldClientProps } from 'payload';
+import React from 'react';
+import './index.scss';
+export type HierarchyFieldClientProps = {
+    Icon?: React.ReactNode;
+} & RelationshipFieldClientProps;
+export declare const HierarchyFieldClient: React.FC<HierarchyFieldClientProps>;
+//# sourceMappingURL=index.client.d.ts.map

package/dist/elements/HierarchyField/index.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/elements/HierarchyField/index.client.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAA;AAG3D,OAAO,KAA+B,MAAM,OAAO,CAAA;AAiBnD,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,GAAG,4BAA4B,CAAA;AAEhC,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAyMpE,CAAA"}