@infonomic/uikit 5.44.0 → 6.0.0

package/dist/components/notifications/toast_module.css

@@ -1,6 +1,64 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
+  :is(.viewport-x4CvHl, .infonomic-toast-viewport) {
+    --viewport-padding: 16px;
+    z-index: var(--z-index-toast);
+    outline: none;
+    flex-direction: column;
+    gap: 8px;
+    display: flex;
+    position: fixed;
+  }
+
+  :is(.top-left-dy_IMc, .infonomic-toast-top-left), :is(.top-right-OsKbVb, .infonomic-toast-top-right) {
+    top: 88px;
+    right: var(--viewport-padding);
+    left: var(--viewport-padding);
+  }
+
+  :is(.bottom-left-_RdEZn, .infonomic-toast-bottom-left), :is(.bottom-right-Nzuhur, .infonomic-toast-bottom-right) {
+    bottom: var(--viewport-padding);
+    right: var(--viewport-padding);
+    left: var(--viewport-padding);
+  }
+
+  @media (min-width: 48rem) {
+    :is(.bottom-right-Nzuhur, .infonomic-toast-bottom-right) {
+      bottom: var(--viewport-padding);
+      right: var(--viewport-padding);
+      width: 100%;
+      max-width: 390px;
+      left: auto;
+    }
+
+    :is(.bottom-left-_RdEZn, .infonomic-toast-bottom-left) {
+      bottom: var(--viewport-padding);
+      left: var(--viewport-padding);
+      width: 100%;
+      max-width: 390px;
+      right: auto;
+    }
+
+    :is(.top-left-dy_IMc, .infonomic-toast-top-left) {
+      top: 88px;
+      left: var(--viewport-padding);
+      width: 100%;
+      max-width: 390px;
+      bottom: auto;
+      right: auto;
+    }
+
+    :is(.top-right-OsKbVb, .infonomic-toast-top-right) {
+      top: 88px;
+      right: var(--viewport-padding);
+      width: 100%;
+      max-width: 390px;
+      bottom: auto;
+      left: auto;
+    }
+  }
+
   :is(.root-dWN7jD, .infonomic-toast-root) {
     gap: var(--gap-1);
     background: var(--gray-25);
@@ -9,73 +67,96 @@
     border-style: var(--border-style-solid);
     border-radius: var(--border-radius-md);
     box-shadow: var(--shadow-sm);
+    transform: translateX(var(--toast-swipe-movement-x, 0)) translateY(var(--toast-swipe-movement-y, 0));
     flex-direction: column;
     padding-top: 12px;
     padding-bottom: 16px;
+    transition: transform .2s ease-out, opacity .15s ease-in;
     display: flex;
-    position: fixed;
   }
 
   :is(:is(.dark, [data-theme="dark"]) .root-dWN7jD, :is(.dark, [data-theme="dark"]) .infonomic-toast-root) {
     background: var(--canvas-800);
   }
 
-  .root-dWN7jD[data-state="open"] {
-    animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromBottom-O94u9U;
+  .root-dWN7jD[data-starting-style] {
+    opacity: 0;
+    transform: translateY(calc(100% + var(--viewport-padding)));
   }
 
-  .infonomic-toast-root[data-state="open"] {
-    animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromBottom-O94u9U;
+  .infonomic-toast-root[data-starting-style] {
+    opacity: 0;
+    transform: translateY(calc(100% + var(--viewport-padding)));
   }
 
-  .root-dWN7jD[data-state="closed"] {
-    animation: .1s ease-in hide-vlOoW0;
-  }
+  @media (min-width: 48rem) {
+    .viewport-x4CvHl.top-right-OsKbVb .root-dWN7jD[data-starting-style], .viewport-x4CvHl.bottom-right-Nzuhur .root-dWN7jD[data-starting-style] {
+      opacity: 0;
+      transform: translateX(calc(100% + var(--viewport-padding)));
+    }
 
-  .infonomic-toast-root[data-state="closed"] {
-    animation: .1s ease-in hide-vlOoW0;
-  }
+    .infonomic-toast-viewport.top-right .infonomic-toast-root[data-starting-style] {
+      opacity: 0;
+      transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+
+    .infonomic-toast-viewport.bottom-right .infonomic-toast-root[data-starting-style] {
+      opacity: 0;
+      transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+
+    .viewport-x4CvHl.top-left-dy_IMc .root-dWN7jD[data-starting-style], .viewport-x4CvHl.bottom-left-_RdEZn .root-dWN7jD[data-starting-style] {
+      opacity: 0;
+      transform: translateX(calc(-100% - var(--viewport-padding)));
+    }
 
-  .root-dWN7jD[data-swipe="move"] {
-    transform: translateX(var(--radix-toast-swipe-move-x));
+    .infonomic-toast-viewport.top-left .infonomic-toast-root[data-starting-style] {
+      opacity: 0;
+      transform: translateX(calc(-100% - var(--viewport-padding)));
+    }
+
+    .infonomic-toast-viewport.bottom-left .infonomic-toast-root[data-starting-style] {
+      opacity: 0;
+      transform: translateX(calc(-100% - var(--viewport-padding)));
+    }
   }
 
-  .infonomic-toast-root[data-swipe="move"] {
-    transform: translateX(var(--radix-toast-swipe-move-x));
+  .root-dWN7jD[data-ending-style] {
+    opacity: 0;
   }
 
-  .root-dWN7jD[data-swipe="cancel"] {
-    transition: transform .2s ease-out;
-    transform: translateX(0);
+  .infonomic-toast-root[data-ending-style] {
+    opacity: 0;
   }
 
-  .infonomic-toast-root[data-swipe="cancel"] {
-    transition: transform .2s ease-out;
-    transform: translateX(0);
+  .root-dWN7jD[data-ending-style][data-swipe-direction="right"] {
+    transform: translateX(calc(var(--toast-swipe-movement-x, 0) + 100% + var(--viewport-padding)));
   }
 
-  .root-dWN7jD.top-right-OsKbVb[data-swipe="end"], .root-dWN7jD.bottom-right-Nzuhur[data-swipe="end"] {
-    animation: .1s ease-out swipeOutToRight-FWaeVx;
+  .infonomic-toast-root[data-ending-style][data-swipe-direction="right"] {
+    transform: translateX(calc(var(--toast-swipe-movement-x, 0) + 100% + var(--viewport-padding)));
   }
 
-  .infonomic-toast-root.top-right[data-swipe="end"] {
-    animation: .1s ease-out swipeOutToRight-FWaeVx;
+  .root-dWN7jD[data-ending-style][data-swipe-direction="left"] {
+    transform: translateX(calc(var(--toast-swipe-movement-x, 0) - 100% - var(--viewport-padding)));
   }
 
-  .infonomic-toast-root.bottom-right[data-swipe="end"] {
-    animation: .1s ease-out swipeOutToRight-FWaeVx;
+  .infonomic-toast-root[data-ending-style][data-swipe-direction="left"] {
+    transform: translateX(calc(var(--toast-swipe-movement-x, 0) - 100% - var(--viewport-padding)));
   }
 
-  .root-dWN7jD.top-left-dy_IMc[data-swipe="end"], .root-dWN7jD.bottom-left-_RdEZn[data-swipe="end"] {
-    animation: .1s ease-out swipeOutToLeft-OI9y6O;
+  .root-dWN7jD[data-ending-style][data-swipe-direction="down"] {
+    transform: translateY(calc(var(--toast-swipe-movement-y, 0) + 150%));
   }
 
-  .infonomic-toast-root.top-left[data-swipe="end"] {
-    animation: .1s ease-out swipeOutToLeft-OI9y6O;
+  .infonomic-toast-root[data-ending-style][data-swipe-direction="down"] {
+    transform: translateY(calc(var(--toast-swipe-movement-y, 0) + 150%));
   }
 
-  .infonomic-toast-root.bottom-left[data-swipe="end"] {
-    animation: .1s ease-out swipeOutToLeft-OI9y6O;
+  :is(.content-o83ZAp, .infonomic-toast-content) {
+    gap: var(--gap-1);
+    flex-direction: column;
+    display: flex;
   }
 
   :is(.header-ItoxDs, .infonomic-toast-header) {
@@ -130,131 +211,5 @@
     padding: 0 12px;
     display: flex;
   }
-
-  :is(.top-left-dy_IMc, .infonomic-toast-top-left), :is(.top-right-OsKbVb, .infonomic-toast-top-right) {
-    top: 88px;
-    left: 16px;
-    right: 16px;
-  }
-
-  :is(.bottom-left-_RdEZn, .infonomic-toast-bottom-left), :is(.bottom-right-Nzuhur, .infonomic-toast-bottom-right) {
-    bottom: 16px;
-    left: 16px;
-    right: 16px;
-  }
-
-  @media (min-width: 48rem) {
-    .root-dWN7jD.top-right-OsKbVb[data-state="open"], .root-dWN7jD.bottom-right-Nzuhur[data-state="open"] {
-      animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromRight-G4Hu_M;
-    }
-
-    .infonomic-toast-root.top-right[data-state="open"] {
-      animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromRight-G4Hu_M;
-    }
-
-    .infonomic-toast-root.bottom-right[data-state="open"] {
-      animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromRight-G4Hu_M;
-    }
-
-    .root-dWN7jD.top-left-dy_IMc[data-state="open"], .root-dWN7jD.bottom-left-_RdEZn[data-state="open"] {
-      animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromLeft-m703fy;
-    }
-
-    .infonomic-toast-root.top-left[data-state="open"] {
-      animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromLeft-m703fy;
-    }
-
-    .infonomic-toast-root.bottom-left[data-state="open"] {
-      animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromLeft-m703fy;
-    }
-
-    :is(.bottom-right-Nzuhur, .infonomic-toast-bottom-right) {
-      width: 100%;
-      max-width: 390px;
-      bottom: 16px;
-      left: auto;
-      right: 16px;
-    }
-
-    :is(.bottom-left-_RdEZn, .infonomic-toast-bottom-left) {
-      width: 100%;
-      max-width: 390px;
-      bottom: 16px;
-      left: 16px;
-      right: auto;
-    }
-
-    :is(.top-left-dy_IMc, .infonomic-toast-top-left) {
-      width: 100%;
-      max-width: 390px;
-      inset: 88px auto auto 16px;
-    }
-
-    :is(.top-right-OsKbVb, .infonomic-toast-top-right) {
-      width: 100%;
-      max-width: 390px;
-      inset: 88px 16px auto auto;
-    }
-  }
-
-  @keyframes slideInFromRight-G4Hu_M {
-    from {
-      transform: translateX(calc(100% + var(--viewport-padding)));
-    }
-
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slideInFromLeft-m703fy {
-    from {
-      transform: translateX(calc(-100% - var(--viewport-padding)));
-    }
-
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slideInFromBottom-O94u9U {
-    from {
-      transform: translateY(calc(100% + var(--viewport-padding)));
-    }
-
-    to {
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes swipeOutToRight-FWaeVx {
-    from {
-      transform: translateX(var(--radix-toast-swipe-end-x));
-    }
-
-    to {
-      transform: translateX(calc(100% + var(--viewport-padding)));
-    }
-  }
-
-  @keyframes swipeOutToLeft-OI9y6O {
-    from {
-      transform: translateX(var(--radix-toast-swipe-end-x));
-    }
-
-    to {
-      transform: translateX(calc(-100% - var(--viewport-padding)));
-    }
-  }
-
-  @keyframes hide-vlOoW0 {
-    from {
-      opacity: 1;
-    }
-
-    to {
-      opacity: 0;
-    }
-  }
 }
 

package/dist/components/pager/first-button.d.ts

@@ -1,7 +1,7 @@
-import type React from 'react';
+import React from 'react';
 import type { PagerButtonProps, RefType } from './pagination';
 export declare const FirstButton: {
-    ({ ref, className, disabled, asChild, children, ...rest }: PagerButtonProps & {
+    ({ ref, className, disabled, render, children, ...rest }: PagerButtonProps & {
         ref?: React.RefObject<RefType>;
     }): React.JSX.Element;
     displayName: string;

package/dist/components/pager/first-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"first-button.d.ts","sourceRoot":"","sources":["../../../src/components/pager/first-button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE7D,eAAO,MAAM,WAAW;+DAOrB,gBAAgB,GAAG;QACpB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;KAC/B;;CA4BA,CAAA"}
+{"version":3,"file":"first-button.d.ts","sourceRoot":"","sources":["../../../src/components/pager/first-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE7D,eAAO,MAAM,WAAW;8DAOrB,gBAAgB,GAAG;QACpB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;KAC/B;;CA6BA,CAAA"}

package/dist/components/pager/first-button.js

@@ -1,29 +1,36 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { DoubleArrowLeftIcon } from "@radix-ui/react-icons";
-import { Slot } from "@radix-ui/react-slot";
+import react from "react";
 import classnames from "classnames";
+import { ChevronLeftDoubleIcon } from "../../icons/chevron-left-double-icon.js";
 import { usePager } from "./pagination.js";
 import pagination_module from "./pagination.module.js";
-const FirstButton = ({ ref, className, disabled, asChild, children, ...rest })=>{
+const FirstButton = ({ ref, className, disabled, render, children, ...rest })=>{
     const { variant } = usePager();
-    const Comp = null != asChild ? Slot : 'button';
-    const aria = disabled ? {
-        'aria-disabled': true
-    } : {
-        'aria-label': 'First'
+    const sharedProps = {
+        className: classnames(pagination_module["first-button"], pagination_module[variant], pagination_module["rounded-left"], 'pagination-first', className),
+        disabled,
+        'data-testid': 'pagination-first',
+        title: 'First',
+        ...disabled ? {
+            'aria-disabled': true
+        } : {
+            'aria-label': 'First'
+        },
+        ...rest
     };
     return /*#__PURE__*/ jsx("li", {
         className: pagination_module["mobile-toggle"],
-        children: /*#__PURE__*/ jsx(Comp, {
+        children: render ? /*#__PURE__*/ react.cloneElement(render, {
+            ref,
+            ...sharedProps
+        }, children) : /*#__PURE__*/ jsx("button", {
             ref: ref,
-            className: classnames(pagination_module["first-button"], pagination_module[variant], pagination_module["rounded-left"], 'pagination-first', className),
-            disabled: disabled,
-            "data-testid": "pagination-first",
-            title: "First",
-            ...aria,
-            ...rest,
-            children: asChild ?? false ? children : /*#__PURE__*/ jsx(DoubleArrowLeftIcon, {})
+            ...sharedProps,
+            children: children ?? /*#__PURE__*/ jsx(ChevronLeftDoubleIcon, {
+                width: "18px",
+                height: "18px"
+            })
         })
     });
 };

package/dist/components/pager/last-button.d.ts

@@ -1,10 +1,10 @@
-import type React from 'react';
+import React from 'react';
 import type { PagerButtonProps, RefType } from './pagination';
 export type LastButtonProps = PagerButtonProps & {
     count: number;
 };
 export declare const LastButton: {
-    ({ ref, className, disabled, count, asChild, children, ...rest }: LastButtonProps & {
+    ({ ref, className, disabled, count, render, children, ...rest }: LastButtonProps & {
         ref?: React.RefObject<RefType>;
     }): React.JSX.Element;
     displayName: string;

package/dist/components/pager/last-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"last-button.d.ts","sourceRoot":"","sources":["../../../src/components/pager/last-button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE7D,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,UAAU;sEAQpB,eAAe,GAAG;QACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;KAC/B;;CA2BA,CAAA"}
+{"version":3,"file":"last-button.d.ts","sourceRoot":"","sources":["../../../src/components/pager/last-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE7D,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,UAAU;qEAQpB,eAAe,GAAG;QACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;KAC/B;;CA6BA,CAAA"}

package/dist/components/pager/last-button.js

@@ -1,29 +1,36 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { DoubleArrowRightIcon } from "@radix-ui/react-icons";
-import { Slot } from "@radix-ui/react-slot";
+import react from "react";
 import classnames from "classnames";
+import { ChevronRightDoubleIcon } from "../../icons/chevron-right-double-icon.js";
 import { usePager } from "./pagination.js";
 import pagination_module from "./pagination.module.js";
-const LastButton = ({ ref, className, disabled, count, asChild, children, ...rest })=>{
+const LastButton = ({ ref, className, disabled, count, render, children, ...rest })=>{
     const { variant } = usePager();
-    const Comp = null != asChild ? Slot : 'button';
-    const aria = disabled ? {
-        'aria-disabled': true
-    } : {
-        'aria-label': 'Last'
+    const sharedProps = {
+        className: classnames(pagination_module["last-button"], pagination_module[variant], pagination_module["rounded-right"], 'pagination-last', className),
+        disabled,
+        title: 'Last',
+        'data-testid': 'pagination-last',
+        ...disabled ? {
+            'aria-disabled': true
+        } : {
+            'aria-label': 'Last'
+        },
+        ...rest
     };
     return /*#__PURE__*/ jsx("li", {
         className: pagination_module["mobile-toggle"],
-        children: /*#__PURE__*/ jsx(Comp, {
+        children: render ? /*#__PURE__*/ react.cloneElement(render, {
+            ref,
+            ...sharedProps
+        }, children) : /*#__PURE__*/ jsx("button", {
             ref: ref,
-            className: classnames(pagination_module["last-button"], pagination_module[variant], pagination_module["rounded-right"], 'pagination-last', className),
-            disabled: disabled,
-            title: "Last",
-            "data-testid": "pagination-last",
-            ...aria,
-            ...rest,
-            children: asChild ?? false ? children : /*#__PURE__*/ jsx(DoubleArrowRightIcon, {})
+            ...sharedProps,
+            children: children ?? /*#__PURE__*/ jsx(ChevronRightDoubleIcon, {
+                width: "18px",
+                height: "18px"
+            })
         })
     });
 };

package/dist/components/pager/next-button.d.ts

@@ -1,10 +1,10 @@
-import type React from 'react';
+import React from 'react';
 import type { PagerButtonProps, RefType } from './pagination';
 export type NextButtonProps = PagerButtonProps & {
     page: number | null;
 };
 export declare const NextButton: {
-    ({ ref, className, disabled, page, asChild, children, ...rest }: NextButtonProps & {
+    ({ ref, className, disabled, page, render, children, ...rest }: NextButtonProps & {
         ref?: React.RefObject<RefType>;
     }): React.JSX.Element;
     displayName: string;

package/dist/components/pager/next-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next-button.d.ts","sourceRoot":"","sources":["../../../src/components/pager/next-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE7D,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,UAAU;qEAQpB,eAAe,GAAG;QACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;KAC/B;;CA2BA,CAAA"}
+{"version":3,"file":"next-button.d.ts","sourceRoot":"","sources":["../../../src/components/pager/next-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE7D,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,UAAU;oEAQpB,eAAe,GAAG;QACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;KAC/B;;CA6BA,CAAA"}

package/dist/components/pager/next-button.js

@@ -1,33 +1,40 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { ChevronRightIcon } from "@radix-ui/react-icons";
-import { Slot } from "@radix-ui/react-slot";
+import react from "react";
 import classnames from "classnames";
+import { ChevronRightIcon } from "../../icons/chevron-right-icon.js";
 import { usePager } from "./pagination.js";
 import pagination_module from "./pagination.module.js";
-const NextButton = ({ ref, className, disabled, page, asChild, children, ...rest })=>{
-    const Comp = null != asChild ? Slot : 'button';
+const NextButton = ({ ref, className, disabled, page, render, children, ...rest })=>{
     const { variant, showLastButton } = usePager();
-    const aria = disabled ? {
-        'aria-disabled': true
-    } : {
-        'aria-label': 'Next'
+    const sharedProps = {
+        className: classnames(pagination_module["next-button"], [
+            pagination_module[variant]
+        ], {
+            [pagination_module["rounded-right"]]: null == showLastButton || false === showLastButton
+        }, 'pagination-next', className),
+        disabled,
+        title: 'Next',
+        'data-testid': 'pagination-next',
+        ...disabled ? {
+            'aria-disabled': true
+        } : {
+            'aria-label': 'Next'
+        },
+        ...rest
     };
     return /*#__PURE__*/ jsx("li", {
         className: pagination_module["mobile-toggle"],
-        children: /*#__PURE__*/ jsx(Comp, {
+        children: render ? /*#__PURE__*/ react.cloneElement(render, {
+            ref,
+            ...sharedProps
+        }, children) : /*#__PURE__*/ jsx("button", {
             ref: ref,
-            className: classnames(pagination_module["next-button"], [
-                pagination_module[variant]
-            ], {
-                [pagination_module["rounded-right"]]: null == showLastButton || false === showLastButton
-            }, 'pagination-next', className),
-            disabled: disabled,
-            title: "Next",
-            "data-testid": "pagination-next",
-            ...aria,
-            ...rest,
-            children: asChild ?? false ? children : /*#__PURE__*/ jsx(ChevronRightIcon, {})
+            ...sharedProps,
+            children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {
+                width: "18px",
+                height: "18px"
+            })
         })
     });
 };

package/dist/components/pager/number-button.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import React from 'react';
 import type { PagerButtonProps, RefType } from './pagination';
 export type NumberButtonProps = PagerButtonProps & {
     page: number | null;
@@ -6,7 +6,7 @@ export type NumberButtonProps = PagerButtonProps & {
     selected?: boolean;
 };
 export declare const NumberButton: {
-    ({ ref, page, className, disabled, activeClassName, asChild, children, ...rest }: NumberButtonProps & {
+    ({ ref, page, className, disabled, activeClassName, render, children, ...rest }: NumberButtonProps & {
         ref?: React.RefObject<RefType>;
     }): React.JSX.Element;
     displayName: string;

package/dist/components/pager/number-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-button.d.ts","sourceRoot":"","sources":["../../../src/components/pager/number-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE7D,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,GAAG;IACjD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,YAAY;sFAStB,iBAAiB,GAAG;QACrB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;KAC/B;;CAmDA,CAAA"}
+{"version":3,"file":"number-button.d.ts","sourceRoot":"","sources":["../../../src/components/pager/number-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE7D,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,GAAG;IACjD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,YAAY;qFAStB,iBAAiB,GAAG;QACrB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;KAC/B;;CAqDA,CAAA"}

package/dist/components/pager/number-button.js

@@ -1,38 +1,43 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
+import react from "react";
 import classnames from "classnames";
 import { useMediaQuery } from "../../hooks/use-media-query.js";
 import { usePager } from "./pagination.js";
 import pagination_module from "./pagination.module.js";
-const NumberButton = ({ ref, page, className, disabled, activeClassName, asChild, children, ...rest })=>{
+const NumberButton = ({ ref, page, className, disabled, activeClassName, render, children, ...rest })=>{
     const mobile = useMediaQuery('(max-width: 640px)');
     const { variant, currentPage, count, showFirstButton, showLastButton, hideNextButton, hidePrevButton } = usePager();
-    const Comp = null != asChild ? Slot : 'button';
     const active = page === currentPage;
+    const sharedProps = {
+        className: classnames(pagination_module["number-button"], [
+            pagination_module[variant]
+        ], {
+            [pagination_module.active]: true === active,
+            active: true === active
+        }, {
+            [pagination_module["rounded-left"]]: 1 === page && (!(showFirstButton ?? false) && (hidePrevButton ?? false) || mobile)
+        }, {
+            [pagination_module["rounded-right"]]: page === count && (!(showLastButton ?? false) && (hideNextButton ?? false) || mobile)
+        }, 'pagination-number', className),
+        'data-testid': classnames({
+            'pager-number-active': currentPage === page,
+            [`pager-number-${page}`]: currentPage !== page
+        }).length > 0 || void 0,
+        disabled,
+        'aria-current': currentPage === page,
+        'aria-label': currentPage === page ? `Current Page, Page ${page}` : `Page ${page}`,
+        ...rest
+    };
     return /*#__PURE__*/ jsx("li", {
         className: "flex",
-        children: /*#__PURE__*/ jsx(Comp, {
+        children: render ? /*#__PURE__*/ react.cloneElement(render, {
+            ref,
+            ...sharedProps
+        }, children) : /*#__PURE__*/ jsx("button", {
             ref: ref,
-            className: classnames(pagination_module["number-button"], [
-                pagination_module[variant]
-            ], {
-                [pagination_module.active]: true === active,
-                active: true === active
-            }, {
-                [pagination_module["rounded-left"]]: 1 === page && (!(showFirstButton ?? false) && (hidePrevButton ?? false) || mobile)
-            }, {
-                [pagination_module["rounded-right"]]: page === count && (!(showLastButton ?? false) && (hideNextButton ?? false) || mobile)
-            }, 'pagination-number', className),
-            "data-testid": classnames({
-                'pager-number-active': currentPage === page,
-                [`pager-number-${page}`]: currentPage !== page
-            }).length > 0 || void 0,
-            disabled: disabled,
-            "aria-current": currentPage === page,
-            "aria-label": currentPage === page ? `Current Page, Page ${page}` : `Page ${page}`,
-            ...rest,
-            children: asChild ?? false ? children : page
+            ...sharedProps,
+            children: children ?? page
         })
     });
 };