@amateescu/portal-ui-components 0.0.28 → 0.0.30-beta

package/dist/components/CustomPagination/CustomPagination.js

@@ -1,139 +1,140 @@
-import { jsx as c, jsxs as oa } from "react/jsx-runtime";
-import * as g from "react";
+import { jsx as l, jsxs as ot } from "react/jsx-runtime";
+import * as c from "react";
 import '../../assets/theme.css';/* empty css                   */
-import { GridPagination as ea } from "@mui/x-data-grid";
-import { _ as A, a as l } from "../../objectWithoutPropertiesLoose-DYizGgyG.js";
-import { g as J, a as K, u as Q, s as E, c as j, b as N, d as X, h as z, P as o } from "../../generateUtilityClasses-DY-qyzNG.js";
-import { u as na, c as W, a as sa, i as R } from "../../createSvgIcon-Db107M0j.js";
-import { B as ia } from "../../ButtonBase-BeQnmGXr.js";
-const S = (a) => /* @__PURE__ */ g.createElement("svg", { width: 25, height: 24, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ g.createElement("g", { id: "arrow/chevron/</default-first" }, /* @__PURE__ */ g.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" }))), _ = (a) => /* @__PURE__ */ g.createElement("svg", { width: 25, height: 24, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ g.createElement("g", { id: "arrow/chevron/>/end" }, /* @__PURE__ */ g.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" }))), U = (a) => /* @__PURE__ */ g.createElement("svg", { width: 10, height: 16, viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ g.createElement("path", { d: "M1.5 1L8.5 8L1.5 15", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), V = (a) => /* @__PURE__ */ g.createElement("svg", { width: 10, height: 16, viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ g.createElement("path", { d: "M8.5 15L1.5 8L8.5 1", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
-function ra(a) {
-  return J("MuiPagination", a);
+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-rq2_biPF.js";
+import { u as st, a as rt, b as j, i as B } from "../../useSlot-CT4096EK.js";
+import { c as E } from "../../createSvgIcon-jB7EUYpq.js";
+import { B as it } from "../../ButtonBase-DWpUn0eT.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);
 }
-K("MuiPagination", ["root", "ul", "outlined", "text"]);
-const la = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
-function ca(a = {}) {
+X("MuiPagination", ["root", "ul", "outlined", "text"]);
+function pt(t = {}) {
   const {
-    boundaryCount: t = 1,
-    componentName: e = "usePagination",
+    boundaryCount: a = 1,
+    componentName: o = "usePagination",
     count: n = 1,
     defaultPage: v = 1,
     disabled: p = !1,
     hideNextButton: f = !1,
-    hidePrevButton: r = !1,
-    onChange: b,
-    page: m,
-    showFirstButton: O = !1,
-    showLastButton: B = !1,
-    siblingCount: h = 1
-  } = a, d = A(a, la), [i, w] = na({
-    controlled: m,
+    hidePrevButton: b = !1,
+    onChange: y,
+    page: P,
+    showFirstButton: L = !1,
+    showLastButton: z = !1,
+    siblingCount: C = 1,
+    ...w
+  } = t, [d, u] = st({
+    controlled: P,
     default: v,
-    name: e,
+    name: o,
     state: "page"
-  }), $ = (s, C) => {
-    m || w(C), b && b(s, C);
-  }, y = (s, C) => {
-    const aa = C - s + 1;
+  }), O = (s, r) => {
+    P || u(r), y && y(s, r);
+  }, $ = (s, r) => {
+    const I = r - s + 1;
     return Array.from({
-      length: aa
-    }, (Ca, ta) => s + ta);
-  }, k = y(1, Math.min(t, n)), x = y(Math.max(n - t + 1, t + 1), n), I = Math.max(
+      length: I
+    }, (V, W) => s + W);
+  }, g = $(1, Math.min(a, n)), M = $(Math.max(n - a + 1, a + 1), n), m = Math.max(
     Math.min(
       // Natural start
-      i - h,
+      d - C,
       // Lower boundary when page is high
-      n - t - h * 2 - 1
+      n - a - C * 2 - 1
     ),
     // Greater than startPages
-    t + 2
-  ), L = Math.min(
+    a + 2
+  ), x = Math.min(
     Math.max(
       // Natural end
-      i + h,
+      d + C,
       // Upper boundary when page is low
-      t + h * 2 + 2
+      a + C * 2 + 2
     ),
     // Less than endPages
-    x.length > 0 ? x[0] - 2 : n - 1
-  ), M = [
-    ...O ? ["first"] : [],
-    ...r ? [] : ["previous"],
-    ...k,
+    n - a - 1
+  ), N = [
+    ...L ? ["first"] : [],
+    ...b ? [] : ["previous"],
+    ...g,
     // Start ellipsis
     // eslint-disable-next-line no-nested-ternary
-    ...I > t + 2 ? ["start-ellipsis"] : t + 1 < n - t ? [t + 1] : [],
+    ...m > a + 2 ? ["start-ellipsis"] : a + 1 < n - a ? [a + 1] : [],
     // Sibling pages
-    ...y(I, L),
+    ...$(m, x),
     // End ellipsis
     // eslint-disable-next-line no-nested-ternary
-    ...L < n - t - 1 ? ["end-ellipsis"] : n - t > t ? [n - t] : [],
-    ...x,
+    ...x < n - a - 1 ? ["end-ellipsis"] : n - a > a ? [n - a] : [],
+    ...M,
     ...f ? [] : ["next"],
-    ...B ? ["last"] : []
-  ], T = (s) => {
+    ...z ? ["last"] : []
+  ], h = (s) => {
     switch (s) {
       case "first":
         return 1;
       case "previous":
-        return i - 1;
+        return d - 1;
       case "next":
-        return i + 1;
+        return d + 1;
       case "last":
         return n;
       default:
         return null;
     }
-  }, P = M.map((s) => typeof s == "number" ? {
-    onClick: (C) => {
-      $(C, s);
-    },
-    type: "page",
-    page: s,
-    selected: s === i,
-    disabled: p,
-    "aria-current": s === i ? "true" : void 0
-  } : {
-    onClick: (C) => {
-      $(C, T(s));
-    },
-    type: s,
-    page: T(s),
-    selected: !1,
-    disabled: p || s.indexOf("ellipsis") === -1 && (s === "next" || s === "last" ? i >= n : i <= 1)
-  });
-  return l({
-    items: P
-  }, d);
+  };
+  return {
+    items: N.map((s) => typeof s == "number" ? {
+      onClick: (r) => {
+        O(r, s);
+      },
+      type: "page",
+      page: s,
+      selected: s === d,
+      disabled: p,
+      "aria-current": s === d ? "page" : void 0
+    } : {
+      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)
+    }),
+    ...w
+  };
 }
-function da(a) {
-  return J("MuiPaginationItem", a);
+function ct(t) {
+  return Q("MuiPaginationItem", t);
 }
-const u = K("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "text", "textPrimary", "textSecondary", "outlined", "outlinedPrimary", "outlinedSecondary", "rounded", "ellipsis", "firstLast", "previousNext", "focusVisible", "disabled", "selected", "icon", "colorPrimary", "colorSecondary"]), D = W(/* @__PURE__ */ c("path", {
+const i = 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", {
   d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"
-}), "FirstPage"), G = W(/* @__PURE__ */ c("path", {
+}), "FirstPage"), ut = E(/* @__PURE__ */ l("path", {
   d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"
-}), "LastPage"), H = W(/* @__PURE__ */ c("path", {
+}), "LastPage"), gt = E(/* @__PURE__ */ l("path", {
   d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-}), "NavigateBefore"), q = W(/* @__PURE__ */ c("path", {
+}), "NavigateBefore"), vt = E(/* @__PURE__ */ l("path", {
   d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-}), "NavigateNext"), pa = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"], Y = (a, t) => {
+}), "NavigateNext"), tt = (t, a) => {
   const {
-    ownerState: e
-  } = a;
-  return [t.root, t[e.variant], t[`size${N(e.size)}`], e.variant === "text" && t[`text${N(e.color)}`], e.variant === "outlined" && t[`outlined${N(e.color)}`], e.shape === "rounded" && t.rounded, e.type === "page" && t.page, (e.type === "start-ellipsis" || e.type === "end-ellipsis") && t.ellipsis, (e.type === "previous" || e.type === "next") && t.previousNext, (e.type === "first" || e.type === "last") && t.firstLast];
-}, ua = (a) => {
+    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) => {
   const {
-    classes: t,
-    color: e,
+    classes: a,
+    color: o,
     disabled: n,
     selected: v,
     size: p,
     shape: f,
-    type: r,
-    variant: b
-  } = a, m = {
-    root: ["root", `size${N(p)}`, b, f, e !== "standard" && `color${N(e)}`, e !== "standard" && `${b}${N(e)}`, n && "disabled", v && "selected", {
+    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", {
       page: "page",
       first: "firstLast",
       last: "firstLast",
@@ -141,47 +142,58 @@ const u = K("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
       "end-ellipsis": "ellipsis",
       previous: "previousNext",
       next: "previousNext"
-    }[r]],
+    }[b]],
     icon: ["icon"]
   };
-  return X(m, da, t);
-}, ga = E("div", {
+  return Z(P, ct, a);
+}, bt = R("div", {
   name: "MuiPaginationItem",
   slot: "Root",
-  overridesResolver: Y
-})(({
-  theme: a,
-  ownerState: t
-}) => l({}, a.typography.body2, {
+  overridesResolver: tt
+})(F(({
+  theme: t
+}) => ({
+  ...t.typography.body2,
   borderRadius: 32 / 2,
   textAlign: "center",
   boxSizing: "border-box",
   minWidth: 32,
   padding: "0 6px",
   margin: "0 3px",
-  color: (a.vars || a).palette.text.primary,
+  color: (t.vars || t).palette.text.primary,
   height: "auto",
-  [`&.${u.disabled}`]: {
-    opacity: (a.vars || a).palette.action.disabledOpacity
-  }
-}, t.size === "small" && {
-  minWidth: 26,
-  borderRadius: 26 / 2,
-  margin: "0 1px",
-  padding: "0 4px"
-}, t.size === "large" && {
-  minWidth: 40,
-  borderRadius: 40 / 2,
-  padding: "0 10px",
-  fontSize: a.typography.pxToRem(15)
-})), va = E(ia, {
+  [`&.${i.disabled}`]: {
+    opacity: (t.vars || t).palette.action.disabledOpacity
+  },
+  variants: [{
+    props: {
+      size: "small"
+    },
+    style: {
+      minWidth: 26,
+      borderRadius: 26 / 2,
+      margin: "0 1px",
+      padding: "0 4px"
+    }
+  }, {
+    props: {
+      size: "large"
+    },
+    style: {
+      minWidth: 40,
+      borderRadius: 40 / 2,
+      padding: "0 10px",
+      fontSize: t.typography.pxToRem(15)
+    }
+  }]
+}))), yt = R(it, {
   name: "MuiPaginationItem",
   slot: "Root",
-  overridesResolver: Y
-})(({
-  theme: a,
-  ownerState: t
-}) => l({}, a.typography.body2, {
+  overridesResolver: tt
+})(F(({
+  theme: t
+}) => ({
+  ...t.typography.body2,
   borderRadius: 32 / 2,
   textAlign: "center",
   boxSizing: "border-box",
@@ -189,169 +201,253 @@ const u = K("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
   height: 32,
   padding: "0 6px",
   margin: "0 3px",
-  color: (a.vars || a).palette.text.primary,
-  [`&.${u.focusVisible}`]: {
-    backgroundColor: (a.vars || a).palette.action.focus
+  color: (t.vars || t).palette.text.primary,
+  [`&.${i.focusVisible}`]: {
+    backgroundColor: (t.vars || t).palette.action.focus
   },
-  [`&.${u.disabled}`]: {
-    opacity: (a.vars || a).palette.action.disabledOpacity
+  [`&.${i.disabled}`]: {
+    opacity: (t.vars || t).palette.action.disabledOpacity
   },
-  transition: a.transitions.create(["color", "background-color"], {
-    duration: a.transitions.duration.short
+  transition: t.transitions.create(["color", "background-color"], {
+    duration: t.transitions.duration.short
   }),
   "&:hover": {
-    backgroundColor: (a.vars || a).palette.action.hover,
+    backgroundColor: (t.vars || t).palette.action.hover,
     // Reset on touch devices, it doesn't add specificity
     "@media (hover: none)": {
       backgroundColor: "transparent"
     }
   },
-  [`&.${u.selected}`]: {
-    backgroundColor: (a.vars || a).palette.action.selected,
+  [`&.${i.selected}`]: {
+    backgroundColor: (t.vars || t).palette.action.selected,
     "&:hover": {
-      backgroundColor: a.vars ? `rgba(${a.vars.palette.action.selectedChannel} / calc(${a.vars.palette.action.selectedOpacity} + ${a.vars.palette.action.hoverOpacity}))` : z.alpha(a.palette.action.selected, a.palette.action.selectedOpacity + a.palette.action.hoverOpacity),
+      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),
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
-        backgroundColor: (a.vars || a).palette.action.selected
+        backgroundColor: (t.vars || t).palette.action.selected
       }
     },
-    [`&.${u.focusVisible}`]: {
-      backgroundColor: a.vars ? `rgba(${a.vars.palette.action.selectedChannel} / calc(${a.vars.palette.action.selectedOpacity} + ${a.vars.palette.action.focusOpacity}))` : z.alpha(a.palette.action.selected, a.palette.action.selectedOpacity + a.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}))` : S(t.palette.action.selected, t.palette.action.selectedOpacity + t.palette.action.focusOpacity)
     },
-    [`&.${u.disabled}`]: {
+    [`&.${i.disabled}`]: {
       opacity: 1,
-      color: (a.vars || a).palette.action.disabled,
-      backgroundColor: (a.vars || a).palette.action.selected
+      color: (t.vars || t).palette.action.disabled,
+      backgroundColor: (t.vars || t).palette.action.selected
     }
-  }
-}, t.size === "small" && {
-  minWidth: 26,
-  height: 26,
-  borderRadius: 26 / 2,
-  margin: "0 1px",
-  padding: "0 4px"
-}, t.size === "large" && {
-  minWidth: 40,
-  height: 40,
-  borderRadius: 40 / 2,
-  padding: "0 10px",
-  fontSize: a.typography.pxToRem(15)
-}, t.shape === "rounded" && {
-  borderRadius: (a.vars || a).shape.borderRadius
-}), ({
-  theme: a,
-  ownerState: t
-}) => l({}, t.variant === "text" && {
-  [`&.${u.selected}`]: l({}, t.color !== "standard" && {
-    color: (a.vars || a).palette[t.color].contrastText,
-    backgroundColor: (a.vars || a).palette[t.color].main,
-    "&:hover": {
-      backgroundColor: (a.vars || a).palette[t.color].dark,
-      // Reset on touch devices, it doesn't add specificity
-      "@media (hover: none)": {
-        backgroundColor: (a.vars || a).palette[t.color].main
-      }
+  },
+  variants: [{
+    props: {
+      size: "small"
     },
-    [`&.${u.focusVisible}`]: {
-      backgroundColor: (a.vars || a).palette[t.color].dark
+    style: {
+      minWidth: 26,
+      height: 26,
+      borderRadius: 26 / 2,
+      margin: "0 1px",
+      padding: "0 4px"
     }
   }, {
-    [`&.${u.disabled}`]: {
-      color: (a.vars || a).palette.action.disabled
+    props: {
+      size: "large"
+    },
+    style: {
+      minWidth: 40,
+      height: 40,
+      borderRadius: 40 / 2,
+      padding: "0 10px",
+      fontSize: t.typography.pxToRem(15)
     }
-  })
-}, t.variant === "outlined" && {
-  border: a.vars ? `1px solid rgba(${a.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${a.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)"}`,
-  [`&.${u.selected}`]: l({}, t.color !== "standard" && {
-    color: (a.vars || a).palette[t.color].main,
-    border: `1px solid ${a.vars ? `rgba(${a.vars.palette[t.color].mainChannel} / 0.5)` : z.alpha(a.palette[t.color].main, 0.5)}`,
-    backgroundColor: a.vars ? `rgba(${a.vars.palette[t.color].mainChannel} / ${a.vars.palette.action.activatedOpacity})` : z.alpha(a.palette[t.color].main, a.palette.action.activatedOpacity),
-    "&:hover": {
-      backgroundColor: a.vars ? `rgba(${a.vars.palette[t.color].mainChannel} / calc(${a.vars.palette.action.activatedOpacity} + ${a.vars.palette.action.focusOpacity}))` : z.alpha(a.palette[t.color].main, a.palette.action.activatedOpacity + a.palette.action.focusOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      "@media (hover: none)": {
-        backgroundColor: "transparent"
-      }
+  }, {
+    props: {
+      shape: "rounded"
+    },
+    style: {
+      borderRadius: (t.vars || t).shape.borderRadius
+    }
+  }, {
+    props: {
+      variant: "outlined"
     },
-    [`&.${u.focusVisible}`]: {
-      backgroundColor: a.vars ? `rgba(${a.vars.palette[t.color].mainChannel} / calc(${a.vars.palette.action.activatedOpacity} + ${a.vars.palette.action.focusOpacity}))` : z.alpha(a.palette[t.color].main, a.palette.action.activatedOpacity + a.palette.action.focusOpacity)
+    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)"}`,
+      [`&.${i.selected}`]: {
+        [`&.${i.disabled}`]: {
+          borderColor: (t.vars || t).palette.action.disabledBackground,
+          color: (t.vars || t).palette.action.disabled
+        }
+      }
     }
   }, {
-    [`&.${u.disabled}`]: {
-      borderColor: (a.vars || a).palette.action.disabledBackground,
-      color: (a.vars || a).palette.action.disabled
+    props: {
+      variant: "text"
+    },
+    style: {
+      [`&.${i.selected}`]: {
+        [`&.${i.disabled}`]: {
+          color: (t.vars || t).palette.action.disabled
+        }
+      }
+    }
+  }, ...Object.entries(t.palette).filter(_(["dark", "contrastText"])).map(([a]) => ({
+    props: {
+      variant: "text",
+      color: a
+    },
+    style: {
+      [`&.${i.selected}`]: {
+        color: (t.vars || t).palette[a].contrastText,
+        backgroundColor: (t.vars || t).palette[a].main,
+        "&:hover": {
+          backgroundColor: (t.vars || t).palette[a].dark,
+          // Reset on touch devices, it doesn't add specificity
+          "@media (hover: none)": {
+            backgroundColor: (t.vars || t).palette[a].main
+          }
+        },
+        [`&.${i.focusVisible}`]: {
+          backgroundColor: (t.vars || t).palette[a].dark
+        },
+        [`&.${i.disabled}`]: {
+          color: (t.vars || t).palette.action.disabled
+        }
+      }
+    }
+  })), ...Object.entries(t.palette).filter(_(["light"])).map(([a]) => ({
+    props: {
+      variant: "outlined",
+      color: a
+    },
+    style: {
+      [`&.${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),
+        "&: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),
+          // Reset on touch devices, it doesn't add specificity
+          "@media (hover: none)": {
+            backgroundColor: "transparent"
+          }
+        },
+        [`&.${i.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)
+        }
+      }
     }
-  })
-})), fa = E("div", {
+  }))]
+}))), xt = R("div", {
   name: "MuiPaginationItem",
   slot: "Icon",
-  overridesResolver: (a, t) => t.icon
-})(({
-  theme: a,
-  ownerState: t
-}) => l({
-  fontSize: a.typography.pxToRem(20),
-  margin: "0 -8px"
-}, t.size === "small" && {
-  fontSize: a.typography.pxToRem(18)
-}, t.size === "large" && {
-  fontSize: a.typography.pxToRem(22)
-})), F = /* @__PURE__ */ g.forwardRef(function(t, e) {
-  const n = Q({
-    props: t,
+  overridesResolver: (t, a) => a.icon
+})(F(({
+  theme: t
+}) => ({
+  fontSize: t.typography.pxToRem(20),
+  margin: "0 -8px",
+  variants: [{
+    props: {
+      size: "small"
+    },
+    style: {
+      fontSize: t.typography.pxToRem(18)
+    }
+  }, {
+    props: {
+      size: "large"
+    },
+    style: {
+      fontSize: t.typography.pxToRem(22)
+    }
+  }]
+}))), U = /* @__PURE__ */ c.forwardRef(function(a, o) {
+  const n = Y({
+    props: a,
     name: "MuiPaginationItem"
   }), {
     className: v,
     color: p = "standard",
     component: f,
-    components: r = {},
-    disabled: b = !1,
-    page: m,
-    selected: O = !1,
-    shape: B = "circular",
-    size: h = "medium",
-    slots: d = {},
-    type: i = "page",
-    variant: w = "text"
-  } = n, $ = A(n, pa), y = l({}, n, {
+    components: b = {},
+    disabled: y = !1,
+    page: P,
+    selected: L = !1,
+    shape: z = "circular",
+    size: C = "medium",
+    slots: w = {},
+    slotProps: d = {},
+    type: u = "page",
+    variant: O = "text",
+    ...$
+  } = n, g = {
+    ...n,
     color: p,
-    disabled: b,
-    selected: O,
-    shape: B,
-    size: h,
-    type: i,
-    variant: w
-  }), k = sa(), x = ua(y), L = (k ? {
-    previous: d.next || r.next || q,
-    next: d.previous || r.previous || H,
-    last: d.first || r.first || D,
-    first: d.last || r.last || G
-  } : {
-    previous: d.previous || r.previous || H,
-    next: d.next || r.next || q,
-    first: d.first || r.first || D,
-    last: d.last || r.last || G
-  })[i];
-  return i === "start-ellipsis" || i === "end-ellipsis" ? /* @__PURE__ */ c(ga, {
-    ref: e,
-    ownerState: y,
-    className: j(x.root, v),
+    disabled: y,
+    selected: L,
+    shape: z,
+    size: C,
+    type: u,
+    variant: O
+  }, M = rt(), m = ft(g), x = {
+    slots: {
+      previous: w.previous ?? b.previous,
+      next: w.next ?? b.next,
+      first: w.first ?? b.first,
+      last: w.last ?? b.last
+    },
+    slotProps: d
+  }, [N, h] = j("previous", {
+    elementType: gt,
+    externalForwardedProps: x,
+    ownerState: g
+  }), [k, s] = j("next", {
+    elementType: vt,
+    externalForwardedProps: x,
+    ownerState: g
+  }), [r, I] = j("first", {
+    elementType: dt,
+    externalForwardedProps: x,
+    ownerState: g
+  }), [V, W] = j("last", {
+    elementType: ut,
+    externalForwardedProps: x,
+    ownerState: g
+  }), D = M ? {
+    previous: "next",
+    next: "previous",
+    first: "last",
+    last: "first"
+  }[u] : u, G = {
+    previous: N,
+    next: k,
+    first: r,
+    last: V
+  }[D], at = {
+    previous: h,
+    next: s,
+    first: I,
+    last: W
+  }[D];
+  return u === "start-ellipsis" || u === "end-ellipsis" ? /* @__PURE__ */ l(bt, {
+    ref: o,
+    ownerState: g,
+    className: A(m.root, v),
     children: "…"
-  }) : /* @__PURE__ */ oa(va, l({
-    ref: e,
-    ownerState: y,
+  }) : /* @__PURE__ */ ot(yt, {
+    ref: o,
+    ownerState: g,
     component: f,
-    disabled: b,
-    className: j(x.root, v)
-  }, $, {
-    children: [i === "page" && m, L ? /* @__PURE__ */ c(fa, {
-      as: L,
-      ownerState: y,
-      className: x.icon
+    disabled: y,
+    className: A(m.root, v),
+    ...$,
+    children: [u === "page" && P, G ? /* @__PURE__ */ l(xt, {
+      ...at,
+      className: m.icon,
+      as: G
     }) : null]
-  }));
+  });
 });
-process.env.NODE_ENV !== "production" && (F.propTypes = {
+process.env.NODE_ENV !== "production" && (U.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -359,27 +455,27 @@ process.env.NODE_ENV !== "production" && (F.propTypes = {
   /**
    * @ignore
    */
-  children: o.node,
+  children: e.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: o.object,
+  classes: e.object,
   /**
    * @ignore
    */
-  className: o.string,
+  className: e.string,
   /**
    * The active color.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'standard'
    */
-  color: o.oneOfType([o.oneOf(["primary", "secondary", "standard"]), o.string]),
+  color: e.oneOfType([e.oneOf(["primary", "secondary", "standard"]), e.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: o.elementType,
+  component: e.elementType,
   /**
    * The components used for each slot inside.
    *
@@ -387,87 +483,95 @@ process.env.NODE_ENV !== "production" && (F.propTypes = {
    * It's recommended to use the `slots` prop instead.
    *
    * @default {}
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  components: o.shape({
-    first: o.elementType,
-    last: o.elementType,
-    next: o.elementType,
-    previous: o.elementType
+  components: e.shape({
+    first: e.elementType,
+    last: e.elementType,
+    next: e.elementType,
+    previous: e.elementType
   }),
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: o.bool,
+  disabled: e.bool,
   /**
    * The current page number.
    */
-  page: o.node,
+  page: e.node,
   /**
    * If `true` the pagination item is selected.
    * @default false
    */
-  selected: o.bool,
+  selected: e.bool,
   /**
    * The shape of the pagination item.
    * @default 'circular'
    */
-  shape: o.oneOf(["circular", "rounded"]),
+  shape: e.oneOf(["circular", "rounded"]),
   /**
    * The size of the component.
    * @default 'medium'
    */
-  size: o.oneOfType([o.oneOf(["small", "medium", "large"]), o.string]),
+  size: e.oneOfType([e.oneOf(["small", "medium", "large"]), e.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: e.shape({
+    first: e.oneOfType([e.func, e.object]),
+    last: e.oneOfType([e.func, e.object]),
+    next: e.oneOfType([e.func, e.object]),
+    previous: e.oneOfType([e.func, e.object])
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
-  slots: o.shape({
-    first: o.elementType,
-    last: o.elementType,
-    next: o.elementType,
-    previous: o.elementType
+  slots: e.shape({
+    first: e.elementType,
+    last: e.elementType,
+    next: e.elementType,
+    previous: e.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
   /**
    * The type of pagination item.
    * @default 'page'
    */
-  type: o.oneOf(["end-ellipsis", "first", "last", "next", "page", "previous", "start-ellipsis"]),
+  type: e.oneOf(["end-ellipsis", "first", "last", "next", "page", "previous", "start-ellipsis"]),
   /**
    * The variant to use.
    * @default 'text'
    */
-  variant: o.oneOfType([o.oneOf(["outlined", "text"]), o.string])
+  variant: e.oneOfType([e.oneOf(["outlined", "text"]), e.string])
 });
-const ba = ["boundaryCount", "className", "color", "count", "defaultPage", "disabled", "getItemAriaLabel", "hideNextButton", "hidePrevButton", "onChange", "page", "renderItem", "shape", "showFirstButton", "showLastButton", "siblingCount", "size", "variant"], ya = (a) => {
+const mt = (t) => {
   const {
-    classes: t,
-    variant: e
-  } = a;
-  return X({
-    root: ["root", e],
+    classes: a,
+    variant: o
+  } = t;
+  return Z({
+    root: ["root", o],
     ul: ["ul"]
-  }, ra, t);
-}, xa = E("nav", {
+  }, lt, a);
+}, Pt = R("nav", {
   name: "MuiPagination",
   slot: "Root",
-  overridesResolver: (a, t) => {
+  overridesResolver: (t, a) => {
     const {
-      ownerState: e
-    } = a;
-    return [t.root, t[e.variant]];
+      ownerState: o
+    } = t;
+    return [a.root, a[o.variant]];
   }
-})({}), ma = E("ul", {
+})({}), Ct = R("ul", {
   name: "MuiPagination",
   slot: "Ul",
-  overridesResolver: (a, t) => t.ul
+  overridesResolver: (t, a) => a.ul
 })({
   display: "flex",
   flexWrap: "wrap",
@@ -476,73 +580,81 @@ const ba = ["boundaryCount", "className", "color", "count", "defaultPage", "disa
   margin: 0,
   listStyle: "none"
 });
-function ha(a, t, e) {
-  return a === "page" ? `${e ? "" : "Go to "}page ${t}` : `Go to ${a} page`;
+function wt(t, a, o) {
+  return t === "page" ? `${o ? "" : "Go to "}page ${a}` : `Go to ${t} page`;
 }
-const Z = /* @__PURE__ */ g.forwardRef(function(t, e) {
-  const n = Q({
-    props: t,
+const et = /* @__PURE__ */ c.forwardRef(function(a, o) {
+  const n = Y({
+    props: a,
     name: "MuiPagination"
   }), {
     boundaryCount: v = 1,
     className: p,
     color: f = "standard",
-    count: r = 1,
-    defaultPage: b = 1,
-    disabled: m = !1,
-    getItemAriaLabel: O = ha,
-    hideNextButton: B = !1,
-    hidePrevButton: h = !1,
-    renderItem: d = (P) => /* @__PURE__ */ c(F, l({}, P)),
-    shape: i = "circular",
-    showFirstButton: w = !1,
-    showLastButton: $ = !1,
-    siblingCount: y = 1,
-    size: k = "medium",
-    variant: x = "text"
-  } = n, I = A(n, ba), {
-    items: L
-  } = ca(l({}, n, {
+    count: b = 1,
+    defaultPage: y = 1,
+    disabled: P = !1,
+    getItemAriaLabel: L = wt,
+    hideNextButton: z = !1,
+    hidePrevButton: C = !1,
+    onChange: w,
+    page: d,
+    renderItem: u = (r) => /* @__PURE__ */ l(U, {
+      ...r
+    }),
+    shape: O = "circular",
+    showFirstButton: $ = !1,
+    showLastButton: g = !1,
+    siblingCount: M = 1,
+    size: m = "medium",
+    variant: x = "text",
+    ...N
+  } = n, {
+    items: h
+  } = pt({
+    ...n,
     componentName: "Pagination"
-  })), M = l({}, n, {
+  }), k = {
+    ...n,
     boundaryCount: v,
     color: f,
-    count: r,
-    defaultPage: b,
-    disabled: m,
-    getItemAriaLabel: O,
-    hideNextButton: B,
-    hidePrevButton: h,
-    renderItem: d,
-    shape: i,
-    showFirstButton: w,
-    showLastButton: $,
-    siblingCount: y,
-    size: k,
+    count: b,
+    defaultPage: y,
+    disabled: P,
+    getItemAriaLabel: L,
+    hideNextButton: z,
+    hidePrevButton: C,
+    renderItem: u,
+    shape: O,
+    showFirstButton: $,
+    showLastButton: g,
+    siblingCount: M,
+    size: m,
     variant: x
-  }), T = ya(M);
-  return /* @__PURE__ */ c(xa, l({
+  }, s = mt(k);
+  return /* @__PURE__ */ l(Pt, {
     "aria-label": "pagination navigation",
-    className: j(T.root, p),
-    ownerState: M,
-    ref: e
-  }, I, {
-    children: /* @__PURE__ */ c(ma, {
-      className: T.ul,
-      ownerState: M,
-      children: L.map((P, s) => /* @__PURE__ */ c("li", {
-        children: d(l({}, P, {
+    className: A(s.root, p),
+    ownerState: k,
+    ref: o,
+    ...N,
+    children: /* @__PURE__ */ l(Ct, {
+      className: s.ul,
+      ownerState: k,
+      children: h.map((r, I) => /* @__PURE__ */ l("li", {
+        children: u({
+          ...r,
           color: f,
-          "aria-label": O(P.type, P.page, P.selected),
-          shape: i,
-          size: k,
+          "aria-label": L(r.type, r.page, r.selected),
+          shape: O,
+          size: m,
           variant: x
-        }))
-      }, s))
+        })
+      }, I))
     })
-  }));
+  });
 });
-process.env.NODE_ENV !== "production" && (Z.propTypes = {
+process.env.NODE_ENV !== "production" && (et.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -551,135 +663,135 @@ process.env.NODE_ENV !== "production" && (Z.propTypes = {
    * Number of always visible pages at the beginning and end.
    * @default 1
    */
-  boundaryCount: R,
+  boundaryCount: B,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: o.object,
+  classes: e.object,
   /**
    * @ignore
    */
-  className: o.string,
+  className: e.string,
   /**
    * The active color.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'standard'
    */
-  color: o.oneOfType([o.oneOf(["primary", "secondary", "standard"]), o.string]),
+  color: e.oneOfType([e.oneOf(["primary", "secondary", "standard"]), e.string]),
   /**
    * The total number of pages.
    * @default 1
    */
-  count: R,
+  count: B,
   /**
    * The page selected by default when the component is uncontrolled.
    * @default 1
    */
-  defaultPage: R,
+  defaultPage: B,
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: o.bool,
+  disabled: e.bool,
   /**
    * Accepts a function which returns a string value that provides a user-friendly name for the current page.
    * This is important for screen reader users.
    *
-   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
    * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.
-   * @param {number} page The page number to format.
-   * @param {bool} selected If true, the current page is selected.
+   * @param {number | null} page The page number to format.
+   * @param {boolean} selected If true, the current page is selected.
    * @returns {string}
    */
-  getItemAriaLabel: o.func,
+  getItemAriaLabel: e.func,
   /**
    * If `true`, hide the next-page button.
    * @default false
    */
-  hideNextButton: o.bool,
+  hideNextButton: e.bool,
   /**
    * If `true`, hide the previous-page button.
    * @default false
    */
-  hidePrevButton: o.bool,
+  hidePrevButton: e.bool,
   /**
    * Callback fired when the page is changed.
    *
    * @param {React.ChangeEvent<unknown>} event The event source of the callback.
    * @param {number} page The page selected.
    */
-  onChange: o.func,
+  onChange: e.func,
   /**
    * The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
    */
-  page: R,
+  page: B,
   /**
    * Render the item.
    * @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.
    * @returns {ReactNode}
    * @default (item) => <PaginationItem {...item} />
    */
-  renderItem: o.func,
+  renderItem: e.func,
   /**
    * The shape of the pagination items.
    * @default 'circular'
    */
-  shape: o.oneOf(["circular", "rounded"]),
+  shape: e.oneOf(["circular", "rounded"]),
   /**
    * If `true`, show the first-page button.
    * @default false
    */
-  showFirstButton: o.bool,
+  showFirstButton: e.bool,
   /**
    * If `true`, show the last-page button.
    * @default false
    */
-  showLastButton: o.bool,
+  showLastButton: e.bool,
   /**
    * Number of always visible pages before and after the current page.
    * @default 1
    */
-  siblingCount: R,
+  siblingCount: B,
   /**
    * The size of the component.
    * @default 'medium'
    */
-  size: o.oneOfType([o.oneOf(["small", "medium", "large"]), o.string]),
+  size: e.oneOfType([e.oneOf(["small", "medium", "large"]), e.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
   /**
    * The variant to use.
    * @default 'text'
    */
-  variant: o.oneOfType([o.oneOf(["outlined", "text"]), o.string])
+  variant: e.oneOfType([e.oneOf(["outlined", "text"]), e.string])
 });
-function Pa({
-  isRtl: a,
-  pageCount: t,
-  page: e,
+function Ot({
+  isRtl: t,
+  pageCount: a,
+  page: o,
   onPageChange: n,
   className: v
 }) {
-  return /* @__PURE__ */ c(
-    Z,
+  return /* @__PURE__ */ l(
+    et,
     {
       showFirstButton: !0,
       showLastButton: !0,
       className: v,
-      count: t,
-      page: e + 1,
+      count: a,
+      page: o + 1,
       onChange: (p, f) => {
         n(p, f - 1);
       },
       boundaryCount: 0,
       siblingCount: 1,
-      renderItem: (p) => /* @__PURE__ */ c(
-        F,
+      renderItem: (p) => /* @__PURE__ */ l(
+        U,
         {
-          slots: { previous: a ? U : V, next: a ? V : U, first: a ? _ : S, last: a ? S : _ },
+          slots: { previous: t ? J : K, next: t ? K : J, first: t ? q : H, last: t ? H : q },
           ...p
         }
       ),
@@ -699,10 +811,10 @@ function Pa({
     }
   );
 }
-function wa({ isRtl: a, pageCount: t }) {
-  return /* @__PURE__ */ c(ea, { ActionsComponent: (e) => /* @__PURE__ */ c(Pa, { isRtl: a, pageCount: t, ...e }) });
+function Mt({ isRtl: t, pageCount: a }) {
+  return /* @__PURE__ */ l(nt, { ActionsComponent: (o) => /* @__PURE__ */ l(Ot, { isRtl: t, pageCount: a, ...o }) });
 }
 export {
-  wa as CustomPagination,
-  Pa as Pagination
+  Mt as CustomPagination,
+  Ot as Pagination
 };