@amateescu/portal-ui-components 0.0.30-beta10 → 0.0.30-beta11

package/dist/components/CustomPagination/CustomPagination.d.ts

@@ -1,3 +1,3 @@
-import { ExtendedPaginationProps, ExternalPaginationProps } from './CustomPagination.types';
+import { ExtendedPaginationProps } from './CustomPagination.types';
 export declare function Pagination({ isRtl, pageCount, page, onPageChange, className, }: ExtendedPaginationProps): import("react/jsx-runtime").JSX.Element;
-export declare function CustomPagination({ isRtl, pageCount }: ExternalPaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function CustomPagination({ isRtl, className }: any): import("react/jsx-runtime").JSX.Element;

package/dist/components/CustomPagination/CustomPagination.js

@@ -1,47 +1,47 @@
-import { jsx as l, jsxs as ot } from "react/jsx-runtime";
-import * as c from "react";
+import { jsx as p, jsxs as nt } from "react/jsx-runtime";
+import * as u from "react";
 import '../../assets/theme.css';/* empty css                   */
-import { GridPagination as nt } from "@mui/x-data-grid";
-import { g as Q, a as X, u as Y, s as R, c as A, b as T, d as Z, m as F, i as S, e as _, P as e } from "../../createSimplePaletteValueFilter-evt-Xthj.js";
-import { u as st, a as it, b as j, i as B } from "../../useSlot-Baxtq84W.js";
+import { useGridApiContext as st, useGridSelector as _, gridPaginationModelSelector as rt, gridPageCountSelector as it } from "@mui/x-data-grid";
+import { g as X, a as Y, u as Z, s as R, c as A, b as T, d as tt, m as F, i as k, e as H, P as e } from "../../createSimplePaletteValueFilter-evt-Xthj.js";
+import { u as lt, a as pt, b as j, i as B } from "../../useSlot-Baxtq84W.js";
 import { c as E } from "../../createSvgIcon-CgFXfzFk.js";
-import { B as rt } from "../../ButtonBase-DUKuDCWw.js";
-const H = (t) => /* @__PURE__ */ c.createElement("svg", { width: 25, height: 24, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ c.createElement("g", { id: "arrow/chevron/</default-first" }, /* @__PURE__ */ c.createElement("path", { id: "vector", d: "M17.5 5L10.5 12L17.5 19M7.5 5L7.5 19", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }))), q = (t) => /* @__PURE__ */ c.createElement("svg", { width: 25, height: 24, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ c.createElement("g", { id: "arrow/chevron/>/end" }, /* @__PURE__ */ c.createElement("path", { id: "vector", d: "M7.5 4.99998L14.5 12L7.5 19M17.5 4.99998L17.5 19", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }))), J = (t) => /* @__PURE__ */ c.createElement("svg", { width: 10, height: 16, viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ c.createElement("path", { d: "M1.5 1L8.5 8L1.5 15", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), K = (t) => /* @__PURE__ */ c.createElement("svg", { width: 10, height: 16, viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ c.createElement("path", { d: "M8.5 15L1.5 8L8.5 1", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
-function lt(t) {
-  return Q("MuiPagination", t);
+import { B as ct } from "../../ButtonBase-DUKuDCWw.js";
+const q = (t) => /* @__PURE__ */ u.createElement("svg", { width: 25, height: 24, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ u.createElement("g", { id: "arrow/chevron/</default-first" }, /* @__PURE__ */ u.createElement("path", { id: "vector", d: "M17.5 5L10.5 12L17.5 19M7.5 5L7.5 19", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }))), J = (t) => /* @__PURE__ */ u.createElement("svg", { width: 25, height: 24, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ u.createElement("g", { id: "arrow/chevron/>/end" }, /* @__PURE__ */ u.createElement("path", { id: "vector", d: "M7.5 4.99998L14.5 12L7.5 19M17.5 4.99998L17.5 19", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }))), K = (t) => /* @__PURE__ */ u.createElement("svg", { width: 10, height: 16, viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ u.createElement("path", { d: "M1.5 1L8.5 8L1.5 15", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), Q = (t) => /* @__PURE__ */ u.createElement("svg", { width: 10, height: 16, viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ u.createElement("path", { d: "M8.5 15L1.5 8L8.5 1", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
+function dt(t) {
+  return X("MuiPagination", t);
 }
-X("MuiPagination", ["root", "ul", "outlined", "text"]);
-function pt(t = {}) {
+Y("MuiPagination", ["root", "ul", "outlined", "text"]);
+function ut(t = {}) {
   const {
     boundaryCount: a = 1,
     componentName: o = "usePagination",
     count: n = 1,
-    defaultPage: v = 1,
-    disabled: p = !1,
-    hideNextButton: f = !1,
+    defaultPage: c = 1,
+    disabled: l = !1,
+    hideNextButton: d = !1,
     hidePrevButton: b = !1,
     onChange: y,
-    page: P,
-    showFirstButton: L = !1,
+    page: m,
+    showFirstButton: S = !1,
     showLastButton: z = !1,
     siblingCount: C = 1,
     ...w
-  } = t, [d, u] = st({
-    controlled: P,
-    default: v,
+  } = t, [g, v] = lt({
+    controlled: m,
+    default: c,
     name: o,
     state: "page"
-  }), O = (s, i) => {
-    P || u(i), y && y(s, i);
-  }, $ = (s, i) => {
-    const I = i - s + 1;
+  }), O = (s, r) => {
+    m || v(r), y && y(s, r);
+  }, $ = (s, r) => {
+    const I = r - s + 1;
     return Array.from({
       length: I
     }, (V, W) => s + W);
-  }, g = $(1, Math.min(a, n)), M = $(Math.max(n - a + 1, a + 1), n), m = Math.max(
+  }, f = $(1, Math.min(a, n)), M = $(Math.max(n - a + 1, a + 1), n), P = Math.max(
     Math.min(
       // Natural start
-      d - C,
+      g - C,
       // Lower boundary when page is high
       n - a - C * 2 - 1
     ),
@@ -50,35 +50,35 @@ function pt(t = {}) {
   ), x = Math.min(
     Math.max(
       // Natural end
-      d + C,
+      g + C,
       // Upper boundary when page is low
       a + C * 2 + 2
     ),
     // Less than endPages
     n - a - 1
   ), N = [
-    ...L ? ["first"] : [],
+    ...S ? ["first"] : [],
     ...b ? [] : ["previous"],
-    ...g,
+    ...f,
     // Start ellipsis
     // eslint-disable-next-line no-nested-ternary
-    ...m > a + 2 ? ["start-ellipsis"] : a + 1 < n - a ? [a + 1] : [],
+    ...P > a + 2 ? ["start-ellipsis"] : a + 1 < n - a ? [a + 1] : [],
     // Sibling pages
-    ...$(m, x),
+    ...$(P, x),
     // End ellipsis
     // eslint-disable-next-line no-nested-ternary
     ...x < n - a - 1 ? ["end-ellipsis"] : n - a > a ? [n - a] : [],
     ...M,
-    ...f ? [] : ["next"],
+    ...d ? [] : ["next"],
     ...z ? ["last"] : []
   ], h = (s) => {
     switch (s) {
       case "first":
         return 1;
       case "previous":
-        return d - 1;
+        return g - 1;
       case "next":
-        return d + 1;
+        return g + 1;
       case "last":
         return n;
       default:
@@ -87,54 +87,54 @@ function pt(t = {}) {
   };
   return {
     items: N.map((s) => typeof s == "number" ? {
-      onClick: (i) => {
-        O(i, s);
+      onClick: (r) => {
+        O(r, s);
       },
       type: "page",
       page: s,
-      selected: s === d,
-      disabled: p,
-      "aria-current": s === d ? "page" : void 0
+      selected: s === g,
+      disabled: l,
+      "aria-current": s === g ? "page" : void 0
     } : {
-      onClick: (i) => {
-        O(i, h(s));
+      onClick: (r) => {
+        O(r, h(s));
       },
       type: s,
       page: h(s),
       selected: !1,
-      disabled: p || !s.includes("ellipsis") && (s === "next" || s === "last" ? d >= n : d <= 1)
+      disabled: l || !s.includes("ellipsis") && (s === "next" || s === "last" ? g >= n : g <= 1)
     }),
     ...w
   };
 }
-function ct(t) {
-  return Q("MuiPaginationItem", t);
+function gt(t) {
+  return X("MuiPaginationItem", t);
 }
-const r = X("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "text", "textPrimary", "textSecondary", "outlined", "outlinedPrimary", "outlinedSecondary", "rounded", "ellipsis", "firstLast", "previousNext", "focusVisible", "disabled", "selected", "icon", "colorPrimary", "colorSecondary"]), dt = E(/* @__PURE__ */ l("path", {
+const i = Y("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "text", "textPrimary", "textSecondary", "outlined", "outlinedPrimary", "outlinedSecondary", "rounded", "ellipsis", "firstLast", "previousNext", "focusVisible", "disabled", "selected", "icon", "colorPrimary", "colorSecondary"]), vt = E(/* @__PURE__ */ p("path", {
   d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"
-}), "FirstPage"), ut = E(/* @__PURE__ */ l("path", {
+}), "FirstPage"), ft = E(/* @__PURE__ */ p("path", {
   d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"
-}), "LastPage"), gt = E(/* @__PURE__ */ l("path", {
+}), "LastPage"), bt = E(/* @__PURE__ */ p("path", {
   d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-}), "NavigateBefore"), vt = E(/* @__PURE__ */ l("path", {
+}), "NavigateBefore"), yt = E(/* @__PURE__ */ p("path", {
   d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-}), "NavigateNext"), tt = (t, a) => {
+}), "NavigateNext"), et = (t, a) => {
   const {
     ownerState: o
   } = t;
   return [a.root, a[o.variant], a[`size${T(o.size)}`], o.variant === "text" && a[`text${T(o.color)}`], o.variant === "outlined" && a[`outlined${T(o.color)}`], o.shape === "rounded" && a.rounded, o.type === "page" && a.page, (o.type === "start-ellipsis" || o.type === "end-ellipsis") && a.ellipsis, (o.type === "previous" || o.type === "next") && a.previousNext, (o.type === "first" || o.type === "last") && a.firstLast];
-}, ft = (t) => {
+}, xt = (t) => {
   const {
     classes: a,
     color: o,
     disabled: n,
-    selected: v,
-    size: p,
-    shape: f,
+    selected: c,
+    size: l,
+    shape: d,
     type: b,
     variant: y
-  } = t, P = {
-    root: ["root", `size${T(p)}`, y, f, o !== "standard" && `color${T(o)}`, o !== "standard" && `${y}${T(o)}`, n && "disabled", v && "selected", {
+  } = t, m = {
+    root: ["root", `size${T(l)}`, y, d, o !== "standard" && `color${T(o)}`, o !== "standard" && `${y}${T(o)}`, n && "disabled", c && "selected", {
       page: "page",
       first: "firstLast",
       last: "firstLast",
@@ -145,11 +145,11 @@ const r = X("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
     }[b]],
     icon: ["icon"]
   };
-  return Z(P, ct, a);
-}, bt = R("div", {
+  return tt(m, gt, a);
+}, Pt = R("div", {
   name: "MuiPaginationItem",
   slot: "Root",
-  overridesResolver: tt
+  overridesResolver: et
 })(F(({
   theme: t
 }) => ({
@@ -162,7 +162,7 @@ const r = X("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
   margin: "0 3px",
   color: (t.vars || t).palette.text.primary,
   height: "auto",
-  [`&.${r.disabled}`]: {
+  [`&.${i.disabled}`]: {
     opacity: (t.vars || t).palette.action.disabledOpacity
   },
   variants: [{
@@ -186,10 +186,10 @@ const r = X("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
       fontSize: t.typography.pxToRem(15)
     }
   }]
-}))), yt = R(rt, {
+}))), mt = R(ct, {
   name: "MuiPaginationItem",
   slot: "Root",
-  overridesResolver: tt
+  overridesResolver: et
 })(F(({
   theme: t
 }) => ({
@@ -202,10 +202,10 @@ const r = X("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
   padding: "0 6px",
   margin: "0 3px",
   color: (t.vars || t).palette.text.primary,
-  [`&.${r.focusVisible}`]: {
+  [`&.${i.focusVisible}`]: {
     backgroundColor: (t.vars || t).palette.action.focus
   },
-  [`&.${r.disabled}`]: {
+  [`&.${i.disabled}`]: {
     opacity: (t.vars || t).palette.action.disabledOpacity
   },
   transition: t.transitions.create(["color", "background-color"], {
@@ -218,19 +218,19 @@ const r = X("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
       backgroundColor: "transparent"
     }
   },
-  [`&.${r.selected}`]: {
+  [`&.${i.selected}`]: {
     backgroundColor: (t.vars || t).palette.action.selected,
     "&:hover": {
-      backgroundColor: t.vars ? `rgba(${t.vars.palette.action.selectedChannel} / calc(${t.vars.palette.action.selectedOpacity} + ${t.vars.palette.action.hoverOpacity}))` : S(t.palette.action.selected, t.palette.action.selectedOpacity + t.palette.action.hoverOpacity),
+      backgroundColor: t.vars ? `rgba(${t.vars.palette.action.selectedChannel} / calc(${t.vars.palette.action.selectedOpacity} + ${t.vars.palette.action.hoverOpacity}))` : k(t.palette.action.selected, t.palette.action.selectedOpacity + t.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
         backgroundColor: (t.vars || t).palette.action.selected
       }
     },
-    [`&.${r.focusVisible}`]: {
-      backgroundColor: t.vars ? `rgba(${t.vars.palette.action.selectedChannel} / calc(${t.vars.palette.action.selectedOpacity} + ${t.vars.palette.action.focusOpacity}))` : S(t.palette.action.selected, t.palette.action.selectedOpacity + t.palette.action.focusOpacity)
+    [`&.${i.focusVisible}`]: {
+      backgroundColor: t.vars ? `rgba(${t.vars.palette.action.selectedChannel} / calc(${t.vars.palette.action.selectedOpacity} + ${t.vars.palette.action.focusOpacity}))` : k(t.palette.action.selected, t.palette.action.selectedOpacity + t.palette.action.focusOpacity)
     },
-    [`&.${r.disabled}`]: {
+    [`&.${i.disabled}`]: {
       opacity: 1,
       color: (t.vars || t).palette.action.disabled,
       backgroundColor: (t.vars || t).palette.action.selected
@@ -271,8 +271,8 @@ const r = X("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
     },
     style: {
       border: t.vars ? `1px solid rgba(${t.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${t.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)"}`,
-      [`&.${r.selected}`]: {
-        [`&.${r.disabled}`]: {
+      [`&.${i.selected}`]: {
+        [`&.${i.disabled}`]: {
           borderColor: (t.vars || t).palette.action.disabledBackground,
           color: (t.vars || t).palette.action.disabled
         }
@@ -283,19 +283,19 @@ const r = X("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
       variant: "text"
     },
     style: {
-      [`&.${r.selected}`]: {
-        [`&.${r.disabled}`]: {
+      [`&.${i.selected}`]: {
+        [`&.${i.disabled}`]: {
           color: (t.vars || t).palette.action.disabled
         }
       }
     }
-  }, ...Object.entries(t.palette).filter(_(["dark", "contrastText"])).map(([a]) => ({
+  }, ...Object.entries(t.palette).filter(H(["dark", "contrastText"])).map(([a]) => ({
     props: {
       variant: "text",
       color: a
     },
     style: {
-      [`&.${r.selected}`]: {
+      [`&.${i.selected}`]: {
         color: (t.vars || t).palette[a].contrastText,
         backgroundColor: (t.vars || t).palette[a].main,
         "&:hover": {
@@ -305,38 +305,38 @@ const r = X("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
             backgroundColor: (t.vars || t).palette[a].main
           }
         },
-        [`&.${r.focusVisible}`]: {
+        [`&.${i.focusVisible}`]: {
           backgroundColor: (t.vars || t).palette[a].dark
         },
-        [`&.${r.disabled}`]: {
+        [`&.${i.disabled}`]: {
           color: (t.vars || t).palette.action.disabled
         }
       }
     }
-  })), ...Object.entries(t.palette).filter(_(["light"])).map(([a]) => ({
+  })), ...Object.entries(t.palette).filter(H(["light"])).map(([a]) => ({
     props: {
       variant: "outlined",
       color: a
     },
     style: {
-      [`&.${r.selected}`]: {
+      [`&.${i.selected}`]: {
         color: (t.vars || t).palette[a].main,
-        border: `1px solid ${t.vars ? `rgba(${t.vars.palette[a].mainChannel} / 0.5)` : S(t.palette[a].main, 0.5)}`,
-        backgroundColor: t.vars ? `rgba(${t.vars.palette[a].mainChannel} / ${t.vars.palette.action.activatedOpacity})` : S(t.palette[a].main, t.palette.action.activatedOpacity),
+        border: `1px solid ${t.vars ? `rgba(${t.vars.palette[a].mainChannel} / 0.5)` : k(t.palette[a].main, 0.5)}`,
+        backgroundColor: t.vars ? `rgba(${t.vars.palette[a].mainChannel} / ${t.vars.palette.action.activatedOpacity})` : k(t.palette[a].main, t.palette.action.activatedOpacity),
         "&:hover": {
-          backgroundColor: t.vars ? `rgba(${t.vars.palette[a].mainChannel} / calc(${t.vars.palette.action.activatedOpacity} + ${t.vars.palette.action.focusOpacity}))` : S(t.palette[a].main, t.palette.action.activatedOpacity + t.palette.action.focusOpacity),
+          backgroundColor: t.vars ? `rgba(${t.vars.palette[a].mainChannel} / calc(${t.vars.palette.action.activatedOpacity} + ${t.vars.palette.action.focusOpacity}))` : k(t.palette[a].main, t.palette.action.activatedOpacity + t.palette.action.focusOpacity),
           // Reset on touch devices, it doesn't add specificity
           "@media (hover: none)": {
             backgroundColor: "transparent"
           }
         },
-        [`&.${r.focusVisible}`]: {
-          backgroundColor: t.vars ? `rgba(${t.vars.palette[a].mainChannel} / calc(${t.vars.palette.action.activatedOpacity} + ${t.vars.palette.action.focusOpacity}))` : S(t.palette[a].main, t.palette.action.activatedOpacity + t.palette.action.focusOpacity)
+        [`&.${i.focusVisible}`]: {
+          backgroundColor: t.vars ? `rgba(${t.vars.palette[a].mainChannel} / calc(${t.vars.palette.action.activatedOpacity} + ${t.vars.palette.action.focusOpacity}))` : k(t.palette[a].main, t.palette.action.activatedOpacity + t.palette.action.focusOpacity)
         }
       }
     }
   }))]
-}))), xt = R("div", {
+}))), Ct = R("div", {
   name: "MuiPaginationItem",
   slot: "Icon"
 })(F(({
@@ -359,89 +359,89 @@ const r = X("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
       fontSize: t.typography.pxToRem(22)
     }
   }]
-}))), U = /* @__PURE__ */ c.forwardRef(function(a, o) {
-  const n = Y({
+}))), U = /* @__PURE__ */ u.forwardRef(function(a, o) {
+  const n = Z({
     props: a,
     name: "MuiPaginationItem"
   }), {
-    className: v,
-    color: p = "standard",
-    component: f,
+    className: c,
+    color: l = "standard",
+    component: d,
     components: b = {},
     disabled: y = !1,
-    page: P,
-    selected: L = !1,
+    page: m,
+    selected: S = !1,
     shape: z = "circular",
     size: C = "medium",
     slots: w = {},
-    slotProps: d = {},
-    type: u = "page",
+    slotProps: g = {},
+    type: v = "page",
     variant: O = "text",
     ...$
-  } = n, g = {
+  } = n, f = {
     ...n,
-    color: p,
+    color: l,
     disabled: y,
-    selected: L,
+    selected: S,
     shape: z,
     size: C,
-    type: u,
+    type: v,
     variant: O
-  }, M = it(), m = ft(g), x = {
+  }, M = pt(), P = xt(f), x = {
     slots: {
       previous: w.previous ?? b.previous,
       next: w.next ?? b.next,
       first: w.first ?? b.first,
       last: w.last ?? b.last
     },
-    slotProps: d
+    slotProps: g
   }, [N, h] = j("previous", {
-    elementType: gt,
+    elementType: bt,
     externalForwardedProps: x,
-    ownerState: g
-  }), [k, s] = j("next", {
-    elementType: vt,
+    ownerState: f
+  }), [L, s] = j("next", {
+    elementType: yt,
     externalForwardedProps: x,
-    ownerState: g
-  }), [i, I] = j("first", {
-    elementType: dt,
+    ownerState: f
+  }), [r, I] = j("first", {
+    elementType: vt,
     externalForwardedProps: x,
-    ownerState: g
+    ownerState: f
   }), [V, W] = j("last", {
-    elementType: ut,
+    elementType: ft,
     externalForwardedProps: x,
-    ownerState: g
+    ownerState: f
   }), D = M ? {
     previous: "next",
     next: "previous",
     first: "last",
     last: "first"
-  }[u] : u, G = {
+  }[v] : v, G = {
     previous: N,
-    next: k,
-    first: i,
+    next: L,
+    first: r,
     last: V
-  }[D], at = {
+  }[D], ot = {
     previous: h,
     next: s,
     first: I,
     last: W
   }[D];
-  return u === "start-ellipsis" || u === "end-ellipsis" ? /* @__PURE__ */ l(bt, {
+  return v === "start-ellipsis" || v === "end-ellipsis" ? /* @__PURE__ */ p(Pt, {
     ref: o,
-    ownerState: g,
-    className: A(m.root, v),
+    ownerState: f,
+    className: A(P.root, c),
     children: "…"
-  }) : /* @__PURE__ */ ot(yt, {
+  }) : /* @__PURE__ */ nt(mt, {
     ref: o,
-    ownerState: g,
-    component: f,
+    ownerState: f,
+    component: d,
     disabled: y,
-    className: A(m.root, v),
+    className: A(P.root, c),
     ...$,
-    children: [u === "page" && P, G ? /* @__PURE__ */ l(xt, {
-      ...at,
-      className: m.icon,
+    children: [v === "page" && m, G ? /* @__PURE__ */ p(Ct, {
+      ...ot,
+      className: P.icon,
       as: G
     }) : null]
   });
@@ -549,16 +549,16 @@ process.env.NODE_ENV !== "production" && (U.propTypes = {
    */
   variant: e.oneOfType([e.oneOf(["outlined", "text"]), e.string])
 });
-const mt = (t) => {
+const wt = (t) => {
   const {
     classes: a,
     variant: o
   } = t;
-  return Z({
+  return tt({
     root: ["root", o],
     ul: ["ul"]
-  }, lt, a);
-}, Pt = R("nav", {
+  }, dt, a);
+}, Ot = R("nav", {
   name: "MuiPagination",
   slot: "Root",
   overridesResolver: (t, a) => {
@@ -567,7 +567,7 @@ const mt = (t) => {
     } = t;
     return [a.root, a[o.variant]];
   }
-})({}), Ct = R("ul", {
+})({}), $t = R("ul", {
   name: "MuiPagination",
   slot: "Ul"
 })({
@@ -578,81 +578,81 @@ const mt = (t) => {
   margin: 0,
   listStyle: "none"
 });
-function wt(t, a, o) {
+function St(t, a, o) {
   return t === "page" ? `${o ? "" : "Go to "}page ${a}` : `Go to ${t} page`;
 }
-const et = /* @__PURE__ */ c.forwardRef(function(a, o) {
-  const n = Y({
+const at = /* @__PURE__ */ u.forwardRef(function(a, o) {
+  const n = Z({
     props: a,
     name: "MuiPagination"
   }), {
-    boundaryCount: v = 1,
-    className: p,
-    color: f = "standard",
+    boundaryCount: c = 1,
+    className: l,
+    color: d = "standard",
     count: b = 1,
     defaultPage: y = 1,
-    disabled: P = !1,
-    getItemAriaLabel: L = wt,
+    disabled: m = !1,
+    getItemAriaLabel: S = St,
     hideNextButton: z = !1,
     hidePrevButton: C = !1,
     onChange: w,
-    page: d,
-    renderItem: u = (i) => /* @__PURE__ */ l(U, {
-      ...i
+    page: g,
+    renderItem: v = (r) => /* @__PURE__ */ p(U, {
+      ...r
     }),
     shape: O = "circular",
     showFirstButton: $ = !1,
-    showLastButton: g = !1,
+    showLastButton: f = !1,
     siblingCount: M = 1,
-    size: m = "medium",
+    size: P = "medium",
     variant: x = "text",
     ...N
   } = n, {
     items: h
-  } = pt({
+  } = ut({
     ...n,
     componentName: "Pagination"
-  }), k = {
+  }), L = {
     ...n,
-    boundaryCount: v,
-    color: f,
+    boundaryCount: c,
+    color: d,
     count: b,
     defaultPage: y,
-    disabled: P,
-    getItemAriaLabel: L,
+    disabled: m,
+    getItemAriaLabel: S,
     hideNextButton: z,
     hidePrevButton: C,
-    renderItem: u,
+    renderItem: v,
     shape: O,
     showFirstButton: $,
-    showLastButton: g,
+    showLastButton: f,
     siblingCount: M,
-    size: m,
+    size: P,
     variant: x
-  }, s = mt(k);
-  return /* @__PURE__ */ l(Pt, {
+  }, s = wt(L);
+  return /* @__PURE__ */ p(Ot, {
     "aria-label": "pagination navigation",
-    className: A(s.root, p),
-    ownerState: k,
+    className: A(s.root, l),
+    ownerState: L,
     ref: o,
     ...N,
-    children: /* @__PURE__ */ l(Ct, {
+    children: /* @__PURE__ */ p($t, {
       className: s.ul,
-      ownerState: k,
-      children: h.map((i, I) => /* @__PURE__ */ l("li", {
-        children: u({
-          ...i,
-          color: f,
-          "aria-label": L(i.type, i.page, i.selected),
+      ownerState: L,
+      children: h.map((r, I) => /* @__PURE__ */ p("li", {
+        children: v({
+          ...r,
+          color: d,
+          "aria-label": S(r.type, r.page, r.selected),
           shape: O,
-          size: m,
+          size: P,
           variant: x
         })
       }, I))
     })
   });
 });
-process.env.NODE_ENV !== "production" && (et.propTypes = {
+process.env.NODE_ENV !== "production" && (at.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -766,31 +766,31 @@ process.env.NODE_ENV !== "production" && (et.propTypes = {
    */
   variant: e.oneOfType([e.oneOf(["outlined", "text"]), e.string])
 });
-function Ot({
+function ht({
   isRtl: t,
   pageCount: a,
   page: o,
   onPageChange: n,
-  className: v
+  className: c
 }) {
-  return /* @__PURE__ */ l(
-    et,
+  return /* @__PURE__ */ p(
+    at,
     {
       showFirstButton: !0,
       showLastButton: !0,
-      className: v,
+      className: c,
       count: a,
       page: o + 1,
-      onChange: (p, f) => {
-        n(p, f - 1);
+      onChange: (l, d) => {
+        n(l, d - 1);
       },
       boundaryCount: 0,
       siblingCount: 1,
-      renderItem: (p) => /* @__PURE__ */ l(
+      renderItem: (l) => /* @__PURE__ */ p(
         U,
         {
-          slots: { previous: t ? J : K, next: t ? K : J, first: t ? q : H, last: t ? H : q },
-          ...p
+          slots: { previous: t ? K : Q, next: t ? Q : K, first: t ? J : q, last: t ? q : J },
+          ...l
         }
       ),
       sx: {
@@ -809,10 +809,11 @@ function Ot({
     }
   );
 }
-function Mt({ isRtl: t, pageCount: a }) {
-  return /* @__PURE__ */ l(nt, { ActionsComponent: (o) => /* @__PURE__ */ l(Ot, { isRtl: t, pageCount: a, ...o }) });
+function Bt({ isRtl: t, className: a }) {
+  const o = st(), n = _(o, rt), c = _(o, it);
+  return /* @__PURE__ */ p(ht, { isRtl: t, pageCount: c, page: n.page + 1, onPageChange: (l, d) => o.current.setPage(d - 1), className: a });
 }
 export {
-  Mt as CustomPagination,
-  Ot as Pagination
+  Bt as CustomPagination,
+  ht as Pagination
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@amateescu/portal-ui-components",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
-  "version": "0.0.30-beta10",
+  "version": "0.0.30-beta11",
   "type": "module",
   "files": [
     "dist",
@@ -40,7 +40,7 @@
     "@eslint/js": "^9.26.0",
     "@mui/icons-material": "^7.1.0",
     "@mui/material": "^7.1.0",
-    "@mui/x-data-grid": "^7.29.2",
+    "@mui/x-data-grid": "^8.2.0",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-interactions": "^8.6.12",
     "@storybook/addon-onboarding": "^8.6.12",