@payloadcms/ui 4.0.0-internal.e55ccef → 4.0.0-internal.f05c47f

package/dist/elements/Combobox/index.css

@@ -1,7 +1,16 @@
 @layer payload-default {
+  /* The combobox supplies its own padding so the search bar can span the full
+     width and sit flush against its dividing border. */
+  .popup__scroll-container:has(.combobox__content) {
+    padding: 0;
+  }
+
   .combobox__content {
+    --combobox-min-width: 240px;
+
     display: flex;
     flex-direction: column;
+    min-width: var(--combobox-min-width);
     scrollbar-width: none;
     -ms-overflow-style: none;
 
@@ -10,44 +19,88 @@
     }
   }
 
-  .combobox__search-wrapper {
-    display: none;
-    padding-top: var(--popup-padding);
-    padding-bottom: var(--spacer-2);
-    border-bottom: var(--stroke-width-small) solid var(--color-border);
-    margin-bottom: var(--spacer-2);
+  /* Held steady while searching so the popup doesn't resize as entries filter out */
+  .combobox__content[data-width-locked] {
+    min-width: var(--combobox-locked-width);
   }
 
-  .combobox__search-wrapper--no-results {
-    border-bottom: none;
-    margin-bottom: 0;
+  .combobox__search {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    height: calc(var(--spacer-5) + var(--spacer-2) + var(--stroke-width-small));
+    padding-inline: var(--spacer-2-5);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
 
-  .combobox__search-input {
-    width: 100%;
+  .combobox__search-bar {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: var(--spacer-4);
+    padding-inline-end: var(--spacer-2);
     background: var(--color-bg-secondary);
-    color: var(--color-text);
-    border: none;
     border-radius: var(--button-radius);
-    padding: var(--spacer-1) var(--spacer-2);
-    outline: none;
-    box-shadow: none;
   }
 
-  .combobox__search-input::placeholder {
-    color: var(--color-text-tertiary);
+  .combobox__search-bar svg {
+    display: block;
+    flex-shrink: 0;
+    color: var(--color-icon-secondary);
   }
 
-  .combobox__search-input:focus,
-  .combobox__search-input:focus-visible {
-    background: var(--color-bg-secondary-hover);
-    outline: none;
+  .combobox__search-input {
+    flex: 1;
+    height: 100%;
+    padding: 0;
+    background: transparent;
     border: none;
-    box-shadow: none;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text);
+
+    &::placeholder {
+      color: var(--color-text-tertiary);
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
+  .combobox__entries {
+    padding-block: var(--spacer-2);
+    overflow-y: auto;
   }
 
   .combobox__entry {
     cursor: pointer;
     display: flex;
   }
+
+  .combobox__footer {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    padding-block: var(--spacer-2);
+    border-top: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .combobox__no-results {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: calc(var(--spacer-6) + var(--spacer-2));
+    padding-block: var(--spacer-2);
+    padding-inline: var(--spacer-3);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text-secondary);
+  }
 }

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

@@ -17,6 +17,13 @@ export type ComboboxProps = {
     /** Accessible label for the list of entries */
     'aria-label'?: string;
     entries: ComboboxEntry[];
+    /**
+     * Pinned below the entries, outside the scroll area and unaffected by search.
+     * For actions that belong to the list as a whole, such as "create new".
+     */
+    footer?: (args: {
+        close: () => void;
+    }) => React.ReactNode;
     /** Minimum number of entries required to show search */
     minEntriesForSearch?: number;
     onSelect?: (entry: ComboboxEntry) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Combobox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAGnD,OAAO,aAAa,CAAA;AAIpB;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAA;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuG5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Combobox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkE,MAAM,OAAO,CAAA;AAEtF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAMnD,OAAO,aAAa,CAAA;AAIpB;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAA;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwI5C,CAAA"}

package/dist/elements/Combobox/index.js

@@ -1,7 +1,10 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { SearchIcon } from '../../icons/Search/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { matchesSearchQuery } from '../../utilities/matchesSearchQuery.js';
 import { Popup, PopupList } from '../Popup/index.js';
 import './index.css';
 const baseClass = 'combobox';
@@ -15,6 +18,7 @@ export const Combobox = props => {
   const {
     'aria-label': ariaLabel,
     entries,
+    footer,
     minEntriesForSearch = 8,
     onSelect,
     onToggleClose,
@@ -22,19 +26,33 @@ export const Combobox = props => {
     searchPlaceholder = 'Search...',
     ...popupProps
   } = props;
+  const {
+    t
+  } = useTranslation();
   const [searchValue, setSearchValue] = useState('');
   const isOpenRef = useRef(false);
   const searchInputRef = useRef(null);
-  const filteredEntries = useMemo(() => {
-    if (!searchValue) {
-      return entries;
-    }
-    const search = searchValue.toLowerCase();
-    return entries.filter(entry => entry.name.toLowerCase().includes(search));
-  }, [entries, searchValue]);
+  const contentRef = useRef(null);
+  const filteredEntries = useMemo(() => entries.filter(entry => matchesSearchQuery({
+    label: entry.name,
+    query: searchValue
+  })), [entries, searchValue]);
   const showSearch = entries.length >= minEntriesForSearch;
   const hasResults = filteredEntries.length > 0;
-  const handleToggleOpen = React.useCallback(active => {
+  // Locking the width the moment searching begins keeps the popup from
+  // resizing around the cursor as entries filter out from under it.
+  const [lockedWidth, setLockedWidth] = useState(null);
+  useLayoutEffect(() => {
+    if (!contentRef.current) {
+      return;
+    }
+    if (searchValue && lockedWidth === null) {
+      setLockedWidth(contentRef.current.offsetWidth);
+    } else if (!searchValue && lockedWidth !== null) {
+      setLockedWidth(null);
+    }
+  }, [searchValue, lockedWidth]);
+  const handleToggleOpen = useCallback(active => {
     isOpenRef.current = active;
     if (active && showSearch) {
       setTimeout(() => {
@@ -43,9 +61,10 @@ export const Combobox = props => {
     }
     onToggleOpen?.(active);
   }, [showSearch, onToggleOpen]);
-  const handleToggleClose = React.useCallback(() => {
+  const handleToggleClose = useCallback(() => {
     isOpenRef.current = false;
     setSearchValue('');
+    setLockedWidth(null);
     onToggleClose?.();
   }, [onToggleClose]);
   return /*#__PURE__*/_jsx(Popup, {
@@ -57,18 +76,29 @@ export const Combobox = props => {
       close
     }) => /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__content`,
+      "data-width-locked": lockedWidth ? 'true' : undefined,
+      ref: contentRef,
+      style: lockedWidth ? {
+        '--combobox-locked-width': `${lockedWidth}px`
+      } : undefined,
       children: [showSearch && /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__search-wrapper${!hasResults ? ` ${baseClass}__search-wrapper--no-results` : ''}`,
-        children: /*#__PURE__*/_jsx("input", {
-          "aria-label": searchPlaceholder,
-          className: `${baseClass}__search-input`,
-          onChange: e => setSearchValue(e.target.value),
-          placeholder: searchPlaceholder,
-          ref: searchInputRef,
-          type: "text",
-          value: searchValue
+        className: `${baseClass}__search`,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__search-bar`,
+          children: [/*#__PURE__*/_jsx(SearchIcon, {
+            size: 24
+          }), /*#__PURE__*/_jsx("input", {
+            "aria-label": searchPlaceholder,
+            className: `${baseClass}__search-input`,
+            onChange: e => setSearchValue(e.target.value),
+            placeholder: searchPlaceholder,
+            ref: searchInputRef,
+            type: "text",
+            value: searchValue
+          })]
         })
-      }), /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+      }), hasResults ? /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+        className: `${baseClass}__entries`,
         children: /*#__PURE__*/_jsx("div", {
           "aria-label": ariaLabel,
           role: "menu",
@@ -95,6 +125,14 @@ export const Combobox = props => {
             }, `${entry_0.name}-${index}`);
           })
         })
+      }) : /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__no-results`,
+        children: t('general:noMatchesFound')
+      }), footer && /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__footer`,
+        children: footer({
+          close
+        })
       })]
     })
   });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useRef","useState","Popup","PopupList","baseClass","Combobox","props","ariaLabel","entries","minEntriesForSearch","onSelect","onToggleClose","onToggleOpen","searchPlaceholder","popupProps","searchValue","setSearchValue","isOpenRef","searchInputRef","filteredEntries","search","toLowerCase","filter","entry","name","includes","showSearch","length","hasResults","handleToggleOpen","useCallback","active","current","setTimeout","focus","handleToggleClose","_jsx","className","render","close","_jsxs","onChange","e","target","value","placeholder","ref","type","ButtonGroup","role","map","index","handleClick","onClick","onKeyDown","key","preventDefault","tabIndex","Component"],"sources":["../../../src/elements/Combobox/index.tsx"],"sourcesContent":["'use client'\nimport React, { useMemo, useRef, useState } from 'react'\n\nimport type { PopupProps } from '../Popup/index.js'\n\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'combobox'\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxEntry = {\n  Component: React.ReactNode\n  name: string\n}\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxProps = {\n  /** Accessible label for the list of entries */\n  'aria-label'?: string\n  entries: ComboboxEntry[]\n  /** Minimum number of entries required to show search */\n  minEntriesForSearch?: number\n  onSelect?: (entry: ComboboxEntry) => void\n  searchPlaceholder?: string\n} & Omit<PopupProps, 'children' | 'render'>\n\n/**\n * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.\n *\n * @internal - this component may be removed or receive breaking changes in minor releases.\n * @experimental\n */\nexport const Combobox: React.FC<ComboboxProps> = (props) => {\n  const {\n    'aria-label': ariaLabel,\n    entries,\n    minEntriesForSearch = 8,\n    onSelect,\n    onToggleClose,\n    onToggleOpen,\n    searchPlaceholder = 'Search...',\n    ...popupProps\n  } = props\n  const [searchValue, setSearchValue] = useState('')\n  const isOpenRef = useRef(false)\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  const filteredEntries = useMemo(() => {\n    if (!searchValue) {\n      return entries\n    }\n    const search = searchValue.toLowerCase()\n    return entries.filter((entry) => entry.name.toLowerCase().includes(search))\n  }, [entries, searchValue])\n\n  const showSearch = entries.length >= minEntriesForSearch\n  const hasResults = filteredEntries.length > 0\n\n  const handleToggleOpen = React.useCallback(\n    (active: boolean) => {\n      isOpenRef.current = active\n      if (active && showSearch) {\n        setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 100)\n      }\n      onToggleOpen?.(active)\n    },\n    [showSearch, onToggleOpen],\n  )\n\n  const handleToggleClose = React.useCallback(() => {\n    isOpenRef.current = false\n    setSearchValue('')\n    onToggleClose?.()\n  }, [onToggleClose])\n\n  return (\n    <Popup\n      {...popupProps}\n      className={`${baseClass} ${popupProps.className || ''}`}\n      onToggleClose={handleToggleClose}\n      onToggleOpen={handleToggleOpen}\n      render={({ close }) => (\n        <div className={`${baseClass}__content`}>\n          {showSearch && (\n            <div\n              className={`${baseClass}__search-wrapper${!hasResults ? ` ${baseClass}__search-wrapper--no-results` : ''}`}\n            >\n              <input\n                aria-label={searchPlaceholder}\n                className={`${baseClass}__search-input`}\n                onChange={(e) => setSearchValue(e.target.value)}\n                placeholder={searchPlaceholder}\n                ref={searchInputRef}\n                type=\"text\"\n                value={searchValue}\n              />\n            </div>\n          )}\n          <PopupList.ButtonGroup>\n            <div aria-label={ariaLabel} role=\"menu\">\n              {filteredEntries.map((entry, index) => {\n                const handleClick = () => {\n                  if (onSelect) {\n                    onSelect(entry)\n                  }\n                  close()\n                }\n\n                return (\n                  <div\n                    className={`${baseClass}__entry`}\n                    data-popup-prevent-close\n                    key={`${entry.name}-${index}`}\n                    onClick={handleClick}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault()\n                        handleClick()\n                      }\n                    }}\n                    role=\"menuitem\"\n                    tabIndex={0}\n                  >\n                    {entry.Component}\n                  </div>\n                )\n              })}\n            </div>\n          </PopupList.ButtonGroup>\n        </div>\n      )}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useLayoutEffect","useMemo","useRef","useState","SearchIcon","useTranslation","matchesSearchQuery","Popup","PopupList","baseClass","Combobox","props","ariaLabel","entries","footer","minEntriesForSearch","onSelect","onToggleClose","onToggleOpen","searchPlaceholder","popupProps","t","searchValue","setSearchValue","isOpenRef","searchInputRef","contentRef","filteredEntries","filter","entry","label","name","query","showSearch","length","hasResults","lockedWidth","setLockedWidth","current","offsetWidth","handleToggleOpen","active","setTimeout","focus","handleToggleClose","_jsx","className","render","close","_jsxs","undefined","ref","style","size","onChange","e","target","value","placeholder","type","ButtonGroup","role","map","index","handleClick","onClick","onKeyDown","key","preventDefault","tabIndex","Component"],"sources":["../../../src/elements/Combobox/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport type { PopupProps } from '../Popup/index.js'\n\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { matchesSearchQuery } from '../../utilities/matchesSearchQuery.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'combobox'\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxEntry = {\n  Component: React.ReactNode\n  name: string\n}\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxProps = {\n  /** Accessible label for the list of entries */\n  'aria-label'?: string\n  entries: ComboboxEntry[]\n  /**\n   * Pinned below the entries, outside the scroll area and unaffected by search.\n   * For actions that belong to the list as a whole, such as \"create new\".\n   */\n  footer?: (args: { close: () => void }) => React.ReactNode\n  /** Minimum number of entries required to show search */\n  minEntriesForSearch?: number\n  onSelect?: (entry: ComboboxEntry) => void\n  searchPlaceholder?: string\n} & Omit<PopupProps, 'children' | 'render'>\n\n/**\n * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.\n *\n * @internal - this component may be removed or receive breaking changes in minor releases.\n * @experimental\n */\nexport const Combobox: React.FC<ComboboxProps> = (props) => {\n  const {\n    'aria-label': ariaLabel,\n    entries,\n    footer,\n    minEntriesForSearch = 8,\n    onSelect,\n    onToggleClose,\n    onToggleOpen,\n    searchPlaceholder = 'Search...',\n    ...popupProps\n  } = props\n\n  const { t } = useTranslation()\n  const [searchValue, setSearchValue] = useState('')\n  const isOpenRef = useRef(false)\n  const searchInputRef = useRef<HTMLInputElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n\n  const filteredEntries = useMemo(\n    () => entries.filter((entry) => matchesSearchQuery({ label: entry.name, query: searchValue })),\n    [entries, searchValue],\n  )\n\n  const showSearch = entries.length >= minEntriesForSearch\n  const hasResults = filteredEntries.length > 0\n\n  // Locking the width the moment searching begins keeps the popup from\n  // resizing around the cursor as entries filter out from under it.\n  const [lockedWidth, setLockedWidth] = useState<null | number>(null)\n\n  useLayoutEffect(() => {\n    if (!contentRef.current) {\n      return\n    }\n\n    if (searchValue && lockedWidth === null) {\n      setLockedWidth(contentRef.current.offsetWidth)\n    } else if (!searchValue && lockedWidth !== null) {\n      setLockedWidth(null)\n    }\n  }, [searchValue, lockedWidth])\n\n  const handleToggleOpen = useCallback(\n    (active: boolean) => {\n      isOpenRef.current = active\n      if (active && showSearch) {\n        setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 100)\n      }\n      onToggleOpen?.(active)\n    },\n    [showSearch, onToggleOpen],\n  )\n\n  const handleToggleClose = useCallback(() => {\n    isOpenRef.current = false\n    setSearchValue('')\n    setLockedWidth(null)\n    onToggleClose?.()\n  }, [onToggleClose])\n\n  return (\n    <Popup\n      {...popupProps}\n      className={`${baseClass} ${popupProps.className || ''}`}\n      onToggleClose={handleToggleClose}\n      onToggleOpen={handleToggleOpen}\n      render={({ close }) => (\n        <div\n          className={`${baseClass}__content`}\n          data-width-locked={lockedWidth ? 'true' : undefined}\n          ref={contentRef}\n          style={\n            lockedWidth\n              ? ({ '--combobox-locked-width': `${lockedWidth}px` } as React.CSSProperties)\n              : undefined\n          }\n        >\n          {showSearch && (\n            <div className={`${baseClass}__search`}>\n              <div className={`${baseClass}__search-bar`}>\n                <SearchIcon size={24} />\n                <input\n                  aria-label={searchPlaceholder}\n                  className={`${baseClass}__search-input`}\n                  onChange={(e) => setSearchValue(e.target.value)}\n                  placeholder={searchPlaceholder}\n                  ref={searchInputRef}\n                  type=\"text\"\n                  value={searchValue}\n                />\n              </div>\n            </div>\n          )}\n          {hasResults ? (\n            <PopupList.ButtonGroup className={`${baseClass}__entries`}>\n              <div aria-label={ariaLabel} role=\"menu\">\n                {filteredEntries.map((entry, index) => {\n                  const handleClick = () => {\n                    if (onSelect) {\n                      onSelect(entry)\n                    }\n                    close()\n                  }\n\n                  return (\n                    <div\n                      className={`${baseClass}__entry`}\n                      data-popup-prevent-close\n                      key={`${entry.name}-${index}`}\n                      onClick={handleClick}\n                      onKeyDown={(e) => {\n                        if (e.key === 'Enter' || e.key === ' ') {\n                          e.preventDefault()\n                          handleClick()\n                        }\n                      }}\n                      role=\"menuitem\"\n                      tabIndex={0}\n                    >\n                      {entry.Component}\n                    </div>\n                  )\n                })}\n              </div>\n            </PopupList.ButtonGroup>\n          ) : (\n            <div className={`${baseClass}__no-results`}>{t('general:noMatchesFound')}</div>\n          )}\n          {footer && <div className={`${baseClass}__footer`}>{footer({ close })}</div>}\n        </div>\n      )}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/CommandPalette/index.css

@@ -191,11 +191,4 @@
     border: 0;
     border-radius: var(--radius-small);
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cmd-palette,
-    .cmd-palette__inner {
-      transition: none;
-    }
-  }
 }

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

@@ -2,6 +2,7 @@ import React from 'react';
 import './index.css';
 export type Props = {
     defaultMessage?: string;
+    icon?: React.ReactNode;
     successMessage?: string;
     value?: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CopyToClipboard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiC3C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CopyToClipboard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsC3C,CAAA"}

package/dist/elements/CopyToClipboard/index.js

@@ -9,9 +9,10 @@ import { Tooltip } from '../Tooltip/index.js';
 import './index.css';
 const baseClass = 'copy-to-clipboard';
 export const CopyToClipboard = t0 => {
-  const $ = _c(11);
+  const $ = _c(12);
   const {
     defaultMessage,
+    icon,
     successMessage,
     value
   } = t0;
@@ -50,14 +51,14 @@ export const CopyToClipboard = t0 => {
       t3 = $[3];
     }
     let t4;
-    if ($[4] !== copied || $[5] !== defaultMessage || $[6] !== hovered || $[7] !== successMessage || $[8] !== t || $[9] !== t1) {
+    if ($[4] !== copied || $[5] !== defaultMessage || $[6] !== hovered || $[7] !== icon || $[8] !== successMessage || $[9] !== t || $[10] !== t1) {
       t4 = _jsxs("button", {
         className: baseClass,
         onClick: t1,
         onMouseEnter: t2,
         onMouseLeave: t3,
         type: "button",
-        children: [_jsx(CopyIcon, {}), _jsxs(Tooltip, {
+        children: [icon ?? _jsx(CopyIcon, {}), _jsxs(Tooltip, {
           delay: copied ? 0 : undefined,
           show: hovered || copied,
           children: [copied && (successMessage ?? t("general:copied")), !copied && (defaultMessage ?? t("general:copy"))]
@@ -66,12 +67,13 @@ export const CopyToClipboard = t0 => {
       $[4] = copied;
       $[5] = defaultMessage;
       $[6] = hovered;
-      $[7] = successMessage;
-      $[8] = t;
-      $[9] = t1;
-      $[10] = t4;
+      $[7] = icon;
+      $[8] = successMessage;
+      $[9] = t;
+      $[10] = t1;
+      $[11] = t4;
     } else {
-      t4 = $[10];
+      t4 = $[11];
     }
     return t4;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useState","CopyIcon","useTranslation","Tooltip","baseClass","CopyToClipboard","t0","$","defaultMessage","successMessage","value","copied","setCopied","hovered","setHovered","t","t1","navigator","clipboard","writeText","t2","t3","Symbol","for","t4","_jsxs","className","onClick","onMouseEnter","onMouseLeave","type","children","_jsx","delay","undefined","show"],"sources":["../../../src/elements/CopyToClipboard/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.css'\n\nconst baseClass = 'copy-to-clipboard'\n\nexport type Props = {\n  defaultMessage?: string\n  successMessage?: string\n  value?: string\n}\n\nexport const CopyToClipboard: React.FC<Props> = ({ defaultMessage, successMessage, value }) => {\n  const [copied, setCopied] = useState(false)\n  const [hovered, setHovered] = useState(false)\n  const { t } = useTranslation()\n\n  if (value) {\n    return (\n      <button\n        className={baseClass}\n        onClick={async () => {\n          await navigator.clipboard.writeText(value)\n          setCopied(true)\n        }}\n        onMouseEnter={() => {\n          setHovered(true)\n          setCopied(false)\n        }}\n        onMouseLeave={() => {\n          setHovered(false)\n          setCopied(false)\n        }}\n        type=\"button\"\n      >\n        <CopyIcon />\n        <Tooltip delay={copied ? 0 : undefined} show={hovered || copied}>\n          {copied && (successMessage ?? t('general:copied'))}\n          {!copied && (defaultMessage ?? t('general:copy'))}\n        </Tooltip>\n      </button>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAQlB,OAAO,MAAMC,eAAA,GAAmCC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,cAAA;IAAAC,cAAA;IAAAC;EAAA,IAAAJ,EAAyC;EACxF,OAAAK,MAAA,EAAAC,SAAA,IAA4BZ,QAAA,MAAS;EACrC,OAAAa,OAAA,EAAAC,UAAA,IAA8Bd,QAAA,MAAS;EACvC;IAAAe;EAAA,IAAcb,cAAA;EAAA,IAEVQ,KAAA;IAAA,IAAAM,EAAA;IAAA,IAAAT,CAAA,QAAAG,KAAA;MAIWM,EAAA,SAAAA,CAAA;QAAA,MACDC,SAAA,CAAAC,SAAA,CAAAC,SAAA,CAA8BT,KAAA;QACpCE,SAAA,KAAU;MAAA;MACZL,CAAA,MAAAG,KAAA;MAAAH,CAAA,MAAAS,EAAA;IAAA;MAAAA,EAAA,GAAAT,CAAA;IAAA;IAAA,IAAAa,EAAA;IAAA,IAAAC,EAAA;IAAA,IAAAd,CAAA,QAAAe,MAAA,CAAAC,GAAA;MACcH,EAAA,GAAAA,CAAA;QACZN,UAAA,KAAW;QACXF,SAAA,MAAU;MAAA;MAEES,EAAA,GAAAA,CAAA;QACZP,UAAA,MAAW;QACXF,SAAA,MAAU;MAAA;MACZL,CAAA,MAAAa,EAAA;MAAAb,CAAA,MAAAc,EAAA;IAAA;MAAAD,EAAA,GAAAb,CAAA;MAAAc,EAAA,GAAAd,CAAA;IAAA;IAAA,IAAAiB,EAAA;IAAA,IAAAjB,CAAA,QAAAI,MAAA,IAAAJ,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAM,OAAA,IAAAN,CAAA,QAAAE,cAAA,IAAAF,CAAA,QAAAQ,CAAA,IAAAR,CAAA,QAAAS,EAAA;MAbFQ,EAAA,GAAAC,KAAA,CAAC;QAAAC,SAAA,EAAAtB,SAAA;QAAAuB,OAAA,EAEUX,EAGT;QAAAY,YAAA,EACcR,EAGd;QAAAS,YAAA,EACcR,EAGd;QAAAS,IAAA,EACK;QAAAC,QAAA,GAELC,IAAA,CAAA/B,QAAA,IAAC,GACDwB,KAAA,CAAAtB,OAAA;UAAA8B,KAAA,EAAgBtB,MAAA,OAAAuB,SAAa;UAAAC,IAAA,EAAiBtB,OAAA,IAAWF,MAAA;UAAAoB,QAAA,GACtDpB,MAAA,KAAWF,cAAA,IAAkBM,CAAA,CAAE,iBAAgB,GAC/C,CAACJ,MAAA,KAAWH,cAAA,IAAkBO,CAAA,CAAE,eAAc;QAAA,C;;;;;;;;;;;;WAnBnDS,E;;;CA0BN","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useState","CopyIcon","useTranslation","Tooltip","baseClass","CopyToClipboard","t0","$","defaultMessage","icon","successMessage","value","copied","setCopied","hovered","setHovered","t","t1","navigator","clipboard","writeText","t2","t3","Symbol","for","t4","_jsxs","className","onClick","onMouseEnter","onMouseLeave","type","children","_jsx","delay","undefined","show"],"sources":["../../../src/elements/CopyToClipboard/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.css'\n\nconst baseClass = 'copy-to-clipboard'\n\nexport type Props = {\n  defaultMessage?: string\n  icon?: React.ReactNode\n  successMessage?: string\n  value?: string\n}\n\nexport const CopyToClipboard: React.FC<Props> = ({\n  defaultMessage,\n  icon,\n  successMessage,\n  value,\n}) => {\n  const [copied, setCopied] = useState(false)\n  const [hovered, setHovered] = useState(false)\n  const { t } = useTranslation()\n\n  if (value) {\n    return (\n      <button\n        className={baseClass}\n        onClick={async () => {\n          await navigator.clipboard.writeText(value)\n          setCopied(true)\n        }}\n        onMouseEnter={() => {\n          setHovered(true)\n          setCopied(false)\n        }}\n        onMouseLeave={() => {\n          setHovered(false)\n          setCopied(false)\n        }}\n        type=\"button\"\n      >\n        {icon ?? <CopyIcon />}\n        <Tooltip delay={copied ? 0 : undefined} show={hovered || copied}>\n          {copied && (successMessage ?? t('general:copied'))}\n          {!copied && (defaultMessage ?? t('general:copy'))}\n        </Tooltip>\n      </button>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB,OAAO,MAAMC,eAAA,GAAmCC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,cAAA;IAAAC,IAAA;IAAAC,cAAA;IAAAC;EAAA,IAAAL,EAKhD;EACC,OAAAM,MAAA,EAAAC,SAAA,IAA4Bb,QAAA,MAAS;EACrC,OAAAc,OAAA,EAAAC,UAAA,IAA8Bf,QAAA,MAAS;EACvC;IAAAgB;EAAA,IAAcd,cAAA;EAAA,IAEVS,KAAA;IAAA,IAAAM,EAAA;IAAA,IAAAV,CAAA,QAAAI,KAAA;MAIWM,EAAA,SAAAA,CAAA;QAAA,MACDC,SAAA,CAAAC,SAAA,CAAAC,SAAA,CAA8BT,KAAA;QACpCE,SAAA,KAAU;MAAA;MACZN,CAAA,MAAAI,KAAA;MAAAJ,CAAA,MAAAU,EAAA;IAAA;MAAAA,EAAA,GAAAV,CAAA;IAAA;IAAA,IAAAc,EAAA;IAAA,IAAAC,EAAA;IAAA,IAAAf,CAAA,QAAAgB,MAAA,CAAAC,GAAA;MACcH,EAAA,GAAAA,CAAA;QACZN,UAAA,KAAW;QACXF,SAAA,MAAU;MAAA;MAEES,EAAA,GAAAA,CAAA;QACZP,UAAA,MAAW;QACXF,SAAA,MAAU;MAAA;MACZN,CAAA,MAAAc,EAAA;MAAAd,CAAA,MAAAe,EAAA;IAAA;MAAAD,EAAA,GAAAd,CAAA;MAAAe,EAAA,GAAAf,CAAA;IAAA;IAAA,IAAAkB,EAAA;IAAA,IAAAlB,CAAA,QAAAK,MAAA,IAAAL,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAO,OAAA,IAAAP,CAAA,QAAAE,IAAA,IAAAF,CAAA,QAAAG,cAAA,IAAAH,CAAA,QAAAS,CAAA,IAAAT,CAAA,SAAAU,EAAA;MAbFQ,EAAA,GAAAC,KAAA,CAAC;QAAAC,SAAA,EAAAvB,SAAA;QAAAwB,OAAA,EAEUX,EAGT;QAAAY,YAAA,EACcR,EAGd;QAAAS,YAAA,EACcR,EAGd;QAAAS,IAAA,EACK;QAAAC,QAAA,GAEJvB,IAAA,IAAQwB,IAAA,CAAAhC,QAAA,IAAC,GACVyB,KAAA,CAAAvB,OAAA;UAAA+B,KAAA,EAAgBtB,MAAA,OAAAuB,SAAa;UAAAC,IAAA,EAAiBtB,OAAA,IAAWF,MAAA;UAAAoB,QAAA,GACtDpB,MAAA,KAAWF,cAAA,IAAkBM,CAAA,CAAE,iBAAgB,GAC/C,CAACJ,MAAA,KAAWJ,cAAA,IAAkBQ,CAAA,CAAE,eAAc;QAAA,C;;;;;;;;;;;;;WAnBnDS,E;;;CA0BN","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CreateDocumentButton/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAA;AAU/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAA;IACtB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACrC,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,mBAAmB;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAA;IACxC,yCAAyC;IACzC,WAAW,EAAE,gBAAgB,EAAE,CAAA;IAC/B,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAA;IAClB,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mDAAmD;IACnD,MAAM,CAAC,EAAE,0BAA0B,CAAC,QAAQ,CAAC,CAAA;IAC7C,kBAAkB;IAClB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;CAC3B,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,WAAoB,EACpB,WAAW,EACX,UAAU,EACV,KAAK,EACL,MAAM,EACN,IAAe,GAChB,EAAE,yBAAyB,qBAoG3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CreateDocumentButton/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAA;AAU/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAA;IACtB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACrC,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,mBAAmB;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAA;IACxC,yCAAyC;IACzC,WAAW,EAAE,gBAAgB,EAAE,CAAA;IAC/B,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAA;IAClB,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mDAAmD;IACnD,MAAM,CAAC,EAAE,0BAA0B,CAAC,QAAQ,CAAC,CAAA;IAC7C,kBAAkB;IAClB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;CAC3B,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,WAAoB,EACpB,WAAW,EACX,UAAU,EACV,KAAK,EACL,MAAM,EACN,IAAe,GAChB,EAAE,yBAAyB,qBAuG3B"}

package/dist/elements/CreateDocumentButton/index.js

@@ -4,6 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
+import { hasAutosaveEnabled } from 'payload/shared';
 import React, { useState } from 'react';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
@@ -70,7 +71,9 @@ export function CreateDocumentButton(t0) {
   let t5;
   if ($[6] !== closeModal || $[7] !== drawerSlug || $[8] !== onSave) {
     t5 = args => {
-      closeModal(drawerSlug);
+      if (!hasAutosaveEnabled(args.collectionConfig)) {
+        closeModal(drawerSlug);
+      }
       return onSave?.(args);
     };
     $[6] = closeModal;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useModal","getTranslation","React","useState","useConfig","useTranslation","Button","DocumentDrawer","Popup","PopupList","baseClass","CreateDocumentButton","t0","$","buttonStyle","t1","collections","drawerSlug","label","onSave","size","t2","undefined","config","i18n","t","closeModal","openModal","selectedCollection","setSelectedCollection","length","t3","option","collectionConfig","find","slug","collectionSlug","labels","singular","getCollectionLabel","t4","collection","handleSelect","t5","args","handleSave","collection_0","t6","buttonLabel","t7","_jsxs","_Fragment","children","_jsx","className","margin","onClick","initialData","redirectAfterCreate","buttonLabel_0","collection_1","button","icon","horizontalAlign","ButtonGroup","map"],"sources":["../../../src/elements/CreateDocumentButton/index.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useState } from 'react'\n\nimport type { Props as ButtonProps } from '../Button/types.js'\nimport type { DocumentDrawerContextProps } from '../DocumentDrawer/Provider.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { DocumentDrawer } from '../DocumentDrawer/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\n\nconst baseClass = 'create-document-button'\n\nexport type CollectionOption = {\n  collectionSlug: string\n  /** Initial data to populate the form when creating */\n  initialData?: Record<string, unknown>\n  /** Optional label override (defaults to collection's singular label) */\n  label?: string\n}\n\nexport type CreateDocumentButtonProps = {\n  /** Button style */\n  buttonStyle?: ButtonProps['buttonStyle']\n  /** Collections available for creation */\n  collections: CollectionOption[]\n  /** Unique slug for the drawer modal */\n  drawerSlug: string\n  /** Custom button label (defaults to \"Create New\" for multiple, \"Create New {label}\" for single) */\n  label?: string\n  /** Called when a document is successfully saved */\n  onSave?: DocumentDrawerContextProps['onSave']\n  /** Button size */\n  size?: ButtonProps['size']\n}\n\nexport function CreateDocumentButton({\n  buttonStyle = 'pill',\n  collections,\n  drawerSlug,\n  label,\n  onSave,\n  size = 'medium',\n}: CreateDocumentButtonProps) {\n  const { config } = useConfig()\n  const { i18n, t } = useTranslation()\n  const { closeModal, openModal } = useModal()\n\n  const [selectedCollection, setSelectedCollection] = useState<CollectionOption | null>(null)\n\n  if (collections.length === 0) {\n    return null\n  }\n\n  const getCollectionLabel = (option: CollectionOption) => {\n    if (option.label) {\n      return option.label\n    }\n    const collectionConfig = config.collections.find((c) => c.slug === option.collectionSlug)\n    return getTranslation(collectionConfig?.labels?.singular, i18n) || option.collectionSlug\n  }\n\n  const handleSelect = (collection: CollectionOption) => {\n    setSelectedCollection(collection)\n    openModal(drawerSlug)\n  }\n\n  const handleSave: DocumentDrawerContextProps['onSave'] = (args) => {\n    closeModal(drawerSlug)\n    return onSave?.(args)\n  }\n\n  // Single collection - render simple button\n  if (collections.length === 1) {\n    const collection = collections[0]\n    const buttonLabel = label || t('general:createNew')\n\n    return (\n      <>\n        <Button\n          buttonStyle={buttonStyle}\n          className={baseClass}\n          margin={false}\n          onClick={() => handleSelect(collection)}\n          size={size}\n        >\n          {buttonLabel}\n        </Button>\n        {selectedCollection && (\n          <DocumentDrawer\n            collectionSlug={selectedCollection.collectionSlug}\n            drawerSlug={drawerSlug}\n            initialData={selectedCollection.initialData}\n            onSave={handleSave}\n            redirectAfterCreate={false}\n          />\n        )}\n      </>\n    )\n  }\n\n  // Multiple collections - render dropdown\n  const buttonLabel = label || t('general:createNew')\n\n  return (\n    <>\n      <Popup\n        button={\n          <Button\n            buttonStyle={buttonStyle}\n            className={`${baseClass}__popup-button`}\n            icon=\"chevron\"\n            size={size}\n          >\n            {buttonLabel}\n          </Button>\n        }\n        buttonType=\"custom\"\n        className={`${baseClass}__popup`}\n        horizontalAlign=\"right\"\n      >\n        <PopupList.ButtonGroup>\n          {collections.map((collection) => (\n            <PopupList.Button\n              key={collection.collectionSlug}\n              onClick={() => handleSelect(collection)}\n            >\n              {getCollectionLabel(collection)}\n            </PopupList.Button>\n          ))}\n        </PopupList.ButtonGroup>\n      </Popup>\n      {selectedCollection && (\n        <DocumentDrawer\n          collectionSlug={selectedCollection.collectionSlug}\n          drawerSlug={drawerSlug}\n          initialData={selectedCollection.initialData}\n          onSave={handleSave}\n          redirectAfterCreate={false}\n        />\n      )}\n    </>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useModal","getTranslation","hasAutosaveEnabled","React","useState","useConfig","useTranslation","Button","DocumentDrawer","Popup","PopupList","baseClass","CreateDocumentButton","t0","$","buttonStyle","t1","collections","drawerSlug","label","onSave","size","t2","undefined","config","i18n","t","closeModal","openModal","selectedCollection","setSelectedCollection","length","t3","option","collectionConfig","find","slug","collectionSlug","labels","singular","getCollectionLabel","t4","collection","handleSelect","t5","args","handleSave","collection_0","t6","buttonLabel","t7","_jsxs","_Fragment","children","_jsx","className","margin","onClick","initialData","redirectAfterCreate","buttonLabel_0","collection_1","button","icon","horizontalAlign","ButtonGroup","map"],"sources":["../../../src/elements/CreateDocumentButton/index.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { hasAutosaveEnabled } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport type { Props as ButtonProps } from '../Button/types.js'\nimport type { DocumentDrawerContextProps } from '../DocumentDrawer/Provider.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { DocumentDrawer } from '../DocumentDrawer/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\n\nconst baseClass = 'create-document-button'\n\nexport type CollectionOption = {\n  collectionSlug: string\n  /** Initial data to populate the form when creating */\n  initialData?: Record<string, unknown>\n  /** Optional label override (defaults to collection's singular label) */\n  label?: string\n}\n\nexport type CreateDocumentButtonProps = {\n  /** Button style */\n  buttonStyle?: ButtonProps['buttonStyle']\n  /** Collections available for creation */\n  collections: CollectionOption[]\n  /** Unique slug for the drawer modal */\n  drawerSlug: string\n  /** Custom button label (defaults to \"Create New\" for multiple, \"Create New {label}\" for single) */\n  label?: string\n  /** Called when a document is successfully saved */\n  onSave?: DocumentDrawerContextProps['onSave']\n  /** Button size */\n  size?: ButtonProps['size']\n}\n\nexport function CreateDocumentButton({\n  buttonStyle = 'pill',\n  collections,\n  drawerSlug,\n  label,\n  onSave,\n  size = 'medium',\n}: CreateDocumentButtonProps) {\n  const { config } = useConfig()\n  const { i18n, t } = useTranslation()\n  const { closeModal, openModal } = useModal()\n\n  const [selectedCollection, setSelectedCollection] = useState<CollectionOption | null>(null)\n\n  if (collections.length === 0) {\n    return null\n  }\n\n  const getCollectionLabel = (option: CollectionOption) => {\n    if (option.label) {\n      return option.label\n    }\n    const collectionConfig = config.collections.find((c) => c.slug === option.collectionSlug)\n    return getTranslation(collectionConfig?.labels?.singular, i18n) || option.collectionSlug\n  }\n\n  const handleSelect = (collection: CollectionOption) => {\n    setSelectedCollection(collection)\n    openModal(drawerSlug)\n  }\n\n  const handleSave: DocumentDrawerContextProps['onSave'] = (args) => {\n    if (!hasAutosaveEnabled(args.collectionConfig)) {\n      closeModal(drawerSlug)\n    }\n\n    return onSave?.(args)\n  }\n\n  // Single collection - render simple button\n  if (collections.length === 1) {\n    const collection = collections[0]\n    const buttonLabel = label || t('general:createNew')\n\n    return (\n      <>\n        <Button\n          buttonStyle={buttonStyle}\n          className={baseClass}\n          margin={false}\n          onClick={() => handleSelect(collection)}\n          size={size}\n        >\n          {buttonLabel}\n        </Button>\n        {selectedCollection && (\n          <DocumentDrawer\n            collectionSlug={selectedCollection.collectionSlug}\n            drawerSlug={drawerSlug}\n            initialData={selectedCollection.initialData}\n            onSave={handleSave}\n            redirectAfterCreate={false}\n          />\n        )}\n      </>\n    )\n  }\n\n  // Multiple collections - render dropdown\n  const buttonLabel = label || t('general:createNew')\n\n  return (\n    <>\n      <Popup\n        button={\n          <Button\n            buttonStyle={buttonStyle}\n            className={`${baseClass}__popup-button`}\n            icon=\"chevron\"\n            size={size}\n          >\n            {buttonLabel}\n          </Button>\n        }\n        buttonType=\"custom\"\n        className={`${baseClass}__popup`}\n        horizontalAlign=\"right\"\n      >\n        <PopupList.ButtonGroup>\n          {collections.map((collection) => (\n            <PopupList.Button\n              key={collection.collectionSlug}\n              onClick={() => handleSelect(collection)}\n            >\n              {getCollectionLabel(collection)}\n            </PopupList.Button>\n          ))}\n        </PopupList.ButtonGroup>\n      </Popup>\n      {selectedCollection && (\n        <DocumentDrawer\n          collectionSlug={selectedCollection.collectionSlug}\n          drawerSlug={drawerSlug}\n          initialData={selectedCollection.initialData}\n          onSave={handleSave}\n          redirectAfterCreate={false}\n        />\n      )}\n    </>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,OAAO,aAAa,CAAA;AAIpB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2H/B,CAAA;eAGc,UAAU"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,OAAO,aAAa,CAAA;AAIpB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4H/B,CAAA;eAGc,UAAU"}

package/dist/elements/DatePicker/DatePicker.js

@@ -88,6 +88,7 @@ const DatePicker = props => {
     onChange,
     placeholderText,
     popperPlacement: "bottom-start",
+    portalId: "date-time-picker-portal",
     previousMonthButtonLabel: _jsx(ChevronIcon, {
       direction: "left"
     }),

package/dist/elements/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["c","_c","React","ReactDatePickerDefaultImport","registerLocale","setDefaultLocale","ReactDatePicker","default","CalendarIcon","ChevronIcon","useTranslation","getFormattedLocale","baseClass","DatePicker","props","$","id","displayFormat","customDisplayFormat","maxDate","maxTime","minDate","minTime","monthsToShow","t0","onChange","onChangeFromProps","overrides","pickerAppearance","t1","placeholder","placeholderText","readOnly","timeFormat","t2","timeIntervals","t3","value","undefined","i18n","dateFormat","incomingDate","newDate","Date","includes","tzOffset","getTimezoneOffset","setHours","setMilliseconds","dateTimePickerProps","customInputRef","disabled","monthsShown","Math","min","nextMonthButtonLabel","_jsx","direction","popperPlacement","previousMonthButtonLabel","selected","shouldCloseOnSelect","showMonthYearPicker","showPopperArrow","showTimeSelect","showTimeSelectOnly","t4","t5","filter","Boolean","classes","join","t6","t7","dateFNS","language","datepickerLocale","t8","console","warn","useEffect","className","children","_jsxs","dropdownMode","showMonthDropdown","showYearDropdown"],"sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\nimport type { DatePickerProps } from 'react-datepicker'\n\nimport React from 'react'\nimport ReactDatePickerDefaultImport, { registerLocale, setDefaultLocale } from 'react-datepicker'\nconst ReactDatePicker =\n  'default' in ReactDatePickerDefaultImport\n    ? ReactDatePickerDefaultImport.default\n    : ReactDatePickerDefaultImport\n\nimport type { Props } from './types.js'\n\nimport { CalendarIcon } from '../../icons/Calendar/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { getFormattedLocale } from './getFormattedLocale.js'\nimport './index.css'\n\nconst baseClass = 'date-time-picker'\n\nconst DatePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    displayFormat: customDisplayFormat,\n    maxDate,\n    maxTime,\n    minDate,\n    minTime,\n    monthsToShow = 1,\n    onChange: onChangeFromProps,\n    overrides,\n    pickerAppearance = 'default',\n    placeholder: placeholderText,\n    readOnly,\n    timeFormat = 'h:mm aa',\n    timeIntervals = 30,\n    value,\n  } = props\n\n  // Use the user's AdminUI language preference for the locale\n  const { i18n } = useTranslation()\n\n  let dateFormat = customDisplayFormat\n\n  if (!customDisplayFormat) {\n    // when no displayFormat is provided, determine format based on the picker appearance\n    if (pickerAppearance === 'default') {\n      dateFormat = 'MM/dd/yyyy'\n    } else if (pickerAppearance === 'dayAndTime') {\n      dateFormat = 'MMM d, yyy h:mm a'\n    } else if (pickerAppearance === 'timeOnly') {\n      dateFormat = 'h:mm a'\n    } else if (pickerAppearance === 'dayOnly') {\n      dateFormat = 'MMM dd'\n    } else if (pickerAppearance === 'monthOnly') {\n      dateFormat = 'MMMM'\n    }\n  }\n\n  const onChange: Extract<\n    DatePickerProps,\n    { selectsMultiple?: never; selectsRange?: never }\n  >['onChange'] = (incomingDate) => {\n    const newDate = incomingDate\n    if (newDate instanceof Date && ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)) {\n      const tzOffset = incomingDate.getTimezoneOffset() / 60\n      newDate.setHours(12 - tzOffset, 0)\n    }\n\n    if (newDate instanceof Date && !dateFormat.includes('SSS')) {\n      // Unless the dateFormat includes milliseconds, set milliseconds to 0\n      // This is to ensure that the timestamp is consistent with the displayFormat\n      newDate.setMilliseconds(0)\n    }\n\n    if (typeof onChangeFromProps === 'function') {\n      onChangeFromProps(newDate)\n    }\n  }\n\n  const dateTimePickerProps: Extract<\n    DatePickerProps,\n    { selectsMultiple?: never; selectsRange?: never }\n  > = {\n    customInputRef: 'ref',\n    dateFormat,\n    disabled: readOnly,\n    maxDate,\n    maxTime,\n    minDate,\n    minTime,\n    monthsShown: Math.min(2, monthsToShow),\n    nextMonthButtonLabel: <ChevronIcon direction=\"right\" />,\n    nextYearButtonLabel: '›',\n    onChange,\n    placeholderText,\n    popperPlacement: 'bottom-start',\n    previousMonthButtonLabel: <ChevronIcon direction=\"left\" />,\n    previousYearButtonLabel: '‹',\n    selected: value && new Date(value),\n    shouldCloseOnSelect: false,\n    showMonthYearPicker: pickerAppearance === 'monthOnly',\n    showPopperArrow: false,\n    showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',\n    showTimeSelectOnly: pickerAppearance === 'timeOnly',\n    timeFormat,\n    timeIntervals,\n    ...(overrides as Extract<\n      DatePickerProps,\n      { selectsMultiple?: never; selectsRange?: never } // to satisfy TypeScript. Overrides can enable selectsMultiple or selectsRange but then it's up to the user to ensure they pass in the correct onChange\n    >),\n  }\n\n  const classes = [baseClass, `${baseClass}__appearance--${pickerAppearance}`]\n    .filter(Boolean)\n    .join(' ')\n\n  React.useEffect(() => {\n    if (i18n.dateFNS) {\n      try {\n        const datepickerLocale = getFormattedLocale(i18n.language)\n        registerLocale(datepickerLocale, i18n.dateFNS)\n        setDefaultLocale(datepickerLocale)\n      } catch (_error) {\n        // eslint-disable-next-line no-console\n        console.warn(`Could not find DatePicker locale for ${i18n.language}`)\n      }\n    }\n  }, [i18n.language, i18n.dateFNS])\n\n  return (\n    <div className={classes} id={id}>\n      <div className={`${baseClass}__input-wrapper`}>\n        <ReactDatePicker\n          {...dateTimePickerProps}\n          dropdownMode=\"select\"\n          showMonthDropdown={pickerAppearance !== 'monthOnly'}\n          showYearDropdown={pickerAppearance !== 'monthOnly'}\n        />\n        <CalendarIcon />\n      </div>\n    </div>\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default DatePicker\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DatePicker.js","names":["c","_c","React","ReactDatePickerDefaultImport","registerLocale","setDefaultLocale","ReactDatePicker","default","CalendarIcon","ChevronIcon","useTranslation","getFormattedLocale","baseClass","DatePicker","props","$","id","displayFormat","customDisplayFormat","maxDate","maxTime","minDate","minTime","monthsToShow","t0","onChange","onChangeFromProps","overrides","pickerAppearance","t1","placeholder","placeholderText","readOnly","timeFormat","t2","timeIntervals","t3","value","undefined","i18n","dateFormat","incomingDate","newDate","Date","includes","tzOffset","getTimezoneOffset","setHours","setMilliseconds","dateTimePickerProps","customInputRef","disabled","monthsShown","Math","min","nextMonthButtonLabel","_jsx","direction","popperPlacement","portalId","previousMonthButtonLabel","selected","shouldCloseOnSelect","showMonthYearPicker","showPopperArrow","showTimeSelect","showTimeSelectOnly","t4","t5","filter","Boolean","classes","join","t6","t7","dateFNS","language","datepickerLocale","t8","console","warn","useEffect","className","children","_jsxs","dropdownMode","showMonthDropdown","showYearDropdown"],"sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\nimport type { DatePickerProps } from 'react-datepicker'\n\nimport React from 'react'\nimport ReactDatePickerDefaultImport, { registerLocale, setDefaultLocale } from 'react-datepicker'\nconst ReactDatePicker =\n  'default' in ReactDatePickerDefaultImport\n    ? ReactDatePickerDefaultImport.default\n    : ReactDatePickerDefaultImport\n\nimport type { Props } from './types.js'\n\nimport { CalendarIcon } from '../../icons/Calendar/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { getFormattedLocale } from './getFormattedLocale.js'\nimport './index.css'\n\nconst baseClass = 'date-time-picker'\n\nconst DatePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    displayFormat: customDisplayFormat,\n    maxDate,\n    maxTime,\n    minDate,\n    minTime,\n    monthsToShow = 1,\n    onChange: onChangeFromProps,\n    overrides,\n    pickerAppearance = 'default',\n    placeholder: placeholderText,\n    readOnly,\n    timeFormat = 'h:mm aa',\n    timeIntervals = 30,\n    value,\n  } = props\n\n  // Use the user's AdminUI language preference for the locale\n  const { i18n } = useTranslation()\n\n  let dateFormat = customDisplayFormat\n\n  if (!customDisplayFormat) {\n    // when no displayFormat is provided, determine format based on the picker appearance\n    if (pickerAppearance === 'default') {\n      dateFormat = 'MM/dd/yyyy'\n    } else if (pickerAppearance === 'dayAndTime') {\n      dateFormat = 'MMM d, yyy h:mm a'\n    } else if (pickerAppearance === 'timeOnly') {\n      dateFormat = 'h:mm a'\n    } else if (pickerAppearance === 'dayOnly') {\n      dateFormat = 'MMM dd'\n    } else if (pickerAppearance === 'monthOnly') {\n      dateFormat = 'MMMM'\n    }\n  }\n\n  const onChange: Extract<\n    DatePickerProps,\n    { selectsMultiple?: never; selectsRange?: never }\n  >['onChange'] = (incomingDate) => {\n    const newDate = incomingDate\n    if (newDate instanceof Date && ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)) {\n      const tzOffset = incomingDate.getTimezoneOffset() / 60\n      newDate.setHours(12 - tzOffset, 0)\n    }\n\n    if (newDate instanceof Date && !dateFormat.includes('SSS')) {\n      // Unless the dateFormat includes milliseconds, set milliseconds to 0\n      // This is to ensure that the timestamp is consistent with the displayFormat\n      newDate.setMilliseconds(0)\n    }\n\n    if (typeof onChangeFromProps === 'function') {\n      onChangeFromProps(newDate)\n    }\n  }\n\n  const dateTimePickerProps: Extract<\n    DatePickerProps,\n    { selectsMultiple?: never; selectsRange?: never }\n  > = {\n    customInputRef: 'ref',\n    dateFormat,\n    disabled: readOnly,\n    maxDate,\n    maxTime,\n    minDate,\n    minTime,\n    monthsShown: Math.min(2, monthsToShow),\n    nextMonthButtonLabel: <ChevronIcon direction=\"right\" />,\n    nextYearButtonLabel: '›',\n    onChange,\n    placeholderText,\n    popperPlacement: 'bottom-start',\n    portalId: 'date-time-picker-portal',\n    previousMonthButtonLabel: <ChevronIcon direction=\"left\" />,\n    previousYearButtonLabel: '‹',\n    selected: value && new Date(value),\n    shouldCloseOnSelect: false,\n    showMonthYearPicker: pickerAppearance === 'monthOnly',\n    showPopperArrow: false,\n    showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',\n    showTimeSelectOnly: pickerAppearance === 'timeOnly',\n    timeFormat,\n    timeIntervals,\n    ...(overrides as Extract<\n      DatePickerProps,\n      { selectsMultiple?: never; selectsRange?: never } // to satisfy TypeScript. Overrides can enable selectsMultiple or selectsRange but then it's up to the user to ensure they pass in the correct onChange\n    >),\n  }\n\n  const classes = [baseClass, `${baseClass}__appearance--${pickerAppearance}`]\n    .filter(Boolean)\n    .join(' ')\n\n  React.useEffect(() => {\n    if (i18n.dateFNS) {\n      try {\n        const datepickerLocale = getFormattedLocale(i18n.language)\n        registerLocale(datepickerLocale, i18n.dateFNS)\n        setDefaultLocale(datepickerLocale)\n      } catch (_error) {\n        // eslint-disable-next-line no-console\n        console.warn(`Could not find DatePicker locale for ${i18n.language}`)\n      }\n    }\n  }, [i18n.language, i18n.dateFNS])\n\n  return (\n    <div className={classes} id={id}>\n      <div className={`${baseClass}__input-wrapper`}>\n        <ReactDatePicker\n          {...dateTimePickerProps}\n          dropdownMode=\"select\"\n          showMonthDropdown={pickerAppearance !== 'monthOnly'}\n          showYearDropdown={pickerAppearance !== 'monthOnly'}\n        />\n        <CalendarIcon />\n      </div>\n    </div>\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default DatePicker\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/DatePicker/index.css

@@ -40,7 +40,7 @@
   }
 
   .react-datepicker-popper {
-    z-index: 10;
+    z-index: var(--z-portal-element);
     line-height: 0;
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteDocument/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,OAAO,KAA0C,MAAM,OAAO,CAAA;AAG9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAA;AAkB9E,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAA;IACzD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CACtE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4K1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteDocument/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAMxD,OAAO,KAA0C,MAAM,OAAO,CAAA;AAG9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAA;AAoB9E,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAA;IACzD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CACtE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8L1C,CAAA"}