@payloadcms/ui 3.0.0-beta.9 → 3.0.0-canary.03427d3

package/dist/elements/StayLoggedIn/index.js

@@ -1,42 +1,63 @@
 'use client';
-import * as facelessUIImport from '@faceless-ui/modal';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, useModal } from '@faceless-ui/modal';
 // TODO: abstract the `next/navigation` dependency out from this component
 import { useRouter } from 'next/navigation.js';
 import React from 'react';
 import { Button } from '../../elements/Button/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
 const baseClass = 'stay-logged-in';
-const modalSlug = 'stay-logged-in';
-export const StayLoggedInModal = (props)=>{
-    const { Modal, useModal } = facelessUIImport;
-    const { refreshCookie } = props;
+export const stayLoggedInModalSlug = 'stay-logged-in';
+export const StayLoggedInModal = ()=>{
+    const { refreshCookie } = useAuth();
     const router = useRouter();
     const config = useConfig();
-    const { admin: { logoutRoute }, routes: { admin } } = config;
+    const { admin: { routes: { logout: logoutRoute } }, routes: { admin } } = config;
     const { toggleModal } = useModal();
     const { t } = useTranslation();
-    return /*#__PURE__*/ React.createElement(Modal, {
+    return /*#__PURE__*/ _jsx(Modal, {
         className: baseClass,
-        slug: "stay-logged-in"
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrapper`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__content`
-    }, /*#__PURE__*/ React.createElement("h1", null, t('authentication:stayLoggedIn')), /*#__PURE__*/ React.createElement("p", null, t('authentication:youAreInactive'))), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__controls`
-    }, /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "secondary",
-        onClick: ()=>{
-            toggleModal(modalSlug);
-            router.push(`${admin}${logoutRoute}`);
-        }
-    }, t('authentication:logOut')), /*#__PURE__*/ React.createElement(Button, {
-        onClick: ()=>{
-            refreshCookie();
-            toggleModal(modalSlug);
-        }
-    }, t('authentication:stayLoggedIn')))));
+        slug: stayLoggedInModalSlug,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: `${baseClass}__wrapper`,
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: `${baseClass}__content`,
+                    children: [
+                        /*#__PURE__*/ _jsx("h1", {
+                            children: t('authentication:stayLoggedIn')
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            children: t('authentication:youAreInactive')
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: `${baseClass}__controls`,
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "secondary",
+                            onClick: ()=>{
+                                toggleModal(stayLoggedInModalSlug);
+                                router.push(`${admin}${logoutRoute}`);
+                            },
+                            children: t('authentication:logOut')
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            onClick: ()=>{
+                                refreshCookie();
+                                toggleModal(stayLoggedInModalSlug);
+                            },
+                            children: t('authentication:stayLoggedIn')
+                        })
+                    ]
+                })
+            ]
+        })
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/StayLoggedIn/index.tsx"],"sourcesContent":["'use client'\nimport * as facelessUIImport from '@faceless-ui/modal'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport { useRouter } from 'next/navigation.js'\nimport React from 'react'\n\nexport type StayLoggedInProps = {\n  refreshCookie: () => void\n}\n\nimport { Button } from '../../elements/Button/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'stay-logged-in'\n\nconst modalSlug = 'stay-logged-in'\n\nexport const StayLoggedInModal: React.FC<StayLoggedInProps> = (props) => {\n  const { Modal, useModal } = facelessUIImport\n\n  const { refreshCookie } = props\n  const router = useRouter()\n  const config = useConfig()\n  const {\n    admin: { logoutRoute },\n    routes: { admin },\n  } = config\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  return (\n    <Modal className={baseClass} slug=\"stay-logged-in\">\n      <div className={`${baseClass}__wrapper`}>\n        <div className={`${baseClass}__content`}>\n          <h1>{t('authentication:stayLoggedIn')}</h1>\n          <p>{t('authentication:youAreInactive')}</p>\n        </div>\n        <div className={`${baseClass}__controls`}>\n          <Button\n            buttonStyle=\"secondary\"\n            onClick={() => {\n              toggleModal(modalSlug)\n              router.push(`${admin}${logoutRoute}`)\n            }}\n          >\n            {t('authentication:logOut')}\n          </Button>\n          <Button\n            onClick={() => {\n              refreshCookie()\n              toggleModal(modalSlug)\n            }}\n          >\n            {t('authentication:stayLoggedIn')}\n          </Button>\n        </div>\n      </div>\n    </Modal>\n  )\n}\n"],"names":["facelessUIImport","useRouter","React","Button","useConfig","useTranslation","baseClass","modalSlug","StayLoggedInModal","props","Modal","useModal","refreshCookie","router","config","admin","logoutRoute","routes","toggleModal","t","className","slug","div","h1","p","buttonStyle","onClick","push"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,YAAYA,sBAAsB,qBAAoB;AACtD,0EAA0E;AAC1E,SAASC,SAAS,QAAQ,qBAAoB;AAC9C,OAAOC,WAAW,QAAO;AAMzB,SAASC,MAAM,QAAQ,iCAAgC;AACvD,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAElB,MAAMC,YAAY;AAElB,OAAO,MAAMC,oBAAiD,CAACC;IAC7D,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGX;IAE5B,MAAM,EAAEY,aAAa,EAAE,GAAGH;IAC1B,MAAMI,SAASZ;IACf,MAAMa,SAASV;IACf,MAAM,EACJW,OAAO,EAAEC,WAAW,EAAE,EACtBC,QAAQ,EAAEF,KAAK,EAAE,EAClB,GAAGD;IACJ,MAAM,EAAEI,WAAW,EAAE,GAAGP;IACxB,MAAM,EAAEQ,CAAC,EAAE,GAAGd;IAEd,qBACE,oBAACK;QAAMU,WAAWd;QAAWe,MAAK;qBAChC,oBAACC;QAAIF,WAAW,CAAC,EAAEd,UAAU,SAAS,CAAC;qBACrC,oBAACgB;QAAIF,WAAW,CAAC,EAAEd,UAAU,SAAS,CAAC;qBACrC,oBAACiB,YAAIJ,EAAE,+CACP,oBAACK,WAAGL,EAAE,kDAER,oBAACG;QAAIF,WAAW,CAAC,EAAEd,UAAU,UAAU,CAAC;qBACtC,oBAACH;QACCsB,aAAY;QACZC,SAAS;YACPR,YAAYX;YACZM,OAAOc,IAAI,CAAC,CAAC,EAAEZ,MAAM,EAAEC,YAAY,CAAC;QACtC;OAECG,EAAE,yCAEL,oBAAChB;QACCuB,SAAS;YACPd;YACAM,YAAYX;QACd;OAECY,EAAE;AAMf,EAAC"}
+{"version":3,"sources":["../../../src/elements/StayLoggedIn/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport { useRouter } from 'next/navigation.js'\nimport React from 'react'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'stay-logged-in'\n\nexport const stayLoggedInModalSlug = 'stay-logged-in'\n\nexport const StayLoggedInModal: React.FC = () => {\n  const { refreshCookie } = useAuth()\n\n  const router = useRouter()\n  const config = useConfig()\n\n  const {\n    admin: {\n      routes: { logout: logoutRoute },\n    },\n    routes: { admin },\n  } = config\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  return (\n    <Modal className={baseClass} slug={stayLoggedInModalSlug}>\n      <div className={`${baseClass}__wrapper`}>\n        <div className={`${baseClass}__content`}>\n          <h1>{t('authentication:stayLoggedIn')}</h1>\n          <p>{t('authentication:youAreInactive')}</p>\n        </div>\n        <div className={`${baseClass}__controls`}>\n          <Button\n            buttonStyle=\"secondary\"\n            onClick={() => {\n              toggleModal(stayLoggedInModalSlug)\n              router.push(`${admin}${logoutRoute}`)\n            }}\n          >\n            {t('authentication:logOut')}\n          </Button>\n          <Button\n            onClick={() => {\n              refreshCookie()\n              toggleModal(stayLoggedInModalSlug)\n            }}\n          >\n            {t('authentication:stayLoggedIn')}\n          </Button>\n        </div>\n      </div>\n    </Modal>\n  )\n}\n"],"names":["Modal","useModal","useRouter","React","Button","useAuth","useConfig","useTranslation","baseClass","stayLoggedInModalSlug","StayLoggedInModal","refreshCookie","router","config","admin","routes","logout","logoutRoute","toggleModal","t","className","slug","div","h1","p","buttonStyle","onClick","push"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ,qBAAoB;AACpD,0EAA0E;AAC1E,SAASC,SAAS,QAAQ,qBAAoB;AAC9C,OAAOC,WAAW,QAAO;AAEzB,SAASC,MAAM,QAAQ,iCAAgC;AACvD,SAASC,OAAO,QAAQ,gCAA+B;AACvD,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,wBAAwB,iBAAgB;AAErD,OAAO,MAAMC,oBAA8B;IACzC,MAAM,EAAEC,aAAa,EAAE,GAAGN;IAE1B,MAAMO,SAASV;IACf,MAAMW,SAASP;IAEf,MAAM,EACJQ,OAAO,EACLC,QAAQ,EAAEC,QAAQC,WAAW,EAAE,EAChC,EACDF,QAAQ,EAAED,KAAK,EAAE,EAClB,GAAGD;IACJ,MAAM,EAAEK,WAAW,EAAE,GAAGjB;IACxB,MAAM,EAAEkB,CAAC,EAAE,GAAGZ;IAEd,qBACE,KAACP;QAAMoB,WAAWZ;QAAWa,MAAMZ;kBACjC,cAAA,MAACa;YAAIF,WAAW,CAAC,EAAEZ,UAAU,SAAS,CAAC;;8BACrC,MAACc;oBAAIF,WAAW,CAAC,EAAEZ,UAAU,SAAS,CAAC;;sCACrC,KAACe;sCAAIJ,EAAE;;sCACP,KAACK;sCAAGL,EAAE;;;;8BAER,MAACG;oBAAIF,WAAW,CAAC,EAAEZ,UAAU,UAAU,CAAC;;sCACtC,KAACJ;4BACCqB,aAAY;4BACZC,SAAS;gCACPR,YAAYT;gCACZG,OAAOe,IAAI,CAAC,CAAC,EAAEb,MAAM,EAAEG,YAAY,CAAC;4BACtC;sCAECE,EAAE;;sCAEL,KAACf;4BACCsB,SAAS;gCACPf;gCACAO,YAAYT;4BACd;sCAECU,EAAE;;;;;;;AAMf,EAAC"}

package/dist/elements/StayLoggedIn/index.scss

@@ -1,4 +1,4 @@
-@import '../../../scss/styles.scss';
+@import '../../scss/styles.scss';
 
 .stay-logged-in {
   @include blur-bg;

package/dist/elements/StepNav/SetStepNav.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" resolution-mode="require"/>
-import type { StepNavItem } from './index.js';
+import type { StepNavItem } from './types.js';
 export declare const SetStepNav: React.FC<{
     nav: StepNavItem[];
 }>;

package/dist/elements/StepNav/SetStepNav.js

@@ -1,6 +1,6 @@
 'use client';
 import { useEffect } from 'react';
-import { useStepNav } from './index.js';
+import { useStepNav } from './context.js';
 export const SetStepNav = ({ nav })=>{
     const { setStepNav } = useStepNav();
     useEffect(()=>{

package/dist/elements/StepNav/SetStepNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/StepNav/SetStepNav.tsx"],"sourcesContent":["'use client'\nimport { useEffect } from 'react'\n\nimport type { StepNavItem } from './index.js'\n\nimport { useStepNav } from './index.js'\n\nexport const SetStepNav: React.FC<{\n  nav: StepNavItem[]\n}> = ({ nav }) => {\n  const { setStepNav } = useStepNav()\n\n  useEffect(() => {\n    setStepNav(nav)\n  }, [setStepNav, nav])\n\n  return null\n}\n"],"names":["useEffect","useStepNav","SetStepNav","nav","setStepNav"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAO;AAIjC,SAASC,UAAU,QAAQ,aAAY;AAEvC,OAAO,MAAMC,aAER,CAAC,EAAEC,GAAG,EAAE;IACX,MAAM,EAAEC,UAAU,EAAE,GAAGH;IAEvBD,UAAU;QACRI,WAAWD;IACb,GAAG;QAACC;QAAYD;KAAI;IAEpB,OAAO;AACT,EAAC"}
+{"version":3,"sources":["../../../src/elements/StepNav/SetStepNav.tsx"],"sourcesContent":["'use client'\nimport { useEffect } from 'react'\n\nimport type { StepNavItem } from './types.js'\n\nimport { useStepNav } from './context.js'\n\nexport const SetStepNav: React.FC<{\n  nav: StepNavItem[]\n}> = ({ nav }) => {\n  const { setStepNav } = useStepNav()\n\n  useEffect(() => {\n    setStepNav(nav)\n  }, [setStepNav, nav])\n\n  return null\n}\n"],"names":["useEffect","useStepNav","SetStepNav","nav","setStepNav"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAO;AAIjC,SAASC,UAAU,QAAQ,eAAc;AAEzC,OAAO,MAAMC,aAER,CAAC,EAAEC,GAAG,EAAE;IACX,MAAM,EAAEC,UAAU,EAAE,GAAGH;IAEvBD,UAAU;QACRI,WAAWD;IACb,GAAG;QAACC;QAAYD;KAAI;IAEpB,OAAO;AACT,EAAC"}

package/dist/elements/StepNav/context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ContextType } from './types.js';
+export declare const useStepNav: () => ContextType;
+export declare const Context: React.Context<ContextType>;
+export declare const StepNavProvider: React.FC<{
+    children?: React.ReactNode;
+}>;
+//# sourceMappingURL=context.d.ts.map

package/dist/elements/StepNav/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,eAAO,MAAM,UAAU,QAAO,WAAkC,CAAA;AAEhE,eAAO,MAAM,OAAO,4BAAmC,CAAA;AAEvD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAapE,CAAA"}

package/dist/elements/StepNav/context.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useState } from 'react';
+export const useStepNav = ()=>useContext(Context);
+export const Context = /*#__PURE__*/ createContext({});
+export const StepNavProvider = ({ children })=>{
+    const [stepNav, setStepNav] = useState([]);
+    return /*#__PURE__*/ _jsx(Context.Provider, {
+        value: {
+            setStepNav,
+            stepNav
+        },
+        children: children
+    });
+};
+
+//# sourceMappingURL=context.js.map

package/dist/elements/StepNav/context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/StepNav/context.tsx"],"sourcesContent":["import React, { createContext, useContext, useState } from 'react'\n\nimport type { ContextType } from './types.js'\n\nexport const useStepNav = (): ContextType => useContext(Context)\n\nexport const Context = createContext({} as ContextType)\n\nexport const StepNavProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  const [stepNav, setStepNav] = useState([])\n\n  return (\n    <Context.Provider\n      value={{\n        setStepNav,\n        stepNav,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n"],"names":["React","createContext","useContext","useState","useStepNav","Context","StepNavProvider","children","stepNav","setStepNav","Provider","value"],"rangeMappings":";;;;;;;;;;;;;","mappings":";AAAA,OAAOA,SAASC,aAAa,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,QAAO;AAIlE,OAAO,MAAMC,aAAa,IAAmBF,WAAWG,SAAQ;AAEhE,OAAO,MAAMA,wBAAUJ,cAAc,CAAC,GAAiB;AAEvD,OAAO,MAAMK,kBAA4D,CAAC,EAAEC,QAAQ,EAAE;IACpF,MAAM,CAACC,SAASC,WAAW,GAAGN,SAAS,EAAE;IAEzC,qBACE,KAACE,QAAQK,QAAQ;QACfC,OAAO;YACLF;YACAD;QACF;kBAECD;;AAGP,EAAC"}

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

@@ -1,22 +1,11 @@
-import type { LabelFunction } from 'payload/config';
 import React from 'react';
+import { StepNavProvider, useStepNav } from './context.js';
 import './index.scss';
 export { SetStepNav } from './SetStepNav.js';
-export type StepNavItem = {
-    label: LabelFunction | Record<string, string> | string;
-    url?: string;
-};
-export type ContextType = {
-    setStepNav: (items: StepNavItem[]) => void;
-    stepNav: StepNavItem[];
-};
-declare const StepNavProvider: React.FC<{
-    children?: React.ReactNode;
-}>;
-declare const useStepNav: () => ContextType;
+import type { StepNavItem } from './types.js';
 declare const StepNav: React.FC<{
     Link?: React.ComponentType;
     className?: string;
 }>;
-export { StepNav, StepNavProvider, useStepNav };
+export { StepNav, StepNavItem, StepNavProvider, useStepNav };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGnD,OAAO,KAAwD,MAAM,OAAO,CAAA;AAK5E,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACtD,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,CAAA;IAC1C,OAAO,EAAE,WAAW,EAAE,CAAA;CACvB,CAAA;AAMD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAa7D,CAAA;AAED,QAAA,MAAM,UAAU,QAAO,WAAkC,CAAA;AAEzD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAoDA,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAI7C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CA4DA,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,CAAA"}

package/dist/elements/StepNav/index.js

@@ -1,59 +1,81 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import React, { Fragment, createContext, useContext, useState } from 'react';
-import { Icon } from '../../graphics/Icon/index.js';
+import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap';
+import React, { Fragment } from 'react';
+import { PayloadIcon } from '../../graphics/Icon/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { StepNavProvider, useStepNav } from './context.js';
+import './index.scss';
 export { SetStepNav } from './SetStepNav.js';
 const baseClass = 'step-nav';
-const Context = /*#__PURE__*/ createContext({});
-const StepNavProvider = ({ children })=>{
-    const [stepNav, setStepNav] = useState([]);
-    return /*#__PURE__*/ React.createElement(Context.Provider, {
-        value: {
-            setStepNav,
-            stepNav
-        }
-    }, children);
-};
-const useStepNav = ()=>useContext(Context);
 const StepNav = ({ Link, className })=>{
     const { i18n } = useTranslation();
     const { stepNav } = useStepNav();
     const config = useConfig();
     const { routes: { admin } } = config;
+    const { componentMap } = useComponentMap();
+    const { t } = useTranslation();
+    const Icon = componentMap?.Icon || /*#__PURE__*/ _jsx(PayloadIcon, {});
     const LinkElement = Link || 'a';
-    return /*#__PURE__*/ React.createElement(Fragment, null, stepNav.length > 0 ? /*#__PURE__*/ React.createElement("nav", {
-        className: [
-            baseClass,
-            className
-        ].filter(Boolean).join(' ')
-    }, /*#__PURE__*/ React.createElement(LinkElement, {
-        className: `${baseClass}__home`,
-        href: admin,
-        tabIndex: 0
-    }, /*#__PURE__*/ React.createElement(Icon, null)), /*#__PURE__*/ React.createElement("span", null, "/"), stepNav.map((item, i)=>{
-        const StepLabel = getTranslation(item.label, i18n);
-        const isLast = stepNav.length === i + 1;
-        const Step = isLast ? /*#__PURE__*/ React.createElement("span", {
-            className: `${baseClass}__last`,
-            key: i
-        }, StepLabel) : /*#__PURE__*/ React.createElement(Fragment, {
-            key: i
-        }, item.url ? /*#__PURE__*/ React.createElement(LinkElement, {
-            href: item.url
-        }, /*#__PURE__*/ React.createElement("span", {
-            key: i
-        }, StepLabel)) : /*#__PURE__*/ React.createElement("span", {
-            key: i
-        }, StepLabel), /*#__PURE__*/ React.createElement("span", null, "/"));
-        return Step;
-    })) : /*#__PURE__*/ React.createElement("div", {
-        className: [
-            baseClass,
-            className
-        ].filter(Boolean).join(' ')
-    }, /*#__PURE__*/ React.createElement(Icon, null)));
+    return /*#__PURE__*/ _jsx(Fragment, {
+        children: stepNav.length > 0 ? /*#__PURE__*/ _jsxs("nav", {
+            className: [
+                baseClass,
+                className
+            ].filter(Boolean).join(' '),
+            children: [
+                /*#__PURE__*/ _jsx(LinkElement, {
+                    className: `${baseClass}__home`,
+                    href: admin,
+                    tabIndex: 0,
+                    children: /*#__PURE__*/ _jsx("span", {
+                        title: t('general:dashboard'),
+                        children: Icon
+                    })
+                }),
+                /*#__PURE__*/ _jsx("span", {
+                    children: "/"
+                }),
+                stepNav.map((item, i)=>{
+                    const StepLabel = getTranslation(item.label, i18n);
+                    const isLast = stepNav.length === i + 1;
+                    const Step = isLast ? /*#__PURE__*/ _jsx("span", {
+                        className: `${baseClass}__last`,
+                        children: StepLabel
+                    }, i) : /*#__PURE__*/ _jsxs(Fragment, {
+                        children: [
+                            item.url ? /*#__PURE__*/ _jsx(LinkElement, {
+                                href: item.url,
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    children: StepLabel
+                                }, i)
+                            }) : /*#__PURE__*/ _jsx("span", {
+                                children: StepLabel
+                            }, i),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "/"
+                            })
+                        ]
+                    }, i);
+                    return Step;
+                })
+            ]
+        }) : /*#__PURE__*/ _jsx("div", {
+            className: [
+                baseClass,
+                className
+            ].filter(Boolean).join(' '),
+            children: /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__home`,
+                children: /*#__PURE__*/ _jsx("span", {
+                    title: t('general:dashboard'),
+                    children: Icon
+                })
+            })
+        })
+    });
 };
 export { StepNav, StepNavProvider, useStepNav };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/StepNav/index.tsx"],"sourcesContent":["'use client'\nimport type { LabelFunction } from 'payload/config'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, createContext, useContext, useState } from 'react'\n\nimport { Icon } from '../../graphics/Icon/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nexport { SetStepNav } from './SetStepNav.js'\n\nexport type StepNavItem = {\n  label: LabelFunction | Record<string, string> | string\n  url?: string\n}\n\nexport type ContextType = {\n  setStepNav: (items: StepNavItem[]) => void\n  stepNav: StepNavItem[]\n}\n\nconst baseClass = 'step-nav'\n\nconst Context = createContext({} as ContextType)\n\nconst StepNavProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  const [stepNav, setStepNav] = useState([])\n\n  return (\n    <Context.Provider\n      value={{\n        setStepNav,\n        stepNav,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n\nconst useStepNav = (): ContextType => useContext(Context)\n\nconst StepNav: React.FC<{\n  Link?: React.ComponentType\n  className?: string\n}> = ({ Link, className }) => {\n  const { i18n } = useTranslation()\n\n  const { stepNav } = useStepNav()\n\n  const config = useConfig()\n\n  const {\n    routes: { admin },\n  } = config\n\n  const LinkElement = Link || 'a'\n\n  return (\n    <Fragment>\n      {stepNav.length > 0 ? (\n        <nav className={[baseClass, className].filter(Boolean).join(' ')}>\n          <LinkElement className={`${baseClass}__home`} href={admin} tabIndex={0}>\n            <Icon />\n          </LinkElement>\n          <span>/</span>\n          {stepNav.map((item, i) => {\n            const StepLabel = getTranslation(item.label, i18n)\n            const isLast = stepNav.length === i + 1\n\n            const Step = isLast ? (\n              <span className={`${baseClass}__last`} key={i}>\n                {StepLabel}\n              </span>\n            ) : (\n              <Fragment key={i}>\n                {item.url ? (\n                  <LinkElement href={item.url}>\n                    <span key={i}>{StepLabel}</span>\n                  </LinkElement>\n                ) : (\n                  <span key={i}>{StepLabel}</span>\n                )}\n                <span>/</span>\n              </Fragment>\n            )\n\n            return Step\n          })}\n        </nav>\n      ) : (\n        <div className={[baseClass, className].filter(Boolean).join(' ')}>\n          <Icon />\n        </div>\n      )}\n    </Fragment>\n  )\n}\n\nexport { StepNav, StepNavProvider, useStepNav }\n"],"names":["getTranslation","React","Fragment","createContext","useContext","useState","Icon","useConfig","useTranslation","SetStepNav","baseClass","Context","StepNavProvider","children","stepNav","setStepNav","Provider","value","useStepNav","StepNav","Link","className","i18n","config","routes","admin","LinkElement","length","nav","filter","Boolean","join","href","tabIndex","span","map","item","i","StepLabel","label","isLast","Step","key","url","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,SAASC,QAAQ,EAAEC,aAAa,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,QAAO;AAE5E,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,SAASC,UAAU,QAAQ,kBAAiB;AAY5C,MAAMC,YAAY;AAElB,MAAMC,wBAAUR,cAAc,CAAC;AAE/B,MAAMS,kBAA4D,CAAC,EAAEC,QAAQ,EAAE;IAC7E,MAAM,CAACC,SAASC,WAAW,GAAGV,SAAS,EAAE;IAEzC,qBACE,oBAACM,QAAQK,QAAQ;QACfC,OAAO;YACLF;YACAD;QACF;OAECD;AAGP;AAEA,MAAMK,aAAa,IAAmBd,WAAWO;AAEjD,MAAMQ,UAGD,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAE;IACvB,MAAM,EAAEC,IAAI,EAAE,GAAGd;IAEjB,MAAM,EAAEM,OAAO,EAAE,GAAGI;IAEpB,MAAMK,SAAShB;IAEf,MAAM,EACJiB,QAAQ,EAAEC,KAAK,EAAE,EAClB,GAAGF;IAEJ,MAAMG,cAAcN,QAAQ;IAE5B,qBACE,oBAAClB,gBACEY,QAAQa,MAAM,GAAG,kBAChB,oBAACC;QAAIP,WAAW;YAACX;YAAWW;SAAU,CAACQ,MAAM,CAACC,SAASC,IAAI,CAAC;qBAC1D,oBAACL;QAAYL,WAAW,CAAC,EAAEX,UAAU,MAAM,CAAC;QAAEsB,MAAMP;QAAOQ,UAAU;qBACnE,oBAAC3B,4BAEH,oBAAC4B,cAAK,MACLpB,QAAQqB,GAAG,CAAC,CAACC,MAAMC;QAClB,MAAMC,YAAYtC,eAAeoC,KAAKG,KAAK,EAAEjB;QAC7C,MAAMkB,SAAS1B,QAAQa,MAAM,KAAKU,IAAI;QAEtC,MAAMI,OAAOD,uBACX,oBAACN;YAAKb,WAAW,CAAC,EAAEX,UAAU,MAAM,CAAC;YAAEgC,KAAKL;WACzCC,2BAGH,oBAACpC;YAASwC,KAAKL;WACZD,KAAKO,GAAG,iBACP,oBAACjB;YAAYM,MAAMI,KAAKO,GAAG;yBACzB,oBAACT;YAAKQ,KAAKL;WAAIC,4BAGjB,oBAACJ;YAAKQ,KAAKL;WAAIC,0BAEjB,oBAACJ,cAAK;QAIV,OAAOO;IACT,oBAGF,oBAACG;QAAIvB,WAAW;YAACX;YAAWW;SAAU,CAACQ,MAAM,CAACC,SAASC,IAAI,CAAC;qBAC1D,oBAACzB;AAKX;AAEA,SAASa,OAAO,EAAEP,eAAe,EAAEM,UAAU,GAAE"}
+{"version":3,"sources":["../../../src/elements/StepNav/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { useComponentMap } from '@payloadcms/ui/providers/ComponentMap'\nimport React, { Fragment } from 'react'\n\nimport { PayloadIcon } from '../../graphics/Icon/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { StepNavProvider, useStepNav } from './context.js'\nimport './index.scss'\nexport { SetStepNav } from './SetStepNav.js'\nimport type { StepNavItem } from './types.js'\n\nconst baseClass = 'step-nav'\n\nconst StepNav: React.FC<{\n  Link?: React.ComponentType\n  className?: string\n}> = ({ Link, className }) => {\n  const { i18n } = useTranslation()\n\n  const { stepNav } = useStepNav()\n\n  const config = useConfig()\n\n  const {\n    routes: { admin },\n  } = config\n\n  const { componentMap } = useComponentMap()\n\n  const { t } = useTranslation()\n\n  const Icon = componentMap?.Icon || <PayloadIcon />\n\n  const LinkElement = Link || 'a'\n\n  return (\n    <Fragment>\n      {stepNav.length > 0 ? (\n        <nav className={[baseClass, className].filter(Boolean).join(' ')}>\n          <LinkElement className={`${baseClass}__home`} href={admin} tabIndex={0}>\n            <span title={t('general:dashboard')}>{Icon}</span>\n          </LinkElement>\n          <span>/</span>\n          {stepNav.map((item, i) => {\n            const StepLabel = getTranslation(item.label, i18n)\n            const isLast = stepNav.length === i + 1\n\n            const Step = isLast ? (\n              <span className={`${baseClass}__last`} key={i}>\n                {StepLabel}\n              </span>\n            ) : (\n              <Fragment key={i}>\n                {item.url ? (\n                  <LinkElement href={item.url}>\n                    <span key={i}>{StepLabel}</span>\n                  </LinkElement>\n                ) : (\n                  <span key={i}>{StepLabel}</span>\n                )}\n                <span>/</span>\n              </Fragment>\n            )\n\n            return Step\n          })}\n        </nav>\n      ) : (\n        <div className={[baseClass, className].filter(Boolean).join(' ')}>\n          <div className={`${baseClass}__home`}>\n            <span title={t('general:dashboard')}>{Icon}</span>\n          </div>\n        </div>\n      )}\n    </Fragment>\n  )\n}\n\nexport { StepNav, StepNavItem, StepNavProvider, useStepNav }\n"],"names":["getTranslation","useComponentMap","React","Fragment","PayloadIcon","useConfig","useTranslation","StepNavProvider","useStepNav","SetStepNav","baseClass","StepNav","Link","className","i18n","stepNav","config","routes","admin","componentMap","t","Icon","LinkElement","length","nav","filter","Boolean","join","href","tabIndex","span","title","map","item","i","StepLabel","label","isLast","Step","url","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,eAAe,QAAQ,wCAAuC;AACvE,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,WAAW,QAAQ,+BAA8B;AAC1D,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,eAAe,EAAEC,UAAU,QAAQ,eAAc;AAC1D,OAAO,eAAc;AACrB,SAASC,UAAU,QAAQ,kBAAiB;AAG5C,MAAMC,YAAY;AAElB,MAAMC,UAGD,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAE;IACvB,MAAM,EAAEC,IAAI,EAAE,GAAGR;IAEjB,MAAM,EAAES,OAAO,EAAE,GAAGP;IAEpB,MAAMQ,SAASX;IAEf,MAAM,EACJY,QAAQ,EAAEC,KAAK,EAAE,EAClB,GAAGF;IAEJ,MAAM,EAAEG,YAAY,EAAE,GAAGlB;IAEzB,MAAM,EAAEmB,CAAC,EAAE,GAAGd;IAEd,MAAMe,OAAOF,cAAcE,sBAAQ,KAACjB;IAEpC,MAAMkB,cAAcV,QAAQ;IAE5B,qBACE,KAACT;kBACEY,QAAQQ,MAAM,GAAG,kBAChB,MAACC;YAAIX,WAAW;gBAACH;gBAAWG;aAAU,CAACY,MAAM,CAACC,SAASC,IAAI,CAAC;;8BAC1D,KAACL;oBAAYT,WAAW,CAAC,EAAEH,UAAU,MAAM,CAAC;oBAAEkB,MAAMV;oBAAOW,UAAU;8BACnE,cAAA,KAACC;wBAAKC,OAAOX,EAAE;kCAAuBC;;;8BAExC,KAACS;8BAAK;;gBACLf,QAAQiB,GAAG,CAAC,CAACC,MAAMC;oBAClB,MAAMC,YAAYnC,eAAeiC,KAAKG,KAAK,EAAEtB;oBAC7C,MAAMuB,SAAStB,QAAQQ,MAAM,KAAKW,IAAI;oBAEtC,MAAMI,OAAOD,uBACX,KAACP;wBAAKjB,WAAW,CAAC,EAAEH,UAAU,MAAM,CAAC;kCAClCyB;uBADyCD,mBAI5C,MAAC/B;;4BACE8B,KAAKM,GAAG,iBACP,KAACjB;gCAAYM,MAAMK,KAAKM,GAAG;0CACzB,cAAA,KAACT;8CAAcK;mCAAJD;+CAGb,KAACJ;0CAAcK;+BAAJD;0CAEb,KAACJ;0CAAK;;;uBAROI;oBAYjB,OAAOI;gBACT;;2BAGF,KAACE;YAAI3B,WAAW;gBAACH;gBAAWG;aAAU,CAACY,MAAM,CAACC,SAASC,IAAI,CAAC;sBAC1D,cAAA,KAACa;gBAAI3B,WAAW,CAAC,EAAEH,UAAU,MAAM,CAAC;0BAClC,cAAA,KAACoB;oBAAKC,OAAOX,EAAE;8BAAuBC;;;;;AAMlD;AAEA,SAASV,OAAO,EAAeJ,eAAe,EAAEC,UAAU,GAAE"}

package/dist/elements/StepNav/index.scss

@@ -2,6 +2,7 @@
 
 .step-nav {
   display: flex;
+  align-items: center;
   gap: calc(var(--base) / 2);
 
   &::after {
@@ -16,6 +17,8 @@
   // Use a pseudo element for the accessability so that it doesn't take up DOM space
   // Also because the parent element has `overflow: hidden` which would clip an outline
   &__home {
+    width: 18px;
+    height: 18px;
     position: relative;
 
     &:focus-visible {
@@ -56,14 +59,21 @@
   }
 
   span {
-    display: flex;
-    align-items: center;
     max-width: base(8);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
   }
 
+  @include mid-break {
+    .step-nav {
+      &__home {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
   @include small-break {
     gap: calc(var(--base) / 4);
   }

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

@@ -0,0 +1,10 @@
+import type { LabelFunction } from 'payload';
+export type StepNavItem = {
+    label: LabelFunction | Record<string, string> | string;
+    url?: string;
+};
+export type ContextType = {
+    setStepNav: (items: StepNavItem[]) => void;
+    stepNav: StepNavItem[];
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACtD,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,CAAA;IAC1C,OAAO,EAAE,WAAW,EAAE,CAAA;CACvB,CAAA"}

package/dist/elements/StepNav/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/StepNav/types.ts"],"sourcesContent":["import type { LabelFunction } from 'payload'\n\nexport type StepNavItem = {\n  label: LabelFunction | Record<string, string> | string\n  url?: string\n}\n\nexport type ContextType = {\n  setStepNav: (items: StepNavItem[]) => void\n  stepNav: StepNavItem[]\n}\n"],"names":[],"rangeMappings":"","mappings":"AAOA,WAGC"}

package/dist/elements/Table/DefaultCell/fields/Array/index.d.ts

@@ -1,4 +1,4 @@
-import type { CellComponentProps, DefaultCellComponentProps } from 'payload/types';
+import type { CellComponentProps, DefaultCellComponentProps } from 'payload';
 import React from 'react';
 export interface ArrayCellProps extends DefaultCellComponentProps<Record<string, unknown>[]> {
     labels: CellComponentProps['labels'];

package/dist/elements/Table/DefaultCell/fields/Array/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Array/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAIlF,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAC1F,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAA;CACrC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAW9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Array/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG5E,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAC1F,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAA;CACrC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAW9C,CAAA"}

package/dist/elements/Table/DefaultCell/fields/Array/index.js

@@ -1,12 +1,15 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import { useTranslation } from '@payloadcms/ui/providers/Translation';
 import React from 'react';
+import { useTranslation } from '../../../../../providers/Translation/index.js';
 export const ArrayCell = ({ cellData, labels })=>{
     const { i18n } = useTranslation();
     const arrayFields = cellData ?? [];
     const label = `${arrayFields.length} ${getTranslation(labels?.plural || i18n.t('general:rows'), i18n)}`;
-    return /*#__PURE__*/ React.createElement("span", null, label);
+    return /*#__PURE__*/ _jsx("span", {
+        children: label
+    });
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/Table/DefaultCell/fields/Array/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Array/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, DefaultCellComponentProps } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React from 'react'\n\nexport interface ArrayCellProps extends DefaultCellComponentProps<Record<string, unknown>[]> {\n  labels: CellComponentProps['labels']\n}\n\nexport const ArrayCell: React.FC<ArrayCellProps> = ({ cellData, labels }) => {\n  const { i18n } = useTranslation()\n\n  const arrayFields = cellData ?? []\n\n  const label = `${arrayFields.length} ${getTranslation(\n    labels?.plural || i18n.t('general:rows'),\n    i18n,\n  )}`\n\n  return <span>{label}</span>\n}\n"],"names":["getTranslation","useTranslation","React","ArrayCell","cellData","labels","i18n","arrayFields","label","length","plural","t","span"],"rangeMappings":";;;;;;;;;","mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,WAAW,QAAO;AAMzB,OAAO,MAAMC,YAAsC,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAE;IACtE,MAAM,EAAEC,IAAI,EAAE,GAAGL;IAEjB,MAAMM,cAAcH,YAAY,EAAE;IAElC,MAAMI,QAAQ,CAAC,EAAED,YAAYE,MAAM,CAAC,CAAC,EAAET,eACrCK,QAAQK,UAAUJ,KAAKK,CAAC,CAAC,iBACzBL,MACA,CAAC;IAEH,qBAAO,oBAACM,cAAMJ;AAChB,EAAC"}
+{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Array/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, DefaultCellComponentProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\n\nexport interface ArrayCellProps extends DefaultCellComponentProps<Record<string, unknown>[]> {\n  labels: CellComponentProps['labels']\n}\n\nexport const ArrayCell: React.FC<ArrayCellProps> = ({ cellData, labels }) => {\n  const { i18n } = useTranslation()\n\n  const arrayFields = cellData ?? []\n\n  const label = `${arrayFields.length} ${getTranslation(\n    labels?.plural || i18n.t('general:rows'),\n    i18n,\n  )}`\n\n  return <span>{label}</span>\n}\n"],"names":["getTranslation","React","useTranslation","ArrayCell","cellData","labels","i18n","arrayFields","label","length","plural","t","span"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,gDAA+C;AAM9E,OAAO,MAAMC,YAAsC,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAE;IACtE,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IAEjB,MAAMK,cAAcH,YAAY,EAAE;IAElC,MAAMI,QAAQ,CAAC,EAAED,YAAYE,MAAM,CAAC,CAAC,EAAET,eACrCK,QAAQK,UAAUJ,KAAKK,CAAC,CAAC,iBACzBL,MACA,CAAC;IAEH,qBAAO,KAACM;kBAAMJ;;AAChB,EAAC"}

package/dist/elements/Table/DefaultCell/fields/Blocks/index.d.ts

@@ -1,4 +1,4 @@
-import type { CellComponentProps, DefaultCellComponentProps } from 'payload/types';
+import type { CellComponentProps, DefaultCellComponentProps } from 'payload';
 import React from 'react';
 export interface BlocksCellProps extends DefaultCellComponentProps<any> {
     blocks: CellComponentProps['blocks'];

package/dist/elements/Table/DefaultCell/fields/Blocks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAIlF,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,GAAG,CAAC;IACrE,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAA;IACpC,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAA;CACrC;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoChD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG5E,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,GAAG,CAAC;IACrE,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAA;IACpC,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAA;CACrC;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoChD,CAAA"}

package/dist/elements/Table/DefaultCell/fields/Blocks/index.js

@@ -1,7 +1,8 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import { useTranslation } from '@payloadcms/ui/providers/Translation';
 import React from 'react';
+import { useTranslation } from '../../../../../providers/Translation/index.js';
 export const BlocksCell = ({ blocks, cellData, labels })=>{
     const { i18n } = useTranslation();
     const selectedBlocks = Array.isArray(cellData) ? cellData.map(({ blockType })=>blockType) : [];
@@ -24,7 +25,9 @@ export const BlocksCell = ({ blocks, cellData, labels })=>{
     } else if (selectedBlocks.length > 0) {
         label = `${selectedBlocks.length} ${getTranslation(selectedBlocks.length === 1 ? labels?.singular : labels?.plural, i18n)} - ${formatBlockList(selectedBlocks)}`;
     }
-    return /*#__PURE__*/ React.createElement("span", null, label);
+    return /*#__PURE__*/ _jsx("span", {
+        children: label
+    });
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/Table/DefaultCell/fields/Blocks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, DefaultCellComponentProps } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React from 'react'\n\nexport interface BlocksCellProps extends DefaultCellComponentProps<any> {\n  blocks: CellComponentProps['blocks']\n  labels: CellComponentProps['labels']\n}\n\nexport const BlocksCell: React.FC<BlocksCellProps> = ({ blocks, cellData, labels }) => {\n  const { i18n } = useTranslation()\n\n  const selectedBlocks = Array.isArray(cellData) ? cellData.map(({ blockType }) => blockType) : []\n\n  const translatedBlockLabels = blocks?.map((b) => ({\n    slug: b.slug,\n    label: getTranslation(b.labels.singular, i18n),\n  }))\n\n  let label = `0 ${getTranslation(labels?.plural, i18n)}`\n\n  const formatBlockList = (blocks) =>\n    blocks\n      .map((b) => {\n        const filtered = translatedBlockLabels.filter((f) => f.slug === b)?.[0]\n        return filtered?.label\n      })\n      .join(', ')\n\n  const itemsToShow = 5\n\n  if (selectedBlocks.length > itemsToShow) {\n    const more = selectedBlocks.length - itemsToShow\n    label = `${selectedBlocks.length} ${getTranslation(labels?.plural, i18n)} - ${i18n.t(\n      'fields:itemsAndMore',\n      { count: more, items: formatBlockList(selectedBlocks.slice(0, itemsToShow)) },\n    )}`\n  } else if (selectedBlocks.length > 0) {\n    label = `${selectedBlocks.length} ${getTranslation(\n      selectedBlocks.length === 1 ? labels?.singular : labels?.plural,\n      i18n,\n    )} - ${formatBlockList(selectedBlocks)}`\n  }\n\n  return <span>{label}</span>\n}\n"],"names":["getTranslation","useTranslation","React","BlocksCell","blocks","cellData","labels","i18n","selectedBlocks","Array","isArray","map","blockType","translatedBlockLabels","b","slug","label","singular","plural","formatBlockList","filtered","filter","f","join","itemsToShow","length","more","t","count","items","slice","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,WAAW,QAAO;AAOzB,OAAO,MAAMC,aAAwC,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAE;IAChF,MAAM,EAAEC,IAAI,EAAE,GAAGN;IAEjB,MAAMO,iBAAiBC,MAAMC,OAAO,CAACL,YAAYA,SAASM,GAAG,CAAC,CAAC,EAAEC,SAAS,EAAE,GAAKA,aAAa,EAAE;IAEhG,MAAMC,wBAAwBT,QAAQO,IAAI,CAACG,IAAO,CAAA;YAChDC,MAAMD,EAAEC,IAAI;YACZC,OAAOhB,eAAec,EAAER,MAAM,CAACW,QAAQ,EAAEV;QAC3C,CAAA;IAEA,IAAIS,QAAQ,CAAC,EAAE,EAAEhB,eAAeM,QAAQY,QAAQX,MAAM,CAAC;IAEvD,MAAMY,kBAAkB,CAACf,SACvBA,OACGO,GAAG,CAAC,CAACG;YACJ,MAAMM,WAAWP,sBAAsBQ,MAAM,CAAC,CAACC,IAAMA,EAAEP,IAAI,KAAKD,IAAI,CAAC,EAAE;YACvE,OAAOM,UAAUJ;QACnB,GACCO,IAAI,CAAC;IAEV,MAAMC,cAAc;IAEpB,IAAIhB,eAAeiB,MAAM,GAAGD,aAAa;QACvC,MAAME,OAAOlB,eAAeiB,MAAM,GAAGD;QACrCR,QAAQ,CAAC,EAAER,eAAeiB,MAAM,CAAC,CAAC,EAAEzB,eAAeM,QAAQY,QAAQX,MAAM,GAAG,EAAEA,KAAKoB,CAAC,CAClF,uBACA;YAAEC,OAAOF;YAAMG,OAAOV,gBAAgBX,eAAesB,KAAK,CAAC,GAAGN;QAAc,GAC5E,CAAC;IACL,OAAO,IAAIhB,eAAeiB,MAAM,GAAG,GAAG;QACpCT,QAAQ,CAAC,EAAER,eAAeiB,MAAM,CAAC,CAAC,EAAEzB,eAClCQ,eAAeiB,MAAM,KAAK,IAAInB,QAAQW,WAAWX,QAAQY,QACzDX,MACA,GAAG,EAAEY,gBAAgBX,gBAAgB,CAAC;IAC1C;IAEA,qBAAO,oBAACuB,cAAMf;AAChB,EAAC"}
+{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, DefaultCellComponentProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\n\nexport interface BlocksCellProps extends DefaultCellComponentProps<any> {\n  blocks: CellComponentProps['blocks']\n  labels: CellComponentProps['labels']\n}\n\nexport const BlocksCell: React.FC<BlocksCellProps> = ({ blocks, cellData, labels }) => {\n  const { i18n } = useTranslation()\n\n  const selectedBlocks = Array.isArray(cellData) ? cellData.map(({ blockType }) => blockType) : []\n\n  const translatedBlockLabels = blocks?.map((b) => ({\n    slug: b.slug,\n    label: getTranslation(b.labels.singular, i18n),\n  }))\n\n  let label = `0 ${getTranslation(labels?.plural, i18n)}`\n\n  const formatBlockList = (blocks) =>\n    blocks\n      .map((b) => {\n        const filtered = translatedBlockLabels.filter((f) => f.slug === b)?.[0]\n        return filtered?.label\n      })\n      .join(', ')\n\n  const itemsToShow = 5\n\n  if (selectedBlocks.length > itemsToShow) {\n    const more = selectedBlocks.length - itemsToShow\n    label = `${selectedBlocks.length} ${getTranslation(labels?.plural, i18n)} - ${i18n.t(\n      'fields:itemsAndMore',\n      { count: more, items: formatBlockList(selectedBlocks.slice(0, itemsToShow)) },\n    )}`\n  } else if (selectedBlocks.length > 0) {\n    label = `${selectedBlocks.length} ${getTranslation(\n      selectedBlocks.length === 1 ? labels?.singular : labels?.plural,\n      i18n,\n    )} - ${formatBlockList(selectedBlocks)}`\n  }\n\n  return <span>{label}</span>\n}\n"],"names":["getTranslation","React","useTranslation","BlocksCell","blocks","cellData","labels","i18n","selectedBlocks","Array","isArray","map","blockType","translatedBlockLabels","b","slug","label","singular","plural","formatBlockList","filtered","filter","f","join","itemsToShow","length","more","t","count","items","slice","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,gDAA+C;AAO9E,OAAO,MAAMC,aAAwC,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAE;IAChF,MAAM,EAAEC,IAAI,EAAE,GAAGL;IAEjB,MAAMM,iBAAiBC,MAAMC,OAAO,CAACL,YAAYA,SAASM,GAAG,CAAC,CAAC,EAAEC,SAAS,EAAE,GAAKA,aAAa,EAAE;IAEhG,MAAMC,wBAAwBT,QAAQO,IAAI,CAACG,IAAO,CAAA;YAChDC,MAAMD,EAAEC,IAAI;YACZC,OAAOhB,eAAec,EAAER,MAAM,CAACW,QAAQ,EAAEV;QAC3C,CAAA;IAEA,IAAIS,QAAQ,CAAC,EAAE,EAAEhB,eAAeM,QAAQY,QAAQX,MAAM,CAAC;IAEvD,MAAMY,kBAAkB,CAACf,SACvBA,OACGO,GAAG,CAAC,CAACG;YACJ,MAAMM,WAAWP,sBAAsBQ,MAAM,CAAC,CAACC,IAAMA,EAAEP,IAAI,KAAKD,IAAI,CAAC,EAAE;YACvE,OAAOM,UAAUJ;QACnB,GACCO,IAAI,CAAC;IAEV,MAAMC,cAAc;IAEpB,IAAIhB,eAAeiB,MAAM,GAAGD,aAAa;QACvC,MAAME,OAAOlB,eAAeiB,MAAM,GAAGD;QACrCR,QAAQ,CAAC,EAAER,eAAeiB,MAAM,CAAC,CAAC,EAAEzB,eAAeM,QAAQY,QAAQX,MAAM,GAAG,EAAEA,KAAKoB,CAAC,CAClF,uBACA;YAAEC,OAAOF;YAAMG,OAAOV,gBAAgBX,eAAesB,KAAK,CAAC,GAAGN;QAAc,GAC5E,CAAC;IACL,OAAO,IAAIhB,eAAeiB,MAAM,GAAG,GAAG;QACpCT,QAAQ,CAAC,EAAER,eAAeiB,MAAM,CAAC,CAAC,EAAEzB,eAClCQ,eAAeiB,MAAM,KAAK,IAAInB,QAAQW,WAAWX,QAAQY,QACzDX,MACA,GAAG,EAAEY,gBAAgBX,gBAAgB,CAAC;IAC1C;IAEA,qBAAO,KAACuB;kBAAMf;;AAChB,EAAC"}

package/dist/elements/Table/DefaultCell/fields/Checkbox/index.d.ts

@@ -1,4 +1,4 @@
-import type { DefaultCellComponentProps } from 'payload/types';
+import type { DefaultCellComponentProps } from 'payload';
 import React from 'react';
 import './index.scss';
 export declare const CheckboxCell: React.FC<DefaultCellComponentProps<boolean>>;

package/dist/elements/Table/DefaultCell/fields/Checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAE9D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAIrE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAOrE,CAAA"}

package/dist/elements/Table/DefaultCell/fields/Checkbox/index.js

@@ -1,7 +1,16 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-export const CheckboxCell = ({ cellData })=>/*#__PURE__*/ React.createElement("code", {
-        className: "bool-cell"
-    }, /*#__PURE__*/ React.createElement("span", null, JSON.stringify(cellData)));
+import { useTranslation } from '../../../../../providers/Translation/index.js';
+import './index.scss';
+export const CheckboxCell = ({ cellData })=>{
+    const { t } = useTranslation();
+    return /*#__PURE__*/ _jsx("code", {
+        className: "bool-cell",
+        children: /*#__PURE__*/ _jsx("span", {
+            children: t(`general:${cellData}`).toLowerCase()
+        })
+    });
+};
 
 //# sourceMappingURL=index.js.map

package/dist/elements/Table/DefaultCell/fields/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Checkbox/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps } from 'payload/types'\n\nimport React from 'react'\n\nimport './index.scss'\n\nexport const CheckboxCell: React.FC<DefaultCellComponentProps<boolean>> = ({ cellData }) => (\n  <code className=\"bool-cell\">\n    <span>{JSON.stringify(cellData)}</span>\n  </code>\n)\n"],"names":["React","CheckboxCell","cellData","code","className","span","JSON","stringify"],"rangeMappings":";;;;","mappings":"AAAA;AAGA,OAAOA,WAAW,QAAO;AAIzB,OAAO,MAAMC,eAA6D,CAAC,EAAEC,QAAQ,EAAE,iBACrF,oBAACC;QAAKC,WAAU;qBACd,oBAACC,cAAMC,KAAKC,SAAS,CAACL,YAEzB"}
+{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Checkbox/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport './index.scss'\n\nexport const CheckboxCell: React.FC<DefaultCellComponentProps<boolean>> = ({ cellData }) => {\n  const { t } = useTranslation()\n  return (\n    <code className=\"bool-cell\">\n      <span>{t(`general:${cellData}`).toLowerCase()}</span>\n    </code>\n  )\n}\n"],"names":["React","useTranslation","CheckboxCell","cellData","t","code","className","span","toLowerCase"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,gDAA+C;AAC9E,OAAO,eAAc;AAErB,OAAO,MAAMC,eAA6D,CAAC,EAAEC,QAAQ,EAAE;IACrF,MAAM,EAAEC,CAAC,EAAE,GAAGH;IACd,qBACE,KAACI;QAAKC,WAAU;kBACd,cAAA,KAACC;sBAAMH,EAAE,CAAC,QAAQ,EAAED,SAAS,CAAC,EAAEK,WAAW;;;AAGjD,EAAC"}

package/dist/elements/Table/DefaultCell/fields/Code/index.d.ts

@@ -1,4 +1,4 @@
-import type { DefaultCellComponentProps } from 'payload/types';
+import type { DefaultCellComponentProps } from 'payload';
 import React from 'react';
 import './index.scss';
 export interface CodeCellProps extends DefaultCellComponentProps<string> {

package/dist/elements/Table/DefaultCell/fields/Code/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Code/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAE9D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,MAAM,CAAC;IACtE,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAU5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Code/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,MAAM,CAAC;IACtE,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAU5C,CAAA"}