@payloadcms/ui 4.0.0-internal.e7d4ebc → 4.0.0-internal.ec73d44

package/dist/elements/Button/index.css

@@ -10,7 +10,6 @@
     }
 
     border-radius: var(--button-radius);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
@@ -50,17 +49,34 @@
     }
   }
 
+  .btn--style-primary-ghost {
+    color: var(--color-text-brand);
+    background-color: transparent;
+
+    &:hover:not(.btn--disabled) {
+      background-color: var(--color-bg-brand-tertiary);
+    }
+
+    &:active:not(.btn--disabled) {
+      background-color: var(--color-bg-brand-tertiary-hover);
+    }
+
+    &.btn--disabled {
+      color: var(--color-text-disabled);
+    }
+  }
+
   .btn.btn--style-secondary {
     color: var(--color-text);
     background-color: var(--color-bg);
-    border: var(--stroke-width-small) solid var(--special-border-translucent);
+    border: var(--stroke-width-small) solid var(--color-border-control);
 
     &:hover:not(.btn--disabled) {
-      background-color: var(--color-bg-transparent-hover);
+      background-color: var(--color-bg-secondary-hover);
     }
 
     &:active:not(.btn--disabled) {
-      background-color: var(--color-bg-transparent-pressed);
+      background-color: var(--color-bg-secondary-pressed);
     }
 
     &.btn--disabled {
@@ -139,6 +155,20 @@
     }
   }
 
+  /* Selected state - primary buttons */
+  .btn.btn--style-primary.btn--selected,
+  .btn.btn--style-primary.btn--selected:hover,
+  .btn.btn--style-primary.btn--selected:active {
+    background-color: var(--color-bg-brand-pressed);
+  }
+
+  /* Selected state - primary ghost buttons */
+  .btn.btn--style-primary-ghost.btn--selected,
+  .btn.btn--style-primary-ghost.btn--selected:hover,
+  .btn.btn--style-primary-ghost.btn--selected:active {
+    background-color: var(--color-bg-brand-tertiary-hover);
+  }
+
   /* Selected state - ghost buttons */
   .btn.btn--style-ghost.btn--selected,
   .btn.btn--style-ghost.btn--selected:hover,
@@ -363,12 +393,12 @@
   }
 
   .btn--withPopup.btn--style-secondary {
-    --separator-color: var(--special-border-translucent);
+    --separator-color: var(--color-border-control);
     .btn,
     .popup-button {
       color: var(--color-text);
       background-color: var(--color-bg);
-      border: var(--stroke-width-small) solid var(--special-border-translucent);
+      border: var(--stroke-width-small) solid var(--color-border-control);
 
       &:hover,
       &:active {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAavC,OAAO,aAAa,CAAA;AAepB,eAAO,MAAM,cAAc;;;;;;uBA4B1B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuKlC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAcvC,OAAO,aAAa,CAAA;AAgBpB,eAAO,MAAM,cAAc;;;;;;uBA4B1B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmLlC,CAAA"}

package/dist/elements/Button/index.js

@@ -3,6 +3,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { Fragment } from 'react';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { ClipboardIcon } from '../../icons/Clipboard/index.js';
 import { EditIcon } from '../../icons/Edit/index.js';
 import { LinkIcon } from '../../icons/Link/index.js';
 import { PlusIcon } from '../../icons/Plus/index.js';
@@ -17,6 +18,7 @@ import './index.css';
 import { Tooltip } from '../Tooltip/index.js';
 const icons = {
   chevron: ChevronIcon,
+  clipboard: ClipboardIcon,
   edit: EditIcon,
   link: LinkIcon,
   plus: PlusIcon,
@@ -61,7 +63,11 @@ export const Button = props => {
   const {
     id,
     type = 'button',
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup,
     'aria-label': ariaLabel,
+    'aria-pressed': ariaPressed,
     buttonStyle = 'primary',
     children,
     className,
@@ -75,7 +81,9 @@ export const Button = props => {
     margin = true,
     newTab,
     onClick,
+    onKeyDown,
     onMouseDown,
+    popupAriaLabel,
     popupIconSize,
     ref,
     round,
@@ -107,11 +115,16 @@ export const Button = props => {
   const buttonProps = {
     id,
     type,
+    'aria-controls': ariaControls,
     'aria-disabled': isDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup,
     'aria-label': ariaLabel,
+    'aria-pressed': ariaPressed,
     className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,
     disabled: isDisabled,
     onClick: !isDisabled ? handleClick : undefined,
+    onKeyDown: !isDisabled ? onKeyDown : undefined,
     onMouseDown: !isDisabled ? onMouseDown : undefined,
     onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,
     onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,
@@ -185,13 +198,14 @@ export const Button = props => {
         button: /*#__PURE__*/_jsx(ChevronIcon, {
           size: popupIconSize
         }),
-        buttonAriaLabel: t('general:moreOptions'),
+        buttonAriaLabel: popupAriaLabel || t('general:moreOptions'),
         buttonSize: size,
         className: disabled && !enableSubMenu ? `${baseClass}--popup-disabled` : '',
         disabled: disabled && !enableSubMenu,
         horizontalAlign: "right",
         id: `${id}-popup`,
         noBackground: true,
+        popupType: "menu",
         render: ({
           close
         }) => SubMenuPopupContent({

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Fragment","ChevronIcon","EditIcon","LinkIcon","PlusIcon","SpinnerIcon","SwapIcon","WriteIcon","XIcon","useTranslation","Link","Popup","Tooltip","icons","chevron","edit","link","plus","swap","write","x","baseClass","ButtonContents","children","icon","loading","showTooltip","tooltip","BuiltInIcon","undefined","isReactIcon","_jsxs","_jsx","className","show","size","Button","props","id","type","ariaLabel","buttonStyle","disabled","el","enableSubMenu","extraButtonProps","iconPosition","margin","newTab","onClick","onMouseDown","popupIconSize","ref","round","selected","SubMenuPopupContent","to","url","setShowTooltip","useState","t","isDisabled","classes","filter","Boolean","join","handleClick","event","preventDefault","styleClasses","buttonProps","onPointerEnter","onPointerLeave","rel","target","title","buttonElement","href","prefetch","Tag","button","buttonAriaLabel","buttonSize","horizontalAlign","noBackground","render","close","verticalAlign"],"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SpinnerIcon } from '../../icons/Spinner/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { WriteIcon } from '../../icons/Write/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Link } from '../Link/index.js'\nimport { Popup } from '../Popup/index.js'\nimport './index.css'\nimport { Tooltip } from '../Tooltip/index.js'\n\nconst icons = {\n  chevron: ChevronIcon,\n  edit: EditIcon,\n  link: LinkIcon,\n  plus: PlusIcon,\n  swap: SwapIcon,\n  write: WriteIcon,\n  x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, loading, showTooltip, tooltip }) => {\n  const BuiltInIcon = typeof icon === 'string' ? icons[icon] : undefined\n  // Check if icon is a React element (including RSC payloads) - not a string icon name\n  const isReactIcon = icon && typeof icon !== 'string'\n\n  return (\n    <Fragment>\n      {tooltip && (\n        <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      {loading && (\n        <span className={`${baseClass}__loading`}>\n          <SpinnerIcon />\n        </span>\n      )}\n      <span className={`${baseClass}__content`}>\n        {children && <span className={`${baseClass}__label`}>{children}</span>}\n        {icon && (\n          <span className={`${baseClass}__icon`}>\n            {isReactIcon && icon}\n            {BuiltInIcon && <BuiltInIcon size={24} />}\n          </span>\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const Button: React.FC<Props> = (props) => {\n  const {\n    id,\n    type = 'button',\n    'aria-label': ariaLabel,\n    buttonStyle = 'primary',\n    children,\n    className,\n    disabled,\n    el = 'button',\n    enableSubMenu,\n    extraButtonProps = {},\n    icon,\n    iconPosition = 'right',\n    loading,\n    margin = true,\n    newTab,\n    onClick,\n    onMouseDown,\n    popupIconSize,\n    ref,\n    round,\n    selected,\n    size = 'medium',\n    SubMenuPopupContent,\n    to,\n    tooltip,\n    url,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const { t } = useTranslation()\n\n  // Explicit `=== true` check preserves `false` for aria-disabled attribute.\n  // Using `disabled || loading` would treat `false` as falsy, omitting the attribute entirely.\n  const isDisabled = disabled === true || loading === true\n\n  const classes = [\n    baseClass,\n    className && className,\n    icon && `${baseClass}--icon`,\n    icon && !children && `${baseClass}--icon-only`,\n    size && `${baseClass}--size-${size}`,\n    icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n    tooltip && `${baseClass}--has-tooltip`,\n    !SubMenuPopupContent && `${baseClass}--withoutPopup`,\n    !margin && `${baseClass}--no-margin`,\n    loading && `${baseClass}--loading`,\n    icon && !children && `${baseClass}--icon-only`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  function handleClick(event) {\n    setShowTooltip(false)\n    if (type !== 'submit' && onClick) {\n      event.preventDefault()\n    }\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const styleClasses = [\n    buttonStyle && `${baseClass}--style-${buttonStyle}`,\n    isDisabled && `${baseClass}--disabled`,\n    round && `${baseClass}--round`,\n    selected && `${baseClass}--selected`,\n    SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const buttonProps = {\n    id,\n    type,\n    'aria-disabled': isDisabled,\n    'aria-label': ariaLabel,\n    className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,\n    disabled: isDisabled,\n    onClick: !isDisabled ? handleClick : undefined,\n    onMouseDown: !isDisabled ? onMouseDown : undefined,\n    onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,\n    onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,\n    rel: newTab ? 'noopener noreferrer' : undefined,\n    target: newTab ? '_blank' : undefined,\n    title: tooltip ? undefined : ariaLabel,\n    ...extraButtonProps,\n  }\n\n  let buttonElement\n\n  switch (el) {\n    case 'anchor':\n      buttonElement = (\n        <a\n          {...buttonProps}\n          href={!isDisabled ? url : undefined}\n          ref={ref as React.RefObject<HTMLAnchorElement>}\n        >\n          <ButtonContents icon={icon} loading={loading} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </a>\n      )\n      break\n\n    case 'link':\n      if (isDisabled) {\n        buttonElement = (\n          <div {...buttonProps}>\n            <ButtonContents\n              icon={icon}\n              loading={loading}\n              showTooltip={showTooltip}\n              tooltip={tooltip}\n            >\n              {children}\n            </ButtonContents>\n          </div>\n        )\n      }\n\n      buttonElement = (\n        <Link {...buttonProps} href={to || url} prefetch={false}>\n          <ButtonContents icon={icon} loading={loading} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Link>\n      )\n\n      break\n\n    default:\n      const Tag = el // eslint-disable-line no-case-declarations\n\n      buttonElement = (\n        <Tag ref={ref} {...buttonProps}>\n          <ButtonContents icon={icon} loading={loading} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Tag>\n      )\n      break\n  }\n  if (SubMenuPopupContent) {\n    return (\n      <div className={styleClasses}>\n        {buttonElement}\n        <Popup\n          button={<ChevronIcon size={popupIconSize} />}\n          buttonAriaLabel={t('general:moreOptions')}\n          buttonSize={size}\n          className={disabled && !enableSubMenu ? `${baseClass}--popup-disabled` : ''}\n          disabled={disabled && !enableSubMenu}\n          horizontalAlign=\"right\"\n          id={`${id}-popup`}\n          noBackground\n          render={({ close }) => SubMenuPopupContent({ close: () => close() })}\n          size=\"small\"\n          verticalAlign=\"bottom\"\n        />\n      </div>\n    )\n  }\n\n  return buttonElement\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","Fragment","ChevronIcon","ClipboardIcon","EditIcon","LinkIcon","PlusIcon","SpinnerIcon","SwapIcon","WriteIcon","XIcon","useTranslation","Link","Popup","Tooltip","icons","chevron","clipboard","edit","link","plus","swap","write","x","baseClass","ButtonContents","children","icon","loading","showTooltip","tooltip","BuiltInIcon","undefined","isReactIcon","_jsxs","_jsx","className","show","size","Button","props","id","type","ariaControls","ariaExpanded","ariaHasPopup","ariaLabel","ariaPressed","buttonStyle","disabled","el","enableSubMenu","extraButtonProps","iconPosition","margin","newTab","onClick","onKeyDown","onMouseDown","popupAriaLabel","popupIconSize","ref","round","selected","SubMenuPopupContent","to","url","setShowTooltip","useState","t","isDisabled","classes","filter","Boolean","join","handleClick","event","preventDefault","styleClasses","buttonProps","onPointerEnter","onPointerLeave","rel","target","title","buttonElement","href","prefetch","Tag","button","buttonAriaLabel","buttonSize","horizontalAlign","noBackground","popupType","render","close","verticalAlign"],"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { ClipboardIcon } from '../../icons/Clipboard/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SpinnerIcon } from '../../icons/Spinner/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { WriteIcon } from '../../icons/Write/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Link } from '../Link/index.js'\nimport { Popup } from '../Popup/index.js'\nimport './index.css'\nimport { Tooltip } from '../Tooltip/index.js'\n\nconst icons = {\n  chevron: ChevronIcon,\n  clipboard: ClipboardIcon,\n  edit: EditIcon,\n  link: LinkIcon,\n  plus: PlusIcon,\n  swap: SwapIcon,\n  write: WriteIcon,\n  x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, loading, showTooltip, tooltip }) => {\n  const BuiltInIcon = typeof icon === 'string' ? icons[icon] : undefined\n  // Check if icon is a React element (including RSC payloads) - not a string icon name\n  const isReactIcon = icon && typeof icon !== 'string'\n\n  return (\n    <Fragment>\n      {tooltip && (\n        <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      {loading && (\n        <span className={`${baseClass}__loading`}>\n          <SpinnerIcon />\n        </span>\n      )}\n      <span className={`${baseClass}__content`}>\n        {children && <span className={`${baseClass}__label`}>{children}</span>}\n        {icon && (\n          <span className={`${baseClass}__icon`}>\n            {isReactIcon && icon}\n            {BuiltInIcon && <BuiltInIcon size={24} />}\n          </span>\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const Button: React.FC<Props> = (props) => {\n  const {\n    id,\n    type = 'button',\n    'aria-controls': ariaControls,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    'aria-label': ariaLabel,\n    'aria-pressed': ariaPressed,\n    buttonStyle = 'primary',\n    children,\n    className,\n    disabled,\n    el = 'button',\n    enableSubMenu,\n    extraButtonProps = {},\n    icon,\n    iconPosition = 'right',\n    loading,\n    margin = true,\n    newTab,\n    onClick,\n    onKeyDown,\n    onMouseDown,\n    popupAriaLabel,\n    popupIconSize,\n    ref,\n    round,\n    selected,\n    size = 'medium',\n    SubMenuPopupContent,\n    to,\n    tooltip,\n    url,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const { t } = useTranslation()\n\n  // Explicit `=== true` check preserves `false` for aria-disabled attribute.\n  // Using `disabled || loading` would treat `false` as falsy, omitting the attribute entirely.\n  const isDisabled = disabled === true || loading === true\n\n  const classes = [\n    baseClass,\n    className && className,\n    icon && `${baseClass}--icon`,\n    icon && !children && `${baseClass}--icon-only`,\n    size && `${baseClass}--size-${size}`,\n    icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n    tooltip && `${baseClass}--has-tooltip`,\n    !SubMenuPopupContent && `${baseClass}--withoutPopup`,\n    !margin && `${baseClass}--no-margin`,\n    loading && `${baseClass}--loading`,\n    icon && !children && `${baseClass}--icon-only`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  function handleClick(event) {\n    setShowTooltip(false)\n    if (type !== 'submit' && onClick) {\n      event.preventDefault()\n    }\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const styleClasses = [\n    buttonStyle && `${baseClass}--style-${buttonStyle}`,\n    isDisabled && `${baseClass}--disabled`,\n    round && `${baseClass}--round`,\n    selected && `${baseClass}--selected`,\n    SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const buttonProps = {\n    id,\n    type,\n    'aria-controls': ariaControls,\n    'aria-disabled': isDisabled,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    'aria-label': ariaLabel,\n    'aria-pressed': ariaPressed,\n    className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,\n    disabled: isDisabled,\n    onClick: !isDisabled ? handleClick : undefined,\n    onKeyDown: !isDisabled ? onKeyDown : undefined,\n    onMouseDown: !isDisabled ? onMouseDown : undefined,\n    onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,\n    onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,\n    rel: newTab ? 'noopener noreferrer' : undefined,\n    target: newTab ? '_blank' : undefined,\n    title: tooltip ? undefined : ariaLabel,\n    ...extraButtonProps,\n  }\n\n  let buttonElement\n\n  switch (el) {\n    case 'anchor':\n      buttonElement = (\n        <a\n          {...buttonProps}\n          href={!isDisabled ? url : undefined}\n          ref={ref as React.RefObject<HTMLAnchorElement>}\n        >\n          <ButtonContents icon={icon} loading={loading} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </a>\n      )\n      break\n\n    case 'link':\n      if (isDisabled) {\n        buttonElement = (\n          <div {...buttonProps}>\n            <ButtonContents\n              icon={icon}\n              loading={loading}\n              showTooltip={showTooltip}\n              tooltip={tooltip}\n            >\n              {children}\n            </ButtonContents>\n          </div>\n        )\n      }\n\n      buttonElement = (\n        <Link {...buttonProps} href={to || url} prefetch={false}>\n          <ButtonContents icon={icon} loading={loading} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Link>\n      )\n\n      break\n\n    default:\n      const Tag = el // eslint-disable-line no-case-declarations\n\n      buttonElement = (\n        <Tag ref={ref} {...buttonProps}>\n          <ButtonContents icon={icon} loading={loading} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Tag>\n      )\n      break\n  }\n  if (SubMenuPopupContent) {\n    return (\n      <div className={styleClasses}>\n        {buttonElement}\n        <Popup\n          button={<ChevronIcon size={popupIconSize} />}\n          buttonAriaLabel={popupAriaLabel || t('general:moreOptions')}\n          buttonSize={size}\n          className={disabled && !enableSubMenu ? `${baseClass}--popup-disabled` : ''}\n          disabled={disabled && !enableSubMenu}\n          horizontalAlign=\"right\"\n          id={`${id}-popup`}\n          noBackground\n          popupType=\"menu\"\n          render={({ close }) => SubMenuPopupContent({ close: () => close() })}\n          size=\"small\"\n          verticalAlign=\"bottom\"\n        />\n      </div>\n    )\n  }\n\n  return buttonElement\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,13 +1,17 @@
-import type { ElementType, MouseEvent } from 'react';
+import type { AriaAttributes, ElementType, KeyboardEventHandler, MouseEvent } from 'react';
 import type React from 'react';
 type secondaryAction = {
     label: string;
     onClick: (event: MouseEvent) => void;
 };
 export type Props = {
-    'aria-label'?: string;
+    'aria-controls'?: AriaAttributes['aria-controls'];
+    'aria-expanded'?: AriaAttributes['aria-expanded'];
+    'aria-haspopup'?: AriaAttributes['aria-haspopup'];
+    'aria-label'?: AriaAttributes['aria-label'];
+    'aria-pressed'?: AriaAttributes['aria-pressed'];
     buttonId?: string;
-    buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary';
+    buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'link' | 'pill' | 'primary' | 'primary-ghost' | 'secondary';
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
@@ -27,7 +31,9 @@ export type Props = {
     margin?: boolean;
     newTab?: boolean;
     onClick?: (event: MouseEvent) => void;
+    onKeyDown?: KeyboardEventHandler;
     onMouseDown?: (event: MouseEvent) => void;
+    popupAriaLabel?: string;
     /**
      * Size of the chevron icon in the split-button popup trigger.
      * @default 24

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,QAAQ,GAAG,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,CAAA;IACnF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,EAAE,GAAG,EAAE,CAAA;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACnE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAA;IACtD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACvE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAC1F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,eAAe,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IACjD,eAAe,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IACjD,eAAe,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IACjD,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAA;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EACR,QAAQ,GACR,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,GACT,eAAe,GACf,WAAW,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,EAAE,GAAG,EAAE,CAAA;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACnE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAA;IACtD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACvE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Button/types.ts"],"sourcesContent":["import type { ElementType, MouseEvent } from 'react'\nimport type React from 'react'\n\ntype secondaryAction = {\n  label: string\n  onClick: (event: MouseEvent) => void\n}\n\nexport type Props = {\n  'aria-label'?: string\n  buttonId?: string\n  buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary'\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  el?: 'anchor' | 'link' | ElementType\n  /**\n   * Setting to `true` will allow the submenu to be opened when the button is disabled\n   */\n  enableSubMenu?: boolean\n  extraButtonProps?: Record<string, any>\n  icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode\n  iconPosition?: 'left' | 'right'\n  id?: string\n  /**\n   * Shows a loading spinner and hides content. Disables interactions.\n   */\n  loading?: boolean\n  margin?: boolean\n  newTab?: boolean\n  onClick?: (event: MouseEvent) => void\n  onMouseDown?: (event: MouseEvent) => void\n  /**\n   * Size of the chevron icon in the split-button popup trigger.\n   * @default 24\n   */\n  popupIconSize?: 16 | 24\n  ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement | null>\n  round?: boolean\n  secondaryActions?: secondaryAction | secondaryAction[]\n  /**\n   * Applies selected/active styling (e.g., for popup triggers when popup is open)\n   */\n  selected?: boolean\n  size?: 'large' | 'medium'\n  SubMenuPopupContent?: (props: { close: () => void }) => React.ReactNode\n  to?: string\n  tooltip?: string\n  type?: 'button' | 'submit'\n  url?: string\n}\n"],"mappings":"AAQA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Button/types.ts"],"sourcesContent":["import type { AriaAttributes, ElementType, KeyboardEventHandler, MouseEvent } from 'react'\nimport type React from 'react'\n\ntype secondaryAction = {\n  label: string\n  onClick: (event: MouseEvent) => void\n}\n\nexport type Props = {\n  'aria-controls'?: AriaAttributes['aria-controls']\n  'aria-expanded'?: AriaAttributes['aria-expanded']\n  'aria-haspopup'?: AriaAttributes['aria-haspopup']\n  'aria-label'?: AriaAttributes['aria-label']\n  'aria-pressed'?: AriaAttributes['aria-pressed']\n  buttonId?: string\n  buttonStyle?:\n    | 'dashed'\n    | 'destructive'\n    | 'ghost'\n    | 'link'\n    | 'pill'\n    | 'primary'\n    | 'primary-ghost'\n    | 'secondary'\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  el?: 'anchor' | 'link' | ElementType\n  /**\n   * Setting to `true` will allow the submenu to be opened when the button is disabled\n   */\n  enableSubMenu?: boolean\n  extraButtonProps?: Record<string, any>\n  icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode\n  iconPosition?: 'left' | 'right'\n  id?: string\n  /**\n   * Shows a loading spinner and hides content. Disables interactions.\n   */\n  loading?: boolean\n  margin?: boolean\n  newTab?: boolean\n  onClick?: (event: MouseEvent) => void\n  onKeyDown?: KeyboardEventHandler\n  onMouseDown?: (event: MouseEvent) => void\n  popupAriaLabel?: string\n  /**\n   * Size of the chevron icon in the split-button popup trigger.\n   * @default 24\n   */\n  popupIconSize?: 16 | 24\n  ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement | null>\n  round?: boolean\n  secondaryActions?: secondaryAction | secondaryAction[]\n  /**\n   * Applies selected/active styling (e.g., for popup triggers when popup is open)\n   */\n  selected?: boolean\n  size?: 'large' | 'medium'\n  SubMenuPopupContent?: (props: { close: () => void }) => React.ReactNode\n  to?: string\n  tooltip?: string\n  type?: 'button' | 'submit'\n  url?: string\n}\n"],"mappings":"AAQA","ignoreList":[]}

package/dist/elements/Card/index.css

@@ -1,11 +1,11 @@
 @layer payload-default {
   .card {
-    background: var(--color-bg-secondary);
-    padding: var(--spacer-2-5) var(--spacer-3);
+    background: var(--color-bg);
+    padding: var(--spacer-2-5);
     width: 100%;
     min-height: 4rem;
     position: relative;
-    border-radius: var(--radius-medium);
+    border-radius: var(--radius-large);
     border: var(--stroke-width-small) solid var(--color-border);
     display: flex;
     align-items: stretch;
@@ -14,10 +14,9 @@
 
   .card__title {
     letter-spacing: var(--text-body-medium-letter-spacing);
-    font-family: var(--text-body-medium-strong-font-family);
-    font-size: var(--text-body-medium-strong-font-size);
-    font-weight: var(--text-body-medium-strong-font-weight);
-    line-height: var(--text-body-medium-strong-line-height);
+    font-size: var(--text-body-medium-bold-font-size);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
     color: var(--color-text);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -36,7 +35,7 @@
     cursor: pointer;
 
     &:hover {
-      background: var(--color-bg-secondary-hover);
+      background: var(--color-bg-secondary);
     }
 
     &:has(.card__click:active) {

package/dist/elements/CardGrid/index.css

@@ -0,0 +1,19 @@
+@layer payload-default {
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: var(--spacer-3);
+    margin: 0;
+    list-style: none;
+    padding: var(--spacer-4) var(--gutter-h);
+  }
+
+  .card-grid__item {
+    min-width: 0;
+  }
+
+  .card-grid__item--selected {
+    border-radius: var(--radius-large);
+    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
+  }
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.css';
+export type CardGridProps<T> = {
+    readonly ariaLabel: string;
+    readonly className?: string;
+    readonly getItemClassName?: (item: T) => string | undefined;
+    readonly getKey: (item: T) => React.Key;
+    readonly items: readonly T[];
+    readonly renderItem: (item: T) => React.ReactNode;
+};
+/** A presentation-only responsive grid. Selection, navigation, and drag behavior belong to callers. */
+export declare const CardGrid: <T>({ ariaLabel, className, getItemClassName, getKey, items, renderItem, }: CardGridProps<T>) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CardGrid/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAA;IAC3D,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAA;IACvC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAA;IAC5B,QAAQ,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;CAClD,CAAA;AAED,uGAAuG;AACvG,eAAO,MAAM,QAAQ,GAAI,CAAC,0EAOvB,aAAa,CAAC,CAAC,CAAC,sBAWlB,CAAA"}

package/dist/elements/CardGrid/index.js

@@ -0,0 +1,23 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.css';
+const baseClass = 'card-grid';
+/** A presentation-only responsive grid. Selection, navigation, and drag behavior belong to callers. */
+export const CardGrid = ({
+  ariaLabel,
+  className,
+  getItemClassName,
+  getKey,
+  items,
+  renderItem
+}) => /*#__PURE__*/_jsx("ul", {
+  "aria-label": ariaLabel,
+  className: [baseClass, className].filter(Boolean).join(' '),
+  children: items.map(item => /*#__PURE__*/_jsx("li", {
+    className: [`${baseClass}__item`, getItemClassName?.(item)].filter(Boolean).join(' '),
+    children: renderItem(item)
+  }, getKey(item)))
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","CardGrid","ariaLabel","className","getItemClassName","getKey","items","renderItem","_jsx","filter","Boolean","join","map","item"],"sources":["../../../src/elements/CardGrid/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'card-grid'\n\nexport type CardGridProps<T> = {\n  readonly ariaLabel: string\n  readonly className?: string\n  readonly getItemClassName?: (item: T) => string | undefined\n  readonly getKey: (item: T) => React.Key\n  readonly items: readonly T[]\n  readonly renderItem: (item: T) => React.ReactNode\n}\n\n/** A presentation-only responsive grid. Selection, navigation, and drag behavior belong to callers. */\nexport const CardGrid = <T,>({\n  ariaLabel,\n  className,\n  getItemClassName,\n  getKey,\n  items,\n  renderItem,\n}: CardGridProps<T>) => (\n  <ul aria-label={ariaLabel} className={[baseClass, className].filter(Boolean).join(' ')}>\n    {items.map((item) => (\n      <li\n        className={[`${baseClass}__item`, getItemClassName?.(item)].filter(Boolean).join(' ')}\n        key={getKey(item)}\n      >\n        {renderItem(item)}\n      </li>\n    ))}\n  </ul>\n)\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAWlB;AACA,OAAO,MAAMC,QAAA,GAAWA,CAAK;EAC3BC,SAAS;EACTC,SAAS;EACTC,gBAAgB;EAChBC,MAAM;EACNC,KAAK;EACLC;AAAU,CACO,kBACjBC,IAAA,CAAC;EAAG,cAAYN,SAAA;EAAWC,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACM,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;YAC/EL,KAAA,CAAMM,GAAG,CAAEC,IAAA,iBACVL,IAAA,CAAC;IACCL,SAAA,EAAW,CAAC,GAAGH,SAAA,QAAiB,EAAEI,gBAAA,GAAmBS,IAAA,EAAM,CAACJ,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAGhFJ,UAAA,CAAWM,IAAA;KAFPR,MAAA,CAAOQ,IAAA","ignoreList":[]}

package/dist/elements/ChangeSummary/index.css

@@ -0,0 +1,18 @@
+@layer payload-default {
+  .change-summary {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacer-1);
+  }
+
+  .change-summary__operations {
+    font-family: var(--text-body-small-font-family);
+    font-size: var(--text-body-small-font-size);
+    color: var(--color-text-secondary);
+  }
+
+  .change-summary__view {
+    color: var(--color-text-brand);
+  }
+}

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

@@ -0,0 +1,29 @@
+import type { BranchOperation } from 'payload';
+import type React from 'react';
+import './index.css';
+/** The least a change has to say about itself to be counted here. */
+export type SummarizableChange = {
+    /** Absent for a global. */
+    collectionSlug?: string;
+    globalSlug?: string;
+    operation?: BranchOperation;
+};
+/**
+ * What a set of branch changes amounts to, in one sentence.
+ *
+ * "Changes to 3 Pages, 2 Media, and 1 Post" answers the question a bare count cannot
+ * — whether this merge touches the things the reader cares about — without making them
+ * open a list to find out. It is deliberately a summary and not a table: the table
+ * already exists on the branch view, and callers that can reach it link there themselves.
+ *
+ * Shared rather than written per caller, because the merge modal, a scheduled merge and
+ * the manage modal are all answering the same question about the same kind of set, and
+ * three hand-rolled sentences would drift apart.
+ */
+export declare const ChangeSummary: React.FC<{
+    changes: SummarizableChange[];
+    className?: string;
+    /** Shown as a second, muted line. Off where the operations are already on screen. */
+    showOperations?: boolean;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ChangeSummary/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,aAAa,CAAA;AAIpB,qEAAqE;AACrE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,2BAA2B;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,eAAe,CAAA;CAC5B,CAAA;AAKD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qFAAqF;IACrF,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAgEA,CAAA"}

package/dist/elements/ChangeSummary/index.js

@@ -0,0 +1,147 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import './index.css';
+const baseClass = 'change-summary';
+/** Beyond this the sentence stops being readable, and the rest is rolled into a count. */
+const MAX_NAMED_COLLECTIONS = 3;
+/**
+ * What a set of branch changes amounts to, in one sentence.
+ *
+ * "Changes to 3 Pages, 2 Media, and 1 Post" answers the question a bare count cannot
+ * — whether this merge touches the things the reader cares about — without making them
+ * open a list to find out. It is deliberately a summary and not a table: the table
+ * already exists on the branch view, and callers that can reach it link there themselves.
+ *
+ * Shared rather than written per caller, because the merge modal, a scheduled merge and
+ * the manage modal are all answering the same question about the same kind of set, and
+ * three hand-rolled sentences would drift apart.
+ */
+export const ChangeSummary = t0 => {
+  const $ = _c(12);
+  const {
+    changes,
+    className,
+    showOperations: t1
+  } = t0;
+  const showOperations = t1 === undefined ? false : t1;
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  if (!changes.length) {
+    return null;
+  }
+  let t2;
+  if ($[0] !== changes || $[1] !== className || $[2] !== getEntityConfig || $[3] !== i18n || $[4] !== showOperations || $[5] !== t) {
+    const counts = new Map();
+    for (const change of changes) {
+      const key = change.globalSlug ? `global:${change.globalSlug}` : `collection:${change.collectionSlug}`;
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+    const groups = [...counts.entries()].sort(_temp);
+    let t3;
+    if ($[7] !== getEntityConfig || $[8] !== i18n) {
+      t3 = t4 => {
+        const [key_0, count] = t4;
+        const [kind, slug] = key_0.split(":");
+        if (kind === "global") {
+          const label = getEntityConfig({
+            globalSlug: slug
+          })?.label;
+          return `${count} ${getTranslation(label ?? slug, i18n)}`;
+        }
+        const labels = getEntityConfig({
+          collectionSlug: slug
+        })?.labels;
+        const label_0 = count === 1 ? labels?.singular : labels?.plural;
+        return `${count} ${getTranslation(label_0 ?? slug, i18n)}`;
+      };
+      $[7] = getEntityConfig;
+      $[8] = i18n;
+      $[9] = t3;
+    } else {
+      t3 = $[9];
+    }
+    const named = groups.slice(0, MAX_NAMED_COLLECTIONS).map(t3);
+    const remainder = groups.slice(MAX_NAMED_COLLECTIONS).reduce(_temp2, 0);
+    if (remainder) {
+      named.push(t("branching:andMoreChanges", {
+        count: remainder
+      }));
+    }
+    const summary = new Intl.ListFormat(i18n.language, {
+      type: "conjunction",
+      style: "long"
+    }).format(named);
+    const operations = showOperations ? summarizeOperations({
+      changes,
+      t
+    }) : null;
+    let t4;
+    if ($[10] !== className) {
+      t4 = [baseClass, className].filter(Boolean);
+      $[10] = className;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    t2 = _jsxs("div", {
+      className: t4.join(" "),
+      children: [_jsx("span", {
+        className: `${baseClass}__sentence`,
+        children: t("branching:changesTo", {
+          summary
+        })
+      }), operations && _jsx("span", {
+        className: `${baseClass}__operations`,
+        children: operations
+      })]
+    });
+    $[0] = changes;
+    $[1] = className;
+    $[2] = getEntityConfig;
+    $[3] = i18n;
+    $[4] = showOperations;
+    $[5] = t;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+};
+/**
+ * "2 Created · 3 Updated", in the order the operations happen to a document rather than
+ * by count — this line is about what kind of merge it is, and a delete matters at any size.
+ */
+const summarizeOperations = ({
+  changes,
+  t
+}) => {
+  const order = ['create', 'update', 'delete'];
+  const parts = order.reduce((acc, operation) => {
+    const count = changes.filter(change => change.operation === operation).length;
+    if (count) {
+      acc.push(`${count} ${t(`branching:operation_${operation}`)}`);
+    }
+    return acc;
+  }, []);
+  return parts.length ? parts.join(' · ') : null;
+};
+function _temp(t0, t1) {
+  const [slugA, countA] = t0;
+  const [slugB, countB] = t1;
+  return countB - countA || slugA.localeCompare(slugB);
+}
+function _temp2(total, t0) {
+  const [, count_0] = t0;
+  return total + count_0;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","useConfig","useTranslation","baseClass","MAX_NAMED_COLLECTIONS","ChangeSummary","t0","$","changes","className","showOperations","t1","undefined","getEntityConfig","i18n","t","length","t2","counts","Map","change","key","globalSlug","collectionSlug","set","get","groups","entries","sort","_temp","t3","t4","key_0","count","kind","slug","split","label","labels","label_0","singular","plural","named","slice","map","remainder","reduce","_temp2","push","summary","Intl","ListFormat","language","type","style","format","operations","summarizeOperations","filter","Boolean","_jsxs","join","children","_jsx","order","parts","acc","operation","slugA","countA","slugB","countB","localeCompare","total","count_0"],"sources":["../../../src/elements/ChangeSummary/index.tsx"],"sourcesContent":["'use client'\n\nimport type { BranchOperation } from 'payload'\nimport type React from 'react'\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'change-summary'\n\n/** The least a change has to say about itself to be counted here. */\nexport type SummarizableChange = {\n  /** Absent for a global. */\n  collectionSlug?: string\n  globalSlug?: string\n  operation?: BranchOperation\n}\n\n/** Beyond this the sentence stops being readable, and the rest is rolled into a count. */\nconst MAX_NAMED_COLLECTIONS = 3\n\n/**\n * What a set of branch changes amounts to, in one sentence.\n *\n * \"Changes to 3 Pages, 2 Media, and 1 Post\" answers the question a bare count cannot\n * — whether this merge touches the things the reader cares about — without making them\n * open a list to find out. It is deliberately a summary and not a table: the table\n * already exists on the branch view, and callers that can reach it link there themselves.\n *\n * Shared rather than written per caller, because the merge modal, a scheduled merge and\n * the manage modal are all answering the same question about the same kind of set, and\n * three hand-rolled sentences would drift apart.\n */\nexport const ChangeSummary: React.FC<{\n  changes: SummarizableChange[]\n  className?: string\n  /** Shown as a second, muted line. Off where the operations are already on screen. */\n  showOperations?: boolean\n}> = ({ changes, className, showOperations = false }) => {\n  const { getEntityConfig } = useConfig()\n  const { i18n, t } = useTranslation()\n\n  if (!changes.length) {\n    return null\n  }\n\n  // Keyed by kind as well as slug: a global and a collection could share a slug, and they\n  // are labelled from different places.\n  const counts = new Map<string, number>()\n\n  for (const change of changes) {\n    const key = change.globalSlug\n      ? `global:${change.globalSlug}`\n      : `collection:${change.collectionSlug}`\n\n    counts.set(key, (counts.get(key) ?? 0) + 1)\n  }\n\n  // Biggest group first: it is the one that describes the merge. Ties fall back to the\n  // slug so the sentence is stable between renders rather than following Map order.\n  const groups = [...counts.entries()].sort(\n    ([slugA, countA], [slugB, countB]) => countB - countA || slugA.localeCompare(slugB),\n  )\n\n  const named = groups.slice(0, MAX_NAMED_COLLECTIONS).map(([key, count]) => {\n    const [kind, slug] = key.split(':') as ['collection' | 'global', string]\n\n    // A branch holds at most one change per global, so there is no plural form to pick.\n    if (kind === 'global') {\n      const label = getEntityConfig({ globalSlug: slug })?.label\n\n      return `${count} ${getTranslation(label ?? slug, i18n)}`\n    }\n\n    const labels = getEntityConfig({ collectionSlug: slug })?.labels\n    const label = count === 1 ? labels?.singular : labels?.plural\n\n    return `${count} ${getTranslation(label ?? slug, i18n)}`\n  })\n\n  const remainder = groups\n    .slice(MAX_NAMED_COLLECTIONS)\n    .reduce((total, [, count]) => total + count, 0)\n\n  if (remainder) {\n    named.push(t('branching:andMoreChanges', { count: remainder }))\n  }\n\n  // `Intl.ListFormat` rather than joining on \", \" and \"and\": the separator and the\n  // conjunction are both language-specific, and this is a translated sentence.\n  const summary = new Intl.ListFormat(i18n.language, { type: 'conjunction', style: 'long' }).format(\n    named,\n  )\n\n  const operations = showOperations ? summarizeOperations({ changes, t }) : null\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <span className={`${baseClass}__sentence`}>{t('branching:changesTo', { summary })}</span>\n      {operations && <span className={`${baseClass}__operations`}>{operations}</span>}\n    </div>\n  )\n}\n\n/**\n * \"2 Created · 3 Updated\", in the order the operations happen to a document rather than\n * by count — this line is about what kind of merge it is, and a delete matters at any size.\n */\nconst summarizeOperations = ({\n  changes,\n  t,\n}: {\n  changes: SummarizableChange[]\n  t: (key: string) => string\n}): null | string => {\n  const order = ['create', 'update', 'delete'] as const\n\n  const parts = order.reduce<string[]>((acc, operation) => {\n    const count = changes.filter((change) => change.operation === operation).length\n\n    if (count) {\n      acc.push(`${count} ${t(`branching:operation_${operation}`)}`)\n    }\n\n    return acc\n  }, [])\n\n  return parts.length ? parts.join(' · ') : null\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Chip/index.css

@@ -6,7 +6,6 @@
     gap: 0;
     border-radius: var(--button-radius);
     border: var(--stroke-width-small) solid var(--color-border);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);