@payloadcms/ui 3.39.0-internal.32c7661 → 3.39.0

package/dist/elements/ListSelection/index.js

@@ -2,37 +2,53 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Fragment } from 'react';
-import { SelectAllStatus, useSelection } from '../../providers/Selection/index.js';
+import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { DeleteMany } from '../DeleteMany/index.js';
-import { EditMany } from '../EditMany/index.js';
-import { PublishMany } from '../PublishMany/index.js';
-import { UnpublishMany } from '../UnpublishMany/index.js';
+import { Button } from '../Button/index.js';
 import './index.scss';
 const baseClass = 'list-selection';
-export const ListSelection = t0 => {
-  const $ = _c(10);
-  const {
-    collectionConfig,
-    disableBulkDelete,
-    disableBulkEdit,
-    label
-  } = t0;
+export function ListSelection_v4(t0) {
+  const $ = _c(9);
   const {
     count,
-    selectAll,
-    toggleAll,
-    totalDocs
-  } = useSelection();
+    ListActions,
+    SelectionActions
+  } = t0;
   const {
     t
   } = useTranslation();
-  if (count === 0) {
-    return null;
-  }
   let t1;
-  if ($[0] !== collectionConfig || $[1] !== count || $[2] !== disableBulkDelete || $[3] !== disableBulkEdit || $[4] !== label || $[5] !== selectAll || $[6] !== t || $[7] !== toggleAll || $[8] !== totalDocs) {
+  if ($[0] !== ListActions || $[1] !== SelectionActions || $[2] !== count || $[3] !== t) {
+    let t2;
+    if ($[5] !== ListActions) {
+      t2 = ListActions && ListActions.length > 0 && _jsxs(React.Fragment, {
+        children: [_jsx("span", {
+          children: "\u2014"
+        }), _jsx("div", {
+          className: `${baseClass}__actions`,
+          children: ListActions
+        })]
+      });
+      $[5] = ListActions;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    let t3;
+    if ($[7] !== SelectionActions) {
+      t3 = SelectionActions && SelectionActions.length > 0 && _jsxs(React.Fragment, {
+        children: [_jsx("span", {
+          children: "\u2014"
+        }), _jsx("div", {
+          className: `${baseClass}__actions`,
+          children: SelectionActions
+        })]
+      });
+      $[7] = SelectionActions;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
     t1 = _jsxs("div", {
       className: baseClass,
       children: [_jsx("span", {
@@ -40,46 +56,28 @@ export const ListSelection = t0 => {
           count,
           label: ""
         })
-      }), selectAll !== SelectAllStatus.AllAvailable && count < totalDocs && _jsx("button", {
-        "aria-label": t("general:selectAll", {
-          count,
-          label
-        }),
-        className: `${baseClass}__button`,
-        id: "select-all-across-pages",
-        onClick: () => toggleAll(true),
-        type: "button",
-        children: t("general:selectAll", {
-          count: totalDocs,
-          label: ""
-        })
-      }), !disableBulkEdit && !disableBulkDelete && _jsx("span", {
-        children: "\u2014"
-      }), !disableBulkEdit && _jsxs(Fragment, {
-        children: [_jsx(EditMany, {
-          collection: collectionConfig
-        }), _jsx(PublishMany, {
-          collection: collectionConfig
-        }), _jsx(UnpublishMany, {
-          collection: collectionConfig
-        })]
-      }), !disableBulkDelete && _jsx(DeleteMany, {
-        collection: collectionConfig
-      })]
+      }), t2, t3]
     });
-    $[0] = collectionConfig;
-    $[1] = count;
-    $[2] = disableBulkDelete;
-    $[3] = disableBulkEdit;
-    $[4] = label;
-    $[5] = selectAll;
-    $[6] = t;
-    $[7] = toggleAll;
-    $[8] = totalDocs;
-    $[9] = t1;
+    $[0] = ListActions;
+    $[1] = SelectionActions;
+    $[2] = count;
+    $[3] = t;
+    $[4] = t1;
   } else {
-    t1 = $[9];
+    t1 = $[4];
   }
   return t1;
-};
+}
+export function ListSelectionButton({
+  children,
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Button, {
+    ...props,
+    buttonStyle: "none",
+    className: [`${baseClass}__button`, className].filter(Boolean).join(' '),
+    children: children
+  });
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Fragment","SelectAllStatus","useSelection","useTranslation","DeleteMany","EditMany","PublishMany","UnpublishMany","baseClass","ListSelection","t0","$","collectionConfig","disableBulkDelete","disableBulkEdit","label","count","selectAll","toggleAll","totalDocs","t","t1","_jsxs","className","children","_jsx","AllAvailable","id","onClick","type","collection"],"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport React, { Fragment } from 'react'\n\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\nexport type ListSelectionProps = {\n  collectionConfig?: ClientCollectionConfig\n  disableBulkDelete?: boolean\n  disableBulkEdit?: boolean\n  label: string\n}\n\nexport const ListSelection: React.FC<ListSelectionProps> = ({\n  collectionConfig,\n  disableBulkDelete,\n  disableBulkEdit,\n  label,\n}) => {\n  const { count, selectAll, toggleAll, totalDocs } = useSelection()\n  const { t } = useTranslation()\n\n  if (count === 0) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label: '' })}</span>\n      {selectAll !== SelectAllStatus.AllAvailable && count < totalDocs && (\n        <button\n          aria-label={t('general:selectAll', { count, label })}\n          className={`${baseClass}__button`}\n          id=\"select-all-across-pages\"\n          onClick={() => toggleAll(true)}\n          type=\"button\"\n        >\n          {t('general:selectAll', { count: totalDocs, label: '' })}\n        </button>\n      )}\n      {!disableBulkEdit && !disableBulkDelete && <span>&mdash;</span>}\n      {!disableBulkEdit && (\n        <Fragment>\n          <EditMany collection={collectionConfig} />\n          <PublishMany collection={collectionConfig} />\n          <UnpublishMany collection={collectionConfig} />\n        </Fragment>\n      )}\n      {!disableBulkDelete && <DeleteMany collection={collectionConfig} />}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,eAAe,EAAEC,YAAY,QAAQ;AAC9C,SAASC,cAAc,QAAQ;AAC/B,SAASC,UAAU,QAAQ;AAC3B,SAASC,QAAQ,QAAQ;AACzB,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAC9B,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB,OAAO,MAAMC,aAAA,GAA8CC,EAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EAAC;IAAAc,gBAAA;IAAAC,iBAAA;IAAAC,eAAA;IAAAC;EAAA,IAAAL,EAK3D;EACC;IAAAM,KAAA;IAAAC,SAAA;IAAAC,SAAA;IAAAC;EAAA,IAAmDjB,YAAA;EACnD;IAAAkB;EAAA,IAAcjB,cAAA;EAAA,IAEVa,KAAA,MAAU;IAAA;EAAA;EAAA,IAAAK,EAAA;EAAA,IAAAV,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAK,KAAA,IAAAL,CAAA,QAAAE,iBAAA,IAAAF,CAAA,QAAAG,eAAA,IAAAH,CAAA,QAAAI,KAAA,IAAAJ,CAAA,QAAAM,SAAA,IAAAN,CAAA,QAAAS,CAAA,IAAAT,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAQ,SAAA;IAKZE,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAf,SAAA;MAAAgB,QAAA,GACCC,IAAA,CAAC;QAAAD,QAAA,EAAMJ,CAAA,CAAE;UAAAJ,KAAA;UAAAD,KAAA,EAAyC;QAAA,CAAG;MAAA,C,GACpDE,SAAA,KAAAhB,eAAA,CAAAyB,YAA0C,IAAIV,KAAA,GAAQG,SAAA,IACrDM,IAAA,CAAC;QAAA,cACaL,CAAA,CAAE;UAAAJ,KAAA;UAAAD;QAAA,CAAoC;QAAAQ,SAAA,EACvC,GAAAf,SAAA,UAAsB;QAAAmB,EAAA,EAC9B;QAAAC,OAAA,EAAAA,CAAA,KACYV,SAAA,KAAU;QAAAW,IAAA,EACpB;QAAAL,QAAA,EAEJJ,CAAA,CAAE;UAAAJ,KAAA,EAA8BG,SAAA;UAAAJ,KAAA,EAAkB;QAAA,CAAG;MAAA,C,GAGzD,CAACD,eAAA,KAAoBD,iBAAA,IAAqBY,IAAA,CAAC;QAAAD,QAAA,EAAK;MAAA,C,GAChD,CAACV,eAAA,IACAQ,KAAA,CAAAtB,QAAA;QAAAwB,QAAA,GACEC,IAAA,CAAApB,QAAA;UAAAyB,UAAA,EAAsBlB;QAAA,C,GACtBa,IAAA,CAAAnB,WAAA;UAAAwB,UAAA,EAAyBlB;QAAA,C,GACzBa,IAAA,CAAAlB,aAAA;UAAAuB,UAAA,EAA2BlB;QAAA,C;UAG9B,CAACC,iBAAA,IAAqBY,IAAA,CAAArB,UAAA;QAAA0B,UAAA,EAAwBlB;MAAA,C;;;;;;;;;;;;;;;SArBjDS,E;CAwBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","Button","baseClass","ListSelection_v4","t0","$","count","ListActions","SelectionActions","t","t1","t2","length","_jsxs","Fragment","children","_jsx","className","t3","label","ListSelectionButton","props","buttonStyle","filter","Boolean","join"],"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props as ButtonProps } from '../Button/types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\ntype ListSelection_v4Props = {\n  /**\n   * The count of selected items\n   */\n  readonly count: number\n  /**\n   * Actions that apply to the list as a whole\n   *\n   * @example select all, clear selection\n   */\n  readonly ListActions?: React.ReactNode[]\n  /**\n   * Actions that apply to the selected items\n   *\n   * @example edit, delete, publish, unpublish\n   */\n  readonly SelectionActions?: React.ReactNode[]\n}\nexport function ListSelection_v4({ count, ListActions, SelectionActions }: ListSelection_v4Props) {\n  const { t } = useTranslation()\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label: '' })}</span>\n      {ListActions && ListActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{ListActions}</div>\n        </React.Fragment>\n      )}\n      {SelectionActions && SelectionActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{SelectionActions}</div>\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\ntype ListSelectionButtonProps = {} & ButtonProps\nexport function ListSelectionButton({ children, className, ...props }: ListSelectionButtonProps) {\n  return (\n    <Button\n      {...props}\n      buttonStyle=\"none\"\n      className={[`${baseClass}__button`, className].filter(Boolean).join(' ')}\n    >\n      {children}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAIlB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAoBlB,OAAO,SAAAC,iBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAA0B;IAAAQ,KAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAJ,EAA+D;EAC9F;IAAAK;EAAA,IAAcT,cAAA;EAAA,IAAAU,EAAA;EAAA,IAAAL,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAG,gBAAA,IAAAH,CAAA,QAAAC,KAAA,IAAAD,CAAA,QAAAI,CAAA;IAAA,IAAAE,EAAA;IAAA,IAAAN,CAAA,QAAAE,WAAA;MAKTI,EAAA,GAAAJ,WAAA,IAAeA,WAAA,CAAAK,MAAA,IAAqB,IACnCC,KAAA,CAAAd,KAAA,CAAAe,QAAA;QAAAC,QAAA,GACEC,IAAA,CAAC;UAAAD,QAAA,EAAK;QAAA,C,GACNC,IAAA,CAAC;UAAAC,SAAA,EAAe,GAAAf,SAAA,WAAuB;UAAAa,QAAA,EAAGR;QAAA,C;;;;;;;;;MAG7CW,EAAA,GAAAV,gBAAA,IAAoBA,gBAAA,CAAAI,MAAA,IAA0B,IAC7CC,KAAA,CAAAd,KAAA,CAAAe,QAAA;QAAAC,QAAA,GACEC,IAAA,CAAC;UAAAD,QAAA,EAAK;QAAA,C,GACNC,IAAA,CAAC;UAAAC,SAAA,EAAe,GAAAf,SAAA,WAAuB;UAAAa,QAAA,EAAGP;QAAA,C;;;;;;;IAXhDE,EAAA,GAAAG,KAAA,CAAC;MAAAI,SAAA,EAAAf,SAAA;MAAAa,QAAA,GACCC,IAAA,CAAC;QAAAD,QAAA,EAAMN,CAAA,CAAE;UAAAH,KAAA;UAAAa,KAAA,EAAyC;QAAA,CAAG;MAAA,C,GACpDR,E,EAMAO,E;;;;;;;;;;SARHR,E;;AAmBJ,OAAO,SAASU,oBAAoB;EAAEL,QAAQ;EAAEE,SAAS;EAAE,GAAGI;AAAA,CAAiC;EAC7F,oBACEL,IAAA,CAACf,MAAA;IACE,GAAGoB,KAAK;IACTC,WAAA,EAAY;IACZL,SAAA,EAAW,CAAC,GAAGf,SAAA,UAAmB,EAAEe,SAAA,CAAU,CAACM,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAEnEV;;AAGP","ignoreList":[]}

package/dist/elements/ListSelection/index.scss

@@ -6,15 +6,24 @@
     margin-left: auto;
     color: var(--theme-elevation-500);
     gap: 0.5em;
+    align-items: center;
+
+    &__actions {
+      display: flex;
+      gap: calc(var(--base) * 0.3);
+    }
 
     &__button {
-      color: var(--theme-elevation-500);
+      color: var(--theme-elevation-800);
       background: unset;
       border: none;
       text-decoration: underline;
       cursor: pointer;
       padding: 0;
       font-size: inherit;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     @include small-break {

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.scss';
+type NoResultsProps = {
+    Actions?: React.ReactNode[];
+    Message: React.ReactNode;
+};
+export declare function NoListResults({ Actions, Message }: NoResultsProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/NoListResults/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,KAAK,cAAc,GAAG;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC3B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAAA;AACD,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,cAAc,qBAajE"}

package/dist/elements/NoListResults/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './index.scss';
+const baseClass = 'no-results';
+export function NoListResults({
+  Actions,
+  Message
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [Message, Actions && Actions.length > 0 && /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__actions`,
+      children: Actions.map((action, index) => /*#__PURE__*/_jsx(React.Fragment, {
+        children: action
+      }, index))
+    })]
+  });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","NoListResults","Actions","Message","_jsxs","className","length","_jsx","map","action","index","Fragment"],"sources":["../../../src/elements/NoListResults/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'no-results'\n\ntype NoResultsProps = {\n  Actions?: React.ReactNode[]\n  Message: React.ReactNode\n}\nexport function NoListResults({ Actions, Message }: NoResultsProps) {\n  return (\n    <div className={baseClass}>\n      {Message}\n      {Actions && Actions.length > 0 && (\n        <div className={`${baseClass}__actions`}>\n          {Actions.map((action, index) => (\n            <React.Fragment key={index}>{action}</React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,SAASC,cAAc;EAAEC,OAAO;EAAEC;AAAO,CAAkB;EAChE,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAWL,SAAA;eACbG,OAAA,EACAD,OAAA,IAAWA,OAAA,CAAQI,MAAM,GAAG,kBAC3BC,IAAA,CAAC;MAAIF,SAAA,EAAW,GAAGL,SAAA,WAAoB;gBACpCE,OAAA,CAAQM,GAAG,CAAC,CAACC,MAAA,EAAQC,KAAA,kBACpBH,IAAA,CAACR,KAAA,CAAMY,QAAQ;kBAAcF;SAARC,KAAA;;;AAMjC","ignoreList":[]}

package/dist/elements/NoListResults/index.scss

@@ -0,0 +1,20 @@
+.no-results {
+  padding: calc(var(--base) * 2) var(--base);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--theme-border-color);
+  border-radius: var(--style-radius-m);
+  text-align: center;
+
+  &__actions {
+    display: flex;
+    gap: calc(var(--base) / 2);
+    margin-top: var(--base);
+
+    .btn {
+      margin: 0;
+    }
+  }
+}

package/dist/elements/Pagination/index.js

@@ -84,7 +84,7 @@ export const Pagination = props => {
     props: {
       direction: 'right',
       isDisabled: !hasNextPage,
-      updatePage: () => updatePage(nextPage)
+      updatePage: () => updatePage(nextPage ?? currentPage + 1)
     }
   });
   nodes.unshift({
@@ -92,7 +92,7 @@ export const Pagination = props => {
     props: {
       direction: 'left',
       isDisabled: !hasPrevPage,
-      updatePage: () => updatePage(prevPage)
+      updatePage: () => updatePage(prevPage ?? Math.max(1, currentPage - 1))
     }
   });
   return /*#__PURE__*/_jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","ClickableArrow","Page","Separator","nodeTypes","baseClass","Pagination","props","hasNextPage","hasPrevPage","nextPage","numberOfNeighbors","onChange","page","currentPage","prevPage","totalPages","updatePage","pages","Array","from","length","_","index","rangeStartIndex","rangeEndIndex","nodes","slice","unshift","type","isFirstPage","push","isLastPage","direction","isDisabled","_jsx","className","map","node","i","isCurrent","NodeType"],"sources":["../../../src/elements/Pagination/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ClickableArrow } from './ClickableArrow/index.js'\nimport './index.scss'\nimport { Page } from './Page/index.js'\nimport { Separator } from './Separator/index.js'\n\nconst nodeTypes = {\n  ClickableArrow,\n  Page,\n  Separator,\n}\n\nconst baseClass = 'paginator'\n\nexport type PaginationProps = {\n  hasNextPage?: boolean\n  hasPrevPage?: boolean\n  limit?: number\n  nextPage?: number\n  numberOfNeighbors?: number\n  onChange?: (page: number) => void\n  page?: number\n  prevPage?: number\n  totalPages?: number\n}\n\nexport type Node =\n  | {\n      props?: {\n        direction?: 'left' | 'right'\n        isDisabled?: boolean\n        isFirstPage?: boolean\n        isLastPage?: boolean\n        page?: number\n        updatePage: (page?: number) => void\n      }\n      type: 'ClickableArrow' | 'Page' | 'Separator'\n    }\n  | number\n\nexport const Pagination: React.FC<PaginationProps> = (props) => {\n  const {\n    hasNextPage = false,\n    hasPrevPage = false,\n    nextPage = null,\n    numberOfNeighbors = 1,\n    onChange,\n    page: currentPage,\n    prevPage = null,\n    totalPages = null,\n  } = props\n\n  if (!hasNextPage && !hasPrevPage) {\n    return null\n  }\n\n  const updatePage = (page) => {\n    if (typeof onChange === 'function') {\n      onChange(page)\n    }\n  }\n\n  // Create array of integers for each page\n  const pages = Array.from({ length: totalPages }, (_, index) => index + 1)\n\n  // Assign indices for start and end of the range of pages that should be shown in paginator\n  let rangeStartIndex = currentPage - 1 - numberOfNeighbors\n\n  // Sanitize rangeStartIndex in case it is less than zero for safe split\n  if (rangeStartIndex <= 0) {\n    rangeStartIndex = 0\n  }\n\n  const rangeEndIndex = currentPage - 1 + numberOfNeighbors + 1\n\n  // Slice out the range of pages that we want to render\n  const nodes: Node[] = pages.slice(rangeStartIndex, rangeEndIndex)\n\n  // Add prev separator if necessary\n  if (currentPage - numberOfNeighbors - 1 >= 2) {\n    nodes.unshift({ type: 'Separator' })\n  }\n\n  // Add first page if necessary\n  if (currentPage > numberOfNeighbors + 1) {\n    nodes.unshift({\n      type: 'Page',\n      props: {\n        isFirstPage: true,\n        page: 1,\n        updatePage,\n      },\n    })\n  }\n\n  // Add next separator if necessary\n  if (currentPage + numberOfNeighbors + 1 < totalPages) {\n    nodes.push({ type: 'Separator' })\n  }\n\n  // Add last page if necessary\n  if (rangeEndIndex < totalPages) {\n    nodes.push({\n      type: 'Page',\n      props: {\n        isLastPage: true,\n        page: totalPages,\n        updatePage,\n      },\n    })\n  }\n\n  // Add prev and next arrows based on necessity\n  nodes.unshift({\n    type: 'ClickableArrow',\n    props: {\n      direction: 'right',\n      isDisabled: !hasNextPage,\n      updatePage: () => updatePage(nextPage),\n    },\n  })\n\n  nodes.unshift({\n    type: 'ClickableArrow',\n    props: {\n      direction: 'left',\n      isDisabled: !hasPrevPage,\n      updatePage: () => updatePage(prevPage),\n    },\n  })\n\n  return (\n    <div className={baseClass}>\n      {nodes.map((node, i) => {\n        if (typeof node === 'number') {\n          return (\n            <Page isCurrent={currentPage === node} key={i} page={node} updatePage={updatePage} />\n          )\n        }\n\n        const NodeType = nodeTypes[node.type]\n\n        return <NodeType key={i} {...node.props} />\n      })}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","ClickableArrow","Page","Separator","nodeTypes","baseClass","Pagination","props","hasNextPage","hasPrevPage","nextPage","numberOfNeighbors","onChange","page","currentPage","prevPage","totalPages","updatePage","pages","Array","from","length","_","index","rangeStartIndex","rangeEndIndex","nodes","slice","unshift","type","isFirstPage","push","isLastPage","direction","isDisabled","Math","max","_jsx","className","map","node","i","isCurrent","NodeType"],"sources":["../../../src/elements/Pagination/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ClickableArrow } from './ClickableArrow/index.js'\nimport './index.scss'\nimport { Page } from './Page/index.js'\nimport { Separator } from './Separator/index.js'\n\nconst nodeTypes = {\n  ClickableArrow,\n  Page,\n  Separator,\n}\n\nconst baseClass = 'paginator'\n\nexport type PaginationProps = {\n  hasNextPage?: boolean\n  hasPrevPage?: boolean\n  limit?: number\n  nextPage?: number\n  numberOfNeighbors?: number\n  onChange?: (page: number) => void\n  page?: number\n  prevPage?: number\n  totalPages?: number\n}\n\nexport type Node =\n  | {\n      props?: {\n        direction?: 'left' | 'right'\n        isDisabled?: boolean\n        isFirstPage?: boolean\n        isLastPage?: boolean\n        page?: number\n        updatePage: (page?: number) => void\n      }\n      type: 'ClickableArrow' | 'Page' | 'Separator'\n    }\n  | number\n\nexport const Pagination: React.FC<PaginationProps> = (props) => {\n  const {\n    hasNextPage = false,\n    hasPrevPage = false,\n    nextPage = null,\n    numberOfNeighbors = 1,\n    onChange,\n    page: currentPage,\n    prevPage = null,\n    totalPages = null,\n  } = props\n\n  if (!hasNextPage && !hasPrevPage) {\n    return null\n  }\n\n  const updatePage = (page) => {\n    if (typeof onChange === 'function') {\n      onChange(page)\n    }\n  }\n\n  // Create array of integers for each page\n  const pages = Array.from({ length: totalPages }, (_, index) => index + 1)\n\n  // Assign indices for start and end of the range of pages that should be shown in paginator\n  let rangeStartIndex = currentPage - 1 - numberOfNeighbors\n\n  // Sanitize rangeStartIndex in case it is less than zero for safe split\n  if (rangeStartIndex <= 0) {\n    rangeStartIndex = 0\n  }\n\n  const rangeEndIndex = currentPage - 1 + numberOfNeighbors + 1\n\n  // Slice out the range of pages that we want to render\n  const nodes: Node[] = pages.slice(rangeStartIndex, rangeEndIndex)\n\n  // Add prev separator if necessary\n  if (currentPage - numberOfNeighbors - 1 >= 2) {\n    nodes.unshift({ type: 'Separator' })\n  }\n\n  // Add first page if necessary\n  if (currentPage > numberOfNeighbors + 1) {\n    nodes.unshift({\n      type: 'Page',\n      props: {\n        isFirstPage: true,\n        page: 1,\n        updatePage,\n      },\n    })\n  }\n\n  // Add next separator if necessary\n  if (currentPage + numberOfNeighbors + 1 < totalPages) {\n    nodes.push({ type: 'Separator' })\n  }\n\n  // Add last page if necessary\n  if (rangeEndIndex < totalPages) {\n    nodes.push({\n      type: 'Page',\n      props: {\n        isLastPage: true,\n        page: totalPages,\n        updatePage,\n      },\n    })\n  }\n\n  // Add prev and next arrows based on necessity\n  nodes.unshift({\n    type: 'ClickableArrow',\n    props: {\n      direction: 'right',\n      isDisabled: !hasNextPage,\n      updatePage: () => updatePage(nextPage ?? currentPage + 1),\n    },\n  })\n\n  nodes.unshift({\n    type: 'ClickableArrow',\n    props: {\n      direction: 'left',\n      isDisabled: !hasPrevPage,\n      updatePage: () => updatePage(prevPage ?? Math.max(1, currentPage - 1)),\n    },\n  })\n\n  return (\n    <div className={baseClass}>\n      {nodes.map((node, i) => {\n        if (typeof node === 'number') {\n          return (\n            <Page isCurrent={currentPage === node} key={i} page={node} updatePage={updatePage} />\n          )\n        }\n\n        const NodeType = nodeTypes[node.type]\n\n        return <NodeType key={i} {...node.props} />\n      })}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Pill/index.scss

@@ -2,25 +2,30 @@
 
 @layer payload-default {
   .pill {
+    --pill-padding-block-start: 0px;
+    --pill-padding-inline-start: 0px;
+    --pill-padding-block-end: 0px;
+    --pill-padding-inline-end: 0px;
     font-size: 1rem;
-    line-height: base(1.2);
+    line-height: calc(var(--base) * 1.2);
     display: inline-flex;
     background: var(--theme-elevation-150);
     color: var(--theme-elevation-800);
     border-radius: $style-radius-s;
-    cursor: default;
+    cursor: inherit;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     border: 0;
-    padding: 0 base(0.4);
     align-items: center;
     flex-shrink: 0;
     gap: base(0.2);
+    padding: var(--pill-padding-block-start) var(--pill-padding-inline-end)
+      var(--pill-padding-block-end) var(--pill-padding-inline-start);
+    --pill-icon-size: calc(var(--base) * 1.2);
 
     &--rounded {
       border-radius: var(--style-radius-l);
-      line-height: 18px;
       font-size: 12px;
     }
 
@@ -36,7 +41,8 @@
 
     .icon {
       flex-shrink: 0;
-      margin: base(0.1);
+      width: var(--pill-icon-size);
+      height: var(--pill-icon-size);
     }
 
     &__label {
@@ -56,8 +62,8 @@
 
     &--has-icon {
       gap: 0;
-      padding-inline-start: base(0.4);
-      padding-inline-end: base(0.1);
+      --pill-padding-inline-start: base(0.4);
+      --pill-padding-inline-end: base(0.1);
 
       svg {
         display: block;
@@ -141,9 +147,19 @@
       }
     }
 
+    &--size-medium {
+      --pill-padding-block-start: calc(var(--base) * 0.2);
+      --pill-padding-inline-end: calc(var(--base) * 0.6);
+      --pill-padding-block-end: calc(var(--base) * 0.2);
+      --pill-padding-inline-start: calc(var(--base) * 0.6);
+    }
+
     &--size-small {
-      padding: 0 base(0.2);
-      line-height: 18px;
+      --pill-icon-size: calc(var(--base) * 0.9);
+      --pill-padding-block-start: 0;
+      --pill-padding-inline-end: calc(var(--base) * 0.4);
+      --pill-padding-inline-start: calc(var(--base) * 0.4);
+      --pill-padding-block-end: 0;
     }
   }
 

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,cAAc,CAAA;AAIrB,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,OAAO,CAAA;IAChC,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,CAuD5C,CAAA"}
+{"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,cAAc,CAAA;AAIrB,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,OAAO,CAAA;IAChC,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"}

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

@@ -28,7 +28,7 @@ export const Button = ({
   href,
   onClick
 }) => {
-  const classes = [`${baseClass}__button`, active && `${baseClass}__button--selected`, className].filter(Boolean).join(' ');
+  const classes = [`${baseClass}__button`, disabled && `${baseClass}__disabled`, active && `${baseClass}__button--selected`, className].filter(Boolean).join(' ');
   if (!disabled) {
     if (href) {
       return /*#__PURE__*/_jsx(Link, {

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.scss'\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' | 'small'\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 = [`${baseClass}__button`, active && `${baseClass}__button--selected`, className]\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,CAAC,GAAGV,SAAA,UAAmB,EAAEiB,MAAA,IAAU,GAAGjB,SAAA,oBAA6B,EAAEQ,SAAA,CAAU,CAC5FG,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","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.scss'\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' | 'small'\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":[]}

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

@@ -3,10 +3,11 @@
 @layer payload-default {
   .popup-button-list {
     --list-button-padding: calc(var(--base) * 0.5);
+    --popup-button-list-gap: 3px;
     display: flex;
     flex-direction: column;
     text-align: left;
-    gap: 3px;
+    gap: var(--popup-button-list-gap);
     [dir='rtl'] &__text-align--left {
       text-align: right;
     }
@@ -54,5 +55,15 @@
     &__button--selected {
       background-color: var(--theme-elevation-150);
     }
+
+    &__disabled {
+      cursor: not-allowed;
+      --popup-button-highlight: transparent;
+      background-color: var(--popup-button-highlight);
+      color: var(--theme-elevation-350);
+      &:hover {
+        --popup-button-highlight: var(--theme-elevation-50);
+      }
+    }
   }
 }

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

@@ -6,5 +6,6 @@
     height: 1px;
     background-color: var(--theme-elevation-150);
     border: none;
+    margin: calc(var(--base) * 0.75) 0;
   }
 }

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

@@ -3,6 +3,9 @@
 @layer payload-default {
   .popup-list-group-label {
     color: var(--theme-elevation-500);
-    padding: 0 var(--list-button-padding);
+    font-weight: 500;
+    line-height: 1;
+    margin-top: calc(var(--base) * 0.25);
+    margin-bottom: calc(var(--base) * 0.5);
   }
 }

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

@@ -1,10 +1,12 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import './index.scss';
 const baseClass = 'popup-button';
 export const PopupTrigger = props => {
+  const $ = _c(24);
   const {
     active,
     button,
@@ -15,39 +17,103 @@ export const PopupTrigger = props => {
     setActive,
     size
   } = props;
-  const classes = [baseClass, className, `${baseClass}--${buttonType}`, !noBackground && `${baseClass}--background`, size && `${baseClass}--size-${size}`, disabled && `${baseClass}--disabled`].filter(Boolean).join(' ');
-  const handleClick = () => {
-    setActive(!active);
-  };
-  if (buttonType === 'none') {
+  const t0 = `${baseClass}--${buttonType}`;
+  const t1 = !noBackground && `${baseClass}--background`;
+  const t2 = size && `${baseClass}--size-${size}`;
+  const t3 = disabled && `${baseClass}--disabled`;
+  let t4;
+  if ($[0] !== className || $[1] !== t0 || $[2] !== t1 || $[3] !== t2 || $[4] !== t3) {
+    t4 = [baseClass, className, t0, t1, t2, t3].filter(Boolean);
+    $[0] = className;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const classes = t4.join(" ");
+  let t5;
+  if ($[6] !== active || $[7] !== setActive) {
+    t5 = () => {
+      setActive(!active);
+    };
+    $[6] = active;
+    $[7] = setActive;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  const handleClick = t5;
+  if (buttonType === "none") {
     return null;
   }
-  if (buttonType === 'custom') {
-    return /*#__PURE__*/_jsx("div", {
-      className: classes,
-      onClick: handleClick,
-      onKeyDown: e => {
-        if (e.key === 'Enter') {
+  if (buttonType === "custom") {
+    let t6;
+    if ($[9] !== handleClick) {
+      t6 = e => {
+        if (e.key === "Enter") {
           handleClick();
         }
-      },
-      role: "button",
+      };
+      $[9] = handleClick;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    let t7;
+    if ($[11] !== button || $[12] !== classes || $[13] !== handleClick || $[14] !== t6) {
+      t7 = _jsx("div", {
+        className: classes,
+        onClick: handleClick,
+        onKeyDown: t6,
+        role: "button",
+        tabIndex: 0,
+        children: button
+      });
+      $[11] = button;
+      $[12] = classes;
+      $[13] = handleClick;
+      $[14] = t6;
+      $[15] = t7;
+    } else {
+      t7 = $[15];
+    }
+    return t7;
+  }
+  let t6;
+  if ($[16] !== handleClick) {
+    t6 = e_0 => {
+      if (e_0.key === "Enter") {
+        handleClick();
+      }
+    };
+    $[16] = handleClick;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[18] !== button || $[19] !== classes || $[20] !== disabled || $[21] !== handleClick || $[22] !== t6) {
+    t7 = _jsx("button", {
+      className: classes,
+      disabled,
+      onClick: handleClick,
+      onKeyDown: t6,
       tabIndex: 0,
+      type: "button",
       children: button
     });
+    $[18] = button;
+    $[19] = classes;
+    $[20] = disabled;
+    $[21] = handleClick;
+    $[22] = t6;
+    $[23] = t7;
+  } else {
+    t7 = $[23];
   }
-  return /*#__PURE__*/_jsx("button", {
-    className: classes,
-    disabled: disabled,
-    onClick: handleClick,
-    onKeyDown: e => {
-      if (e.key === 'Enter') {
-        handleClick();
-      }
-    },
-    tabIndex: 0,
-    type: "button",
-    children: button
-  });
+  return t7;
 };
 //# sourceMappingURL=index.js.map