@payloadcms/ui 3.0.0-canary.98cbdb9 → 3.0.0-canary.99cbde3

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Pagination/ClickableArrow/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport './index.scss'\n\nconst baseClass = 'clickable-arrow'\n\nexport type ClickableArrowProps = {\n  direction?: 'left' | 'right'\n  isDisabled?: boolean\n  updatePage?: () => void\n}\n\nexport const ClickableArrow: React.FC<ClickableArrowProps> = (props) => {\n  const { direction = 'right', isDisabled = false, updatePage } = props\n\n  const classes = [\n    baseClass,\n    isDisabled && `${baseClass}--is-disabled`,\n    direction && `${baseClass}--${direction}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <button\n      className={classes}\n      disabled={isDisabled}\n      onClick={!isDisabled ? updatePage : undefined}\n      type=\"button\"\n    >\n      <ChevronIcon />\n    </button>\n  )\n}\n"],"names":["React","ChevronIcon","baseClass","ClickableArrow","props","direction","isDisabled","updatePage","classes","filter","Boolean","join","button","className","disabled","onClick","undefined","type"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,WAAW,QAAQ,kCAAiC;AAC7D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAQlB,OAAO,MAAMC,iBAAgD,CAACC;IAC5D,MAAM,EAAEC,YAAY,OAAO,EAAEC,aAAa,KAAK,EAAEC,UAAU,EAAE,GAAGH;IAEhE,MAAMI,UAAU;QACdN;QACAI,cAAc,CAAC,EAAEJ,UAAU,aAAa,CAAC;QACzCG,aAAa,CAAC,EAAEH,UAAU,EAAE,EAAEG,UAAU,CAAC;KAC1C,CACEI,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,KAACC;QACCC,WAAWL;QACXM,UAAUR;QACVS,SAAS,CAACT,aAAaC,aAAaS;QACpCC,MAAK;kBAEL,cAAA,KAAChB;;AAGP,EAAC"}
+{"version":3,"file":"index.js","names":["React","ChevronIcon","baseClass","ClickableArrow","props","direction","isDisabled","updatePage","classes","filter","Boolean","join","_jsx","className","disabled","onClick","undefined","type"],"sources":["../../../../src/elements/Pagination/ClickableArrow/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport './index.scss'\n\nconst baseClass = 'clickable-arrow'\n\nexport type ClickableArrowProps = {\n  direction?: 'left' | 'right'\n  isDisabled?: boolean\n  updatePage?: () => void\n}\n\nexport const ClickableArrow: React.FC<ClickableArrowProps> = (props) => {\n  const { direction = 'right', isDisabled = false, updatePage } = props\n\n  const classes = [\n    baseClass,\n    isDisabled && `${baseClass}--is-disabled`,\n    direction && `${baseClass}--${direction}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <button\n      className={classes}\n      disabled={isDisabled}\n      onClick={!isDisabled ? updatePage : undefined}\n      type=\"button\"\n    >\n      <ChevronIcon />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAQlB,OAAO,MAAMC,cAAA,GAAiDC,KAAA;EAC5D,MAAM;IAAEC,SAAA,GAAY,OAAO;IAAEC,UAAA,GAAa,KAAK;IAAEC;EAAU,CAAE,GAAGH,KAAA;EAEhE,MAAMI,OAAA,GAAU,CACdN,SAAA,EACAI,UAAA,IAAc,GAAGJ,SAAA,eAAwB,EACzCG,SAAA,IAAa,GAAGH,SAAA,KAAcG,SAAA,EAAW,CAC1C,CACEI,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,oBACEC,IAAA,CAAC;IACCC,SAAA,EAAWL,OAAA;IACXM,QAAA,EAAUR,UAAA;IACVS,OAAA,EAAS,CAACT,UAAA,GAAaC,UAAA,GAAaS,SAAA;IACpCC,IAAA,EAAK;cAEL,aAAAL,IAAA,CAACX,WAAA;;AAGP","ignoreList":[]}

package/dist/elements/Pagination/ClickableArrow/index.scss

@@ -1,45 +1,47 @@
 @import '../../../scss/styles.scss';
 
-.clickable-arrow {
-  cursor: pointer;
-  @extend %btn-reset;
-  width: base(2);
-  height: base(2);
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  outline: 0;
-  padding: base(0.5);
-  color: var(--theme-elevation-800);
-  line-height: base(1);
+@layer payload-default {
+  .clickable-arrow {
+    cursor: pointer;
+    @extend %btn-reset;
+    width: base(2);
+    height: base(2);
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    outline: 0;
+    padding: base(0.5);
+    color: var(--theme-elevation-800);
+    line-height: base(1);
 
-  &:not(.clickable-arrow--is-disabled) {
-    &:hover,
-    &:focus-visible {
-      background: var(--theme-elevation-100);
+    &:not(.clickable-arrow--is-disabled) {
+      &:hover,
+      &:focus-visible {
+        background: var(--theme-elevation-100);
+      }
     }
-  }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
-  }
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
 
-  &--right {
-    .icon {
-      transform: rotate(-90deg);
+    &--right {
+      .icon {
+        transform: rotate(-90deg);
+      }
     }
-  }
 
-  &--left .icon {
-    transform: rotate(90deg);
-  }
+    &--left .icon {
+      transform: rotate(90deg);
+    }
 
-  &--is-disabled {
-    cursor: default;
+    &--is-disabled {
+      cursor: default;
 
-    .icon .stroke {
-      stroke: var(--theme-elevation-400);
+      .icon .stroke {
+        stroke: var(--theme-elevation-400);
+      }
     }
   }
 }

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

@@ -1,20 +1,21 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 const baseClass = 'paginator__page';
-export const Page = ({ isCurrent, isFirstPage = false, isLastPage = false, page = 1, updatePage })=>{
-    const classes = [
-        baseClass,
-        isCurrent && `${baseClass}--is-current`,
-        isFirstPage && `${baseClass}--is-first-page`,
-        isLastPage && `${baseClass}--is-last-page`
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ _jsx("button", {
-        className: classes,
-        onClick: ()=>updatePage(page),
-        type: "button",
-        children: page
-    });
+export const Page = ({
+  isCurrent,
+  isFirstPage = false,
+  isLastPage = false,
+  page = 1,
+  updatePage
+}) => {
+  const classes = [baseClass, isCurrent && `${baseClass}--is-current`, isFirstPage && `${baseClass}--is-first-page`, isLastPage && `${baseClass}--is-last-page`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx("button", {
+    className: classes,
+    onClick: () => updatePage(page),
+    type: "button",
+    children: page
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Pagination/Page/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nexport type PageProps = {\n  isCurrent?: boolean\n  isFirstPage?: boolean\n  isLastPage?: boolean\n  page?: number\n  updatePage?: (page) => void\n}\n\nconst baseClass = 'paginator__page'\n\nexport const Page: React.FC<PageProps> = ({\n  isCurrent,\n  isFirstPage = false,\n  isLastPage = false,\n  page = 1,\n  updatePage,\n}) => {\n  const classes = [\n    baseClass,\n    isCurrent && `${baseClass}--is-current`,\n    isFirstPage && `${baseClass}--is-first-page`,\n    isLastPage && `${baseClass}--is-last-page`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <button className={classes} onClick={() => updatePage(page)} type=\"button\">\n      {page}\n    </button>\n  )\n}\n"],"names":["React","baseClass","Page","isCurrent","isFirstPage","isLastPage","page","updatePage","classes","filter","Boolean","join","button","className","onClick","type"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAUzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,OAA4B,CAAC,EACxCC,SAAS,EACTC,cAAc,KAAK,EACnBC,aAAa,KAAK,EAClBC,OAAO,CAAC,EACRC,UAAU,EACX;IACC,MAAMC,UAAU;QACdP;QACAE,aAAa,CAAC,EAAEF,UAAU,YAAY,CAAC;QACvCG,eAAe,CAAC,EAAEH,UAAU,eAAe,CAAC;QAC5CI,cAAc,CAAC,EAAEJ,UAAU,cAAc,CAAC;KAC3C,CACEQ,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,KAACC;QAAOC,WAAWL;QAASM,SAAS,IAAMP,WAAWD;QAAOS,MAAK;kBAC/DT;;AAGP,EAAC"}
+{"version":3,"file":"index.js","names":["React","baseClass","Page","isCurrent","isFirstPage","isLastPage","page","updatePage","classes","filter","Boolean","join","_jsx","className","onClick","type"],"sources":["../../../../src/elements/Pagination/Page/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nexport type PageProps = {\n  isCurrent?: boolean\n  isFirstPage?: boolean\n  isLastPage?: boolean\n  page?: number\n  updatePage?: (page) => void\n}\n\nconst baseClass = 'paginator__page'\n\nexport const Page: React.FC<PageProps> = ({\n  isCurrent,\n  isFirstPage = false,\n  isLastPage = false,\n  page = 1,\n  updatePage,\n}) => {\n  const classes = [\n    baseClass,\n    isCurrent && `${baseClass}--is-current`,\n    isFirstPage && `${baseClass}--is-first-page`,\n    isLastPage && `${baseClass}--is-last-page`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <button className={classes} onClick={() => updatePage(page)} type=\"button\">\n      {page}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAUlB,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,IAAA,GAA4BA,CAAC;EACxCC,SAAS;EACTC,WAAA,GAAc,KAAK;EACnBC,UAAA,GAAa,KAAK;EAClBC,IAAA,GAAO,CAAC;EACRC;AAAU,CACX;EACC,MAAMC,OAAA,GAAU,CACdP,SAAA,EACAE,SAAA,IAAa,GAAGF,SAAA,cAAuB,EACvCG,WAAA,IAAe,GAAGH,SAAA,iBAA0B,EAC5CI,UAAA,IAAc,GAAGJ,SAAA,gBAAyB,CAC3C,CACEQ,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,oBACEC,IAAA,CAAC;IAAOC,SAAA,EAAWL,OAAA;IAASM,OAAA,EAASA,CAAA,KAAMP,UAAA,CAAWD,IAAA;IAAOS,IAAA,EAAK;cAC/DT;;AAGP","ignoreList":[]}

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

@@ -1,9 +1,9 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-export const Separator = ()=>/*#__PURE__*/ _jsx("span", {
-        className: "paginator__separator",
-        children: "—"
-    });
-
+export const Separator = () => /*#__PURE__*/_jsx("span", {
+  className: "paginator__separator",
+  children: "—"
+});
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Pagination/Separator/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nexport const Separator: React.FC = () => <span className=\"paginator__separator\">&mdash;</span>\n"],"names":["React","Separator","span","className"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,OAAO,MAAMC,YAAsB,kBAAM,KAACC;QAAKC,WAAU;kBAAuB;OAAc"}
+{"version":3,"file":"index.js","names":["React","Separator","_jsx","className"],"sources":["../../../../src/elements/Pagination/Separator/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nexport const Separator: React.FC = () => <span className=\"paginator__separator\">&mdash;</span>\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO,MAAMC,SAAA,GAAsBA,CAAA,kBAAMC,IAAA,CAAC;EAAKC,SAAA,EAAU;YAAuB","ignoreList":[]}

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,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAUrB,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,MAAM,MAAM,IAAI,GACZ;IACE,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,WAAW,CAAC,EAAE,OAAO,CAAA;QACrB,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;KACpC,CAAA;IACD,IAAI,EAAE,gBAAgB,GAAG,MAAM,GAAG,WAAW,CAAA;CAC9C,GACD,MAAM,CAAA;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8FhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pagination/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAYrB,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,MAAM,MAAM,IAAI,GACZ;IACE,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,WAAW,CAAC,EAAE,OAAO,CAAA;QACrB,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;KACpC,CAAA;IACD,IAAI,EAAE,gBAAgB,GAAG,MAAM,GAAG,WAAW,CAAA;CAC9C,GACD,MAAM,CAAA;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0GhD,CAAA"}

package/dist/elements/Pagination/index.js

@@ -1,96 +1,115 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { ClickableArrow } from './ClickableArrow/index.js';
+import './index.scss';
 import { Page } from './Page/index.js';
 import { Separator } from './Separator/index.js';
-import './index.scss';
 const nodeTypes = {
-    ClickableArrow,
-    Page,
-    Separator
+  ClickableArrow,
+  Page,
+  Separator
 };
 const baseClass = 'paginator';
-export const Pagination = (props)=>{
-    const { hasNextPage = false, hasPrevPage = false, nextPage = null, numberOfNeighbors = 1, onChange, page: currentPage, prevPage = null, totalPages = null } = props;
-    if (!totalPages || totalPages <= 1) return null;
-    const updatePage = (page)=>{
-        if (typeof onChange === 'function') onChange(page);
-    };
-    // Create array of integers for each page
-    const pages = Array.from({
-        length: totalPages
-    }, (_, index)=>index + 1);
-    // Assign indices for start and end of the range of pages that should be shown in paginator
-    let rangeStartIndex = currentPage - 1 - numberOfNeighbors;
-    // Sanitize rangeStartIndex in case it is less than zero for safe split
-    if (rangeStartIndex <= 0) rangeStartIndex = 0;
-    const rangeEndIndex = currentPage - 1 + numberOfNeighbors + 1;
-    // Slice out the range of pages that we want to render
-    const nodes = pages.slice(rangeStartIndex, rangeEndIndex);
-    // Add prev separator if necessary
-    if (currentPage - numberOfNeighbors - 1 >= 2) nodes.unshift({
-        type: 'Separator'
-    });
-    // Add first page if necessary
-    if (currentPage > numberOfNeighbors + 1) {
-        nodes.unshift({
-            type: 'Page',
-            props: {
-                isFirstPage: true,
-                page: 1,
-                updatePage
-            }
-        });
-    }
-    // Add next separator if necessary
-    if (currentPage + numberOfNeighbors + 1 < totalPages) nodes.push({
-        type: 'Separator'
-    });
-    // Add last page if necessary
-    if (rangeEndIndex < totalPages) {
-        nodes.push({
-            type: 'Page',
-            props: {
-                isLastPage: true,
-                page: totalPages,
-                updatePage
-            }
-        });
+export const Pagination = props => {
+  const {
+    hasNextPage = false,
+    hasPrevPage = false,
+    nextPage = null,
+    numberOfNeighbors = 1,
+    onChange,
+    page: currentPage,
+    prevPage = null,
+    totalPages = null
+  } = props;
+  if (!hasNextPage && !hasPrevPage) {
+    return null;
+  }
+  const updatePage = page => {
+    if (typeof onChange === 'function') {
+      onChange(page);
     }
-    // Add prev and next arrows based on necessity
+  };
+  // Create array of integers for each page
+  const pages = Array.from({
+    length: totalPages
+  }, (_, index) => index + 1);
+  // Assign indices for start and end of the range of pages that should be shown in paginator
+  let rangeStartIndex = currentPage - 1 - numberOfNeighbors;
+  // Sanitize rangeStartIndex in case it is less than zero for safe split
+  if (rangeStartIndex <= 0) {
+    rangeStartIndex = 0;
+  }
+  const rangeEndIndex = currentPage - 1 + numberOfNeighbors + 1;
+  // Slice out the range of pages that we want to render
+  const nodes = pages.slice(rangeStartIndex, rangeEndIndex);
+  // Add prev separator if necessary
+  if (currentPage - numberOfNeighbors - 1 >= 2) {
     nodes.unshift({
-        type: 'ClickableArrow',
-        props: {
-            direction: 'right',
-            isDisabled: !hasNextPage,
-            updatePage: ()=>updatePage(nextPage)
-        }
+      type: 'Separator'
     });
+  }
+  // Add first page if necessary
+  if (currentPage > numberOfNeighbors + 1) {
     nodes.unshift({
-        type: 'ClickableArrow',
-        props: {
-            direction: 'left',
-            isDisabled: !hasPrevPage,
-            updatePage: ()=>updatePage(prevPage)
-        }
+      type: 'Page',
+      props: {
+        isFirstPage: true,
+        page: 1,
+        updatePage
+      }
+    });
+  }
+  // Add next separator if necessary
+  if (currentPage + numberOfNeighbors + 1 < totalPages) {
+    nodes.push({
+      type: 'Separator'
     });
-    return /*#__PURE__*/ _jsx("div", {
-        className: baseClass,
-        children: nodes.map((node, i)=>{
-            if (typeof node === 'number') {
-                return /*#__PURE__*/ _jsx(Page, {
-                    isCurrent: currentPage === node,
-                    page: node,
-                    updatePage: updatePage
-                }, i);
-            }
-            const NodeType = nodeTypes[node.type];
-            return /*#__PURE__*/ _jsx(NodeType, {
-                ...node.props
-            }, i);
-        })
+  }
+  // Add last page if necessary
+  if (rangeEndIndex < totalPages) {
+    nodes.push({
+      type: 'Page',
+      props: {
+        isLastPage: true,
+        page: totalPages,
+        updatePage
+      }
     });
+  }
+  // Add prev and next arrows based on necessity
+  nodes.unshift({
+    type: 'ClickableArrow',
+    props: {
+      direction: 'right',
+      isDisabled: !hasNextPage,
+      updatePage: () => updatePage(nextPage)
+    }
+  });
+  nodes.unshift({
+    type: 'ClickableArrow',
+    props: {
+      direction: 'left',
+      isDisabled: !hasPrevPage,
+      updatePage: () => updatePage(prevPage)
+    }
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass,
+    children: nodes.map((node, i) => {
+      if (typeof node === 'number') {
+        return /*#__PURE__*/_jsx(Page, {
+          isCurrent: currentPage === node,
+          page: node,
+          updatePage: updatePage
+        }, i);
+      }
+      const NodeType = nodeTypes[node.type];
+      return /*#__PURE__*/_jsx(NodeType, {
+        ...node.props
+      }, i);
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Pagination/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ClickableArrow } from './ClickableArrow/index.js'\nimport { Page } from './Page/index.js'\nimport { Separator } from './Separator/index.js'\nimport './index.scss'\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 (!totalPages || totalPages <= 1) return null\n\n  const updatePage = (page) => {\n    if (typeof onChange === 'function') onChange(page)\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) rangeStartIndex = 0\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) nodes.unshift({ type: 'Separator' })\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) nodes.push({ type: 'Separator' })\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"],"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","div","className","map","node","i","isCurrent","NodeType"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,4BAA2B;AAC1D,SAASC,IAAI,QAAQ,kBAAiB;AACtC,SAASC,SAAS,QAAQ,uBAAsB;AAChD,OAAO,eAAc;AAErB,MAAMC,YAAY;IAChBH;IACAC;IACAC;AACF;AAEA,MAAME,YAAY;AA4BlB,OAAO,MAAMC,aAAwC,CAACC;IACpD,MAAM,EACJC,cAAc,KAAK,EACnBC,cAAc,KAAK,EACnBC,WAAW,IAAI,EACfC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,MAAMC,WAAW,EACjBC,WAAW,IAAI,EACfC,aAAa,IAAI,EAClB,GAAGT;IAEJ,IAAI,CAACS,cAAcA,cAAc,GAAG,OAAO;IAE3C,MAAMC,aAAa,CAACJ;QAClB,IAAI,OAAOD,aAAa,YAAYA,SAASC;IAC/C;IAEA,yCAAyC;IACzC,MAAMK,QAAQC,MAAMC,IAAI,CAAC;QAAEC,QAAQL;IAAW,GAAG,CAACM,GAAGC,QAAUA,QAAQ;IAEvE,2FAA2F;IAC3F,IAAIC,kBAAkBV,cAAc,IAAIH;IAExC,uEAAuE;IACvE,IAAIa,mBAAmB,GAAGA,kBAAkB;IAE5C,MAAMC,gBAAgBX,cAAc,IAAIH,oBAAoB;IAE5D,sDAAsD;IACtD,MAAMe,QAAgBR,MAAMS,KAAK,CAACH,iBAAiBC;IAEnD,kCAAkC;IAClC,IAAIX,cAAcH,oBAAoB,KAAK,GAAGe,MAAME,OAAO,CAAC;QAAEC,MAAM;IAAY;IAChF,8BAA8B;IAC9B,IAAIf,cAAcH,oBAAoB,GAAG;QACvCe,MAAME,OAAO,CAAC;YACZC,MAAM;YACNtB,OAAO;gBACLuB,aAAa;gBACbjB,MAAM;gBACNI;YACF;QACF;IACF;IAEA,kCAAkC;IAClC,IAAIH,cAAcH,oBAAoB,IAAIK,YAAYU,MAAMK,IAAI,CAAC;QAAEF,MAAM;IAAY;IACrF,6BAA6B;IAC7B,IAAIJ,gBAAgBT,YAAY;QAC9BU,MAAMK,IAAI,CAAC;YACTF,MAAM;YACNtB,OAAO;gBACLyB,YAAY;gBACZnB,MAAMG;gBACNC;YACF;QACF;IACF;IAEA,8CAA8C;IAC9CS,MAAME,OAAO,CAAC;QACZC,MAAM;QACNtB,OAAO;YACL0B,WAAW;YACXC,YAAY,CAAC1B;YACbS,YAAY,IAAMA,WAAWP;QAC/B;IACF;IAEAgB,MAAME,OAAO,CAAC;QACZC,MAAM;QACNtB,OAAO;YACL0B,WAAW;YACXC,YAAY,CAACzB;YACbQ,YAAY,IAAMA,WAAWF;QAC/B;IACF;IAEA,qBACE,KAACoB;QAAIC,WAAW/B;kBACbqB,MAAMW,GAAG,CAAC,CAACC,MAAMC;YAChB,IAAI,OAAOD,SAAS,UAAU;gBAC5B,qBACE,KAACpC;oBAAKsC,WAAW1B,gBAAgBwB;oBAAczB,MAAMyB;oBAAMrB,YAAYA;mBAA3BsB;YAEhD;YAEA,MAAME,WAAWrC,SAAS,CAACkC,KAAKT,IAAI,CAAC;YAErC,qBAAO,KAACY;gBAAkB,GAAGH,KAAK/B,KAAK;eAAjBgC;QACxB;;AAGN,EAAC"}
+{"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":[]}

package/dist/elements/Pagination/index.scss

@@ -1,51 +1,53 @@
 @import '../../scss/styles.scss';
 
-.paginator {
-  display: flex;
-  margin-bottom: $baseline;
+@layer payload-default {
+  .paginator {
+    display: flex;
+    margin-bottom: $baseline;
 
-  &__page {
-    cursor: pointer;
+    &__page {
+      cursor: pointer;
 
-    &--is-current {
-      background: var(--theme-elevation-100);
-      color: var(--theme-elevation-400);
-      cursor: default;
-    }
+      &--is-current {
+        background: var(--theme-elevation-100);
+        color: var(--theme-elevation-400);
+        cursor: default;
+      }
 
-    &--is-last-page {
-      margin-right: 0;
+      &--is-last-page {
+        margin-right: 0;
+      }
     }
-  }
 
-  .clickable-arrow--right {
-    margin-right: base(0.25);
-  }
+    .clickable-arrow--right {
+      margin-right: base(0.25);
+    }
 
-  &__page {
-    @extend %btn-reset;
-    width: base(2);
-    height: base(2);
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    outline: 0;
-    padding: base(0.5);
-    color: var(--theme-elevation-800);
-    line-height: base(1);
-
-    &:focus-visible {
-      outline: var(--accessibility-outline);
+    &__page {
+      @extend %btn-reset;
+      width: base(2);
+      height: base(2);
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      outline: 0;
+      padding: base(0.5);
+      color: var(--theme-elevation-800);
+      line-height: base(1);
+
+      &:focus-visible {
+        outline: var(--accessibility-outline);
+      }
     }
-  }
 
-  &__page,
-  &__separator {
-    margin-right: base(0.25);
-  }
+    &__page,
+    &__separator {
+      margin-right: base(0.25);
+    }
 
-  &__separator {
-    align-self: center;
-    color: var(--theme-elevation-400);
+    &__separator {
+      align-self: center;
+      color: var(--theme-elevation-400);
+    }
   }
 }

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import './index.scss';
 export type PerPageProps = {
-    defaultLimit?: number;
-    handleChange?: (limit: number) => void;
-    limit: number;
-    limits: number[];
-    resetPage?: boolean;
+    readonly defaultLimit?: number;
+    readonly handleChange?: (limit: number) => void;
+    readonly limit: number;
+    readonly limits: number[];
+    readonly resetPage?: boolean;
 };
 export declare const PerPage: React.FC<PerPageProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PerPage/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,YAAY,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoD1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PerPage/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAA;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAsD1C,CAAA"}