@payloadcms/ui 3.0.0-beta.9 → 3.0.0-beta.91

package/dist/elements/NavGroup/index.js

@@ -1,72 +1,156 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import AnimateHeightImport from 'react-animate-height';
-import { Chevron } from '../../icons/Chevron/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { usePreferences } from '../../providers/Preferences/index.js';
 import { useNav } from '../Nav/context.js';
+import './index.scss';
 const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
 const baseClass = 'nav-group';
-export const NavGroup = ({ children, label })=>{
-    const [collapsed, setCollapsed] = useState(true);
-    const [animate, setAnimate] = useState(false);
-    const { getPreference, setPreference } = usePreferences();
-    const { navOpen } = useNav();
-    const preferencesKey = `collapsed-${label}-groups`;
-    useEffect(()=>{
-        if (label) {
-            const setCollapsedFromPreferences = async ()=>{
-                const preferences = await getPreference(preferencesKey) || [];
-                setCollapsed(preferences.indexOf(label) !== -1);
-            };
-            void setCollapsedFromPreferences();
-        }
-    }, [
-        getPreference,
-        label,
-        preferencesKey
-    ]);
-    if (label) {
-        const toggleCollapsed = async ()=>{
-            setAnimate(true);
-            let preferences = await getPreference(preferencesKey) || [];
-            if (collapsed) {
-                preferences = preferences.filter((preference)=>label !== preference);
-            } else {
-                preferences.push(label);
-            }
-            void setPreference(preferencesKey, preferences);
-            setCollapsed(!collapsed);
+export const NavGroup = t0 => {
+  const $ = _c(28);
+  const {
+    children,
+    label
+  } = t0;
+  const [collapsed, setCollapsed] = useState(true);
+  const [animate, setAnimate] = useState(false);
+  const {
+    getPreference,
+    setPreference
+  } = usePreferences();
+  const {
+    navOpen
+  } = useNav();
+  const preferencesKey = `collapsed-${label}-groups`;
+  let t1;
+  let t2;
+  if ($[0] !== label || $[1] !== getPreference || $[2] !== preferencesKey) {
+    t1 = () => {
+      if (label) {
+        const setCollapsedFromPreferences = async () => {
+          const preferences = (await getPreference(preferencesKey)) || [];
+          setCollapsed(preferences.indexOf(label) !== -1);
         };
-        return /*#__PURE__*/ React.createElement("div", {
-            className: [
-                `${baseClass}`,
-                `${label}`,
-                collapsed && `${baseClass}--collapsed`
-            ].filter(Boolean).join(' '),
-            id: `nav-group-${label}`
-        }, /*#__PURE__*/ React.createElement("button", {
-            className: [
-                `${baseClass}__toggle`,
-                `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`
-            ].filter(Boolean).join(' '),
-            onClick: toggleCollapsed,
-            tabIndex: !navOpen ? -1 : 0,
-            type: "button"
-        }, /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__label`
-        }, label), /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__indicator`
-        }, /*#__PURE__*/ React.createElement(Chevron, {
+        setCollapsedFromPreferences();
+      }
+    };
+    t2 = [getPreference, label, preferencesKey];
+    $[0] = label;
+    $[1] = getPreference;
+    $[2] = preferencesKey;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  if (label) {
+    let t3;
+    if ($[5] !== getPreference || $[6] !== preferencesKey || $[7] !== collapsed || $[8] !== label || $[9] !== setPreference) {
+      t3 = async () => {
+        setAnimate(true);
+        let preferences_0 = (await getPreference(preferencesKey)) || [];
+        if (collapsed) {
+          preferences_0 = preferences_0.filter(preference => label !== preference);
+        } else {
+          preferences_0.push(label);
+        }
+        setPreference(preferencesKey, preferences_0);
+        setCollapsed(!collapsed);
+      };
+      $[5] = getPreference;
+      $[6] = preferencesKey;
+      $[7] = collapsed;
+      $[8] = label;
+      $[9] = setPreference;
+      $[10] = t3;
+    } else {
+      t3 = $[10];
+    }
+    const toggleCollapsed = t3;
+    const t4 = `${label}`;
+    const t5 = collapsed && `${baseClass}--collapsed`;
+    let t6;
+    if ($[11] !== t4 || $[12] !== t5) {
+      t6 = [`${baseClass}`, t4, t5].filter(Boolean);
+      $[11] = t4;
+      $[12] = t5;
+      $[13] = t6;
+    } else {
+      t6 = $[13];
+    }
+    const t7 = t6.join(" ");
+    const t8 = `nav-group-${label}`;
+    const t9 = `${baseClass}__toggle--${collapsed ? "collapsed" : "open"}`;
+    let t10;
+    if ($[14] !== t9) {
+      t10 = [`${baseClass}__toggle`, t9].filter(Boolean);
+      $[14] = t9;
+      $[15] = t10;
+    } else {
+      t10 = $[15];
+    }
+    const t11 = t10.join(" ");
+    const t12 = !navOpen ? -1 : 0;
+    let t13;
+    if ($[16] !== label || $[17] !== collapsed || $[18] !== t11 || $[19] !== toggleCollapsed || $[20] !== t12 || $[21] !== animate || $[22] !== children || $[23] !== t7 || $[24] !== t8) {
+      t13 = _jsxs("div", {
+        className: t7,
+        id: t8,
+        children: [_jsxs("button", {
+          className: t11,
+          onClick: toggleCollapsed,
+          tabIndex: t12,
+          type: "button",
+          children: [_jsx("div", {
+            className: `${baseClass}__label`,
+            children: label
+          }), _jsx("div", {
             className: `${baseClass}__indicator`,
-            direction: !collapsed ? 'up' : undefined
-        }))), /*#__PURE__*/ React.createElement(AnimateHeight, {
-            duration: animate ? 200 : 0,
-            height: collapsed ? 0 : 'auto'
-        }, /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__content`
-        }, children)));
+            children: _jsx(ChevronIcon, {
+              className: `${baseClass}__indicator`,
+              direction: !collapsed ? "up" : undefined
+            })
+          })]
+        }), _jsx(AnimateHeight, {
+          duration: animate ? 200 : 0,
+          height: collapsed ? 0 : "auto",
+          children: _jsx("div", {
+            className: `${baseClass}__content`,
+            children
+          })
+        })]
+      });
+      $[16] = label;
+      $[17] = collapsed;
+      $[18] = t11;
+      $[19] = toggleCollapsed;
+      $[20] = t12;
+      $[21] = animate;
+      $[22] = children;
+      $[23] = t7;
+      $[24] = t8;
+      $[25] = t13;
+    } else {
+      t13 = $[25];
     }
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
+    return t13;
+  }
+  let t3;
+  if ($[26] !== children) {
+    t3 = _jsx(React.Fragment, {
+      children
+    });
+    $[26] = children;
+    $[27] = t3;
+  } else {
+    t3 = $[27];
+  }
+  return t3;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/NavGroup/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useNav } from '../Nav/context.js'\nimport './index.scss'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nconst baseClass = 'nav-group'\n\ntype Props = {\n  children: React.ReactNode\n  label: string\n}\n\nexport const NavGroup: React.FC<Props> = ({ children, label }) => {\n  const [collapsed, setCollapsed] = useState(true)\n  const [animate, setAnimate] = useState(false)\n  const { getPreference, setPreference } = usePreferences()\n  const { navOpen } = useNav()\n\n  const preferencesKey = `collapsed-${label}-groups`\n\n  useEffect(() => {\n    if (label) {\n      const setCollapsedFromPreferences = async () => {\n        const preferences = (await getPreference(preferencesKey)) || []\n        setCollapsed(preferences.indexOf(label) !== -1)\n      }\n      void setCollapsedFromPreferences()\n    }\n  }, [getPreference, label, preferencesKey])\n\n  if (label) {\n    const toggleCollapsed = async () => {\n      setAnimate(true)\n      let preferences: string[] = (await getPreference(preferencesKey)) || []\n      if (collapsed) {\n        preferences = preferences.filter((preference) => label !== preference)\n      } else {\n        preferences.push(label)\n      }\n      void setPreference(preferencesKey, preferences)\n      setCollapsed(!collapsed)\n    }\n\n    return (\n      <div\n        className={[`${baseClass}`, `${label}`, collapsed && `${baseClass}--collapsed`]\n          .filter(Boolean)\n          .join(' ')}\n        id={`nav-group-${label}`}\n      >\n        <button\n          className={[\n            `${baseClass}__toggle`,\n            `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={toggleCollapsed}\n          tabIndex={!navOpen ? -1 : 0}\n          type=\"button\"\n        >\n          <div className={`${baseClass}__label`}>{label}</div>\n          <div className={`${baseClass}__indicator`}>\n            <Chevron\n              className={`${baseClass}__indicator`}\n              direction={!collapsed ? 'up' : undefined}\n            />\n          </div>\n        </button>\n        <AnimateHeight duration={animate ? 200 : 0} height={collapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n      </div>\n    )\n  }\n\n  return <React.Fragment>{children}</React.Fragment>\n}\n"],"names":["React","useEffect","useState","AnimateHeightImport","Chevron","usePreferences","useNav","AnimateHeight","default","baseClass","NavGroup","children","label","collapsed","setCollapsed","animate","setAnimate","getPreference","setPreference","navOpen","preferencesKey","setCollapsedFromPreferences","preferences","indexOf","toggleCollapsed","filter","preference","push","div","className","Boolean","join","id","button","onClick","tabIndex","type","direction","undefined","duration","height","Fragment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAClD,OAAOC,yBAAyB,uBAAsB;AAEtD,SAASC,OAAO,QAAQ,+BAA8B;AACtD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,oBAAmB;AAG1C,MAAMC,gBAAiBJ,oBAAoBK,OAAO,IAChDL;AAEF,MAAMM,YAAY;AAOlB,OAAO,MAAMC,WAA4B,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAAE;IAC3D,MAAM,CAACC,WAAWC,aAAa,GAAGZ,SAAS;IAC3C,MAAM,CAACa,SAASC,WAAW,GAAGd,SAAS;IACvC,MAAM,EAAEe,aAAa,EAAEC,aAAa,EAAE,GAAGb;IACzC,MAAM,EAAEc,OAAO,EAAE,GAAGb;IAEpB,MAAMc,iBAAiB,CAAC,UAAU,EAAER,MAAM,OAAO,CAAC;IAElDX,UAAU;QACR,IAAIW,OAAO;YACT,MAAMS,8BAA8B;gBAClC,MAAMC,cAAc,AAAC,MAAML,cAAcG,mBAAoB,EAAE;gBAC/DN,aAAaQ,YAAYC,OAAO,CAACX,WAAW,CAAC;YAC/C;YACA,KAAKS;QACP;IACF,GAAG;QAACJ;QAAeL;QAAOQ;KAAe;IAEzC,IAAIR,OAAO;QACT,MAAMY,kBAAkB;YACtBR,WAAW;YACX,IAAIM,cAAwB,AAAC,MAAML,cAAcG,mBAAoB,EAAE;YACvE,IAAIP,WAAW;gBACbS,cAAcA,YAAYG,MAAM,CAAC,CAACC,aAAed,UAAUc;YAC7D,OAAO;gBACLJ,YAAYK,IAAI,CAACf;YACnB;YACA,KAAKM,cAAcE,gBAAgBE;YACnCR,aAAa,CAACD;QAChB;QAEA,qBACE,oBAACe;YACCC,WAAW;gBAAC,CAAC,EAAEpB,UAAU,CAAC;gBAAE,CAAC,EAAEG,MAAM,CAAC;gBAAEC,aAAa,CAAC,EAAEJ,UAAU,WAAW,CAAC;aAAC,CAC5EgB,MAAM,CAACK,SACPC,IAAI,CAAC;YACRC,IAAI,CAAC,UAAU,EAAEpB,MAAM,CAAC;yBAExB,oBAACqB;YACCJ,WAAW;gBACT,CAAC,EAAEpB,UAAU,QAAQ,CAAC;gBACtB,CAAC,EAAEA,UAAU,UAAU,EAAEI,YAAY,cAAc,OAAO,CAAC;aAC5D,CACEY,MAAM,CAACK,SACPC,IAAI,CAAC;YACRG,SAASV;YACTW,UAAU,CAAChB,UAAU,CAAC,IAAI;YAC1BiB,MAAK;yBAEL,oBAACR;YAAIC,WAAW,CAAC,EAAEpB,UAAU,OAAO,CAAC;WAAGG,sBACxC,oBAACgB;YAAIC,WAAW,CAAC,EAAEpB,UAAU,WAAW,CAAC;yBACvC,oBAACL;YACCyB,WAAW,CAAC,EAAEpB,UAAU,WAAW,CAAC;YACpC4B,WAAW,CAACxB,YAAY,OAAOyB;4BAIrC,oBAAC/B;YAAcgC,UAAUxB,UAAU,MAAM;YAAGyB,QAAQ3B,YAAY,IAAI;yBAClE,oBAACe;YAAIC,WAAW,CAAC,EAAEpB,UAAU,SAAS,CAAC;WAAGE;IAIlD;IAEA,qBAAO,oBAACX,MAAMyC,QAAQ,QAAE9B;AAC1B,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useState","AnimateHeightImport","ChevronIcon","usePreferences","useNav","AnimateHeight","default","baseClass","NavGroup","t0","$","children","label","collapsed","setCollapsed","animate","setAnimate","getPreference","setPreference","navOpen","preferencesKey","t1","t2","setCollapsedFromPreferences","preferences","indexOf","t3","preferences_0","filter","preference","push","toggleCollapsed","t4","t5","t6","Boolean","t7","join","t8","t9","t10","t11","t12","t13","_jsxs","className","id","onClick","tabIndex","type","_jsx","direction","undefined","duration","height","Fragment"],"sources":["../../../src/elements/NavGroup/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useNav } from '../Nav/context.js'\nimport './index.scss'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nconst baseClass = 'nav-group'\n\ntype Props = {\n  children: React.ReactNode\n  label: string\n}\n\nexport const NavGroup: React.FC<Props> = ({ children, label }) => {\n  const [collapsed, setCollapsed] = useState(true)\n  const [animate, setAnimate] = useState(false)\n  const { getPreference, setPreference } = usePreferences()\n  const { navOpen } = useNav()\n\n  const preferencesKey = `collapsed-${label}-groups`\n\n  useEffect(() => {\n    if (label) {\n      const setCollapsedFromPreferences = async () => {\n        const preferences = (await getPreference(preferencesKey)) || []\n        setCollapsed(preferences.indexOf(label) !== -1)\n      }\n      void setCollapsedFromPreferences()\n    }\n  }, [getPreference, label, preferencesKey])\n\n  if (label) {\n    const toggleCollapsed = async () => {\n      setAnimate(true)\n      let preferences: string[] = (await getPreference(preferencesKey)) || []\n      if (collapsed) {\n        preferences = preferences.filter((preference) => label !== preference)\n      } else {\n        preferences.push(label)\n      }\n      void setPreference(preferencesKey, preferences)\n      setCollapsed(!collapsed)\n    }\n\n    return (\n      <div\n        className={[`${baseClass}`, `${label}`, collapsed && `${baseClass}--collapsed`]\n          .filter(Boolean)\n          .join(' ')}\n        id={`nav-group-${label}`}\n      >\n        <button\n          className={[\n            `${baseClass}__toggle`,\n            `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={toggleCollapsed}\n          tabIndex={!navOpen ? -1 : 0}\n          type=\"button\"\n        >\n          <div className={`${baseClass}__label`}>{label}</div>\n          <div className={`${baseClass}__indicator`}>\n            <ChevronIcon\n              className={`${baseClass}__indicator`}\n              direction={!collapsed ? 'up' : undefined}\n            />\n          </div>\n        </button>\n        <AnimateHeight duration={animate ? 200 : 0} height={collapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n      </div>\n    )\n  }\n\n  return <React.Fragment>{children}</React.Fragment>\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/NavGroup/index.scss

@@ -49,8 +49,8 @@
 
   &--collapsed {
     .collapsible__toggle {
-      border-bottom-right-radius: $style-radius-s;
-      border-bottom-left-radius: $style-radius-s;
+      border-bottom-right-radius: $style-radius-m;
+      border-bottom-left-radius: $style-radius-m;
     }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Pagination/ClickableArrow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqBxD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Pagination/ClickableArrow/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqBxD,CAAA"}

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

@@ -1,19 +1,23 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Chevron } from '../../../icons/Chevron/index.js';
+import { ChevronIcon } from '../../../icons/Chevron/index.js';
+import './index.scss';
 const baseClass = 'clickable-arrow';
-export const ClickableArrow = (props)=>{
-    const { direction = 'right', isDisabled = false, updatePage } = props;
-    const classes = [
-        baseClass,
-        isDisabled && `${baseClass}--is-disabled`,
-        direction && `${baseClass}--${direction}`
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ React.createElement("button", {
-        className: classes,
-        disabled: isDisabled,
-        onClick: !isDisabled ? updatePage : undefined,
-        type: "button"
-    }, /*#__PURE__*/ React.createElement(Chevron, null));
+export const ClickableArrow = props => {
+  const {
+    direction = 'right',
+    isDisabled = false,
+    updatePage
+  } = props;
+  const classes = [baseClass, isDisabled && `${baseClass}--is-disabled`, direction && `${baseClass}--${direction}`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx("button", {
+    className: classes,
+    disabled: isDisabled,
+    onClick: !isDisabled ? updatePage : undefined,
+    type: "button",
+    children: /*#__PURE__*/_jsx(ChevronIcon, {})
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Pagination/ClickableArrow/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Chevron } 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      <Chevron />\n    </button>\n  )\n}\n"],"names":["React","Chevron","baseClass","ClickableArrow","props","direction","isDisabled","updatePage","classes","filter","Boolean","join","button","className","disabled","onClick","undefined","type"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,OAAO,QAAQ,kCAAiC;AAGzD,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,oBAACC;QACCC,WAAWL;QACXM,UAAUR;QACVS,SAAS,CAACT,aAAaC,aAAaS;QACpCC,MAAK;qBAEL,oBAAChB;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/Page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Pagination/Page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAA;CAC5B,CAAA;AAID,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAqBpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Pagination/Page/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAA;CAC5B,CAAA;AAID,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAqBpC,CAAA"}

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

@@ -1,17 +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__*/ React.createElement("button", {
-        className: classes,
-        onClick: ()=>updatePage(page),
-        type: "button"
-    }, 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":["import 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"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,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,oBAACC;QAAOC,WAAWL;QAASM,SAAS,IAAMP,WAAWD;QAAOS,MAAK;OAC/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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Pagination/Separator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAgE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Pagination/Separator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAgE,CAAA"}

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

@@ -1,6 +1,9 @@
-import React from 'react';
-export const Separator = ()=>/*#__PURE__*/ React.createElement("span", {
-        className: "paginator__separator"
-    }, "—");
+'use client';
 
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+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":["import React from 'react'\n\nexport const Separator: React.FC = () => <span className=\"paginator__separator\">&mdash;</span>\n"],"names":["React","Separator","span","className"],"rangeMappings":";;;","mappings":"AAAA,OAAOA,WAAW,QAAO;AAEzB,OAAO,MAAMC,YAAsB,kBAAM,oBAACC;QAAKC,WAAU;OAAuB,KAAc"}
+{"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.js

@@ -1,95 +1,105 @@
 'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { ClickableArrow } from './ClickableArrow/index.js';
 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
-            }
-        });
-    }
-    // Add prev and next arrows based on necessity
+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: 'ClickableArrow',
-        props: {
-            direction: 'right',
-            isDisabled: !hasNextPage,
-            updatePage: ()=>updatePage(nextPage)
-        }
+      type: 'Page',
+      props: {
+        isFirstPage: true,
+        page: 1,
+        updatePage
+      }
     });
-    nodes.unshift({
-        type: 'ClickableArrow',
-        props: {
-            direction: 'left',
-            isDisabled: !hasPrevPage,
-            updatePage: ()=>updatePage(prevPage)
-        }
+  }
+  // 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
+      }
     });
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, nodes.map((node, i)=>{
-        if (typeof node === 'number') {
-            return /*#__PURE__*/ React.createElement(Page, {
-                isCurrent: currentPage === node,
-                key: i,
-                page: node,
-                updatePage: updatePage
-            });
-        }
-        const NodeType = nodeTypes[node.type];
-        return /*#__PURE__*/ React.createElement(NodeType, {
-            key: i,
-            ...node.props
-        });
-    }));
+  }
+  // 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