@payloadcms/ui 4.0.0-internal.7b031c8 → 4.0.0-internal.8001944

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

@@ -1,13 +1,10 @@
 import React from 'react';
+import type { PopupButtonRenderProps } from '../Popup/PopupTrigger/index.js';
 import './index.css';
 export declare const Localizer: React.FC<{
     className?: string;
     renderButton?: (props: {
-        active: boolean;
-        'aria-expanded': boolean;
-        'aria-haspopup': true;
-        onClick: React.MouseEventHandler;
-        onKeyDown: React.KeyboardEventHandler;
-    }) => React.ReactNode;
+        'aria-label': string;
+    } & PopupButtonRenderProps) => React.ReactNode;
 }>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Localizer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAWvC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;CACtB,CAqGA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Localizer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAW5E,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,GAAG,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;CAC7F,CAmHA,CAAA"}

package/dist/elements/Localizer/index.js

@@ -40,10 +40,12 @@ export const Localizer = props => {
     t
   } = useTranslation();
   const locale = useLocale();
-  if (localization) {
+  if (localization && locale) {
     const {
       locales
     } = localization;
+    const localeLabel = getTranslation(locale.label, i18n);
+    const localeAccessibleName = localeLabel === locale.code ? `${t("general:locale")}: ${locale.code}` : `${t("general:locale")}: ${localeLabel} (${locale.code})`;
     let t1;
     if ($[0] !== className) {
       t1 = [baseClass, className].filter(Boolean);
@@ -54,7 +56,7 @@ export const Localizer = props => {
     }
     const t2 = t1.join(" ");
     let t3;
-    if ($[2] !== i18n || $[3] !== locale || $[4] !== locales || $[5] !== router || $[6] !== setLocaleIsLoading || $[7] !== startRouteTransition) {
+    if ($[2] !== i18n || $[3] !== locale.code || $[4] !== locales || $[5] !== router || $[6] !== setLocaleIsLoading || $[7] !== startRouteTransition) {
       t3 = t4 => {
         const {
           close
@@ -64,7 +66,6 @@ export const Localizer = props => {
             const localeOptionLabel = getTranslation(localeOption.label, i18n);
             return _jsx(PopupList.RadioGroupItem, {
               active: locale.code === localeOption.code,
-              disabled: locale.code === localeOption.code,
               onClick: () => {
                 setLocaleIsLoading(true);
                 close();
@@ -98,7 +99,7 @@ export const Localizer = props => {
         });
       };
       $[2] = i18n;
-      $[3] = locale;
+      $[3] = locale.code;
       $[4] = locales;
       $[5] = router;
       $[6] = setLocaleIsLoading;
@@ -108,16 +109,22 @@ export const Localizer = props => {
       t3 = $[8];
     }
     let t4;
-    if ($[9] !== locale || $[10] !== renderButton || $[11] !== t) {
-      t4 = renderButton ?? (t5 => {
+    if ($[9] !== locale.code || $[10] !== localeAccessibleName || $[11] !== renderButton) {
+      t4 = buttonProps => {
+        const labeledButtonProps = {
+          ...buttonProps,
+          "aria-label": localeAccessibleName
+        };
+        if (renderButton) {
+          return renderButton(labeledButtonProps);
+        }
         const {
           active: _active,
           onClick,
           onKeyDown,
           ...ariaProps
-        } = t5;
+        } = labeledButtonProps;
         return _jsx(Button, {
-          "aria-label": t("general:locale"),
           buttonStyle: "secondary",
           extraButtonProps: {
             onKeyDown
@@ -135,10 +142,10 @@ export const Localizer = props => {
             })]
           })
         });
-      });
-      $[9] = locale;
-      $[10] = renderButton;
-      $[11] = t;
+      };
+      $[9] = locale.code;
+      $[10] = localeAccessibleName;
+      $[11] = renderButton;
       $[12] = t4;
     } else {
       t4 = $[12];
@@ -149,6 +156,7 @@ export const Localizer = props => {
         className: t2,
         children: _jsx(Popup, {
           horizontalAlign: "right",
+          popupType: "menu",
           render: t3,
           renderButton: t4,
           showScrollbar: true

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","qs","React","Fragment","ChevronIcon","LanguageIcon","useConfig","useLocale","useLocaleLoading","useRouter","useRouteTransition","useTranslation","Button","Popup","PopupList","baseClass","Localizer","props","$","className","renderButton","config","t0","localization","router","startRouteTransition","setLocaleIsLoading","i18n","t","locale","locales","t1","filter","Boolean","t2","join","t3","t4","close","_jsx","RadioGroup","children","map","localeOption","localeOptionLabel","label","RadioGroupItem","active","code","disabled","onClick","searchParams","URLSearchParams","window","location","search","url","stringify","parse","toString","depth","ignoreQueryPrefix","addQueryPrefix","push","_jsxs","t5","_active","onKeyDown","ariaProps","buttonStyle","extraButtonProps","icon","size","horizontalAlign","render","showScrollbar"],"sources":["../../../src/elements/Localizer/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport * as qs from 'qs-esm'\nimport React, { Fragment } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../icons/Language/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale, useLocaleLoading } from '../../providers/Locale/index.js'\nimport { useRouter } from '../../providers/RouterAdapter/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'localizer'\n\nexport const Localizer: React.FC<{\n  className?: string\n  renderButton?: (props: {\n    active: boolean\n    'aria-expanded': boolean\n    'aria-haspopup': true\n    onClick: React.MouseEventHandler\n    onKeyDown: React.KeyboardEventHandler\n  }) => React.ReactNode\n}> = (props) => {\n  const { className, renderButton } = props\n  const {\n    config: { localization },\n  } = useConfig()\n\n  const router = useRouter()\n  const { startRouteTransition } = useRouteTransition()\n\n  const { setLocaleIsLoading } = useLocaleLoading()\n\n  const { i18n, t } = useTranslation()\n  const locale = useLocale()\n\n  if (localization) {\n    const { locales } = localization\n\n    return (\n      <div className={[baseClass, className].filter(Boolean).join(' ')}>\n        <Popup\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              {locales.map((localeOption) => {\n                const localeOptionLabel = getTranslation(localeOption.label, i18n)\n\n                return (\n                  <PopupList.RadioGroupItem\n                    active={locale.code === localeOption.code}\n                    disabled={locale.code === localeOption.code}\n                    key={localeOption.code}\n                    onClick={() => {\n                      setLocaleIsLoading(true)\n                      close()\n\n                      // can't use `useSearchParams` here because it is stale due to `window.history.pushState` in `ListQueryProvider`\n                      const searchParams = new URLSearchParams(window.location.search)\n\n                      const url = qs.stringify(\n                        {\n                          ...qs.parse(searchParams.toString(), {\n                            depth: 10,\n                            ignoreQueryPrefix: true,\n                          }),\n                          locale: localeOption.code,\n                        },\n                        { addQueryPrefix: true },\n                      )\n\n                      startRouteTransition(() => {\n                        router.push(url)\n                      })\n                    }}\n                  >\n                    {localeOptionLabel !== localeOption.code ? (\n                      <Fragment>\n                        {localeOptionLabel}\n                        &nbsp;\n                        <span\n                          className={`${baseClass}__locale-code`}\n                          data-locale={localeOption.code}\n                        >\n                          {`(${localeOption.code})`}\n                        </span>\n                      </Fragment>\n                    ) : (\n                      <span className={`${baseClass}__locale-code`} data-locale={localeOption.code}>\n                        {localeOptionLabel}\n                      </span>\n                    )}\n                  </PopupList.RadioGroupItem>\n                )\n              })}\n            </PopupList.RadioGroup>\n          )}\n          renderButton={\n            renderButton ??\n            (({ active: _active, onClick, onKeyDown, ...ariaProps }) => (\n              <Button\n                aria-label={t('general:locale')}\n                buttonStyle=\"secondary\"\n                extraButtonProps={{ onKeyDown }}\n                icon={<LanguageIcon size={24} />}\n                iconPosition=\"left\"\n                onClick={onClick}\n                {...ariaProps}\n              >\n                <div className={`${baseClass}__button-content`}>\n                  {locale.code}\n                  <ChevronIcon size={16} />\n                </div>\n              </Button>\n            ))\n          }\n          showScrollbar\n        />\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","qs","React","Fragment","ChevronIcon","LanguageIcon","useConfig","useLocale","useLocaleLoading","useRouter","useRouteTransition","useTranslation","Button","Popup","PopupList","baseClass","Localizer","props","$","className","renderButton","config","t0","localization","router","startRouteTransition","setLocaleIsLoading","i18n","t","locale","locales","localeLabel","label","localeAccessibleName","code","t1","filter","Boolean","t2","join","t3","t4","close","_jsx","RadioGroup","children","map","localeOption","localeOptionLabel","RadioGroupItem","active","onClick","searchParams","URLSearchParams","window","location","search","url","stringify","parse","toString","depth","ignoreQueryPrefix","addQueryPrefix","push","_jsxs","buttonProps","labeledButtonProps","_active","onKeyDown","ariaProps","buttonStyle","extraButtonProps","icon","size","t5","horizontalAlign","popupType","render","showScrollbar"],"sources":["../../../src/elements/Localizer/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport * as qs from 'qs-esm'\nimport React, { Fragment } from 'react'\n\nimport type { PopupButtonRenderProps } from '../Popup/PopupTrigger/index.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../icons/Language/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale, useLocaleLoading } from '../../providers/Locale/index.js'\nimport { useRouter } from '../../providers/RouterAdapter/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'localizer'\n\nexport const Localizer: React.FC<{\n  className?: string\n  renderButton?: (props: { 'aria-label': string } & PopupButtonRenderProps) => React.ReactNode\n}> = (props) => {\n  const { className, renderButton } = props\n  const {\n    config: { localization },\n  } = useConfig()\n\n  const router = useRouter()\n  const { startRouteTransition } = useRouteTransition()\n\n  const { setLocaleIsLoading } = useLocaleLoading()\n\n  const { i18n, t } = useTranslation()\n  const locale = useLocale()\n\n  if (localization && locale) {\n    const { locales } = localization\n    const localeLabel = getTranslation(locale.label, i18n)\n    const localeAccessibleName =\n      localeLabel === locale.code\n        ? `${t('general:locale')}: ${locale.code}`\n        : `${t('general:locale')}: ${localeLabel} (${locale.code})`\n\n    return (\n      <div className={[baseClass, className].filter(Boolean).join(' ')}>\n        <Popup\n          horizontalAlign=\"right\"\n          popupType=\"menu\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              {locales.map((localeOption) => {\n                const localeOptionLabel = getTranslation(localeOption.label, i18n)\n\n                return (\n                  <PopupList.RadioGroupItem\n                    active={locale.code === localeOption.code}\n                    key={localeOption.code}\n                    onClick={() => {\n                      setLocaleIsLoading(true)\n                      close()\n\n                      // can't use `useSearchParams` here because it is stale due to `window.history.pushState` in `ListQueryProvider`\n                      const searchParams = new URLSearchParams(window.location.search)\n\n                      const url = qs.stringify(\n                        {\n                          ...qs.parse(searchParams.toString(), {\n                            depth: 10,\n                            ignoreQueryPrefix: true,\n                          }),\n                          locale: localeOption.code,\n                        },\n                        { addQueryPrefix: true },\n                      )\n\n                      startRouteTransition(() => {\n                        router.push(url)\n                      })\n                    }}\n                  >\n                    {localeOptionLabel !== localeOption.code ? (\n                      <Fragment>\n                        {localeOptionLabel}\n                        &nbsp;\n                        <span\n                          className={`${baseClass}__locale-code`}\n                          data-locale={localeOption.code}\n                        >\n                          {`(${localeOption.code})`}\n                        </span>\n                      </Fragment>\n                    ) : (\n                      <span className={`${baseClass}__locale-code`} data-locale={localeOption.code}>\n                        {localeOptionLabel}\n                      </span>\n                    )}\n                  </PopupList.RadioGroupItem>\n                )\n              })}\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => {\n            const labeledButtonProps = {\n              ...buttonProps,\n              'aria-label': localeAccessibleName,\n            }\n\n            if (renderButton) {\n              return renderButton(labeledButtonProps)\n            }\n\n            const { active: _active, onClick, onKeyDown, ...ariaProps } = labeledButtonProps\n\n            return (\n              <Button\n                buttonStyle=\"secondary\"\n                extraButtonProps={{ onKeyDown }}\n                icon={<LanguageIcon size={24} />}\n                iconPosition=\"left\"\n                onClick={onClick}\n                {...ariaProps}\n              >\n                <div className={`${baseClass}__button-content`}>\n                  {locale.code}\n                  <ChevronIcon size={16} />\n                </div>\n              </Button>\n            )\n          }}\n          showScrollbar\n        />\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Locked/index.css

@@ -25,12 +25,4 @@
       outline-color: var(--color-border-selected);
     }
   }
-
-  /* Fixed-position anchor mirroring the icon's rect, so the portaled tooltip (escaping
-   * the table's `overflow` clipping) can position against it. */
-  .locked__tooltip-anchor {
-    position: fixed;
-    z-index: var(--z-popup);
-    pointer-events: none;
-  }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Locked/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,OAAO,KAAmD,MAAM,OAAO,CAAA;AAOvE,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,IAAI,CAAA;CACX,CA+EA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Locked/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,IAAI,CAAA;CACX,CAkCA,CAAA"}

package/dist/elements/Locked/index.js

@@ -1,83 +1,89 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { useState } from 'react';
 import { LockIcon } from '../../icons/Lock/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { isClientUserObject } from '../../utilities/isClientUserObject.js';
 import { Tooltip } from '../Tooltip/index.js';
 import './index.css';
 const baseClass = 'locked';
-export const Locked = ({
-  className,
-  user
-}) => {
-  const anchorRef = useRef(null);
+export const Locked = t0 => {
+  const $ = _c(10);
+  const {
+    className,
+    user
+  } = t0;
   const [hovered, setHovered] = useState(false);
-  const [anchorRect, setAnchorRect] = useState(null);
   const {
     t
   } = useTranslation();
-  const userToUse = isClientUserObject(user) ? user.email ?? user.id : t('general:anotherUser');
-  const tooltipLabel = `${userToUse} ${t('general:isEditing')}`;
-  const updateAnchorRect = useCallback(() => {
-    const node = anchorRef.current;
-    if (!node) {
-      return;
-    }
-    setAnchorRect(node.getBoundingClientRect());
-  }, []);
-  useEffect(() => {
-    if (!hovered) {
-      return;
-    }
-    // Keep the portaled tooltip aligned to the icon as the page or an overflow
-    // container scrolls.
-    window.addEventListener('scroll', updateAnchorRect, true);
-    window.addEventListener('resize', updateAnchorRect);
-    return () => {
-      window.removeEventListener('scroll', updateAnchorRect, true);
-      window.removeEventListener('resize', updateAnchorRect);
-    };
-  }, [hovered, updateAnchorRect]);
-  return /*#__PURE__*/_jsxs("div", {
-    "aria-label": tooltipLabel,
-    className: [baseClass, className].filter(Boolean).join(' '),
-    onBlur: () => setHovered(false),
-    onFocus: () => {
-      updateAnchorRect();
-      setHovered(true);
-    },
-    onKeyDown: e => {
-      if (e.key === ' ') {
-        e.preventDefault(); // prevent page scroll when focused
-      }
-    },
-    onMouseEnter: () => {
-      updateAnchorRect();
-      setHovered(true);
-    },
-    onMouseLeave: () => setHovered(false),
-    ref: anchorRef,
-    role: "button",
-    tabIndex: 0,
-    children: [/*#__PURE__*/_jsx(LockIcon, {}), hovered && anchorRect && /*#__PURE__*/createPortal(/*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__tooltip-anchor`,
-      style: {
-        height: anchorRect.height,
-        left: anchorRect.left,
-        top: anchorRect.top,
-        width: anchorRect.width
-      },
-      children: /*#__PURE__*/_jsx(Tooltip, {
+  const userToUse = isClientUserObject(user) ? user.email ?? user.id : t("general:anotherUser");
+  const tooltipLabel = `${userToUse} ${t("general:isEditing")}`;
+  let t1;
+  if ($[0] !== className) {
+    t1 = [baseClass, className].filter(Boolean);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = t1.join(" ");
+  let t3;
+  let t4;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = () => setHovered(false);
+    t4 = () => setHovered(true);
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t3 = $[2];
+    t4 = $[3];
+  }
+  let t5;
+  let t6;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => setHovered(true);
+    t6 = () => setHovered(false);
+    $[4] = t5;
+    $[5] = t6;
+  } else {
+    t5 = $[4];
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== hovered || $[7] !== t2 || $[8] !== tooltipLabel) {
+    t7 = _jsxs("div", {
+      "aria-label": tooltipLabel,
+      className: t2,
+      onBlur: t3,
+      onFocus: t4,
+      onKeyDown: _temp,
+      onMouseEnter: t5,
+      onMouseLeave: t6,
+      role: "button",
+      tabIndex: 0,
+      children: [_jsx(LockIcon, {}), _jsx(Tooltip, {
         alignCaret: "center",
         className: `${baseClass}__tooltip`,
         position: "bottom",
-        show: true,
+        show: hovered,
         children: tooltipLabel
-      })
-    }), document.body)]
-  });
+      })]
+    });
+    $[6] = hovered;
+    $[7] = t2;
+    $[8] = tooltipLabel;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  return t7;
 };
+function _temp(e) {
+  if (e.key === " ") {
+    e.preventDefault();
+  }
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","createPortal","LockIcon","useTranslation","isClientUserObject","Tooltip","baseClass","Locked","className","user","anchorRef","hovered","setHovered","anchorRect","setAnchorRect","t","userToUse","email","id","tooltipLabel","updateAnchorRect","node","current","getBoundingClientRect","window","addEventListener","removeEventListener","_jsxs","filter","Boolean","join","onBlur","onFocus","onKeyDown","e","key","preventDefault","onMouseEnter","onMouseLeave","ref","role","tabIndex","_jsx","style","height","left","top","width","alignCaret","position","show","document","body"],"sources":["../../../src/elements/Locked/index.tsx"],"sourcesContent":["'use client'\nimport type { User } from 'payload'\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { LockIcon } from '../../icons/Lock/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { isClientUserObject } from '../../utilities/isClientUserObject.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.css'\n\nconst baseClass = 'locked'\n\nexport const Locked: React.FC<{\n  className?: string\n  user: User\n}> = ({ className, user }) => {\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const [hovered, setHovered] = useState(false)\n  const [anchorRect, setAnchorRect] = useState<DOMRect | null>(null)\n  const { t } = useTranslation()\n\n  const userToUse = isClientUserObject(user) ? (user.email ?? user.id) : t('general:anotherUser')\n  const tooltipLabel = `${userToUse} ${t('general:isEditing')}`\n\n  const updateAnchorRect = useCallback(() => {\n    const node = anchorRef.current\n\n    if (!node) {\n      return\n    }\n\n    setAnchorRect(node.getBoundingClientRect())\n  }, [])\n\n  useEffect(() => {\n    if (!hovered) {\n      return\n    }\n\n    // Keep the portaled tooltip aligned to the icon as the page or an overflow\n    // container scrolls.\n    window.addEventListener('scroll', updateAnchorRect, true)\n    window.addEventListener('resize', updateAnchorRect)\n\n    return () => {\n      window.removeEventListener('scroll', updateAnchorRect, true)\n      window.removeEventListener('resize', updateAnchorRect)\n    }\n  }, [hovered, updateAnchorRect])\n\n  return (\n    <div\n      aria-label={tooltipLabel}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      onBlur={() => setHovered(false)}\n      onFocus={() => {\n        updateAnchorRect()\n        setHovered(true)\n      }}\n      onKeyDown={(e) => {\n        if (e.key === ' ') {\n          e.preventDefault() // prevent page scroll when focused\n        }\n      }}\n      onMouseEnter={() => {\n        updateAnchorRect()\n        setHovered(true)\n      }}\n      onMouseLeave={() => setHovered(false)}\n      ref={anchorRef}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <LockIcon />\n      {hovered &&\n        anchorRect &&\n        createPortal(\n          <div\n            className={`${baseClass}__tooltip-anchor`}\n            style={{\n              height: anchorRect.height,\n              left: anchorRect.left,\n              top: anchorRect.top,\n              width: anchorRect.width,\n            }}\n          >\n            <Tooltip alignCaret=\"center\" className={`${baseClass}__tooltip`} position=\"bottom\" show>\n              {tooltipLabel}\n            </Tooltip>\n          </div>,\n          document.body,\n        )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAChE,SAASC,YAAY,QAAQ;AAE7B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ;AACnC,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAGRA,CAAC;EAAEC,SAAS;EAAEC;AAAI,CAAE;EACvB,MAAMC,SAAA,GAAYX,MAAA,CAAuB;EACzC,MAAM,CAACY,OAAA,EAASC,UAAA,CAAW,GAAGZ,QAAA,CAAS;EACvC,MAAM,CAACa,UAAA,EAAYC,aAAA,CAAc,GAAGd,QAAA,CAAyB;EAC7D,MAAM;IAAEe;EAAC,CAAE,GAAGZ,cAAA;EAEd,MAAMa,SAAA,GAAYZ,kBAAA,CAAmBK,IAAA,IAASA,IAAA,CAAKQ,KAAK,IAAIR,IAAA,CAAKS,EAAE,GAAIH,CAAA,CAAE;EACzE,MAAMI,YAAA,GAAe,GAAGH,SAAA,IAAaD,CAAA,CAAE,sBAAsB;EAE7D,MAAMK,gBAAA,GAAmBvB,WAAA,CAAY;IACnC,MAAMwB,IAAA,GAAOX,SAAA,CAAUY,OAAO;IAE9B,IAAI,CAACD,IAAA,EAAM;MACT;IACF;IAEAP,aAAA,CAAcO,IAAA,CAAKE,qBAAqB;EAC1C,GAAG,EAAE;EAELzB,SAAA,CAAU;IACR,IAAI,CAACa,OAAA,EAAS;MACZ;IACF;IAEA;IACA;IACAa,MAAA,CAAOC,gBAAgB,CAAC,UAAUL,gBAAA,EAAkB;IACpDI,MAAA,CAAOC,gBAAgB,CAAC,UAAUL,gBAAA;IAElC,OAAO;MACLI,MAAA,CAAOE,mBAAmB,CAAC,UAAUN,gBAAA,EAAkB;MACvDI,MAAA,CAAOE,mBAAmB,CAAC,UAAUN,gBAAA;IACvC;EACF,GAAG,CAACT,OAAA,EAASS,gBAAA,CAAiB;EAE9B,oBACEO,KAAA,CAAC;IACC,cAAYR,YAAA;IACZX,SAAA,EAAW,CAACF,SAAA,EAAWE,SAAA,CAAU,CAACoB,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;IACvDC,MAAA,EAAQA,CAAA,KAAMnB,UAAA,CAAW;IACzBoB,OAAA,EAASA,CAAA;MACPZ,gBAAA;MACAR,UAAA,CAAW;IACb;IACAqB,SAAA,EAAYC,CAAA;MACV,IAAIA,CAAA,CAAEC,GAAG,KAAK,KAAK;QACjBD,CAAA,CAAEE,cAAc,IAAG;MACrB;IACF;IACAC,YAAA,EAAcA,CAAA;MACZjB,gBAAA;MACAR,UAAA,CAAW;IACb;IACA0B,YAAA,EAAcA,CAAA,KAAM1B,UAAA,CAAW;IAC/B2B,GAAA,EAAK7B,SAAA;IACL8B,IAAA,EAAK;IACLC,QAAA,EAAU;4BAEVC,IAAA,CAACxC,QAAA,OACAS,OAAA,IACCE,UAAA,iBACAZ,YAAA,cACEyC,IAAA,CAAC;MACClC,SAAA,EAAW,GAAGF,SAAA,kBAA2B;MACzCqC,KAAA,EAAO;QACLC,MAAA,EAAQ/B,UAAA,CAAW+B,MAAM;QACzBC,IAAA,EAAMhC,UAAA,CAAWgC,IAAI;QACrBC,GAAA,EAAKjC,UAAA,CAAWiC,GAAG;QACnBC,KAAA,EAAOlC,UAAA,CAAWkC;MACpB;gBAEA,aAAAL,IAAA,CAACrC,OAAA;QAAQ2C,UAAA,EAAW;QAASxC,SAAA,EAAW,GAAGF,SAAA,WAAoB;QAAE2C,QAAA,EAAS;QAASC,IAAI;kBACpF/B;;QAGLgC,QAAA,CAASC,IAAI;;AAIvB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useState","LockIcon","useTranslation","isClientUserObject","Tooltip","baseClass","Locked","t0","$","className","user","hovered","setHovered","t","userToUse","email","id","tooltipLabel","t1","filter","Boolean","t2","join","t3","t4","Symbol","for","t5","t6","t7","_jsxs","onBlur","onFocus","onKeyDown","_temp","onMouseEnter","onMouseLeave","role","tabIndex","children","_jsx","alignCaret","position","show","e","key","preventDefault"],"sources":["../../../src/elements/Locked/index.tsx"],"sourcesContent":["'use client'\nimport type { User } from 'payload'\n\nimport React, { useState } from 'react'\n\nimport { LockIcon } from '../../icons/Lock/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { isClientUserObject } from '../../utilities/isClientUserObject.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.css'\n\nconst baseClass = 'locked'\n\nexport const Locked: React.FC<{\n  className?: string\n  user: User\n}> = ({ className, user }) => {\n  const [hovered, setHovered] = useState(false)\n  const { t } = useTranslation()\n\n  const userToUse = isClientUserObject(user) ? (user.email ?? user.id) : t('general:anotherUser')\n  const tooltipLabel = `${userToUse} ${t('general:isEditing')}`\n\n  return (\n    <div\n      aria-label={tooltipLabel}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      onBlur={() => setHovered(false)}\n      onFocus={() => setHovered(true)}\n      onKeyDown={(e) => {\n        if (e.key === ' ') {\n          e.preventDefault() // prevent page scroll when focused\n        }\n      }}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <LockIcon />\n      <Tooltip\n        alignCaret=\"center\"\n        className={`${baseClass}__tooltip`}\n        position=\"bottom\"\n        show={hovered}\n      >\n        {tooltipLabel}\n      </Tooltip>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ;AACnC,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,SAAA;IAAAC;EAAA,IAAAH,EAAmB;EACvB,OAAAI,OAAA,EAAAC,UAAA,IAA8BZ,QAAA,MAAS;EACvC;IAAAa;EAAA,IAAcX,cAAA;EAEd,MAAAY,SAAA,GAAkBX,kBAAA,CAAmBO,IAAA,IAASA,IAAA,CAAAK,KAAA,IAAcL,IAAA,CAAAM,EAAO,GAAIH,CAAA,CAAE;EACzE,MAAAI,YAAA,GAAqB,GAAGH,SAAA,IAAaD,CAAA,CAAE,sBAAsB;EAAA,IAAAK,EAAA;EAAA,IAAAV,CAAA,QAAAC,SAAA;IAK9CS,EAAA,IAAAb,SAAA,EAAYI,SAAA,EAAAU,MAAA,CAAAC,OAAkB;IAAAZ,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAA9B,MAAAa,EAAA,GAAAH,EAA8B,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAiB,MAAA,CAAAC,GAAA;IAC/CH,EAAA,GAAAA,CAAA,KAAMX,UAAA,MAAW;IAChBY,EAAA,GAAAA,CAAA,KAAMZ,UAAA,KAAW;IAAAJ,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAD,EAAA,GAAAf,CAAA;IAAAgB,EAAA,GAAAhB,CAAA;EAAA;EAAA,IAAAmB,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAApB,CAAA,QAAAiB,MAAA,CAAAC,GAAA;IAMZC,EAAA,GAAAA,CAAA,KAAMf,UAAA,KAAW;IACjBgB,EAAA,GAAAA,CAAA,KAAMhB,UAAA,MAAW;IAAAJ,CAAA,MAAAmB,EAAA;IAAAnB,CAAA,MAAAoB,EAAA;EAAA;IAAAD,EAAA,GAAAnB,CAAA;IAAAoB,EAAA,GAAApB,CAAA;EAAA;EAAA,IAAAqB,EAAA;EAAA,IAAArB,CAAA,QAAAG,OAAA,IAAAH,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAS,YAAA;IAXjCY,EAAA,GAAAC,KAAA,CAAC;MAAA,cACab,YAAA;MAAAR,SAAA,EACDY,EAA4C;MAAAU,MAAA,EAC/CR,EAAiB;MAAAS,OAAA,EAChBR,EAAiB;MAAAS,SAAA,EAAAC,KAAA;MAAAC,YAAA,EAMZR,EAAiB;MAAAS,YAAA,EACjBR,EAAiB;MAAAS,IAAA,EAC1B;MAAAC,QAAA;MAAAC,QAAA,GAGLC,IAAA,CAAAvC,QAAA,IAAC,GACDuC,IAAA,CAAApC,OAAA;QAAAqC,UAAA,EACa;QAAAhC,SAAA,EACA,GAAAJ,SAAA,WAAuB;QAAAqC,QAAA,EACzB;QAAAC,IAAA,EACHhC,OAAA;QAAA4B,QAAA,EAELtB;MAAA,C;;;;;;;;;SAtBLY,E;CA0BJ;AAlCK,SAAAK,MAAAU,CAAA;EAAA,IAcOA,CAAA,CAAAC,GAAA,KAAU;IACZD,CAAA,CAAAE,cAAA,CAAgB;EAAA;AAAA","ignoreList":[]}

package/dist/elements/MiniCarousel/index.css

@@ -1,21 +1,23 @@
 @layer payload-default {
   .mini-carousel {
+    --carousel-item-width: 48px;
+    --carousel-item-height: 48px;
+    --carousel-divider-height: 48px;
     display: flex;
-    flex-direction: column;
-    align-items: stretch;
+    flex-direction: row;
+    align-items: center;
     gap: var(--spacer-3);
     padding: var(--spacer-2-5);
-    height: 100%;
+    width: 100%;
+    height: auto;
     flex-shrink: 0;
-    overflow-y: auto;
+    overflow-x: auto;
+    overflow-y: hidden;
     background: var(--color-bg-secondary);
-    border-right: var(--stroke-width-small) solid var(--color-border);
-    /* Honor the scroll-driven height below instead of stretching to the flex line. */
-    align-self: flex-start;
-    /* Scroll-driven: grow to fill the gap as the header scrolls away. Falls back to static height. */
-    animation: mini-carousel-fill-scrolled-chrome linear both;
-    animation-timeline: scroll(root block);
-    animation-range: 0 calc(var(--app-header-height) + var(--doc-header-height));
+    border-top: var(--stroke-width-small) solid var(--color-border);
+    /* Stacked layout: no scroll-driven growth, fill via stretch instead. */
+    align-self: stretch;
+    animation: none;
   }
 
   @keyframes mini-carousel-fill-scrolled-chrome {
@@ -36,8 +38,8 @@
     background: var(--color-bg-secondary);
     cursor: pointer;
     overflow: hidden;
-    width: 48px;
-    height: 48px;
+    width: var(--carousel-item-width);
+    height: var(--carousel-item-height);
   }
 
   .mini-carousel__item img {
@@ -55,40 +57,40 @@
   }
 
   .mini-carousel__divider {
-    width: 100%;
-    height: var(--stroke-width-small);
+    width: var(--stroke-width-small);
+    height: var(--carousel-divider-height);
+    margin: 0 var(--spacer-2);
     background: var(--color-border);
     flex-shrink: 0;
   }
 
-  /* Stacked layout: disable scroll-driven growth and fill via stretch. */
-  @container edit-main (max-width: 1024px) {
+  @container edit-main (min-width: 768px) {
     .mini-carousel {
-      align-self: stretch;
-      height: auto;
-      animation: none;
+      flex-direction: column;
+      align-items: stretch;
+      width: auto;
+      overflow-x: visible;
+      overflow-y: auto;
+      border-top: none;
+      border-right: var(--stroke-width-small) solid var(--color-border);
     }
-  }
 
-  @container edit-main (max-width: 768px) {
-    .mini-carousel {
-      flex-direction: row;
-      align-items: center;
+    .mini-carousel__divider {
       width: 100%;
-      overflow-x: auto;
-      overflow-y: hidden;
-      border-right: 0;
-      border-top: var(--stroke-width-small) solid var(--color-border);
-    }
-
-    .mini-carousel__item {
-      width: 48px;
+      height: var(--stroke-width-small);
+      margin: 0;
     }
+  }
 
-    .mini-carousel__divider {
-      width: var(--stroke-width-small);
-      height: 48px;
-      margin: 0 var(--spacer-2);
+  @container edit-main (min-width: 1024px) {
+    .mini-carousel {
+      height: 100%;
+      /* Honor the scroll-driven height below instead of stretching to the flex line. */
+      align-self: flex-start;
+      /* Scroll-driven: grow to fill the gap as the header scrolls away. Falls back to static height. */
+      animation: mini-carousel-fill-scrolled-chrome linear both;
+      animation-timeline: scroll(root block);
+      animation-range: 0 calc(var(--app-header-height) + var(--doc-header-height));
     }
   }
 }

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

@@ -1,2 +1,6 @@
-export { Modal, useModal } from '@faceless-ui/modal';
+import type { ComponentProps } from 'react';
+import { Modal as FacelessModal } from '@faceless-ui/modal';
+import React from 'react';
+export { useModal } from '@faceless-ui/modal';
+export declare const Modal: React.FC<ComponentProps<typeof FacelessModal>>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,KAAK,IAAI,aAAa,EAAY,MAAM,oBAAoB,CAAA;AACrE,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CA2EhE,CAAA"}

package/dist/elements/Modal/index.js

@@ -1,4 +1,72 @@
 'use client';
 
-export { Modal, useModal } from '@faceless-ui/modal';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal as FacelessModal, useModal } from '@faceless-ui/modal';
+import React, { useEffect, useMemo } from 'react';
+export { useModal } from '@faceless-ui/modal';
+export const Modal = props => {
+  const {
+    id,
+    slug,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    focusTrapOptions,
+    trapFocus = true
+  } = props;
+  const modalID = id || slug;
+  const {
+    modalState
+  } = useModal();
+  const isOpen = Boolean(modalState[slug]?.isOpen);
+  const options = useMemo(() => ({
+    escapeDeactivates: false,
+    initialFocus: () => {
+      const modal = document.getElementById(modalID);
+      const heading = modal?.querySelector('h1, h2, h3, h4, h5, h6');
+      if (heading) {
+        heading.tabIndex = -1;
+      }
+      return heading ?? modal;
+    },
+    ...focusTrapOptions
+  }), [modalID, focusTrapOptions]);
+  useEffect(() => {
+    if (!isOpen || ariaLabel || ariaLabelledBy) {
+      return;
+    }
+    let hasFocusedTitle = false;
+    const updateTitle = () => {
+      const modal_0 = document.getElementById(modalID);
+      const heading_0 = modal_0?.querySelector('h1, h2, h3, h4, h5, h6');
+      if (modal_0 && heading_0) {
+        if (!heading_0.id) {
+          heading_0.id = `modal-title-${slug}`;
+        }
+        modal_0.setAttribute('aria-labelledby', heading_0.id);
+        modal_0.removeAttribute('aria-label');
+        if (!hasFocusedTitle && trapFocus && focusTrapOptions?.initialFocus === undefined && !modal_0.closest('[inert]') && (document.activeElement === modal_0 || document.activeElement === document.body)) {
+          heading_0.tabIndex = -1;
+          heading_0.focus({
+            preventScroll: true
+          });
+          hasFocusedTitle = document.activeElement === heading_0;
+        }
+      }
+    };
+    updateTitle();
+    const observer = new MutationObserver(updateTitle);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, [isOpen, modalID, slug, ariaLabel, ariaLabelledBy, trapFocus, focusTrapOptions?.initialFocus]);
+  return /*#__PURE__*/_jsx(FacelessModal, {
+    ...props,
+    "data-payload-modal-slug": slug,
+    focusTrapOptions: options,
+    id: modalID,
+    tabIndex: -1
+  });
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Modal","useModal"],"sources":["../../../src/elements/Modal/index.tsx"],"sourcesContent":["'use client'\nexport { Modal, useModal } from '@faceless-ui/modal'\n"],"mappings":"AAAA;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Modal","FacelessModal","useModal","React","useEffect","useMemo","props","id","slug","ariaLabel","ariaLabelledBy","focusTrapOptions","trapFocus","modalID","modalState","isOpen","Boolean","options","escapeDeactivates","initialFocus","modal","document","getElementById","heading","querySelector","tabIndex","hasFocusedTitle","updateTitle","setAttribute","removeAttribute","undefined","closest","activeElement","body","focus","preventScroll","observer","MutationObserver","observe","childList","subtree","disconnect","_jsx"],"sources":["../../../src/elements/Modal/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ComponentProps } from 'react'\n\nimport { Modal as FacelessModal, useModal } from '@faceless-ui/modal'\nimport React, { useEffect, useMemo } from 'react'\n\nexport { useModal } from '@faceless-ui/modal'\n\nexport const Modal: React.FC<ComponentProps<typeof FacelessModal>> = (props) => {\n  const {\n    id,\n    slug,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    focusTrapOptions,\n    trapFocus = true,\n  } = props\n  const modalID = id || slug\n  const { modalState } = useModal()\n  const isOpen = Boolean(modalState[slug]?.isOpen)\n  const options = useMemo(\n    () => ({\n      escapeDeactivates: false,\n      initialFocus: () => {\n        const modal = document.getElementById(modalID)\n        const heading = modal?.querySelector<HTMLElement>('h1, h2, h3, h4, h5, h6')\n\n        if (heading) {\n          heading.tabIndex = -1\n        }\n        return heading ?? modal\n      },\n      ...focusTrapOptions,\n    }),\n    [modalID, focusTrapOptions],\n  )\n\n  useEffect(() => {\n    if (!isOpen || ariaLabel || ariaLabelledBy) {\n      return\n    }\n\n    let hasFocusedTitle = false\n\n    const updateTitle = () => {\n      const modal = document.getElementById(modalID)\n      const heading = modal?.querySelector<HTMLElement>('h1, h2, h3, h4, h5, h6')\n\n      if (modal && heading) {\n        if (!heading.id) {\n          heading.id = `modal-title-${slug}`\n        }\n        modal.setAttribute('aria-labelledby', heading.id)\n        modal.removeAttribute('aria-label')\n        if (\n          !hasFocusedTitle &&\n          trapFocus &&\n          focusTrapOptions?.initialFocus === undefined &&\n          !modal.closest('[inert]') &&\n          (document.activeElement === modal || document.activeElement === document.body)\n        ) {\n          heading.tabIndex = -1\n          heading.focus({ preventScroll: true })\n          hasFocusedTitle = document.activeElement === heading\n        }\n      }\n    }\n\n    updateTitle()\n    const observer = new MutationObserver(updateTitle)\n    observer.observe(document.body, { childList: true, subtree: true })\n    return () => observer.disconnect()\n  }, [isOpen, modalID, slug, ariaLabel, ariaLabelledBy, trapFocus, focusTrapOptions?.initialFocus])\n\n  return (\n    <FacelessModal\n      {...props}\n      data-payload-modal-slug={slug}\n      focusTrapOptions={options}\n      id={modalID}\n      tabIndex={-1}\n    />\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,KAAA,IAASC,aAAa,EAAEC,QAAQ,QAAQ;AACjD,OAAOC,KAAA,IAASC,SAAS,EAAEC,OAAO,QAAQ;AAE1C,SAASH,QAAQ,QAAQ;AAEzB,OAAO,MAAMF,KAAA,GAAyDM,KAAA;EACpE,MAAM;IACJC,EAAE;IACFC,IAAI;IACJ,cAAcC,SAAS;IACvB,mBAAmBC,cAAc;IACjCC,gBAAgB;IAChBC,SAAA,GAAY;EAAI,CACjB,GAAGN,KAAA;EACJ,MAAMO,OAAA,GAAUN,EAAA,IAAMC,IAAA;EACtB,MAAM;IAAEM;EAAU,CAAE,GAAGZ,QAAA;EACvB,MAAMa,MAAA,GAASC,OAAA,CAAQF,UAAU,CAACN,IAAA,CAAK,EAAEO,MAAA;EACzC,MAAME,OAAA,GAAUZ,OAAA,CACd,OAAO;IACLa,iBAAA,EAAmB;IACnBC,YAAA,EAAcA,CAAA;MACZ,MAAMC,KAAA,GAAQC,QAAA,CAASC,cAAc,CAACT,OAAA;MACtC,MAAMU,OAAA,GAAUH,KAAA,EAAOI,aAAA,CAA2B;MAElD,IAAID,OAAA,EAAS;QACXA,OAAA,CAAQE,QAAQ,GAAG,CAAC;MACtB;MACA,OAAOF,OAAA,IAAWH,KAAA;IACpB;IACA,GAAGT;EACL,IACA,CAACE,OAAA,EAASF,gBAAA,CAAiB;EAG7BP,SAAA,CAAU;IACR,IAAI,CAACW,MAAA,IAAUN,SAAA,IAAaC,cAAA,EAAgB;MAC1C;IACF;IAEA,IAAIgB,eAAA,GAAkB;IAEtB,MAAMC,WAAA,GAAcA,CAAA;MAClB,MAAMP,OAAA,GAAQC,QAAA,CAASC,cAAc,CAACT,OAAA;MACtC,MAAMU,SAAA,GAAUH,OAAA,EAAOI,aAAA,CAA2B;MAElD,IAAIJ,OAAA,IAASG,SAAA,EAAS;QACpB,IAAI,CAACA,SAAA,CAAQhB,EAAE,EAAE;UACfgB,SAAA,CAAQhB,EAAE,GAAG,eAAeC,IAAA,EAAM;QACpC;QACAY,OAAA,CAAMQ,YAAY,CAAC,mBAAmBL,SAAA,CAAQhB,EAAE;QAChDa,OAAA,CAAMS,eAAe,CAAC;QACtB,IACE,CAACH,eAAA,IACDd,SAAA,IACAD,gBAAA,EAAkBQ,YAAA,KAAiBW,SAAA,IACnC,CAACV,OAAA,CAAMW,OAAO,CAAC,eACdV,QAAA,CAASW,aAAa,KAAKZ,OAAA,IAASC,QAAA,CAASW,aAAa,KAAKX,QAAA,CAASY,IAAI,CAAD,EAC5E;UACAV,SAAA,CAAQE,QAAQ,GAAG,CAAC;UACpBF,SAAA,CAAQW,KAAK,CAAC;YAAEC,aAAA,EAAe;UAAK;UACpCT,eAAA,GAAkBL,QAAA,CAASW,aAAa,KAAKT,SAAA;QAC/C;MACF;IACF;IAEAI,WAAA;IACA,MAAMS,QAAA,GAAW,IAAIC,gBAAA,CAAiBV,WAAA;IACtCS,QAAA,CAASE,OAAO,CAACjB,QAAA,CAASY,IAAI,EAAE;MAAEM,SAAA,EAAW;MAAMC,OAAA,EAAS;IAAK;IACjE,OAAO,MAAMJ,QAAA,CAASK,UAAU;EAClC,GAAG,CAAC1B,MAAA,EAAQF,OAAA,EAASL,IAAA,EAAMC,SAAA,EAAWC,cAAA,EAAgBE,SAAA,EAAWD,gBAAA,EAAkBQ,YAAA,CAAa;EAEhG,oBACEuB,IAAA,CAACzC,aAAA;IACE,GAAGK,KAAK;IACT,2BAAyBE,IAAA;IACzBG,gBAAA,EAAkBM,OAAA;IAClBV,EAAA,EAAIM,OAAA;IACJY,QAAA,EAAU,CAAC;;AAGjB","ignoreList":[]}

package/dist/elements/Nav/NavSidebarToggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavSidebarToggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAeA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavSidebarToggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAkBA,CAAA"}