@payloadcms/ui 4.0.0-canary.1 → 4.0.0-canary.11

package/dist/elements/MiniCarousel/index.js

@@ -0,0 +1,84 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { appendCacheTag } from '../../utilities/appendCacheTag.js';
+import './index.css';
+const baseClass = 'mini-carousel';
+const MiniCarouselItem = ({
+  active,
+  imageCacheTag,
+  label,
+  onClick,
+  url
+}) => {
+  const src = appendCacheTag(url, imageCacheTag);
+  return /*#__PURE__*/_jsx("button", {
+    "aria-label": label,
+    "aria-pressed": active ? 'true' : 'false',
+    className: [`${baseClass}__item`, active && `${baseClass}__item--active`].filter(Boolean).join(' '),
+    onClick: onClick,
+    type: "button",
+    children: /*#__PURE__*/_jsx("img", {
+      alt: label,
+      src: src
+    })
+  });
+};
+export const MiniCarousel = ({
+  doc,
+  imageCacheTag,
+  onSelect,
+  selectedSize,
+  uploadConfig
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    imageSizes
+  } = uploadConfig;
+  const {
+    sizes,
+    url: originalUrl
+  } = doc;
+  const orderedSizeKeys = React.useMemo(() => {
+    if (!imageSizes || imageSizes.length === 0) {
+      return Object.keys(sizes || {});
+    }
+    return imageSizes.map(({
+      name
+    }) => name).filter(name_0 => sizes?.[name_0]?.url);
+  }, [imageSizes, sizes]);
+  if (!originalUrl) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: [baseClass, 'scrollbar-thin'].join(' '),
+    children: [/*#__PURE__*/_jsx(MiniCarouselItem, {
+      active: selectedSize === null,
+      imageCacheTag: imageCacheTag,
+      label: t('general:original'),
+      onClick: () => onSelect(null),
+      url: originalUrl
+    }), orderedSizeKeys.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__divider`
+      }), orderedSizeKeys.map(key => {
+        const sizeData = sizes?.[key];
+        if (!sizeData?.url) {
+          return null;
+        }
+        return /*#__PURE__*/_jsx(MiniCarouselItem, {
+          active: selectedSize === key,
+          imageCacheTag: imageCacheTag,
+          label: key,
+          onClick: () => onSelect(key),
+          url: sizeData.url
+        }, key);
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useTranslation","appendCacheTag","baseClass","MiniCarouselItem","active","imageCacheTag","label","onClick","url","src","_jsx","className","filter","Boolean","join","type","alt","MiniCarousel","doc","onSelect","selectedSize","uploadConfig","t","imageSizes","sizes","originalUrl","orderedSizeKeys","useMemo","length","Object","keys","map","name","_jsxs","_Fragment","key","sizeData"],"sources":["../../../src/elements/MiniCarousel/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport './index.css'\n\nconst baseClass = 'mini-carousel'\n\ntype MiniCarouselItemProps = {\n  active: boolean\n  imageCacheTag?: false | string\n  label: string\n  onClick: () => void\n  url: string\n}\n\nconst MiniCarouselItem: React.FC<MiniCarouselItemProps> = ({\n  active,\n  imageCacheTag,\n  label,\n  onClick,\n  url,\n}) => {\n  const src = appendCacheTag(url, imageCacheTag)\n\n  return (\n    <button\n      aria-label={label}\n      aria-pressed={active ? 'true' : 'false'}\n      className={[`${baseClass}__item`, active && `${baseClass}__item--active`]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <img alt={label} src={src} />\n    </button>\n  )\n}\n\nexport type MiniCarouselProps = {\n  doc: {\n    sizes?: FileSizes\n    url?: string\n  } & Data\n  imageCacheTag?: false | string\n  onSelect: (sizeKey: null | string) => void\n  selectedSize: null | string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const MiniCarousel: React.FC<MiniCarouselProps> = ({\n  doc,\n  imageCacheTag,\n  onSelect,\n  selectedSize,\n  uploadConfig,\n}) => {\n  const { t } = useTranslation()\n  const { imageSizes } = uploadConfig\n  const { sizes, url: originalUrl } = doc\n\n  const orderedSizeKeys = React.useMemo(() => {\n    if (!imageSizes || imageSizes.length === 0) {\n      return Object.keys(sizes || {})\n    }\n    return imageSizes.map(({ name }) => name).filter((name) => sizes?.[name]?.url)\n  }, [imageSizes, sizes])\n\n  if (!originalUrl) {\n    return null\n  }\n\n  return (\n    <div className={[baseClass, 'scrollbar-thin'].join(' ')}>\n      <MiniCarouselItem\n        active={selectedSize === null}\n        imageCacheTag={imageCacheTag}\n        label={t('general:original')}\n        onClick={() => onSelect(null)}\n        url={originalUrl}\n      />\n\n      {orderedSizeKeys.length > 0 && (\n        <>\n          <div className={`${baseClass}__divider`} />\n          {orderedSizeKeys.map((key) => {\n            const sizeData = sizes?.[key]\n            if (!sizeData?.url) {\n              return null\n            }\n            return (\n              <MiniCarouselItem\n                active={selectedSize === key}\n                imageCacheTag={imageCacheTag}\n                key={key}\n                label={key}\n                onClick={() => onSelect(key)}\n                url={sizeData.url}\n              />\n            )\n          })}\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAUlB,MAAMC,gBAAA,GAAoDA,CAAC;EACzDC,MAAM;EACNC,aAAa;EACbC,KAAK;EACLC,OAAO;EACPC;AAAG,CACJ;EACC,MAAMC,GAAA,GAAMR,cAAA,CAAeO,GAAA,EAAKH,aAAA;EAEhC,oBACEK,IAAA,CAAC;IACC,cAAYJ,KAAA;IACZ,gBAAcF,MAAA,GAAS,SAAS;IAChCO,SAAA,EAAW,CAAC,GAAGT,SAAA,QAAiB,EAAEE,MAAA,IAAU,GAAGF,SAAA,gBAAyB,CAAC,CACtEU,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRP,OAAA,EAASA,OAAA;IACTQ,IAAA,EAAK;cAEL,aAAAL,IAAA,CAAC;MAAIM,GAAA,EAAKV,KAAA;MAAOG,GAAA,EAAKA;;;AAG5B;AAaA,OAAO,MAAMQ,YAAA,GAA4CA,CAAC;EACxDC,GAAG;EACHb,aAAa;EACbc,QAAQ;EACRC,YAAY;EACZC;AAAY,CACb;EACC,MAAM;IAAEC;EAAC,CAAE,GAAGtB,cAAA;EACd,MAAM;IAAEuB;EAAU,CAAE,GAAGF,YAAA;EACvB,MAAM;IAAEG,KAAK;IAAEhB,GAAA,EAAKiB;EAAW,CAAE,GAAGP,GAAA;EAEpC,MAAMQ,eAAA,GAAkB3B,KAAA,CAAM4B,OAAO,CAAC;IACpC,IAAI,CAACJ,UAAA,IAAcA,UAAA,CAAWK,MAAM,KAAK,GAAG;MAC1C,OAAOC,MAAA,CAAOC,IAAI,CAACN,KAAA,IAAS,CAAC;IAC/B;IACA,OAAOD,UAAA,CAAWQ,GAAG,CAAC,CAAC;MAAEC;IAAI,CAAE,KAAKA,IAAA,EAAMpB,MAAM,CAAEoB,MAAA,IAASR,KAAA,GAAQQ,MAAA,CAAK,EAAExB,GAAA;EAC5E,GAAG,CAACe,UAAA,EAAYC,KAAA,CAAM;EAEtB,IAAI,CAACC,WAAA,EAAa;IAChB,OAAO;EACT;EAEA,oBACEQ,KAAA,CAAC;IAAItB,SAAA,EAAW,CAACT,SAAA,EAAW,iBAAiB,CAACY,IAAI,CAAC;4BACjDJ,IAAA,CAACP,gBAAA;MACCC,MAAA,EAAQgB,YAAA,KAAiB;MACzBf,aAAA,EAAeA,aAAA;MACfC,KAAA,EAAOgB,CAAA,CAAE;MACTf,OAAA,EAASA,CAAA,KAAMY,QAAA,CAAS;MACxBX,GAAA,EAAKiB;QAGNC,eAAA,CAAgBE,MAAM,GAAG,kBACxBK,KAAA,CAAAC,SAAA;8BACExB,IAAA,CAAC;QAAIC,SAAA,EAAW,GAAGT,SAAA;UAClBwB,eAAA,CAAgBK,GAAG,CAAEI,GAAA;QACpB,MAAMC,QAAA,GAAWZ,KAAA,GAAQW,GAAA,CAAI;QAC7B,IAAI,CAACC,QAAA,EAAU5B,GAAA,EAAK;UAClB,OAAO;QACT;QACA,oBACEE,IAAA,CAACP,gBAAA;UACCC,MAAA,EAAQgB,YAAA,KAAiBe,GAAA;UACzB9B,aAAA,EAAeA,aAAA;UAEfC,KAAA,EAAO6B,GAAA;UACP5B,OAAA,EAASA,CAAA,KAAMY,QAAA,CAASgB,GAAA;UACxB3B,GAAA,EAAK4B,QAAA,CAAS5B;WAHT2B,GAAA;MAMX;;;AAKV","ignoreList":[]}

package/dist/elements/Nav/SettingsMenuButton/index.css

@@ -0,0 +1,5 @@
+@layer payload-default {
+  .settings-menu-button.popup--h-align-left .popup__content {
+    left: calc(var(--nav-padding-inline-start) * -0.5);
+  }
+}

package/dist/elements/Nav/SettingsMenuButton/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type SettingsMenuButtonProps = {
     settingsMenu?: React.ReactNode[];
 };

package/dist/elements/Nav/SettingsMenuButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/SettingsMenuButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,uBAAuB,GAAG;IACpC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqBhE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/SettingsMenuButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,uBAAuB,GAAG;IACpC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqBhE,CAAA"}

package/dist/elements/Nav/SettingsMenuButton/index.js

@@ -6,7 +6,7 @@ import React, { Fragment } from 'react';
 import { GearIcon } from '../../../icons/Gear/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Popup } from '../../Popup/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'settings-menu-button';
 export const SettingsMenuButton = t0 => {
   const $ = _c(3);

package/dist/elements/Nav/SettingsMenuButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Fragment","GearIcon","useTranslation","Popup","baseClass","SettingsMenuButton","t0","$","settingsMenu","t","length","t1","_jsx","button","ariaLabel","id","size","verticalAlign","children","map","_temp","item","i"],"sources":["../../../../src/elements/Nav/SettingsMenuButton/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { GearIcon } from '../../../icons/Gear/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Popup } from '../../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'settings-menu-button'\n\nexport type SettingsMenuButtonProps = {\n  settingsMenu?: React.ReactNode[]\n}\n\nexport const SettingsMenuButton: React.FC<SettingsMenuButtonProps> = ({ settingsMenu }) => {\n  const { t } = useTranslation()\n\n  if (!settingsMenu || settingsMenu.length === 0) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={<GearIcon ariaLabel={t('general:menu')} />}\n      className={baseClass}\n      horizontalAlign=\"left\"\n      id=\"settings-menu\"\n      size=\"small\"\n      verticalAlign=\"bottom\"\n    >\n      {settingsMenu.map((item, i) => (\n        <Fragment key={`settings-menu-item-${i}`}>{item}</Fragment>\n      ))}\n    </Popup>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,QAAQ;AACtB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,MAAMC,kBAAA,GAAwDC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU;EAAA,IAAAF,EAAgB;EACpF;IAAAG;EAAA,IAAcP,cAAA;EAAA,IAEV,CAACM,YAAA,IAAgBA,YAAA,CAAAE,MAAA,MAAwB;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAJ,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAE,CAAA;IAK3CE,EAAA,GAAAC,IAAA,CAAAT,KAAA;MAAAU,MAAA,EACUD,IAAA,CAAAX,QAAA;QAAAa,SAAA,EAAqBL,CAAA,CAAE;MAAA,C;;uBAEf;MAAAM,EAAA,EACb;MAAAC,IAAA,EACE;MAAAC,aAAA,EACS;MAAAC,QAAA,EAEbV,YAAA,CAAAW,GAAA,CAAAC,KACyC;IAAA,C;;;;;;;SAT5CT,E;CAaJ;AArBqE,SAAAS,MAAAC,IAAA,EAAAC,CAAA;EAAA,OAiB7DV,IAAA,CAAAZ,QAAA;IAAAkB,QAAA,EAA2CG;EAAA,GAA5B,sBAAsBC,CAAA,EAAG;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","GearIcon","useTranslation","Popup","baseClass","SettingsMenuButton","t0","$","settingsMenu","t","length","t1","_jsx","button","ariaLabel","id","size","verticalAlign","children","map","_temp","item","i"],"sources":["../../../../src/elements/Nav/SettingsMenuButton/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { GearIcon } from '../../../icons/Gear/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Popup } from '../../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'settings-menu-button'\n\nexport type SettingsMenuButtonProps = {\n  settingsMenu?: React.ReactNode[]\n}\n\nexport const SettingsMenuButton: React.FC<SettingsMenuButtonProps> = ({ settingsMenu }) => {\n  const { t } = useTranslation()\n\n  if (!settingsMenu || settingsMenu.length === 0) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={<GearIcon ariaLabel={t('general:menu')} />}\n      className={baseClass}\n      horizontalAlign=\"left\"\n      id=\"settings-menu\"\n      size=\"small\"\n      verticalAlign=\"bottom\"\n    >\n      {settingsMenu.map((item, i) => (\n        <Fragment key={`settings-menu-item-${i}`}>{item}</Fragment>\n      ))}\n    </Popup>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,QAAQ;AACtB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,MAAMC,kBAAA,GAAwDC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU;EAAA,IAAAF,EAAgB;EACpF;IAAAG;EAAA,IAAcP,cAAA;EAAA,IAEV,CAACM,YAAA,IAAgBA,YAAA,CAAAE,MAAA,MAAwB;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAJ,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAE,CAAA;IAK3CE,EAAA,GAAAC,IAAA,CAAAT,KAAA;MAAAU,MAAA,EACUD,IAAA,CAAAX,QAAA;QAAAa,SAAA,EAAqBL,CAAA,CAAE;MAAA,C;;uBAEf;MAAAM,EAAA,EACb;MAAAC,IAAA,EACE;MAAAC,aAAA,EACS;MAAAC,QAAA,EAEbV,YAAA,CAAAW,GAAA,CAAAC,KACyC;IAAA,C;;;;;;;SAT5CT,E;CAaJ;AArBqE,SAAAS,MAAAC,IAAA,EAAAC,CAAA;EAAA,OAiB7DV,IAAA,CAAAZ,QAAA;IAAAkB,QAAA,EAA2CG;EAAA,GAA5B,sBAAsBC,CAAA,EAAG;AAAA","ignoreList":[]}

package/dist/elements/Nav/index.css

@@ -6,7 +6,7 @@
     flex-shrink: 0;
     height: 100vh;
     width: var(--nav-width);
-    border-right: 1px solid var(--color-border);
+    border-right: var(--stroke-width-small) solid var(--color-border);
     overflow: hidden;
     --nav-padding-inline-start: var(--spacer-2-5);
     --nav-padding-inline-end: var(--spacer-2-5);
@@ -16,7 +16,7 @@
 
   [dir='rtl'] .nav {
     border-right: none;
-    border-left: 1px solid var(--color-border);
+    border-left: var(--stroke-width-small) solid var(--color-border);
   }
 
   .nav__mobile-close {
@@ -119,11 +119,6 @@
       --nav-padding-inline-end: var(--gutter-h);
     }
 
-    .nav__link {
-      font-size: var(--text-body-small-font-size);
-      line-height: var(--spacer-4);
-    }
-
     .nav__mobile-close {
       display: flex;
       align-items: center;

package/dist/elements/NavGroup/index.css

@@ -6,7 +6,7 @@
 
     & + .nav-group {
       margin-block-start: var(--spacer-2);
-      border-top: 1px solid var(--color-border);
+      border-top: var(--stroke-width-small) solid var(--color-border);
       padding-top: var(--spacer-2-5);
     }
   }

package/dist/elements/Pagination/index.css

@@ -37,6 +37,11 @@
     &:focus-visible {
       outline: none;
     }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
   }
 
   .paginator__page-total {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pagination/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAGpD,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsGhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pagination/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAGpD,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqGhD,CAAA"}

package/dist/elements/Pagination/index.js

@@ -7,7 +7,7 @@ import { ClickableArrow } from './ClickableArrow/index.js';
 import './index.css';
 const baseClass = 'paginator';
 export const Pagination = props => {
-  const $ = _c(34);
+  const $ = _c(35);
   const {
     hasNextPage: t0,
     hasPrevPage: t1,
@@ -122,10 +122,8 @@ export const Pagination = props => {
     t11 = $[14];
   }
   const handleInputKeyDown = t11;
-  if (!totalPages || totalPages <= 1) {
-    return null;
-  }
-  const t12 = !hasPrevPage;
+  const isSinglePage = !totalPages || totalPages <= 1;
+  const t12 = isSinglePage || !hasPrevPage;
   let t13;
   if ($[15] !== currentPage || $[16] !== prevPage || $[17] !== updatePage) {
     t13 = () => updatePage(prevPage ?? Math.max(1, currentPage - 1));
@@ -137,16 +135,16 @@ export const Pagination = props => {
     t13 = $[18];
   }
   let t14;
-  if ($[19] !== currentPage || $[20] !== handleInputBlur || $[21] !== handleInputKeyDown || $[22] !== hasNextPage || $[23] !== inputValue || $[24] !== nextPage || $[25] !== t12 || $[26] !== t13 || $[27] !== totalPages || $[28] !== updatePage) {
+  if ($[19] !== currentPage || $[20] !== handleInputBlur || $[21] !== handleInputKeyDown || $[22] !== hasNextPage || $[23] !== inputValue || $[24] !== isSinglePage || $[25] !== nextPage || $[26] !== t12 || $[27] !== t13 || $[28] !== totalPages || $[29] !== updatePage) {
     let t15;
-    if ($[30] !== currentPage || $[31] !== nextPage || $[32] !== updatePage) {
+    if ($[31] !== currentPage || $[32] !== nextPage || $[33] !== updatePage) {
       t15 = () => updatePage(nextPage ?? currentPage + 1);
-      $[30] = currentPage;
-      $[31] = nextPage;
-      $[32] = updatePage;
-      $[33] = t15;
+      $[31] = currentPage;
+      $[32] = nextPage;
+      $[33] = updatePage;
+      $[34] = t15;
     } else {
-      t15 = $[33];
+      t15 = $[34];
     }
     t14 = _jsxs("div", {
       className: baseClass,
@@ -156,13 +154,14 @@ export const Pagination = props => {
         updatePage: t13
       }), _jsx(ClickableArrow, {
         direction: "right",
-        isDisabled: !hasNextPage,
+        isDisabled: isSinglePage || !hasNextPage,
         updatePage: t15
       }), _jsxs("div", {
         className: `${baseClass}__page-input-wrapper`,
         children: [_jsx("input", {
           "aria-label": "Go to page",
           className: `${baseClass}__page-input`,
+          disabled: isSinglePage,
           inputMode: "numeric",
           max: totalPages,
           min: 1,
@@ -176,7 +175,7 @@ export const Pagination = props => {
           value: inputValue
         }), _jsxs("span", {
           className: `${baseClass}__page-total`,
-          children: ["of ", totalPages]
+          children: ["of ", isSinglePage ? 1 : totalPages]
         })]
       })]
     });
@@ -185,14 +184,15 @@ export const Pagination = props => {
     $[21] = handleInputKeyDown;
     $[22] = hasNextPage;
     $[23] = inputValue;
-    $[24] = nextPage;
-    $[25] = t12;
-    $[26] = t13;
-    $[27] = totalPages;
-    $[28] = updatePage;
-    $[29] = t14;
+    $[24] = isSinglePage;
+    $[25] = nextPage;
+    $[26] = t12;
+    $[27] = t13;
+    $[28] = totalPages;
+    $[29] = updatePage;
+    $[30] = t14;
   } else {
-    t14 = $[29];
+    t14 = $[30];
   }
   return t14;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useState","ClickableArrow","baseClass","Pagination","props","$","hasNextPage","t0","hasPrevPage","t1","nextPage","t2","onChange","page","t3","prevPage","t4","totalPages","t5","undefined","currentPage","inputValue","setInputValue","String","t6","t7","useEffect","t8","updatePage","t9","Symbol","for","e","target","value","handleInputChange","t10","parsed","parseInt","isNaN","clamped","Math","max","min","handleInputBlur","t11","e_0","key","currentTarget","blur","preventDefault","parsed_0","parsed_1","handleInputKeyDown","t12","t13","t14","t15","_jsxs","className","children","_jsx","direction","isDisabled","inputMode","onBlur","onKeyDown","style","width","length","type"],"sources":["../../../src/elements/Pagination/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useState } from 'react'\n\nimport { ClickableArrow } from './ClickableArrow/index.js'\nimport './index.css'\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 const Pagination: React.FC<PaginationProps> = (props) => {\n  const {\n    hasNextPage = false,\n    hasPrevPage = false,\n    nextPage = null,\n    onChange,\n    page: currentPage = 1,\n    prevPage = null,\n    totalPages = 1,\n  } = props\n\n  const [inputValue, setInputValue] = useState(String(currentPage))\n\n  // Sync input value when currentPage changes externally\n  React.useEffect(() => {\n    setInputValue(String(currentPage))\n  }, [currentPage])\n\n  const updatePage = useCallback(\n    (page: number) => {\n      if (typeof onChange === 'function') {\n        onChange(page)\n      }\n    },\n    [onChange],\n  )\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setInputValue(e.target.value)\n  }\n\n  const handleInputBlur = () => {\n    const parsed = parseInt(inputValue, 10)\n    if (!isNaN(parsed)) {\n      // Clamp to valid range\n      const clamped = Math.max(1, Math.min(parsed, totalPages))\n      if (clamped !== currentPage) {\n        updatePage(clamped)\n      } else {\n        setInputValue(String(currentPage))\n      }\n    } else {\n      // Reset to current page if not a number\n      setInputValue(String(currentPage))\n    }\n  }\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') {\n      e.currentTarget.blur()\n    } else if (e.key === 'Escape') {\n      setInputValue(String(currentPage))\n      e.currentTarget.blur()\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      const parsed = parseInt(inputValue, 10)\n      if (!isNaN(parsed) && parsed < totalPages) {\n        setInputValue(String(parsed + 1))\n      }\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      const parsed = parseInt(inputValue, 10)\n      if (!isNaN(parsed) && parsed > 1) {\n        setInputValue(String(parsed - 1))\n      }\n    }\n  }\n\n  if (!totalPages || totalPages <= 1) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <ClickableArrow\n        direction=\"left\"\n        isDisabled={!hasPrevPage}\n        updatePage={() => updatePage(prevPage ?? Math.max(1, currentPage - 1))}\n      />\n      <ClickableArrow\n        direction=\"right\"\n        isDisabled={!hasNextPage}\n        updatePage={() => updatePage(nextPage ?? currentPage + 1)}\n      />\n      <div className={`${baseClass}__page-input-wrapper`}>\n        <input\n          aria-label=\"Go to page\"\n          className={`${baseClass}__page-input`}\n          inputMode=\"numeric\"\n          max={totalPages}\n          min={1}\n          onBlur={handleInputBlur}\n          onChange={handleInputChange}\n          onKeyDown={handleInputKeyDown}\n          style={{ width: `${Math.max(inputValue.length, 1)}ch` }}\n          type=\"text\"\n          value={inputValue}\n        />\n        <span className={`${baseClass}__page-total`}>of {totalPages}</span>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useState","ClickableArrow","baseClass","Pagination","props","$","hasNextPage","t0","hasPrevPage","t1","nextPage","t2","onChange","page","t3","prevPage","t4","totalPages","t5","undefined","currentPage","inputValue","setInputValue","String","t6","t7","useEffect","t8","updatePage","t9","Symbol","for","e","target","value","handleInputChange","t10","parsed","parseInt","isNaN","clamped","Math","max","min","handleInputBlur","t11","e_0","key","currentTarget","blur","preventDefault","parsed_0","parsed_1","handleInputKeyDown","isSinglePage","t12","t13","t14","t15","_jsxs","className","children","_jsx","direction","isDisabled","disabled","inputMode","onBlur","onKeyDown","style","width","length","type"],"sources":["../../../src/elements/Pagination/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useState } from 'react'\n\nimport { ClickableArrow } from './ClickableArrow/index.js'\nimport './index.css'\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 const Pagination: React.FC<PaginationProps> = (props) => {\n  const {\n    hasNextPage = false,\n    hasPrevPage = false,\n    nextPage = null,\n    onChange,\n    page: currentPage = 1,\n    prevPage = null,\n    totalPages = 1,\n  } = props\n\n  const [inputValue, setInputValue] = useState(String(currentPage))\n\n  // Sync input value when currentPage changes externally\n  React.useEffect(() => {\n    setInputValue(String(currentPage))\n  }, [currentPage])\n\n  const updatePage = useCallback(\n    (page: number) => {\n      if (typeof onChange === 'function') {\n        onChange(page)\n      }\n    },\n    [onChange],\n  )\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setInputValue(e.target.value)\n  }\n\n  const handleInputBlur = () => {\n    const parsed = parseInt(inputValue, 10)\n    if (!isNaN(parsed)) {\n      // Clamp to valid range\n      const clamped = Math.max(1, Math.min(parsed, totalPages))\n      if (clamped !== currentPage) {\n        updatePage(clamped)\n      } else {\n        setInputValue(String(currentPage))\n      }\n    } else {\n      // Reset to current page if not a number\n      setInputValue(String(currentPage))\n    }\n  }\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') {\n      e.currentTarget.blur()\n    } else if (e.key === 'Escape') {\n      setInputValue(String(currentPage))\n      e.currentTarget.blur()\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      const parsed = parseInt(inputValue, 10)\n      if (!isNaN(parsed) && parsed < totalPages) {\n        setInputValue(String(parsed + 1))\n      }\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      const parsed = parseInt(inputValue, 10)\n      if (!isNaN(parsed) && parsed > 1) {\n        setInputValue(String(parsed - 1))\n      }\n    }\n  }\n\n  const isSinglePage = !totalPages || totalPages <= 1\n\n  return (\n    <div className={baseClass}>\n      <ClickableArrow\n        direction=\"left\"\n        isDisabled={isSinglePage || !hasPrevPage}\n        updatePage={() => updatePage(prevPage ?? Math.max(1, currentPage - 1))}\n      />\n      <ClickableArrow\n        direction=\"right\"\n        isDisabled={isSinglePage || !hasNextPage}\n        updatePage={() => updatePage(nextPage ?? currentPage + 1)}\n      />\n      <div className={`${baseClass}__page-input-wrapper`}>\n        <input\n          aria-label=\"Go to page\"\n          className={`${baseClass}__page-input`}\n          disabled={isSinglePage}\n          inputMode=\"numeric\"\n          max={totalPages}\n          min={1}\n          onBlur={handleInputBlur}\n          onChange={handleInputChange}\n          onKeyDown={handleInputKeyDown}\n          style={{ width: `${Math.max(inputValue.length, 1)}ch` }}\n          type=\"text\"\n          value={inputValue}\n        />\n        <span className={`${baseClass}__page-total`}>of {isSinglePage ? 1 : totalPages}</span>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -46,6 +46,11 @@
   .popup-button-list__label {
     display: flex;
     align-items: center;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    line-height: var(--text-body-medium-line-height);
     padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-1);
   }
 

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

@@ -1,9 +1,24 @@
 @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);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    line-height: var(--text-body-medium-line-height);
+    padding-block: var(--spacer-1);
+    padding-inline: var(--spacer-3);
+  }
+
+  /* Align the label's text with its sibling button labels, which carry a
+     var(--spacer-1) inset. The icon variants reserve an extra icon-slot
+     inset, so their labels sit one more var(--spacer-1) in. */
+  .popup-button-list .popup-list-group-label {
+    padding-inline-start: var(--spacer-1);
+  }
+
+  .popup-button-list--with-actions .popup-list-group-label,
+  .popup-button-list--with-icons .popup-list-group-label {
+    padding-inline-start: var(--spacer-2);
   }
 }

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

@@ -10,6 +10,7 @@ export type PopupButtonRenderProps = {
 export type PopupTriggerProps = {
     active: boolean;
     button?: React.ReactNode;
+    buttonAriaLabel?: string;
     buttonType: 'custom' | 'default';
     className?: string;
     disabled?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,eAAe,EAAE,OAAO,CAAA;IACxB,eAAe,EAAE,IAAI,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6EpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,eAAe,EAAE,OAAO,CAAA;IACxB,eAAe,EAAE,IAAI,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgFpD,CAAA"}

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

@@ -8,6 +8,7 @@ export const PopupTrigger = props => {
   const {
     active,
     button,
+    buttonAriaLabel,
     buttonType,
     className,
     disabled,
@@ -40,6 +41,7 @@ export const PopupTrigger = props => {
   }
   if (buttonType === 'custom') {
     return /*#__PURE__*/_jsx("div", {
+      "aria-label": buttonAriaLabel,
       className: classes,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
@@ -49,6 +51,7 @@ export const PopupTrigger = props => {
     });
   }
   return /*#__PURE__*/_jsx("button", {
+    "aria-label": buttonAriaLabel,
     className: classes,
     disabled: disabled,
     onClick: handleClick,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","renderButton","setActive","size","classes","filter","Boolean","join","handleClick","handleKeyDown","e","key","preventDefault","_jsx","_Fragment","onClick","onKeyDown","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'popup-button'\n\nexport type PopupButtonRenderProps = {\n  active: boolean\n  'aria-expanded': boolean\n  'aria-haspopup': true\n  onClick: React.MouseEventHandler\n  onKeyDown: React.KeyboardEventHandler\n}\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button?: React.ReactNode\n  buttonType: 'custom' | 'default'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  renderButton?: (props: PopupButtonRenderProps) => React.ReactNode\n  setActive: (active: boolean, viaKeyboard?: boolean) => void\n  size?: 'large' | 'medium'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const {\n    active,\n    button,\n    buttonType,\n    className,\n    disabled,\n    noBackground,\n    renderButton,\n    setActive,\n    size,\n  } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n    size && `${baseClass}--size-${size}`,\n    disabled && `${baseClass}--disabled`,\n    active && `${baseClass}--active`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick: React.MouseEventHandler = () => {\n    setActive(!active, false)\n  }\n\n  const handleKeyDown: React.KeyboardEventHandler = (e) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setActive(!active, true)\n    }\n  }\n\n  // Render prop mode: consumer provides the button, we provide the handlers\n  if (renderButton) {\n    return (\n      <>\n        {renderButton({\n          active,\n          'aria-expanded': active,\n          'aria-haspopup': true,\n          onClick: handleClick,\n          onKeyDown: handleKeyDown,\n        })}\n      </>\n    )\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAsBlB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IACJC,MAAM;IACNC,MAAM;IACNC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,SAAS;IACTC;EAAI,CACL,GAAGT,KAAA;EAEJ,MAAMU,OAAA,GAAU,CACdZ,SAAA,EACAM,SAAA,EACA,GAAGN,SAAA,KAAcK,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGR,SAAA,cAAuB,EAC3CW,IAAA,IAAQ,GAAGX,SAAA,UAAmBW,IAAA,EAAM,EACpCJ,QAAA,IAAY,GAAGP,SAAA,YAAqB,EACpCG,MAAA,IAAU,GAAGH,SAAA,UAAmB,CACjC,CACEa,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAuCA,CAAA;IAC3CN,SAAA,CAAU,CAACP,MAAA,EAAQ;EACrB;EAEA,MAAMc,aAAA,GAA6CC,CAAA;IACjD,IAAIA,CAAA,CAAEC,GAAG,KAAK,WAAWD,CAAA,CAAEC,GAAG,KAAK,KAAK;MACtCD,CAAA,CAAEE,cAAc;MAChBV,SAAA,CAAU,CAACP,MAAA,EAAQ;IACrB;EACF;EAEA;EACA,IAAIM,YAAA,EAAc;IAChB,oBACEY,IAAA,CAAAC,SAAA;gBACGb,YAAA,CAAa;QACZN,MAAA;QACA,iBAAiBA,MAAA;QACjB,iBAAiB;QACjBoB,OAAA,EAASP,WAAA;QACTQ,SAAA,EAAWP;MACb;;EAGN;EAEA,IAAIZ,UAAA,KAAe,UAAU;IAC3B,oBACEgB,IAAA,CAAC;MACCf,SAAA,EAAWM,OAAA;MACXW,OAAA,EAASP,WAAA;MACTQ,SAAA,EAAWP,aAAA;MACXQ,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETtB;;EAGP;EAEA,oBACEiB,IAAA,CAAC;IACCf,SAAA,EAAWM,OAAA;IACXL,QAAA,EAAUA,QAAA;IACVgB,OAAA,EAASP,WAAA;IACTQ,SAAA,EAAWP,aAAA;IACXS,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJvB;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonAriaLabel","buttonType","className","disabled","noBackground","renderButton","setActive","size","classes","filter","Boolean","join","handleClick","handleKeyDown","e","key","preventDefault","_jsx","_Fragment","onClick","onKeyDown","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'popup-button'\n\nexport type PopupButtonRenderProps = {\n  active: boolean\n  'aria-expanded': boolean\n  'aria-haspopup': true\n  onClick: React.MouseEventHandler\n  onKeyDown: React.KeyboardEventHandler\n}\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button?: React.ReactNode\n  buttonAriaLabel?: string\n  buttonType: 'custom' | 'default'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  renderButton?: (props: PopupButtonRenderProps) => React.ReactNode\n  setActive: (active: boolean, viaKeyboard?: boolean) => void\n  size?: 'large' | 'medium'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const {\n    active,\n    button,\n    buttonAriaLabel,\n    buttonType,\n    className,\n    disabled,\n    noBackground,\n    renderButton,\n    setActive,\n    size,\n  } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n    size && `${baseClass}--size-${size}`,\n    disabled && `${baseClass}--disabled`,\n    active && `${baseClass}--active`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick: React.MouseEventHandler = () => {\n    setActive(!active, false)\n  }\n\n  const handleKeyDown: React.KeyboardEventHandler = (e) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setActive(!active, true)\n    }\n  }\n\n  // Render prop mode: consumer provides the button, we provide the handlers\n  if (renderButton) {\n    return (\n      <>\n        {renderButton({\n          active,\n          'aria-expanded': active,\n          'aria-haspopup': true,\n          onClick: handleClick,\n          onKeyDown: handleKeyDown,\n        })}\n      </>\n    )\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        aria-label={buttonAriaLabel}\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      aria-label={buttonAriaLabel}\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAuBlB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IACJC,MAAM;IACNC,MAAM;IACNC,eAAe;IACfC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,SAAS;IACTC;EAAI,CACL,GAAGV,KAAA;EAEJ,MAAMW,OAAA,GAAU,CACdb,SAAA,EACAO,SAAA,EACA,GAAGP,SAAA,KAAcM,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGT,SAAA,cAAuB,EAC3CY,IAAA,IAAQ,GAAGZ,SAAA,UAAmBY,IAAA,EAAM,EACpCJ,QAAA,IAAY,GAAGR,SAAA,YAAqB,EACpCG,MAAA,IAAU,GAAGH,SAAA,UAAmB,CACjC,CACEc,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAuCA,CAAA;IAC3CN,SAAA,CAAU,CAACR,MAAA,EAAQ;EACrB;EAEA,MAAMe,aAAA,GAA6CC,CAAA;IACjD,IAAIA,CAAA,CAAEC,GAAG,KAAK,WAAWD,CAAA,CAAEC,GAAG,KAAK,KAAK;MACtCD,CAAA,CAAEE,cAAc;MAChBV,SAAA,CAAU,CAACR,MAAA,EAAQ;IACrB;EACF;EAEA;EACA,IAAIO,YAAA,EAAc;IAChB,oBACEY,IAAA,CAAAC,SAAA;gBACGb,YAAA,CAAa;QACZP,MAAA;QACA,iBAAiBA,MAAA;QACjB,iBAAiB;QACjBqB,OAAA,EAASP,WAAA;QACTQ,SAAA,EAAWP;MACb;;EAGN;EAEA,IAAIZ,UAAA,KAAe,UAAU;IAC3B,oBACEgB,IAAA,CAAC;MACC,cAAYjB,eAAA;MACZE,SAAA,EAAWM,OAAA;MACXW,OAAA,EAASP,WAAA;MACTQ,SAAA,EAAWP,aAAA;MACXQ,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETvB;;EAGP;EAEA,oBACEkB,IAAA,CAAC;IACC,cAAYjB,eAAA;IACZE,SAAA,EAAWM,OAAA;IACXL,QAAA,EAAUA,QAAA;IACVgB,OAAA,EAASP,WAAA;IACTQ,SAAA,EAAWP,aAAA;IACXS,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJxB;;AAGP","ignoreList":[]}

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

@@ -6,6 +6,12 @@ export type PopupProps = {
     backgroundColor?: CSSProperties['backgroundColor'];
     boundingRef?: React.RefObject<HTMLElement>;
     button?: React.ReactNode;
+    /**
+     * Accessible label for the trigger button.
+     * Necessary when the button has an icon-only content,
+     * so the button has an accessible name for screen readers.
+     */
+    buttonAriaLabel?: string;
     /**
      * The class name to apply to the button that triggers the popup.
      */
@@ -68,7 +74,7 @@ export type PopupProps = {
      * When set, `verticalAlign`, `horizontalAlign`, and the caret are ignored.
      */
     side?: 'left' | 'right';
-    size?: 'fit-content' | 'large' | 'medium' | 'small';
+    size?: 'fit-content' | 'large' | 'small';
     /**
      * Theme for the popup content. Defaults to 'dark'.
      * Set to 'auto' to inherit the current theme.

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAAuE,MAAM,OAAO,CAAA;AAK3F,OAAO,aAAa,CAAA;AA6BpB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAgetC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAAuE,MAAM,OAAO,CAAA;AAK3F,OAAO,aAAa,CAAA;AA4CpB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsftC,CAAA"}