@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.5f0cd13

package/dist/elements/PillSelector/index.css

@@ -0,0 +1,33 @@
+@layer payload-default {
+  .pill-selector {
+    display: flex;
+    flex-wrap: wrap;
+    background: var(--theme-elevation-50);
+    padding: var(--spacer-4);
+    gap: var(--spacer-2-5);
+  }
+
+  .pill-selector__draggable-item {
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  .pill-selector__draggable-item--is-dragging {
+    cursor: grabbing;
+    z-index: 1;
+  }
+
+  /* TODO: delete this once all icons have been migrated to viewbox edge-to-edge */
+  .pill-selector .pill__icon {
+    padding: 0;
+  }
+
+  @media (max-width: 768px) {
+    .pill-selector {
+      padding: var(--spacer-2-5);
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type SelectablePill = {
     key?: string;
     Label?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PillSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,CAAC,IAAI,EAAE;YAAE,aAAa,EAAE,MAAM,CAAC;YAAC,WAAW,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAA;KAC1E,CAAA;IACD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAClE,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkDxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PillSelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,CAAC,IAAI,EAAE;YAAE,aAAa,EAAE,MAAM,CAAC;YAAC,WAAW,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAA;KAC1E,CAAA;IACD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAClE,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkFxC,CAAA"}

package/dist/elements/PillSelector/index.js

@@ -1,12 +1,14 @@
 'use client';
 
 import { jsx as _jsx } from "react/jsx-runtime";
+import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
 import React from 'react';
 import { PlusIcon } from '../../icons/Plus/index.js';
 import { XIcon } from '../../icons/X/index.js';
+import { Chip } from '../Chip/index.js';
+import { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js';
 import { DraggableSortable } from '../DraggableSortable/index.js';
-import { Pill } from '../Pill/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'pill-selector';
 /**
  * Displays a wrappable list of pills that can be selected or deselected.
@@ -22,34 +24,10 @@ export const PillSelector = ({
   // This creates a new function reference on each recomputation, causing React to treat it as a
   // different component type, triggering unmount/mount cycles instead of just updating props.
   // GOOD: Use conditional rendering directly: draggable ? <DraggableSortable /> : <div />
-  const pillElements = React.useMemo(() => {
-    return pills.map((pill, i) => {
-      return /*#__PURE__*/_jsx(Pill, {
-        alignIcon: "left",
-        "aria-checked": pill.selected,
-        className: [`${baseClass}__pill`, pill.selected && `${baseClass}__pill--selected`].filter(Boolean).join(' '),
-        draggable: Boolean(draggable),
-        icon: pill.selected ? /*#__PURE__*/_jsx(XIcon, {}) : /*#__PURE__*/_jsx(PlusIcon, {}),
-        id: pill.name,
-        onClick: () => {
-          if (onClick) {
-            void onClick({
-              pill
-            });
-          }
-        },
-        size: "small",
-        children: pill.Label ?? /*#__PURE__*/_jsx("span", {
-          className: `${baseClass}__pill-label`,
-          children: pill.name
-        })
-      }, pill.key ?? `${pill.name}-${i}`);
-    });
-  }, [pills, onClick, draggable]);
   if (draggable) {
     return /*#__PURE__*/_jsx(DraggableSortable, {
       className: baseClass,
-      ids: pills.map(pill_0 => pill_0.name),
+      ids: pills.map(pill => pill.name),
       onDragEnd: ({
         moveFromIndex,
         moveToIndex
@@ -59,12 +37,71 @@ export const PillSelector = ({
           moveToIndex
         });
       },
-      children: pillElements
+      sortingStrategy: horizontalListSortingStrategy,
+      children: pills.map((pill, i) => /*#__PURE__*/_jsx(DraggableSortableItem, {
+        id: pill.name,
+        children: ({
+          attributes,
+          isDragging,
+          listeners,
+          setNodeRef,
+          transform
+        }) => {
+          // Exclude tabIndex from attributes - the action button inside handles focus
+          const {
+            tabIndex: _tabIndex,
+            ...restAttributes
+          } = attributes;
+          return /*#__PURE__*/_jsx(Chip, {
+            "aria-label": pill.name,
+            className: [`${baseClass}__draggable-item`, isDragging && `${baseClass}__draggable-item--is-dragging`].filter(Boolean).join(' '),
+            elementProps: {
+              ...listeners,
+              ...restAttributes,
+              ref: setNodeRef,
+              style: {
+                ...restAttributes.style,
+                transform
+              }
+            },
+            icon: pill.selected ? /*#__PURE__*/_jsx(XIcon, {}) : /*#__PURE__*/_jsx(PlusIcon, {}),
+            id: pill.name,
+            onClick: () => {
+              if (onClick) {
+                void onClick({
+                  pill
+                });
+              }
+            },
+            selected: pill.selected,
+            children: pill.Label ?? /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__pill-label`,
+              children: pill.name
+            })
+          });
+        }
+      }, pill.key ?? `${pill.name}-${i}`))
     });
   }
   return /*#__PURE__*/_jsx("div", {
     className: baseClass,
-    children: pillElements
+    children: pills.map((pill, i) => /*#__PURE__*/_jsx(Chip, {
+      "aria-label": pill.name,
+      icon: pill.selected ? /*#__PURE__*/_jsx(XIcon, {}) : /*#__PURE__*/_jsx(PlusIcon, {}),
+      id: pill.name,
+      onClick: () => {
+        if (onClick) {
+          void onClick({
+            pill
+          });
+        }
+      },
+      selected: pill.selected,
+      children: pill.Label ?? /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__pill-label`,
+        children: pill.name
+      })
+    }, pill.key ?? `${pill.name}-${i}`))
   });
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PlusIcon","XIcon","DraggableSortable","Pill","baseClass","PillSelector","draggable","onClick","pills","pillElements","useMemo","map","pill","i","_jsx","alignIcon","selected","className","filter","Boolean","join","icon","id","name","size","Label","key","ids","onDragEnd","moveFromIndex","moveToIndex"],"sources":["../../../src/elements/PillSelector/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill-selector'\n\nexport type SelectablePill = {\n  key?: string\n  Label?: React.ReactNode\n  name: string\n  selected: boolean\n}\n\nexport type Props = {\n  draggable?: {\n    onDragEnd: (args: { moveFromIndex: number; moveToIndex: number }) => void\n  }\n  onClick?: (args: { pill: SelectablePill }) => Promise<void> | void\n  pills: SelectablePill[]\n}\n\n/**\n * Displays a wrappable list of pills that can be selected or deselected.\n * If `draggable` is true, the pills can be reordered by dragging.\n */\nexport const PillSelector: React.FC<Props> = ({ draggable, onClick, pills }) => {\n  // IMPORTANT: Do NOT wrap DraggableSortable in a dynamic component function using useMemo.\n  // BAD: useMemo(() => ({ children }) => <DraggableSortable>...</DraggableSortable>, [deps])\n  // This creates a new function reference on each recomputation, causing React to treat it as a\n  // different component type, triggering unmount/mount cycles instead of just updating props.\n  // GOOD: Use conditional rendering directly: draggable ? <DraggableSortable /> : <div />\n  const pillElements = React.useMemo(() => {\n    return pills.map((pill, i) => {\n      return (\n        <Pill\n          alignIcon=\"left\"\n          aria-checked={pill.selected}\n          className={[`${baseClass}__pill`, pill.selected && `${baseClass}__pill--selected`]\n            .filter(Boolean)\n            .join(' ')}\n          draggable={Boolean(draggable)}\n          icon={pill.selected ? <XIcon /> : <PlusIcon />}\n          id={pill.name}\n          key={pill.key ?? `${pill.name}-${i}`}\n          onClick={() => {\n            if (onClick) {\n              void onClick({ pill })\n            }\n          }}\n          size=\"small\"\n        >\n          {pill.Label ?? <span className={`${baseClass}__pill-label`}>{pill.name}</span>}\n        </Pill>\n      )\n    })\n  }, [pills, onClick, draggable])\n\n  if (draggable) {\n    return (\n      <DraggableSortable\n        className={baseClass}\n        ids={pills.map((pill) => pill.name)}\n        onDragEnd={({ moveFromIndex, moveToIndex }) => {\n          draggable.onDragEnd({\n            moveFromIndex,\n            moveToIndex,\n          })\n        }}\n      >\n        {pillElements}\n      </DraggableSortable>\n    )\n  }\n\n  return <div className={baseClass}>{pillElements}</div>\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,KAAK,QAAQ;AACtB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAiBlB;;;;AAIA,OAAO,MAAMC,YAAA,GAAgCA,CAAC;EAAEC,SAAS;EAAEC,OAAO;EAAEC;AAAK,CAAE;EACzE;EACA;EACA;EACA;EACA;EACA,MAAMC,YAAA,GAAeV,KAAA,CAAMW,OAAO,CAAC;IACjC,OAAOF,KAAA,CAAMG,GAAG,CAAC,CAACC,IAAA,EAAMC,CAAA;MACtB,oBACEC,IAAA,CAACX,IAAA;QACCY,SAAA,EAAU;QACV,gBAAcH,IAAA,CAAKI,QAAQ;QAC3BC,SAAA,EAAW,CAAC,GAAGb,SAAA,QAAiB,EAAEQ,IAAA,CAAKI,QAAQ,IAAI,GAAGZ,SAAA,kBAA2B,CAAC,CAC/Ec,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;QACRd,SAAA,EAAWa,OAAA,CAAQb,SAAA;QACnBe,IAAA,EAAMT,IAAA,CAAKI,QAAQ,gBAAGF,IAAA,CAACb,KAAA,qBAAWa,IAAA,CAACd,QAAA;QACnCsB,EAAA,EAAIV,IAAA,CAAKW,IAAI;QAEbhB,OAAA,EAASA,CAAA;UACP,IAAIA,OAAA,EAAS;YACX,KAAKA,OAAA,CAAQ;cAAEK;YAAK;UACtB;QACF;QACAY,IAAA,EAAK;kBAEJZ,IAAA,CAAKa,KAAK,iBAAIX,IAAA,CAAC;UAAKG,SAAA,EAAW,GAAGb,SAAA,cAAuB;oBAAGQ,IAAA,CAAKW;;SAR7DX,IAAA,CAAKc,GAAG,IAAI,GAAGd,IAAA,CAAKW,IAAI,IAAIV,CAAA,EAAG;IAW1C;EACF,GAAG,CAACL,KAAA,EAAOD,OAAA,EAASD,SAAA,CAAU;EAE9B,IAAIA,SAAA,EAAW;IACb,oBACEQ,IAAA,CAACZ,iBAAA;MACCe,SAAA,EAAWb,SAAA;MACXuB,GAAA,EAAKnB,KAAA,CAAMG,GAAG,CAAEC,MAAA,IAASA,MAAA,CAAKW,IAAI;MAClCK,SAAA,EAAWA,CAAC;QAAEC,aAAa;QAAEC;MAAW,CAAE;QACxCxB,SAAA,CAAUsB,SAAS,CAAC;UAClBC,aAAA;UACAC;QACF;MACF;gBAECrB;;EAGP;EAEA,oBAAOK,IAAA,CAAC;IAAIG,SAAA,EAAWb,SAAA;cAAYK;;AACrC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["horizontalListSortingStrategy","React","PlusIcon","XIcon","Chip","DraggableSortableItem","DraggableSortable","baseClass","PillSelector","draggable","onClick","pills","_jsx","className","ids","map","pill","name","onDragEnd","moveFromIndex","moveToIndex","sortingStrategy","i","id","children","attributes","isDragging","listeners","setNodeRef","transform","tabIndex","_tabIndex","restAttributes","filter","Boolean","join","elementProps","ref","style","icon","selected","Label","key"],"sources":["../../../src/elements/PillSelector/index.tsx"],"sourcesContent":["'use client'\n\nimport { horizontalListSortingStrategy } from '@dnd-kit/sortable'\nimport React from 'react'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Chip } from '../Chip/index.js'\nimport { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport './index.css'\n\nconst baseClass = 'pill-selector'\n\nexport type SelectablePill = {\n  key?: string\n  Label?: React.ReactNode\n  name: string\n  selected: boolean\n}\n\nexport type Props = {\n  draggable?: {\n    onDragEnd: (args: { moveFromIndex: number; moveToIndex: number }) => void\n  }\n  onClick?: (args: { pill: SelectablePill }) => Promise<void> | void\n  pills: SelectablePill[]\n}\n\n/**\n * Displays a wrappable list of pills that can be selected or deselected.\n * If `draggable` is true, the pills can be reordered by dragging.\n */\nexport const PillSelector: React.FC<Props> = ({ draggable, onClick, pills }) => {\n  // IMPORTANT: Do NOT wrap DraggableSortable in a dynamic component function using useMemo.\n  // BAD: useMemo(() => ({ children }) => <DraggableSortable>...</DraggableSortable>, [deps])\n  // This creates a new function reference on each recomputation, causing React to treat it as a\n  // different component type, triggering unmount/mount cycles instead of just updating props.\n  // GOOD: Use conditional rendering directly: draggable ? <DraggableSortable /> : <div />\n\n  if (draggable) {\n    return (\n      <DraggableSortable\n        className={baseClass}\n        ids={pills.map((pill) => pill.name)}\n        onDragEnd={({ moveFromIndex, moveToIndex }) => {\n          draggable.onDragEnd({\n            moveFromIndex,\n            moveToIndex,\n          })\n        }}\n        sortingStrategy={horizontalListSortingStrategy}\n      >\n        {pills.map((pill, i) => (\n          <DraggableSortableItem id={pill.name} key={pill.key ?? `${pill.name}-${i}`}>\n            {({ attributes, isDragging, listeners, setNodeRef, transform }) => {\n              // Exclude tabIndex from attributes - the action button inside handles focus\n              const { tabIndex: _tabIndex, ...restAttributes } = attributes\n              return (\n                <Chip\n                  aria-label={pill.name}\n                  className={[\n                    `${baseClass}__draggable-item`,\n                    isDragging && `${baseClass}__draggable-item--is-dragging`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  elementProps={{\n                    ...listeners,\n                    ...restAttributes,\n                    ref: setNodeRef,\n                    style: {\n                      ...restAttributes.style,\n                      transform,\n                    },\n                  }}\n                  icon={pill.selected ? <XIcon /> : <PlusIcon />}\n                  id={pill.name}\n                  onClick={() => {\n                    if (onClick) {\n                      void onClick({ pill })\n                    }\n                  }}\n                  selected={pill.selected}\n                >\n                  {pill.Label ?? <span className={`${baseClass}__pill-label`}>{pill.name}</span>}\n                </Chip>\n              )\n            }}\n          </DraggableSortableItem>\n        ))}\n      </DraggableSortable>\n    )\n  }\n\n  return (\n    <div className={baseClass}>\n      {pills.map((pill, i) => (\n        <Chip\n          aria-label={pill.name}\n          icon={pill.selected ? <XIcon /> : <PlusIcon />}\n          id={pill.name}\n          key={pill.key ?? `${pill.name}-${i}`}\n          onClick={() => {\n            if (onClick) {\n              void onClick({ pill })\n            }\n          }}\n          selected={pill.selected}\n        >\n          {pill.Label ?? <span className={`${baseClass}__pill-label`}>{pill.name}</span>}\n        </Chip>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Popup/PopupButtonList/index.css

@@ -2,6 +2,7 @@
   .popup-button-list {
     display: flex;
     flex-direction: column;
+    padding: 0 var(--spacer-2);
     text-align: left;
   }
 
@@ -26,16 +27,14 @@
   }
 
   .popup-button-list__button {
-    padding: 0 var(--spacer-2);
     cursor: pointer;
     text-align: inherit;
     text-decoration: none;
-    border-radius: var(--radius-medium);
-    width: 100%;
-    height: 24px;
+    white-space: nowrap;
+    border-radius: var(--popup-item-radius);
     display: flex;
-    align-items: center;
-    color: var(--color-text);
+    align-items: stretch;
+    color: var(--popup-item-color, var(--color-text));
     font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
@@ -43,27 +42,21 @@
     letter-spacing: var(--text-letter-spacing);
   }
 
+  .popup-button-list__label {
+    display: flex;
+    align-items: center;
+    padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-1);
+  }
+
   .popup-button-list__button:focus-visible {
     outline: var(--accessibility-outline);
     outline-offset: -1px;
-    border-radius: var(--radius-medium);
+    border-radius: var(--popup-item-radius);
   }
   .popup-button-list__button:hover {
     outline: none;
-    background-color: var(--color-bg-selected-strong);
-    color: var(--color-text-onselected-strong);
-  }
-
-  .popup-button-list__button-size--medium .popup-button-list__button {
-    gap: var(--spacer-1);
-    min-height: var(--spacer-4);
-    padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-1);
-  }
-
-  .popup-button-list__button-size--medium .popup-button-list__button svg {
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
+    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
+    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
   }
 
   .popup-button-list__disabled {
@@ -77,4 +70,61 @@
     background-color: transparent;
     color: var(--color-text-disabled);
   }
+
+  .popup-button-list__button--selected {
+    background-color: var(--popup-item-bg-selected, var(--color-bg-selected));
+    color: var(--popup-item-color-selected, var(--popup-item-color, var(--color-text)));
+  }
+
+  .popup-button-list__button--selected:hover {
+    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
+    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
+  }
+
+  /* Hide icon element by default (outside RadioGroup/MenuItem) */
+  .popup-button-list__icon {
+    display: none;
+  }
+
+  /* RadioGroup - for radio-style selection rows with 16px icons */
+  .popup-button-list--with-icons .popup-button-list__button {
+    padding-right: var(--spacer-2);
+  }
+
+  .popup-button-list--with-icons .popup-button-list__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: calc(var(--spacer-3) + var(--spacer-1));
+    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
+  }
+
+  .popup-button-list--with-icons .popup-button-list__label {
+    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
+  }
+
+  /* MenuItem - for action menu items with 16px icons (default) */
+  .popup-button-list--with-actions .popup-button-list__button {
+    padding-right: var(--spacer-2);
+    align-items: center;
+  }
+
+  .popup-button-list--with-actions .popup-button-list__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: calc(var(--spacer-3) + var(--spacer-1));
+    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
+  }
+
+  .popup-button-list--with-actions .popup-button-list__label {
+    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
+  }
+
+  .popup-button-list--large .popup-button-list__icon {
+    width: var(--spacer-4);
+    padding: 0;
+  }
 }

package/dist/elements/Popup/PopupButtonList/index.d.ts

@@ -1,4 +1,4 @@
-import type { LinkProps } from 'next/link.js';
+import type { LinkAdapterProps } from 'payload';
 import * as React from 'react';
 import './index.css';
 export { PopupListDivider as Divider } from '../PopupDivider/index.js';
@@ -9,14 +9,37 @@ export declare const ButtonGroup: React.FC<{
     className?: string;
     textAlign?: 'center' | 'left' | 'right';
 }>;
+/**
+ * A ButtonGroup variant for action menu items.
+ * @param size - 'large' for 24px icons (default), 'small' for 16px icons
+ */
+export declare const MenuItem: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+    size?: 'large' | 'small';
+}>;
+/**
+ * A ButtonGroup variant for radio-style selection items.
+ * Uses 16px icons with padding on label - ideal for checkbox/selection rows.
+ */
+export declare const RadioGroup: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
 type MenuButtonProps = {
     active?: boolean;
     children: React.ReactNode;
     className?: string;
     disabled?: boolean;
-    href?: LinkProps['href'];
+    href?: LinkAdapterProps['href'];
+    icon?: React.ReactNode;
     id?: string;
     onClick?: (e?: React.MouseEvent) => void;
 };
 export declare const Button: React.FC<MenuButtonProps>;
+/**
+ * A Button variant for use within RadioGroup.
+ * Automatically shows a checkmark icon when active.
+ */
+export declare const RadioGroupItem: React.FC<Omit<MenuButtonProps, 'icon'>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Popup/PopupButtonList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,gBAAgB,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,mBAAmB,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE/E,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACxC,CAUA,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4D5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,gBAAgB,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,mBAAmB,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE/E,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACxC,CAUA,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CACzB,CAUA,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAGA,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmE5C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAElE,CAAA"}

package/dist/elements/Popup/PopupButtonList/index.js

@@ -1,7 +1,8 @@
 'use client';
 
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { CheckIcon } from '../../../icons/Check/index.js';
 import { Link } from '../../Link/index.js';
 import './index.css';
 const baseClass = 'popup-button-list';
@@ -19,6 +20,35 @@ export const ButtonGroup = ({
     children: children
   });
 };
+/**
+ * A ButtonGroup variant for action menu items.
+ * @param size - 'large' for 24px icons (default), 'small' for 16px icons
+ */
+export const MenuItem = ({
+  children,
+  className,
+  size = 'large'
+}) => {
+  const classes = [baseClass, className, `${baseClass}--with-actions`, size === 'large' && `${baseClass}--large`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    children: children
+  });
+};
+/**
+ * A ButtonGroup variant for radio-style selection items.
+ * Uses 16px icons with padding on label - ideal for checkbox/selection rows.
+ */
+export const RadioGroup = ({
+  children,
+  className
+}) => {
+  const classes = [baseClass, className, `${baseClass}--with-icons`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    children: children
+  });
+};
 export const Button = ({
   id,
   active,
@@ -26,12 +56,18 @@ export const Button = ({
   className,
   disabled,
   href,
+  icon,
   onClick
 }) => {
   const classes = [`${baseClass}__button`, disabled && `${baseClass}__disabled`, active && `${baseClass}__button--selected`, className].filter(Boolean).join(' ');
+  // Always render icon element - CSS hides it outside RadioGroup/MenuItem
+  const iconElement = /*#__PURE__*/_jsx("span", {
+    className: `${baseClass}__icon`,
+    children: icon
+  });
   if (!disabled) {
     if (href) {
-      return /*#__PURE__*/_jsx(Link, {
+      return /*#__PURE__*/_jsxs(Link, {
         className: classes,
         href: href,
         id: id,
@@ -41,11 +77,14 @@ export const Button = ({
           }
         },
         prefetch: false,
-        children: children
+        children: [iconElement, /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__label`,
+          children: children
+        })]
       });
     }
     if (onClick) {
-      return /*#__PURE__*/_jsx("button", {
+      return /*#__PURE__*/_jsxs("button", {
         className: classes,
         id: id,
         onClick: e => {
@@ -54,14 +93,32 @@ export const Button = ({
           }
         },
         type: "button",
-        children: children
+        children: [iconElement, /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__label`,
+          children: children
+        })]
       });
     }
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classes,
     id: id,
-    children: children
+    children: [iconElement, /*#__PURE__*/_jsx("span", {
+      className: `${baseClass}__label`,
+      children: children
+    })]
+  });
+};
+/**
+ * A Button variant for use within RadioGroup.
+ * Automatically shows a checkmark icon when active.
+ */
+export const RadioGroupItem = props => {
+  return /*#__PURE__*/_jsx(Button, {
+    ...props,
+    icon: props.active ? /*#__PURE__*/_jsx(CheckIcon, {
+      size: 16
+    }) : undefined
   });
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/Popup/PopupButtonList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Link","baseClass","PopupListDivider","Divider","PopupListGroupLabel","GroupLabel","ButtonGroup","buttonSize","children","className","textAlign","classes","filter","Boolean","join","_jsx","Button","id","active","disabled","href","onClick","e","prefetch","type"],"sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"sourcesContent":["'use client'\nimport type { LinkProps } from 'next/link.js'\n\nimport * as React from 'react'\n\nimport { Link } from '../../Link/index.js'\nimport './index.css'\n\nconst baseClass = 'popup-button-list'\n\nexport { PopupListDivider as Divider } from '../PopupDivider/index.js'\nexport { PopupListGroupLabel as GroupLabel } from '../PopupGroupLabel/index.js'\n\nexport const ButtonGroup: React.FC<{\n  buttonSize?: 'default' | 'medium'\n  children: React.ReactNode\n  className?: string\n  textAlign?: 'center' | 'left' | 'right'\n}> = ({ buttonSize = 'default', children, className, textAlign = 'left' }) => {\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}__text-align--${textAlign}`,\n    `${baseClass}__button-size--${buttonSize}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n  return <div className={classes}>{children}</div>\n}\n\ntype MenuButtonProps = {\n  active?: boolean\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  href?: LinkProps['href']\n  id?: string\n  onClick?: (e?: React.MouseEvent) => void\n}\n\nexport const Button: React.FC<MenuButtonProps> = ({\n  id,\n  active,\n  children,\n  className,\n  disabled,\n  href,\n  onClick,\n}) => {\n  const classes = [\n    `${baseClass}__button`,\n    disabled && `${baseClass}__disabled`,\n    active && `${baseClass}__button--selected`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  if (!disabled) {\n    if (href) {\n      return (\n        <Link\n          className={classes}\n          href={href}\n          id={id}\n          onClick={(e) => {\n            if (onClick) {\n              onClick(e)\n            }\n          }}\n          prefetch={false}\n        >\n          {children}\n        </Link>\n      )\n    }\n\n    if (onClick) {\n      return (\n        <button\n          className={classes}\n          id={id}\n          onClick={(e) => {\n            if (onClick) {\n              onClick(e)\n            }\n          }}\n          type=\"button\"\n        >\n          {children}\n        </button>\n      )\n    }\n  }\n\n  return (\n    <div className={classes} id={id}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,YAAYA,KAAA,MAAW;AAEvB,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,SAASC,gBAAA,IAAoBC,OAAO,QAAQ;AAC5C,SAASC,mBAAA,IAAuBC,UAAU,QAAQ;AAElD,OAAO,MAAMC,WAAA,GAKRA,CAAC;EAAEC,UAAA,GAAa,SAAS;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,SAAA,GAAY;AAAM,CAAE;EACvE,MAAMC,OAAA,GAAU,CACdV,SAAA,EACAQ,SAAA,EACA,GAAGR,SAAA,iBAA0BS,SAAA,EAAW,EACxC,GAAGT,SAAA,kBAA2BM,UAAA,EAAY,CAC3C,CACEK,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EACR,oBAAOC,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;cAAUH;;AACnC;AAYA,OAAO,MAAMQ,MAAA,GAAoCA,CAAC;EAChDC,EAAE;EACFC,MAAM;EACNV,QAAQ;EACRC,SAAS;EACTU,QAAQ;EACRC,IAAI;EACJC;AAAO,CACR;EACC,MAAMV,OAAA,GAAU,CACd,GAAGV,SAAA,UAAmB,EACtBkB,QAAA,IAAY,GAAGlB,SAAA,YAAqB,EACpCiB,MAAA,IAAU,GAAGjB,SAAA,oBAA6B,EAC1CQ,SAAA,CACD,CACEG,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAI,CAACK,QAAA,EAAU;IACb,IAAIC,IAAA,EAAM;MACR,oBACEL,IAAA,CAACf,IAAA;QACCS,SAAA,EAAWE,OAAA;QACXS,IAAA,EAAMA,IAAA;QACNH,EAAA,EAAIA,EAAA;QACJI,OAAA,EAAUC,CAAA;UACR,IAAID,OAAA,EAAS;YACXA,OAAA,CAAQC,CAAA;UACV;QACF;QACAC,QAAA,EAAU;kBAETf;;IAGP;IAEA,IAAIa,OAAA,EAAS;MACX,oBACEN,IAAA,CAAC;QACCN,SAAA,EAAWE,OAAA;QACXM,EAAA,EAAIA,EAAA;QACJI,OAAA,EAAUC,CAAA;UACR,IAAID,OAAA,EAAS;YACXA,OAAA,CAAQC,CAAA;UACV;QACF;QACAE,IAAA,EAAK;kBAEJhB;;IAGP;EACF;EAEA,oBACEO,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;IAASM,EAAA,EAAIA,EAAA;cAC1BT;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","CheckIcon","Link","baseClass","PopupListDivider","Divider","PopupListGroupLabel","GroupLabel","ButtonGroup","buttonSize","children","className","textAlign","classes","filter","Boolean","join","_jsx","MenuItem","size","RadioGroup","Button","id","active","disabled","href","icon","onClick","iconElement","_jsxs","e","prefetch","type","RadioGroupItem","props","undefined"],"sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"sourcesContent":["'use client'\nimport type { LinkAdapterProps } from 'payload'\n\nimport * as React from 'react'\n\nimport { CheckIcon } from '../../../icons/Check/index.js'\nimport { Link } from '../../Link/index.js'\nimport './index.css'\n\nconst baseClass = 'popup-button-list'\n\nexport { PopupListDivider as Divider } from '../PopupDivider/index.js'\nexport { PopupListGroupLabel as GroupLabel } from '../PopupGroupLabel/index.js'\n\nexport const ButtonGroup: React.FC<{\n  buttonSize?: 'default' | 'medium'\n  children: React.ReactNode\n  className?: string\n  textAlign?: 'center' | 'left' | 'right'\n}> = ({ buttonSize = 'default', children, className, textAlign = 'left' }) => {\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}__text-align--${textAlign}`,\n    `${baseClass}__button-size--${buttonSize}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n  return <div className={classes}>{children}</div>\n}\n\n/**\n * A ButtonGroup variant for action menu items.\n * @param size - 'large' for 24px icons (default), 'small' for 16px icons\n */\nexport const MenuItem: React.FC<{\n  children: React.ReactNode\n  className?: string\n  size?: 'large' | 'small'\n}> = ({ children, className, size = 'large' }) => {\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--with-actions`,\n    size === 'large' && `${baseClass}--large`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n  return <div className={classes}>{children}</div>\n}\n\n/**\n * A ButtonGroup variant for radio-style selection items.\n * Uses 16px icons with padding on label - ideal for checkbox/selection rows.\n */\nexport const RadioGroup: React.FC<{\n  children: React.ReactNode\n  className?: string\n}> = ({ children, className }) => {\n  const classes = [baseClass, className, `${baseClass}--with-icons`].filter(Boolean).join(' ')\n  return <div className={classes}>{children}</div>\n}\n\ntype MenuButtonProps = {\n  active?: boolean\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  href?: LinkAdapterProps['href']\n  icon?: React.ReactNode\n  id?: string\n  onClick?: (e?: React.MouseEvent) => void\n}\n\nexport const Button: React.FC<MenuButtonProps> = ({\n  id,\n  active,\n  children,\n  className,\n  disabled,\n  href,\n  icon,\n  onClick,\n}) => {\n  const classes = [\n    `${baseClass}__button`,\n    disabled && `${baseClass}__disabled`,\n    active && `${baseClass}__button--selected`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  // Always render icon element - CSS hides it outside RadioGroup/MenuItem\n  const iconElement = <span className={`${baseClass}__icon`}>{icon}</span>\n\n  if (!disabled) {\n    if (href) {\n      return (\n        <Link\n          className={classes}\n          href={href}\n          id={id}\n          onClick={(e) => {\n            if (onClick) {\n              onClick(e)\n            }\n          }}\n          prefetch={false}\n        >\n          {iconElement}\n          <span className={`${baseClass}__label`}>{children}</span>\n        </Link>\n      )\n    }\n\n    if (onClick) {\n      return (\n        <button\n          className={classes}\n          id={id}\n          onClick={(e) => {\n            if (onClick) {\n              onClick(e)\n            }\n          }}\n          type=\"button\"\n        >\n          {iconElement}\n          <span className={`${baseClass}__label`}>{children}</span>\n        </button>\n      )\n    }\n  }\n\n  return (\n    <div className={classes} id={id}>\n      {iconElement}\n      <span className={`${baseClass}__label`}>{children}</span>\n    </div>\n  )\n}\n\n/**\n * A Button variant for use within RadioGroup.\n * Automatically shows a checkmark icon when active.\n */\nexport const RadioGroupItem: React.FC<Omit<MenuButtonProps, 'icon'>> = (props) => {\n  return <Button {...props} icon={props.active ? <CheckIcon size={16} /> : undefined} />\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Popup/PopupDivider/index.css

@@ -0,0 +1,10 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .popup-divider {
+    height: var(--stroke-width-small);
+    background-color: var(--color-border);
+    border: none;
+    margin-block: var(--spacer-2);
+  }
+}

package/dist/elements/Popup/PopupDivider/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const PopupListDivider: React.FC;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Popup/PopupDivider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupDivider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAEpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupDivider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAEpC,CAAA"}

package/dist/elements/Popup/PopupDivider/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'popup-divider';
 export const PopupListDivider = () => {
   return /*#__PURE__*/_jsx("hr", {

package/dist/elements/Popup/PopupDivider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","PopupListDivider","_jsx","className"],"sources":["../../../../src/elements/Popup/PopupDivider/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-divider'\n\nexport const PopupListDivider: React.FC = () => {\n  return <hr className={baseClass} />\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,gBAAA,GAA6BA,CAAA;EACxC,oBAAOC,IAAA,CAAC;IAAGC,SAAA,EAAWH;;AACxB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","PopupListDivider","_jsx","className"],"sources":["../../../../src/elements/Popup/PopupDivider/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'popup-divider'\n\nexport const PopupListDivider: React.FC = () => {\n  return <hr className={baseClass} />\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,gBAAA,GAA6BA,CAAA;EACxC,oBAAOC,IAAA,CAAC;IAAGC,SAAA,EAAWH;;AACxB","ignoreList":[]}

package/dist/elements/Popup/PopupGroupLabel/index.css

@@ -0,0 +1,9 @@
+@layer payload-default {
+  .popup-list-group-label {
+    color: var(--color-text-secondary);
+    font-weight: 500;
+    line-height: 1;
+    margin-top: var(--spacer-1);
+    margin-bottom: var(--spacer-2);
+  }
+}

package/dist/elements/Popup/PopupGroupLabel/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const PopupListGroupLabel: React.FC<{
     label: string;
 }>;

package/dist/elements/Popup/PopupGroupLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupGroupLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,KAAK,EAAE,MAAM,CAAA;CACd,CAEA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupGroupLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,KAAK,EAAE,MAAM,CAAA;CACd,CAEA,CAAA"}

package/dist/elements/Popup/PopupGroupLabel/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'popup-list-group-label';
 export const PopupListGroupLabel = ({
   label

package/dist/elements/Popup/PopupGroupLabel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","PopupListGroupLabel","label","_jsx","className"],"sources":["../../../../src/elements/Popup/PopupGroupLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-list-group-label'\n\nexport const PopupListGroupLabel: React.FC<{\n  label: string\n}> = ({ label }) => {\n  return <p className={baseClass}>{label}</p>\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,mBAAA,GAERA,CAAC;EAAEC;AAAK,CAAE;EACb,oBAAOC,IAAA,CAAC;IAAEC,SAAA,EAAWJ,SAAA;cAAYE;;AACnC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","PopupListGroupLabel","label","_jsx","className"],"sources":["../../../../src/elements/Popup/PopupGroupLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'popup-list-group-label'\n\nexport const PopupListGroupLabel: React.FC<{\n  label: string\n}> = ({ label }) => {\n  return <p className={baseClass}>{label}</p>\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,mBAAA,GAERA,CAAC;EAAEC;AAAK,CAAE;EACb,oBAAOC,IAAA,CAAC;IAAEC,SAAA,EAAWJ,SAAA;cAAYE;;AACnC","ignoreList":[]}

package/dist/elements/Popup/PopupTrigger/index.css

@@ -8,7 +8,7 @@
     font-family: inherit;
     cursor: pointer;
     display: inline-flex;
-    border-radius: var(--radius-medium, 0.3125rem);
+    border-radius: var(--button-radius, 0.3125rem);
   }
 
   .popup-button--background {
@@ -19,7 +19,8 @@
     background: var(--color-bg-transparent-hover);
   }
 
-  .popup-button:active:not(.popup-button--disabled) {
+  .popup-button:active:not(.popup-button--disabled),
+  .popup-button--active:not(.popup-button--disabled) {
     background: var(--color-bg-transparent-pressed);
   }