@payloadcms/ui 3.86.0-internal.ac46214 → 4.0.0-canary.1

package/dist/elements/AppHeader/index.css

@@ -0,0 +1,185 @@
+@layer payload-default {
+  .app-header {
+    position: relative;
+    width: 100%;
+    z-index: var(--z-modal);
+  }
+
+  .app-header__mobile-nav-toggler {
+    display: none;
+  }
+
+  .app-header__localizer.localizer {
+    flex-shrink: 0;
+  }
+
+  .app-header__content {
+    display: flex;
+    align-items: center;
+    padding: var(--spacer-2-5) var(--gutter-h);
+    gap: var(--spacer-2-5);
+    position: relative;
+    flex-grow: 1;
+  }
+
+  .app-header__wrapper {
+    display: flex;
+    gap: var(--spacer-2);
+    align-items: center;
+    flex-grow: 1;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .app-header__account {
+    position: relative;
+    flex-shrink: 0;
+
+    &:focus:not(:focus-visible) {
+      opacity: 1;
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      &::after {
+        content: '';
+        outline: none;
+        border: var(--accessibility-outline);
+        border-radius: var(--button-radius);
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+      }
+    }
+  }
+
+  .app-header__step-nav-wrapper {
+    display: flex;
+    margin-right: auto;
+    margin-left: calc(-1 * var(--spacer-1));
+    flex-grow: 0;
+    gap: var(--spacer-1);
+    width: 100%;
+  }
+
+  .app-header__controls-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .app-header__sidebar-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    background: transparent;
+    border: var(--stroke-width-small) solid transparent;
+    border-radius: var(--button-radius);
+    cursor: pointer;
+    color: var(--color-icon);
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--color-bg-transparent-hover);
+    }
+
+    &:focus-visible {
+      outline: none;
+      border-color: var(--color-border-selected);
+    }
+  }
+
+  .app-header__actions-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2-5);
+  }
+
+  .app-header__gradient-placeholder {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: var(--spacer-3);
+    height: var(--spacer-3);
+    background: linear-gradient(to right, transparent, var(--color-bg));
+  }
+
+  .app-header__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+    max-width: 600px;
+    white-space: nowrap;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .app-header__last-action {
+    margin-right: var(--spacer-3);
+  }
+
+  @media (max-width: 1440px) {
+    .app-header__actions {
+      max-width: 500px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .app-header__gradient-placeholder {
+      right: var(--spacer-3);
+    }
+
+    .app-header__actions {
+      max-width: 300px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .app-header__content {
+      padding: var(--spacer-2-5);
+    }
+
+    .app-header__controls-wrapper {
+      flex-wrap: wrap;
+    }
+
+    .app-header__step-nav-wrapper {
+      width: unset;
+    }
+
+    .app-header--nav-open .app-header__localizer {
+      display: none;
+    }
+
+    .app-header__mobile-nav-toggler {
+      display: flex;
+      align-items: center;
+    }
+
+    .app-header__mobile-nav-toggler.nav-toggler--is-open {
+      opacity: 0.5;
+    }
+
+    .app-header__gradient-placeholder {
+      right: 0;
+    }
+
+    .app-header__actions {
+      max-width: 150px;
+      margin-right: 0;
+    }
+  }
+}

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 type Props = {
     CustomAvatar?: React.ReactNode;
-    CustomIcon?: React.ReactNode;
+    settingsItems?: React.ReactNode[];
 };
-export declare function AppHeader({ CustomAvatar, CustomIcon }: Props): React.JSX.Element;
+export declare function AppHeader({ CustomAvatar, settingsItems }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AppHeader/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAc1D,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,CAAA;AACD,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,KAAK,qBAuF5D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AppHeader/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAe1D,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CAClC,CAAA;AACD,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,EAAE,KAAK,qBAkG/D"}

package/dist/elements/AppHeader/index.js

@@ -1,49 +1,42 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatAdminURL } from 'payload/shared';
 import React, { useEffect, useRef, useState } from 'react';
-import { Account } from '../../graphics/Account/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { LanguageIcon } from '../../icons/Language/index.js';
+import { SidebarIcon } from '../../icons/Sidebar/index.js';
 import { useActions } from '../../providers/Actions/index.js';
 import { useConfig } from '../../providers/Config/index.js';
+import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { Hamburger } from '../Hamburger/index.js';
-import { Link } from '../Link/index.js';
+import { Button } from '../Button/index.js';
 import { Localizer } from '../Localizer/index.js';
-import { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js';
 import { useNav } from '../Nav/context.js';
 import { NavToggler } from '../Nav/NavToggler/index.js';
-import { RenderCustomComponent } from '../RenderCustomComponent/index.js';
 import { StepNav } from '../StepNav/index.js';
-import './index.scss';
+import { UserMenu } from '../UserMenu/index.js';
+import './index.css';
 const baseClass = 'app-header';
 export function AppHeader({
   CustomAvatar,
-  CustomIcon
+  settingsItems
 }) {
   const {
     t
   } = useTranslation();
+  const locale = useLocale();
   const {
     Actions
   } = useActions();
+  const {
+    navOpen,
+    setNavOpen
+  } = useNav();
   const {
     config: {
-      admin: {
-        routes: {
-          account: accountRoute
-        }
-      },
-      localization,
-      routes: {
-        admin: adminRoute
-      },
-      serverURL
+      localization
     }
   } = useConfig();
-  const {
-    navOpen
-  } = useNav();
   const customControlsRef = useRef(null);
   const [isScrollable, setIsScrollable] = useState(false);
   useEffect(() => {
@@ -61,26 +54,32 @@ export function AppHeader({
     };
   }, [Actions]);
   const ActionComponents = Actions ? Object.values(Actions) : [];
-  return /*#__PURE__*/_jsxs("header", {
+  return /*#__PURE__*/_jsx("header", {
     className: [baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' '),
-    children: [/*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__bg`
-    }), /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx("div", {
       className: `${baseClass}__content`,
       children: /*#__PURE__*/_jsxs("div", {
         className: `${baseClass}__wrapper`,
         children: [/*#__PURE__*/_jsx(NavToggler, {
           className: `${baseClass}__mobile-nav-toggler`,
-          tabIndex: -1,
-          children: /*#__PURE__*/_jsx(Hamburger, {})
+          tabIndex: -1
         }), /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__controls-wrapper`,
-          children: [/*#__PURE__*/_jsx("div", {
+          children: [/*#__PURE__*/_jsxs("div", {
             className: `${baseClass}__step-nav-wrapper`,
-            children: /*#__PURE__*/_jsx(StepNav, {
-              className: `${baseClass}__step-nav`,
-              CustomIcon: CustomIcon
-            })
+            children: [/*#__PURE__*/_jsx(Button, {
+              "aria-label": `${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`,
+              buttonStyle: "ghost",
+              className: `${baseClass}__sidebar-toggle`,
+              icon: /*#__PURE__*/_jsx(SidebarIcon, {}),
+              onClick: () => setNavOpen(!navOpen),
+              type: "button"
+            }), /*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__step-nav-wrapper`,
+              children: /*#__PURE__*/_jsx(StepNav, {
+                className: `${baseClass}__step-nav`
+              })
+            })]
           }), /*#__PURE__*/_jsxs("div", {
             className: `${baseClass}__actions-wrapper`,
             children: [/*#__PURE__*/_jsx("div", {
@@ -93,28 +92,44 @@ export function AppHeader({
             }), isScrollable && /*#__PURE__*/_jsx("div", {
               className: `${baseClass}__gradient-placeholder`
             })]
-          }), localization && /*#__PURE__*/_jsx(LocalizerLabel, {
-            ariaLabel: "invisible",
-            className: `${baseClass}__localizer-spacing`
-          }), /*#__PURE__*/_jsx(Link, {
-            "aria-label": t('authentication:account'),
-            className: `${baseClass}__account`,
-            href: formatAdminURL({
-              adminRoute,
-              path: accountRoute
-            }),
-            prefetch: false,
-            tabIndex: 0,
-            children: /*#__PURE__*/_jsx(RenderCustomComponent, {
-              CustomComponent: CustomAvatar,
-              Fallback: /*#__PURE__*/_jsx(Account, {})
+          }), localization && /*#__PURE__*/_jsx(Localizer, {
+            className: `${baseClass}__localizer`,
+            renderButton: ({
+              active,
+              onClick,
+              onKeyDown,
+              ...ariaProps
+            }) => /*#__PURE__*/_jsx(Button, {
+              "aria-label": t('general:locale'),
+              buttonStyle: "secondary",
+              extraButtonProps: {
+                onKeyDown,
+                style: {
+                  padding: '0 var(--spacer-1) 0 0'
+                }
+              },
+              icon: /*#__PURE__*/_jsx(LanguageIcon, {
+                size: 24
+              }),
+              iconPosition: "left",
+              onClick: onClick,
+              selected: active,
+              ...ariaProps,
+              children: /*#__PURE__*/_jsxs("div", {
+                className: "localizer__button-content",
+                children: [locale.code, /*#__PURE__*/_jsx(ChevronIcon, {
+                  direction: active ? 'up' : 'down',
+                  size: 16
+                })]
+              })
             })
+          }), /*#__PURE__*/_jsx(UserMenu, {
+            CustomAvatar: CustomAvatar,
+            settingsItems: settingsItems
           })]
         })]
       })
-    }), /*#__PURE__*/_jsx(Localizer, {
-      className: `${baseClass}__localizer`
-    })]
+    })
   });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["formatAdminURL","React","useEffect","useRef","useState","Account","useActions","useConfig","useTranslation","Hamburger","Link","Localizer","LocalizerLabel","useNav","NavToggler","RenderCustomComponent","StepNav","baseClass","AppHeader","CustomAvatar","CustomIcon","t","Actions","config","admin","routes","account","accountRoute","localization","adminRoute","serverURL","navOpen","customControlsRef","isScrollable","setIsScrollable","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","ActionComponents","Object","values","_jsxs","className","filter","Boolean","join","_jsx","tabIndex","ref","map","Action","i","length","ariaLabel","href","path","prefetch","CustomComponent","Fallback"],"sources":["../../../src/elements/AppHeader/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { Account } from '../../graphics/Account/index.js'\nimport { useActions } from '../../providers/Actions/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Hamburger } from '../Hamburger/index.js'\nimport { Link } from '../Link/index.js'\nimport { Localizer } from '../Localizer/index.js'\nimport { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js'\nimport { useNav } from '../Nav/context.js'\nimport { NavToggler } from '../Nav/NavToggler/index.js'\nimport { RenderCustomComponent } from '../RenderCustomComponent/index.js'\nimport { StepNav } from '../StepNav/index.js'\nimport './index.scss'\n\nconst baseClass = 'app-header'\n\ntype Props = {\n  CustomAvatar?: React.ReactNode\n  CustomIcon?: React.ReactNode\n}\nexport function AppHeader({ CustomAvatar, CustomIcon }: Props) {\n  const { t } = useTranslation()\n\n  const { Actions } = useActions()\n\n  const {\n    config: {\n      admin: {\n        routes: { account: accountRoute },\n      },\n      localization,\n      routes: { admin: adminRoute },\n      serverURL,\n    },\n  } = useConfig()\n\n  const { navOpen } = useNav()\n\n  const customControlsRef = useRef<HTMLDivElement>(null)\n  const [isScrollable, setIsScrollable] = useState(false)\n\n  useEffect(() => {\n    const checkIsScrollable = () => {\n      const el = customControlsRef.current\n      if (el) {\n        const scrollable = el.scrollWidth > el.clientWidth\n        setIsScrollable(scrollable)\n      }\n    }\n\n    checkIsScrollable()\n    window.addEventListener('resize', checkIsScrollable)\n\n    return () => {\n      window.removeEventListener('resize', checkIsScrollable)\n    }\n  }, [Actions])\n\n  const ActionComponents = Actions ? Object.values(Actions) : []\n\n  return (\n    <header className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__bg`} />\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__wrapper`}>\n          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1}>\n            <Hamburger />\n          </NavToggler>\n          <div className={`${baseClass}__controls-wrapper`}>\n            <div className={`${baseClass}__step-nav-wrapper`}>\n              <StepNav className={`${baseClass}__step-nav`} CustomIcon={CustomIcon} />\n            </div>\n            <div className={`${baseClass}__actions-wrapper`}>\n              <div className={`${baseClass}__actions`} ref={customControlsRef}>\n                {ActionComponents.map((Action, i) => (\n                  <div\n                    className={\n                      isScrollable && i === ActionComponents.length - 1\n                        ? `${baseClass}__last-action`\n                        : ''\n                    }\n                    key={i}\n                  >\n                    {Action}\n                  </div>\n                ))}\n              </div>\n              {isScrollable && <div className={`${baseClass}__gradient-placeholder`} />}\n            </div>\n            {localization && (\n              <LocalizerLabel ariaLabel=\"invisible\" className={`${baseClass}__localizer-spacing`} />\n            )}\n            <Link\n              aria-label={t('authentication:account')}\n              className={`${baseClass}__account`}\n              href={formatAdminURL({ adminRoute, path: accountRoute })}\n              prefetch={false}\n              tabIndex={0}\n            >\n              <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account />} />\n            </Link>\n          </div>\n        </div>\n      </div>\n      <Localizer className={`${baseClass}__localizer`} />\n    </header>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useEffect","useRef","useState","ChevronIcon","LanguageIcon","SidebarIcon","useActions","useConfig","useLocale","useTranslation","Button","Localizer","useNav","NavToggler","StepNav","UserMenu","baseClass","AppHeader","CustomAvatar","settingsItems","t","locale","Actions","navOpen","setNavOpen","config","localization","customControlsRef","isScrollable","setIsScrollable","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","ActionComponents","Object","values","_jsx","className","filter","Boolean","join","_jsxs","tabIndex","buttonStyle","icon","onClick","type","ref","map","Action","i","length","renderButton","active","onKeyDown","ariaProps","extraButtonProps","style","padding","size","iconPosition","selected","code","direction"],"sources":["../../../src/elements/AppHeader/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../icons/Language/index.js'\nimport { SidebarIcon } from '../../icons/Sidebar/index.js'\nimport { useActions } from '../../providers/Actions/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Localizer } from '../Localizer/index.js'\nimport { useNav } from '../Nav/context.js'\nimport { NavToggler } from '../Nav/NavToggler/index.js'\nimport { StepNav } from '../StepNav/index.js'\nimport { UserMenu } from '../UserMenu/index.js'\nimport './index.css'\n\nconst baseClass = 'app-header'\n\ntype Props = {\n  CustomAvatar?: React.ReactNode\n  settingsItems?: React.ReactNode[]\n}\nexport function AppHeader({ CustomAvatar, settingsItems }: Props) {\n  const { t } = useTranslation()\n  const locale = useLocale()\n\n  const { Actions } = useActions()\n\n  const { navOpen, setNavOpen } = useNav()\n\n  const {\n    config: { localization },\n  } = useConfig()\n\n  const customControlsRef = useRef<HTMLDivElement>(null)\n  const [isScrollable, setIsScrollable] = useState(false)\n\n  useEffect(() => {\n    const checkIsScrollable = () => {\n      const el = customControlsRef.current\n      if (el) {\n        const scrollable = el.scrollWidth > el.clientWidth\n        setIsScrollable(scrollable)\n      }\n    }\n\n    checkIsScrollable()\n    window.addEventListener('resize', checkIsScrollable)\n\n    return () => {\n      window.removeEventListener('resize', checkIsScrollable)\n    }\n  }, [Actions])\n\n  const ActionComponents = Actions ? Object.values(Actions) : []\n\n  return (\n    <header className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__wrapper`}>\n          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1} />\n          <div className={`${baseClass}__controls-wrapper`}>\n            <div className={`${baseClass}__step-nav-wrapper`}>\n              <Button\n                aria-label={`${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`}\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__sidebar-toggle`}\n                icon={<SidebarIcon />}\n                onClick={() => setNavOpen(!navOpen)}\n                type=\"button\"\n              />\n              <div className={`${baseClass}__step-nav-wrapper`}>\n                <StepNav className={`${baseClass}__step-nav`} />\n              </div>\n            </div>\n            <div className={`${baseClass}__actions-wrapper`}>\n              <div className={`${baseClass}__actions`} ref={customControlsRef}>\n                {ActionComponents.map((Action, i) => (\n                  <div\n                    className={\n                      isScrollable && i === ActionComponents.length - 1\n                        ? `${baseClass}__last-action`\n                        : ''\n                    }\n                    key={i}\n                  >\n                    {Action}\n                  </div>\n                ))}\n              </div>\n              {isScrollable && <div className={`${baseClass}__gradient-placeholder`} />}\n            </div>\n            {localization && (\n              <Localizer\n                className={`${baseClass}__localizer`}\n                renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n                  <Button\n                    aria-label={t('general:locale')}\n                    buttonStyle=\"secondary\"\n                    extraButtonProps={{ onKeyDown, style: { padding: '0 var(--spacer-1) 0 0' } }}\n                    icon={<LanguageIcon size={24} />}\n                    iconPosition=\"left\"\n                    onClick={onClick}\n                    selected={active}\n                    {...ariaProps}\n                  >\n                    <div className=\"localizer__button-content\">\n                      {locale.code}\n                      <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                    </div>\n                  </Button>\n                )}\n              />\n            )}\n            <UserMenu CustomAvatar={CustomAvatar} settingsItems={settingsItems} />\n          </div>\n        </div>\n      </div>\n    </header>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ArrayAction/index.css

@@ -0,0 +1,18 @@
+@layer payload-default {
+  .array-actions__button {
+    cursor: pointer;
+  }
+
+  .array-actions__button.popup-button--active,
+  .array-actions__button.popup-button--active:hover,
+  .array-actions__button.popup-button--active:active {
+    background: var(--color-bg-selected);
+    color: var(--color-icon-selected);
+  }
+
+  .array-actions__actions {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type Props = {
     addRow: (current: number, blockType?: string) => Promise<void> | void;
     copyRow: (index: number) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ArrayAction/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,cAAc,CAAA;AAKrB,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACrE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6GvC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ArrayAction/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACrE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4GvC,CAAA"}

package/dist/elements/ArrayAction/index.js

@@ -3,15 +3,16 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { ArrowIcon } from '../../icons/Arrow/index.js';
+import { ClipboardIcon } from '../../icons/Clipboard/index.js';
 import { CopyIcon } from '../../icons/Copy/index.js';
+import { DuplicateIcon } from '../../icons/Duplicate/index.js';
 import { MoreIcon } from '../../icons/More/index.js';
 import { PlusIcon } from '../../icons/Plus/index.js';
 import { XIcon } from '../../icons/X/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { ClipboardActionLabel } from '../ClipboardAction/ClipboardActionLabel.js';
-import './index.scss';
 import { Popup, PopupList } from '../Popup/index.js';
+import './index.css';
 const baseClass = 'array-actions';
 export const ArrayAction = t0 => {
   const $ = _c(12);
@@ -35,78 +36,88 @@ export const ArrayAction = t0 => {
     t1 = _jsx(Popup, {
       button: _jsx(MoreIcon, {}),
       buttonClassName: `${baseClass}__button`,
+      caret: false,
       className: baseClass,
-      horizontalAlign: "center",
+      horizontalAlign: "right",
       render: t2 => {
         const {
           close
         } = t2;
-        return _jsxs(PopupList.ButtonGroup, {
-          buttonSize: "small",
-          children: [isSortable && index !== 0 && _jsxs(PopupList.Button, {
+        return _jsxs(PopupList.MenuItem, {
+          children: [isSortable && index !== 0 && _jsx(PopupList.Button, {
             className: `${baseClass}__action ${baseClass}__move-up`,
+            icon: _jsx(ArrowIcon, {
+              direction: "up",
+              size: 24
+            }),
             onClick: () => {
               moveRow(index, index - 1);
               close();
             },
-            children: [_jsx("div", {
-              className: `${baseClass}__action-chevron`,
-              children: _jsx(ChevronIcon, {
-                direction: "up"
-              })
-            }), t("general:moveUp")]
-          }), isSortable && index < rowCount - 1 && _jsxs(PopupList.Button, {
+            children: t("general:moveUp")
+          }), isSortable && index < rowCount - 1 && _jsx(PopupList.Button, {
             className: `${baseClass}__action`,
+            icon: _jsx(ArrowIcon, {
+              direction: "down",
+              size: 24
+            }),
             onClick: () => {
               moveRow(index, index + 1);
               close();
             },
-            children: [_jsx("div", {
-              className: `${baseClass}__action-chevron`,
-              children: _jsx(ChevronIcon, {})
-            }), t("general:moveDown")]
+            children: t("general:moveDown")
           }), !hasMaxRows && _jsxs(React.Fragment, {
-            children: [_jsxs(PopupList.Button, {
+            children: [_jsx(PopupList.Button, {
               className: `${baseClass}__action ${baseClass}__add`,
+              icon: _jsx(PlusIcon, {
+                size: 24
+              }),
               onClick: () => {
                 addRow(index + 1);
                 close();
               },
-              children: [_jsx(PlusIcon, {}), t("general:addBelow")]
-            }), _jsxs(PopupList.Button, {
+              children: t("general:addBelow")
+            }), _jsx(PopupList.Button, {
               className: `${baseClass}__action ${baseClass}__duplicate`,
+              icon: _jsx(DuplicateIcon, {
+                size: 24
+              }),
               onClick: () => {
                 duplicateRow(index);
                 close();
               },
-              children: [_jsx(CopyIcon, {}), t("general:duplicate")]
+              children: t("general:duplicate")
             })]
           }), _jsx(PopupList.Button, {
             className: `${baseClass}__action ${baseClass}__copy`,
+            icon: _jsx(CopyIcon, {
+              size: 24
+            }),
             onClick: () => {
               copyRow(index);
               close();
             },
-            children: _jsx(ClipboardActionLabel, {
-              isRow: true
-            })
+            children: t("general:copyRow")
           }), _jsx(PopupList.Button, {
             className: `${baseClass}__action ${baseClass}__paste`,
+            icon: _jsx(ClipboardIcon, {
+              size: 24
+            }),
             onClick: () => {
               pasteRow(index);
               close();
             },
-            children: _jsx(ClipboardActionLabel, {
-              isPaste: true,
-              isRow: true
-            })
-          }), _jsxs(PopupList.Button, {
+            children: t("general:pasteRow")
+          }), _jsx(PopupList.Button, {
             className: `${baseClass}__action ${baseClass}__remove`,
+            icon: _jsx(XIcon, {
+              size: 24
+            }),
             onClick: () => {
               removeRow(index);
               close();
             },
-            children: [_jsx(XIcon, {}), t("general:remove")]
+            children: t("general:remove")
           })]
         });
       },

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","CopyIcon","MoreIcon","PlusIcon","XIcon","useTranslation","ClipboardActionLabel","Popup","PopupList","baseClass","ArrayAction","t0","$","addRow","copyRow","duplicateRow","hasMaxRows","index","isSortable","moveRow","pasteRow","removeRow","rowCount","t","t1","_jsx","button","buttonClassName","className","horizontalAlign","render","t2","close","_jsxs","ButtonGroup","buttonSize","children","Button","onClick","direction","Fragment","isRow","isPaste"],"sources":["../../../src/elements/ArrayAction/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ClipboardActionLabel } from '../ClipboardAction/ClipboardActionLabel.js'\nimport './index.scss'\nimport { Popup, PopupList } from '../Popup/index.js'\n\nconst baseClass = 'array-actions'\n\nexport type Props = {\n  addRow: (current: number, blockType?: string) => Promise<void> | void\n  copyRow: (index: number) => void\n  duplicateRow: (current: number) => void\n  hasMaxRows: boolean\n  index: number\n  isSortable?: boolean\n  moveRow: (from: number, to: number) => void\n  pasteRow: (index: number) => void\n  removeRow: (index: number) => void\n  rowCount: number\n}\n\nexport const ArrayAction: React.FC<Props> = ({\n  addRow,\n  copyRow,\n  duplicateRow,\n  hasMaxRows,\n  index,\n  isSortable,\n  moveRow,\n  pasteRow,\n  removeRow,\n  rowCount,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonClassName={`${baseClass}__button`}\n      className={baseClass}\n      horizontalAlign=\"center\"\n      render={({ close }) => {\n        return (\n          <PopupList.ButtonGroup buttonSize=\"small\">\n            {isSortable && index !== 0 && (\n              <PopupList.Button\n                className={`${baseClass}__action ${baseClass}__move-up`}\n                onClick={() => {\n                  moveRow(index, index - 1)\n                  close()\n                }}\n              >\n                <div className={`${baseClass}__action-chevron`}>\n                  <ChevronIcon direction=\"up\" />\n                </div>\n                {t('general:moveUp')}\n              </PopupList.Button>\n            )}\n            {isSortable && index < rowCount - 1 && (\n              <PopupList.Button\n                className={`${baseClass}__action`}\n                onClick={() => {\n                  moveRow(index, index + 1)\n                  close()\n                }}\n              >\n                <div className={`${baseClass}__action-chevron`}>\n                  <ChevronIcon />\n                </div>\n                {t('general:moveDown')}\n              </PopupList.Button>\n            )}\n            {!hasMaxRows && (\n              <React.Fragment>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__add`}\n                  onClick={() => {\n                    void addRow(index + 1)\n                    close()\n                  }}\n                >\n                  <PlusIcon />\n                  {t('general:addBelow')}\n                </PopupList.Button>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__duplicate`}\n                  onClick={() => {\n                    duplicateRow(index)\n                    close()\n                  }}\n                >\n                  <CopyIcon />\n                  {t('general:duplicate')}\n                </PopupList.Button>\n              </React.Fragment>\n            )}\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__copy`}\n              onClick={() => {\n                copyRow(index)\n                close()\n              }}\n            >\n              <ClipboardActionLabel isRow />\n            </PopupList.Button>\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__paste`}\n              onClick={() => {\n                pasteRow(index)\n                close()\n              }}\n            >\n              <ClipboardActionLabel isPaste isRow />\n            </PopupList.Button>\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__remove`}\n              onClick={() => {\n                removeRow(index)\n                close()\n              }}\n            >\n              <XIcon />\n              {t('general:remove')}\n            </PopupList.Button>\n          </PopupList.ButtonGroup>\n        )\n      }}\n      size=\"medium\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ArrowIcon","ClipboardIcon","CopyIcon","DuplicateIcon","MoreIcon","PlusIcon","XIcon","useTranslation","Popup","PopupList","baseClass","ArrayAction","t0","$","addRow","copyRow","duplicateRow","hasMaxRows","index","isSortable","moveRow","pasteRow","removeRow","rowCount","t","t1","_jsx","button","buttonClassName","caret","className","horizontalAlign","render","t2","close","_jsxs","MenuItem","children","Button","icon","direction","size","Fragment"],"sources":["../../../src/elements/ArrayAction/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ArrowIcon } from '../../icons/Arrow/index.js'\nimport { ClipboardIcon } from '../../icons/Clipboard/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { DuplicateIcon } from '../../icons/Duplicate/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'array-actions'\n\nexport type Props = {\n  addRow: (current: number, blockType?: string) => Promise<void> | void\n  copyRow: (index: number) => void\n  duplicateRow: (current: number) => void\n  hasMaxRows: boolean\n  index: number\n  isSortable?: boolean\n  moveRow: (from: number, to: number) => void\n  pasteRow: (index: number) => void\n  removeRow: (index: number) => void\n  rowCount: number\n}\n\nexport const ArrayAction: React.FC<Props> = ({\n  addRow,\n  copyRow,\n  duplicateRow,\n  hasMaxRows,\n  index,\n  isSortable,\n  moveRow,\n  pasteRow,\n  removeRow,\n  rowCount,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonClassName={`${baseClass}__button`}\n      caret={false}\n      className={baseClass}\n      horizontalAlign=\"right\"\n      render={({ close }) => {\n        return (\n          <PopupList.MenuItem>\n            {isSortable && index !== 0 && (\n              <PopupList.Button\n                className={`${baseClass}__action ${baseClass}__move-up`}\n                icon={<ArrowIcon direction=\"up\" size={24} />}\n                onClick={() => {\n                  moveRow(index, index - 1)\n                  close()\n                }}\n              >\n                {t('general:moveUp')}\n              </PopupList.Button>\n            )}\n            {isSortable && index < rowCount - 1 && (\n              <PopupList.Button\n                className={`${baseClass}__action`}\n                icon={<ArrowIcon direction=\"down\" size={24} />}\n                onClick={() => {\n                  moveRow(index, index + 1)\n                  close()\n                }}\n              >\n                {t('general:moveDown')}\n              </PopupList.Button>\n            )}\n            {!hasMaxRows && (\n              <React.Fragment>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__add`}\n                  icon={<PlusIcon size={24} />}\n                  onClick={() => {\n                    void addRow(index + 1)\n                    close()\n                  }}\n                >\n                  {t('general:addBelow')}\n                </PopupList.Button>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__duplicate`}\n                  icon={<DuplicateIcon size={24} />}\n                  onClick={() => {\n                    duplicateRow(index)\n                    close()\n                  }}\n                >\n                  {t('general:duplicate')}\n                </PopupList.Button>\n              </React.Fragment>\n            )}\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__copy`}\n              icon={<CopyIcon size={24} />}\n              onClick={() => {\n                copyRow(index)\n                close()\n              }}\n            >\n              {t('general:copyRow')}\n            </PopupList.Button>\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__paste`}\n              icon={<ClipboardIcon size={24} />}\n              onClick={() => {\n                pasteRow(index)\n                close()\n              }}\n            >\n              {t('general:pasteRow')}\n            </PopupList.Button>\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__remove`}\n              icon={<XIcon size={24} />}\n              onClick={() => {\n                removeRow(index)\n                close()\n              }}\n            >\n              {t('general:remove')}\n            </PopupList.Button>\n          </PopupList.MenuItem>\n        )\n      }}\n      size=\"medium\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Autosave/index.css

@@ -0,0 +1,6 @@
+@layer payload-default {
+  .autosave {
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+  }
+}