@payloadcms/ui 3.0.0-canary.518fabe → 3.0.0-canary.51be7be

package/dist/elements/Loading/index.scss

@@ -1,136 +1,138 @@
 @import '../../scss/styles';
 
-.loading-overlay {
-  isolation: isolate;
-  height: 100%;
-  width: 100%;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  pointer-events: none;
-  z-index: calc(var(--z-status) + 1);
-  transition-property: left, width;
-  transition: 250ms ease;
-
-  &.loading-overlay--entering {
-    opacity: 1;
-    animation: fade-in ease;
-    pointer-events: all;
-  }
-
-  &.loading-overlay--exiting {
-    opacity: 0;
-    animation: fade-out ease;
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
+@layer payload-default {
+  .loading-overlay {
+    isolation: isolate;
     height: 100%;
-    background-color: var(--theme-elevation-0);
-    opacity: 0.85;
-    z-index: -1;
-  }
-
-  &__bars {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    gap: 7px;
+    width: 100%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    position: fixed;
+    display: flex;
     align-items: center;
-  }
-
-  &__bar {
-    width: 2px;
-    background-color: currentColor;
-    height: 15px;
-
-    &:nth-child(1) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
+    justify-content: center;
+    flex-direction: column;
+    pointer-events: none;
+    z-index: calc(var(--z-status) + 1);
+    transition-property: left, width;
+    transition: 250ms ease;
+
+    &.loading-overlay--entering {
+      opacity: 1;
+      animation: fade-in ease;
+      pointer-events: all;
     }
 
-    &:nth-child(2) {
-      transform: translateY(-2px);
-      animation: animate-bar--even 1.25s infinite;
+    &.loading-overlay--exiting {
+      opacity: 0;
+      animation: fade-out ease;
     }
 
-    &:nth-child(3) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--theme-elevation-0);
+      opacity: 0.85;
+      z-index: -1;
     }
 
-    &:nth-child(4) {
-      transform: translateY(-2px);
-      animation: animate-bar--even 1.25s infinite;
+    &__bars {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+      gap: 7px;
+      align-items: center;
     }
 
-    &:nth-child(5) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
+    &__bar {
+      width: 2px;
+      background-color: currentColor;
+      height: 15px;
+
+      &:nth-child(1) {
+        transform: translateY(0);
+        animation: animate-bar--odd 1.25s infinite;
+      }
+
+      &:nth-child(2) {
+        transform: translateY(-2px);
+        animation: animate-bar--even 1.25s infinite;
+      }
+
+      &:nth-child(3) {
+        transform: translateY(0);
+        animation: animate-bar--odd 1.25s infinite;
+      }
+
+      &:nth-child(4) {
+        transform: translateY(-2px);
+        animation: animate-bar--even 1.25s infinite;
+      }
+
+      &:nth-child(5) {
+        transform: translateY(0);
+        animation: animate-bar--odd 1.25s infinite;
+      }
     }
-  }
 
-  &__text {
-    margin-top: base(0.75);
-    text-transform: uppercase;
-    font-family: var(--font-body);
-    font-size: base(0.65);
-    letter-spacing: 3px;
+    &__text {
+      margin-top: base(0.75);
+      text-transform: uppercase;
+      font-family: var(--font-body);
+      font-size: base(0.65);
+      letter-spacing: 3px;
+    }
   }
-}
 
-@keyframes animate-bar--even {
-  0% {
-    transform: translateY(2px);
-  }
+  @keyframes animate-bar--even {
+    0% {
+      transform: translateY(2px);
+    }
 
-  50% {
-    transform: translateY(-2px);
-  }
+    50% {
+      transform: translateY(-2px);
+    }
 
-  100% {
-    transform: translateY(2px);
+    100% {
+      transform: translateY(2px);
+    }
   }
-}
 
-@keyframes animate-bar--odd {
-  0% {
-    transform: translateY(-2px);
-  }
+  @keyframes animate-bar--odd {
+    0% {
+      transform: translateY(-2px);
+    }
 
-  50% {
-    transform: translateY(2px);
-  }
+    50% {
+      transform: translateY(2px);
+    }
 
-  100% {
-    transform: translateY(-2px);
+    100% {
+      transform: translateY(-2px);
+    }
   }
-}
 
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
 
-  100% {
-    opacity: 1;
+    100% {
+      opacity: 1;
+    }
   }
-}
 
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
 
-  100% {
-    opacity: 0;
+    100% {
+      opacity: 0;
+    }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAiBA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAmBA,CAAA"}

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

@@ -47,11 +47,15 @@ export const LocalizerLabel = props => {
       children: [_jsxs("div", {
         className: `${baseClass}__label`,
         children: [t3, "\xA0"]
-      }), _jsx("span", {
-        className: `${baseClass}__current-label`,
-        children: `${getTranslation(locale.label, i18n)}`
-      }), _jsx(ChevronIcon, {
-        className: `${baseClass}__chevron`
+      }), _jsxs("div", {
+        className: `${baseClass}__current`,
+        children: [_jsx("span", {
+          className: `${baseClass}__current-label`,
+          children: `${getTranslation(locale.label, i18n)}`
+        }), _jsx(ChevronIcon, {
+          className: `${baseClass}__chevron`,
+          size: "small"
+        })]
       })]
     });
     $[5] = t3;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","ChevronIcon","useLocale","useTranslation","baseClass","LocalizerLabel","props","$","ariaLabel","className","locale","i18n","t","t0","t1","filter","Boolean","t2","join","t3","t4","label","_jsxs","children","_jsx"],"sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'localizer-button'\n\nexport const LocalizerLabel: React.FC<{\n  ariaLabel?: string\n  className?: string\n}> = (props) => {\n  const { ariaLabel, className } = props\n  const locale = useLocale()\n  const { i18n, t } = useTranslation()\n\n  return (\n    <div\n      aria-label={ariaLabel || t('general:locale')}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n    >\n      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}&nbsp;</div>\n      <span className={`${baseClass}__current-label`}>\n        {`${getTranslation(locale.label, i18n)}`}\n      </span>\n      <ChevronIcon className={`${baseClass}__chevron`} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAGRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU,SAAA;IAAAC;EAAA,IAAiCH,KAAA;EACjC,MAAAI,MAAA,GAAeR,SAAA;EACf;IAAAS,IAAA;IAAAC;EAAA,IAAoBT,cAAA;EAAA,IAAAU,EAAA;EAAA,IAAAN,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAK,CAAA;IAIJC,EAAA,GAAAL,SAAA,IAAaI,CAAA,CAAE;IAAAL,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAK,CAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAAA,IAAAO,EAAA;EAAA,IAAAP,CAAA,QAAAE,SAAA;IAChBK,EAAA,IAAAV,SAAA,EAAYK,SAAA,EAAAM,MAAA,CAAAC,OAAkB;IAAAT,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAA9B,MAAAU,EAAA,GAAAH,EAA8B,CAAAI,IAAA,CAAc;EAEf,MAAAC,EAAA,MAAGP,CAAA,CAAE,oBAAoB;EAAA,IAAAQ,EAAA;EAAA,IAAAb,CAAA,QAAAY,EAAA,IAAAZ,CAAA,QAAAG,MAAA,CAAAW,KAAA,IAAAd,CAAA,QAAAI,IAAA,IAAAJ,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAU,EAAA;IAJnEG,EAAA,GAAAE,KAAA,CAAC;MAAA,cACaT,EAAe;MAAAJ,SAAA,EAChBQ,EAA4C;MAAAM,QAAA,GAEvDD,KAAA,CAAC;QAAAb,SAAA,EAAe,GAAAL,SAAA,SAAqB;QAAAmB,QAAA,GAAGJ,EAAyB,EAAC;MAAA,C,GAClEK,IAAA,CAAC;QAAAf,SAAA,EAAgB,GAAAL,SAAA,iBAA6B;QAAAmB,QAAA,EAC3C,GAAGxB,cAAA,CAAeW,MAAA,CAAAW,KAAA,EAAcV,IAAA;MAAO,C,GAE1Ca,IAAA,CAAAvB,WAAA;QAAAQ,SAAA,EAAwB,GAAAL,SAAA;MAAuB,C;;;;;;;;;;;SARjDgB,E;CAWJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","ChevronIcon","useLocale","useTranslation","baseClass","LocalizerLabel","props","$","ariaLabel","className","locale","i18n","t","t0","t1","filter","Boolean","t2","join","t3","t4","label","_jsxs","children","_jsx","size"],"sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'localizer-button'\n\nexport const LocalizerLabel: React.FC<{\n  ariaLabel?: string\n  className?: string\n}> = (props) => {\n  const { ariaLabel, className } = props\n  const locale = useLocale()\n  const { i18n, t } = useTranslation()\n\n  return (\n    <div\n      aria-label={ariaLabel || t('general:locale')}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n    >\n      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}&nbsp;</div>\n      <div className={`${baseClass}__current`}>\n        <span className={`${baseClass}__current-label`}>\n          {`${getTranslation(locale.label, i18n)}`}\n        </span>\n        <ChevronIcon className={`${baseClass}__chevron`} size=\"small\" />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAGRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU,SAAA;IAAAC;EAAA,IAAiCH,KAAA;EACjC,MAAAI,MAAA,GAAeR,SAAA;EACf;IAAAS,IAAA;IAAAC;EAAA,IAAoBT,cAAA;EAAA,IAAAU,EAAA;EAAA,IAAAN,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAK,CAAA;IAIJC,EAAA,GAAAL,SAAA,IAAaI,CAAA,CAAE;IAAAL,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAK,CAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAAA,IAAAO,EAAA;EAAA,IAAAP,CAAA,QAAAE,SAAA;IAChBK,EAAA,IAAAV,SAAA,EAAYK,SAAA,EAAAM,MAAA,CAAAC,OAAkB;IAAAT,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAA9B,MAAAU,EAAA,GAAAH,EAA8B,CAAAI,IAAA,CAAc;EAEf,MAAAC,EAAA,MAAGP,CAAA,CAAE,oBAAoB;EAAA,IAAAQ,EAAA;EAAA,IAAAb,CAAA,QAAAY,EAAA,IAAAZ,CAAA,QAAAG,MAAA,CAAAW,KAAA,IAAAd,CAAA,QAAAI,IAAA,IAAAJ,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAU,EAAA;IAJnEG,EAAA,GAAAE,KAAA,CAAC;MAAA,cACaT,EAAe;MAAAJ,SAAA,EAChBQ,EAA4C;MAAAM,QAAA,GAEvDD,KAAA,CAAC;QAAAb,SAAA,EAAe,GAAAL,SAAA,SAAqB;QAAAmB,QAAA,GAAGJ,EAAyB,EAAC;MAAA,C,GAClEG,KAAA,CAAC;QAAAb,SAAA,EAAe,GAAAL,SAAA,WAAuB;QAAAmB,QAAA,GACrCC,IAAA,CAAC;UAAAf,SAAA,EAAgB,GAAAL,SAAA,iBAA6B;UAAAmB,QAAA,EAC3C,GAAGxB,cAAA,CAAeW,MAAA,CAAAW,KAAA,EAAcV,IAAA;QAAO,C,GAE1Ca,IAAA,CAAAvB,WAAA;UAAAQ,SAAA,EAAwB,GAAAL,SAAA,WAAuB;UAAAqB,IAAA,EAAO;QAAA,C;;;;;;;;;;;;SAT1DL,E;CAaJ","ignoreList":[]}

package/dist/elements/Localizer/LocalizerLabel/index.scss

@@ -1,51 +1,57 @@
 @import '../../../scss/styles.scss';
 
-.localizer-button {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  display: flex;
-  padding-inline-start: base(0.4);
-  padding-inline-end: base(0.1);
-  gap: 0;
-  background-color: var(--theme-elevation-100);
-  border-radius: var(--style-radius-s);
-
-  &__label {
-    color: var(--theme-elevation-500);
-  }
+@layer payload-default {
+  .localizer-button {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    display: flex;
+    padding-inline-start: base(0.4);
+    padding-inline-end: base(0.4);
+    background-color: var(--theme-elevation-100);
+    border-radius: var(--style-radius-s);
 
-  &__chevron {
-    padding: base(0.1);
-    .stroke {
-      stroke: currentColor;
+    &__label {
+      color: var(--theme-elevation-500);
     }
-  }
 
-  button {
-    color: currentColor;
-    padding: 0;
-    font-size: 1rem;
-    line-height: base(1);
-    background: transparent;
-    border: 0;
-    font-weight: 600;
-    cursor: pointer;
-
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
+    &__chevron {
+      .stroke {
+        stroke: currentColor;
+      }
     }
 
-    &:active,
-    &:focus {
-      outline: none;
+    &__current {
+      display: flex;
+      align-items: center;
+      gap: base(0.3);
     }
-  }
 
-  @include small-break {
-    &__label {
-      display: none;
+    button {
+      color: currentColor;
+      padding: 0;
+      font-size: 1rem;
+      line-height: base(1);
+      background: transparent;
+      border: 0;
+      font-weight: 600;
+      cursor: pointer;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+
+      &:active,
+      &:focus {
+        outline: none;
+      }
+    }
+
+    @include small-break {
+      &__label {
+        display: none;
+      }
     }
   }
 }

package/dist/elements/Localizer/index.scss

@@ -1,8 +1,10 @@
 @import '../../scss/styles.scss';
 
-.localizer {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
+@layer payload-default {
+  .localizer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
 }

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

@@ -0,0 +1,8 @@
+import type { ClientUser } from 'payload';
+import React from 'react';
+import './index.scss';
+export declare const Locked: React.FC<{
+    className?: string;
+    user: ClientUser;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Locked/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAwBrE,CAAA"}

package/dist/elements/Locked/index.js

@@ -0,0 +1,72 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { useTableCell } from '../../elements/Table/TableCellProvider/index.js';
+import { LockIcon } from '../../icons/Lock/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import './index.scss';
+const baseClass = 'locked';
+export const Locked = t0 => {
+  const $ = _c(8);
+  const {
+    className,
+    user
+  } = t0;
+  const {
+    rowData
+  } = useTableCell();
+  const [hovered, setHovered] = useState(false);
+  const {
+    t
+  } = useTranslation();
+  const userToUse = user ? user?.email ?? user?.id : rowData?.id;
+  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(true);
+    t4 = () => setHovered(false);
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t3 = $[2];
+    t4 = $[3];
+  }
+  const t5 = `${userToUse} ${t("general:isEditing")}`;
+  let t6;
+  if ($[4] !== hovered || $[5] !== t5 || $[6] !== t2) {
+    t6 = _jsxs("div", {
+      className: t2,
+      onMouseEnter: t3,
+      onMouseLeave: t4,
+      role: "button",
+      tabIndex: 0,
+      children: [_jsx(Tooltip, {
+        alignCaret: "left",
+        className: `${baseClass}__tooltip`,
+        position: "top",
+        show: hovered,
+        children: t5
+      }), _jsx(LockIcon, {})]
+    });
+    $[4] = hovered;
+    $[5] = t5;
+    $[6] = t2;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  return t6;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useState","useTableCell","LockIcon","useTranslation","Tooltip","baseClass","Locked","t0","$","className","user","rowData","hovered","setHovered","t","userToUse","email","id","t1","filter","Boolean","t2","join","t3","t4","Symbol","for","t5","t6","_jsxs","onMouseEnter","onMouseLeave","role","tabIndex","children","_jsx","alignCaret","position","show"],"sources":["../../../src/elements/Locked/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientUser } from 'payload'\n\nimport React, { useState } from 'react'\n\nimport { useTableCell } from '../../elements/Table/TableCellProvider/index.js'\nimport { LockIcon } from '../../icons/Lock/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'locked'\n\nexport const Locked: React.FC<{ className?: string; user: ClientUser }> = ({ className, user }) => {\n  const { rowData } = useTableCell()\n  const [hovered, setHovered] = useState(false)\n  const { t } = useTranslation()\n\n  const userToUse = user ? (user?.email ?? user?.id) : rowData?.id\n\n  return (\n    <div\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <Tooltip\n        alignCaret=\"left\"\n        className={`${baseClass}__tooltip`}\n        position=\"top\"\n        show={hovered}\n      >{`${userToUse} ${t('general:isEditing')}`}</Tooltip>\n      <LockIcon />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,YAAY,QAAQ;AAC7B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAA6DC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,SAAA;IAAAC;EAAA,IAAAH,EAAmB;EAC5F;IAAAI;EAAA,IAAoBV,YAAA;EACpB,OAAAW,OAAA,EAAAC,UAAA,IAA8Bb,QAAA,MAAS;EACvC;IAAAc;EAAA,IAAcX,cAAA;EAEd,MAAAY,SAAA,GAAkBL,IAAA,GAAQA,IAAA,EAAAM,KAAA,IAAeN,IAAA,EAAAO,EAAM,GAAMN,OAAA,EAAAM,EAAS;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAC,SAAA;IAI/CS,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;IACzCH,EAAA,GAAAA,CAAA,KAAMV,UAAA,KAAW;IACjBW,EAAA,GAAAA,CAAA,KAAMX,UAAA,MAAW;IAAAL,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAD,EAAA,GAAAf,CAAA;IAAAgB,EAAA,GAAAhB,CAAA;EAAA;EAS7B,MAAAmB,EAAA,MAAGZ,SAAA,IAAaD,CAAA,CAAE,sBAAsB;EAAA,IAAAc,EAAA;EAAA,IAAApB,CAAA,QAAAI,OAAA,IAAAJ,CAAA,QAAAmB,EAAA,IAAAnB,CAAA,QAAAa,EAAA;IAZ5CO,EAAA,GAAAC,KAAA,CAAC;MAAApB,SAAA,EACYY,EAA4C;MAAAS,YAAA,EACzCP,EAAiB;MAAAQ,YAAA,EACjBP,EAAiB;MAAAQ,IAAA,EAC1B;MAAAC,QAAA;MAAAC,QAAA,GAGLC,IAAA,CAAA/B,OAAA;QAAAgC,UAAA,EACa;QAAA3B,SAAA,EACA,GAAAJ,SAAA,WAAuB;QAAAgC,QAAA,EACzB;QAAAC,IAAA,EACH1B,OAAA;QAAAsB,QAAA,EACNP;MAAwC,C,GAC1CQ,IAAA,CAAAjC,QAAA,IAAC;IAAA,C;;;;;;;;SAbH0B,E;CAgBJ","ignoreList":[]}

package/dist/elements/Locked/index.scss

@@ -0,0 +1,16 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .locked {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: all;
+
+    &__tooltip {
+      left: 0;
+      transform: translate3d(-0%, calc(var(--caret-size) * -1), 0);
+    }
+  }
+}

package/dist/elements/Nav/NavToggler/index.scss

@@ -1,10 +1,12 @@
 @import '../../../scss/styles.scss';
 
-.nav-toggler {
-  position: relative;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  cursor: pointer;
+@layer payload-default {
+  .nav-toggler {
+    position: relative;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    cursor: pointer;
+  }
 }

package/dist/elements/NavGroup/index.scss

@@ -1,56 +1,58 @@
 @import '../../scss/styles.scss';
 
-.nav-group {
-  width: 100%;
-  margin-bottom: base(0.5);
-
-  &__toggle {
-    cursor: pointer;
-    color: var(--theme-elevation-400);
-    background: transparent;
-    padding-left: 0;
-    border: 0;
-    margin-bottom: base(0.25);
+@layer payload-default {
+  .nav-group {
     width: 100%;
-    text-align: left;
-    display: flex;
-    align-items: flex-start;
-    padding: 0;
-    gap: base(0.5);
-    justify-content: space-between;
-
-    svg {
-      flex-shrink: 0;
-      margin-top: base(-0.2);
-    }
+    margin-bottom: base(0.5);
+
+    &__toggle {
+      cursor: pointer;
+      color: var(--theme-elevation-400);
+      background: transparent;
+      padding-left: 0;
+      border: 0;
+      margin-bottom: base(0.25);
+      width: 100%;
+      text-align: left;
+      display: flex;
+      align-items: flex-start;
+      padding: 0;
+      gap: base(0.5);
+      justify-content: space-between;
+
+      svg {
+        flex-shrink: 0;
+        margin-top: base(-0.2);
+      }
 
-    &:hover,
-    &:focus-visible {
-      color: var(--theme-elevation-1000);
+      &:hover,
+      &:focus-visible {
+        color: var(--theme-elevation-1000);
 
-      .stroke {
-        stroke: var(--theme-elevation-1000);
+        .stroke {
+          stroke: var(--theme-elevation-1000);
+        }
       }
-    }
 
-    &:focus-visible {
-      outline: none;
+      &:focus-visible {
+        outline: none;
+      }
     }
-  }
 
-  &__indicator {
-    position: relative;
-    flex-shrink: 0;
+    &__indicator {
+      position: relative;
+      flex-shrink: 0;
 
-    svg .stroke {
-      stroke: var(--theme-elevation-200);
+      svg .stroke {
+        stroke: var(--theme-elevation-200);
+      }
     }
-  }
 
-  &--collapsed {
-    .collapsible__toggle {
-      border-bottom-right-radius: $style-radius-m;
-      border-bottom-left-radius: $style-radius-m;
+    &--collapsed {
+      .collapsible__toggle {
+        border-bottom-right-radius: $style-radius-m;
+        border-bottom-left-radius: $style-radius-m;
+      }
     }
   }
 }