@koine/react 2.0.0-beta.5 → 2.0.0-beta.7

package/Forms/Toggle/Toggle.mjs

@@ -3,7 +3,8 @@
  *
  * About accessibility:
  * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
- */ import { useId } from "react";
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import styled from "styled-components";
 import { stateFocus } from "../../styles/styled";
 export const toggleBase = `
@@ -69,36 +70,54 @@ export const ToggleIndicatorFg = styled.svg`
   }
 `;
 export const ToggleIndicatorSquared = (props)=>{
-    return /*#__PURE__*/ React.createElement(ToggleIndicatorHolder, null, /*#__PURE__*/ React.createElement(ToggleIndicatorBgSquare, {
-        viewBox: "0 0 24 24"
-    }, /*#__PURE__*/ React.createElement("rect", {
-        width: "24",
-        height: "24"
-    })), /*#__PURE__*/ React.createElement(ToggleIndicatorFg, {
-        viewBox: "0 0 24 24"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-    })));
+    return /*#__PURE__*/ _jsxs(ToggleIndicatorHolder, {
+        children: [
+            /*#__PURE__*/ _jsx(ToggleIndicatorBgSquare, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ _jsx("rect", {
+                    width: "24",
+                    height: "24"
+                })
+            }),
+            /*#__PURE__*/ _jsx(ToggleIndicatorFg, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ _jsx("path", {
+                    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+                })
+            })
+        ]
+    });
 };
 export const ToggleIndicatorRounded = ({ r = 6 })=>{
     const id = useId();
-    return /*#__PURE__*/ React.createElement(ToggleIndicatorHolder, null, /*#__PURE__*/ React.createElement(ToggleIndicatorBgCircle, {
-        viewBox: "0 0 24 24"
-    }, /*#__PURE__*/ React.createElement("circle", {
-        cy: "12",
-        cx: "12",
-        r: "12",
-        id: `r_${id}`,
-        clipPath: `url(#c_${id})`
-    }), /*#__PURE__*/ React.createElement("clipPath", {
-        id: `c_${id}`
-    }, /*#__PURE__*/ React.createElement("use", {
-        xlinkHref: `#r_${id}`
-    }))), /*#__PURE__*/ React.createElement(ToggleIndicatorFg, {
-        viewBox: "0 0 24 24"
-    }, /*#__PURE__*/ React.createElement("circle", {
-        r: r,
-        cx: "12",
-        cy: "12"
-    })));
+    return /*#__PURE__*/ _jsxs(ToggleIndicatorHolder, {
+        children: [
+            /*#__PURE__*/ _jsxs(ToggleIndicatorBgCircle, {
+                viewBox: "0 0 24 24",
+                children: [
+                    /*#__PURE__*/ _jsx("circle", {
+                        cy: "12",
+                        cx: "12",
+                        r: "12",
+                        id: `r_${id}`,
+                        clipPath: `url(#c_${id})`
+                    }),
+                    /*#__PURE__*/ _jsx("clipPath", {
+                        id: `c_${id}`,
+                        children: /*#__PURE__*/ _jsx("use", {
+                            xlinkHref: `#r_${id}`
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(ToggleIndicatorFg, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ _jsx("circle", {
+                    r: r,
+                    cx: "12",
+                    cy: "12"
+                })
+            })
+        ]
+    });
 };

package/Forms/Toggle/useToggle.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "useToggle", {
         return useToggle;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _reacthookform = require("react-hook-form");
 const _styles = require("../styles");
@@ -101,21 +102,26 @@ function useToggle(props, ref) {
         idFalse,
         label
     ]);
-    const Inputs = (0, _react.useMemo)(()=>isRadio ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(_styles.InputInvisible, {
-            id: idFalse,
-            ...inputProps,
-            ...remainingInputProps,
-            onKeyDown: handleKeyDown,
-            type: "radio",
-            value: valueFalse
-        }), /*#__PURE__*/ React.createElement(_styles.InputInvisible, {
-            id: idTrue,
-            ...inputProps,
-            ...remainingInputProps,
-            onKeyDown: handleKeyDown,
-            type: "radio",
-            value: valueTrue
-        })) : /*#__PURE__*/ React.createElement(_styles.InputInvisible, {
+    const Inputs = (0, _react.useMemo)(()=>isRadio ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_styles.InputInvisible, {
+                    id: idFalse,
+                    ...inputProps,
+                    ...remainingInputProps,
+                    onKeyDown: handleKeyDown,
+                    type: "radio",
+                    value: valueFalse
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_styles.InputInvisible, {
+                    id: idTrue,
+                    ...inputProps,
+                    ...remainingInputProps,
+                    onKeyDown: handleKeyDown,
+                    type: "radio",
+                    value: valueTrue
+                })
+            ]
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_styles.InputInvisible, {
             id: id,
             type: "checkbox",
             ...inputProps,

package/Forms/Toggle/useToggle.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { useWatch } from "react-hook-form";
 import { InputInvisible } from "../styles";
@@ -119,21 +120,26 @@ import { InputInvisible } from "../styles";
         idFalse,
         label
     ]);
-    const Inputs = useMemo(()=>isRadio ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(InputInvisible, {
-            id: idFalse,
-            ...inputProps,
-            ...remainingInputProps,
-            onKeyDown: handleKeyDown,
-            type: "radio",
-            value: valueFalse
-        }), /*#__PURE__*/ React.createElement(InputInvisible, {
-            id: idTrue,
-            ...inputProps,
-            ...remainingInputProps,
-            onKeyDown: handleKeyDown,
-            type: "radio",
-            value: valueTrue
-        })) : /*#__PURE__*/ React.createElement(InputInvisible, {
+    const Inputs = useMemo(()=>isRadio ? /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(InputInvisible, {
+                    id: idFalse,
+                    ...inputProps,
+                    ...remainingInputProps,
+                    onKeyDown: handleKeyDown,
+                    type: "radio",
+                    value: valueFalse
+                }),
+                /*#__PURE__*/ _jsx(InputInvisible, {
+                    id: idTrue,
+                    ...inputProps,
+                    ...remainingInputProps,
+                    onKeyDown: handleKeyDown,
+                    type: "radio",
+                    value: valueTrue
+                })
+            ]
+        }) : /*#__PURE__*/ _jsx(InputInvisible, {
             id: id,
             type: "checkbox",
             ...inputProps,

package/Forms/styles.d.ts

@@ -1,10 +1,6 @@
-export declare const InputInvisible: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputHoneypot: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
-    type: "text";
-    autoComplete: "new-password";
-    tabIndex: -1;
-}, "tabIndex" | "type" | "autoComplete">;
-export declare const InputProgress: import("styled-components").StyledComponent<(p: any) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const InputInvisible: any;
+export declare const InputHoneypot: any;
+export declare const InputProgress: any;
 /**
  * Remove the default light blue background on autofilled inputs. To be used as
  * a function that outputs a CSS string.

package/Forms/styles.js

@@ -38,6 +38,7 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const _ProgressLinear = require("../Progress/ProgressLinear");
 const _styled = require("../styles/styled");
@@ -49,7 +50,7 @@ const InputHoneypot = (0, _styledcomponents.default)(InputInvisible).attrs({
     autoComplete: "new-password",
     tabIndex: -1
 })``;
-const InputProgress = (0, _styledcomponents.default)((p)=>/*#__PURE__*/ React.createElement(_ProgressLinear.ProgressLinear, {
+const InputProgress = (0, _styledcomponents.default)((p)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressLinear.ProgressLinear, {
         fg: "var(--accent300)",
         bg: "var(--accent400)",
         ...p

package/Forms/styles.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { ProgressLinear } from "../Progress/ProgressLinear";
 import { invisible, stateFocus } from "../styles/styled";
@@ -9,7 +10,7 @@ export const InputHoneypot = styled(InputInvisible).attrs({
     autoComplete: "new-password",
     tabIndex: -1
 })``;
-export const InputProgress = styled((p)=>/*#__PURE__*/ React.createElement(ProgressLinear, {
+export const InputProgress = styled((p)=>/*#__PURE__*/ _jsx(ProgressLinear, {
         fg: "var(--accent300)",
         bg: "var(--accent400)",
         ...p

package/Grid/Grid.d.ts

@@ -13,20 +13,11 @@ export type ContainerProps = React.PropsWithChildren<GridProps & {
     size: Breakpoint;
     clamp?: boolean;
 }>;
-export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    size: Breakpoint;
-    clamp?: boolean | undefined;
-} & {
-    children?: import("react").ReactNode;
-}, never>;
+export declare const Container: any;
 export type ContainerFluidProps = React.PropsWithChildren<GridProps & {
     size: Breakpoint;
 }>;
-export declare const ContainerFluid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    size: Breakpoint;
-} & {
-    children?: import("react").ReactNode;
-}, never>;
+export declare const ContainerFluid: any;
 type Direction = "min" | "max";
 export type RowProps = GridProps & {
     $valign?: CSSProperties["alignItems"];
@@ -38,16 +29,7 @@ export type RowProps = GridProps & {
      */
     $noWrap?: boolean;
 };
-export declare const Row: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    $valign?: CSSProperties["alignItems"];
-    $reverse?: "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | undefined;
-    /**
-     * It forces child columns to be on one line overflowing the content when it does not fit,
-     * it is suggested to use with children having a minimum width not in percentage,
-     * for things like sliders and carousels
-     */
-    $noWrap?: boolean | undefined;
-}, never>;
+export declare const Row: any;
 export type ColProps = GridProps & Partial<Record<Breakpoint, number>> & {
     $width?: number;
     $flex?: boolean;
@@ -55,11 +37,5 @@ export type ColProps = GridProps & Partial<Record<Breakpoint, number>> & {
     $auto?: boolean;
     $offset?: string;
 };
-export declare const Col: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & Partial<Record<Breakpoint, number>> & {
-    $width?: number | undefined;
-    $flex?: boolean | undefined;
-    $valign?: React.CSSProperties["alignItems"];
-    $auto?: boolean | undefined;
-    $offset?: string | undefined;
-}, never>;
+export declare const Col: any;
 export {};

package/Hamburger/Hamburger.js

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "Hamburger", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const HamburgerLabel = _styledcomponents.default.div`
   position: absolute;
@@ -58,26 +59,32 @@ const barStyles = {
     transition
 };
 const Hamburger = ({ toggled, ...props })=>{
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         style: {
             ...burgerStyles,
             transform: `${toggled ? `rotate(90deg)` : "none"}`
         },
         tabIndex: 0,
-        ...props
-    }, /*#__PURE__*/ React.createElement("div", {
-        style: {
-            ...barStyles,
-            top: `${topOffset}px`,
-            transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`
-        }
-    }), /*#__PURE__*/ React.createElement("div", {
-        style: {
-            ...barStyles,
-            top: `${topOffset + barHeight + margin}px`,
-            transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`
-        }
-    }), /*#__PURE__*/ React.createElement(HamburgerLabel, {
-        $toggled: toggled
-    }, "Menu"));
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                style: {
+                    ...barStyles,
+                    top: `${topOffset}px`,
+                    transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                style: {
+                    ...barStyles,
+                    top: `${topOffset + barHeight + margin}px`,
+                    transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(HamburgerLabel, {
+                $toggled: toggled,
+                children: "Menu"
+            })
+        ]
+    });
 };

package/Hamburger/Hamburger.mjs

@@ -2,7 +2,8 @@
  * @file
  *
  * Simplified from https://github.com/luukdv/hamburger-react
- */ import styled from "styled-components";
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
 const HamburgerLabel = styled.div`
   position: absolute;
   top: 30px;
@@ -47,26 +48,32 @@ const barStyles = {
     transition
 };
 export const Hamburger = ({ toggled, ...props })=>{
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         style: {
             ...burgerStyles,
             transform: `${toggled ? `rotate(90deg)` : "none"}`
         },
         tabIndex: 0,
-        ...props
-    }, /*#__PURE__*/ React.createElement("div", {
-        style: {
-            ...barStyles,
-            top: `${topOffset}px`,
-            transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`
-        }
-    }), /*#__PURE__*/ React.createElement("div", {
-        style: {
-            ...barStyles,
-            top: `${topOffset + barHeight + margin}px`,
-            transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`
-        }
-    }), /*#__PURE__*/ React.createElement(HamburgerLabel, {
-        $toggled: toggled
-    }, "Menu"));
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    ...barStyles,
+                    top: `${topOffset}px`,
+                    transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`
+                }
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    ...barStyles,
+                    top: `${topOffset + barHeight + margin}px`,
+                    transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`
+                }
+            }),
+            /*#__PURE__*/ _jsx(HamburgerLabel, {
+                $toggled: toggled,
+                children: "Menu"
+            })
+        ]
+    });
 };

package/Hidden/Hidden.d.ts

@@ -3,4 +3,4 @@ export type HiddenProps = {
     $min?: Breakpoint;
     $max?: Breakpoint;
 };
-export declare const Hidden: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HiddenProps, never>;
+export declare const Hidden: any;

package/Img/sc/bare.d.ts

@@ -1,2 +1,2 @@
 export type KoineImgProps = {};
-export declare const KoineImg: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
+export declare const KoineImg: any;

package/Link/Link.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
 export type KoineLinkProps = React.ComponentPropsWithRef<"a">;
-export declare const KoineLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
-}, never>;
+export declare const KoineLink: any;

package/Link/LinkBlank.d.ts

@@ -1,8 +1,5 @@
 /// <reference types="react" />
 export type LinkBlankProps = React.ComponentPropsWithRef<"a">;
-export declare const LinkBlankA: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
-    target: "_blank";
-    rel: "noopener";
-}, "rel" | "target">;
-export declare const LinkBlankIcon: import("styled-components").StyledComponent<import("react-icons/lib").IconType, import("styled-components").DefaultTheme, {}, never>;
+export declare const LinkBlankA: any;
+export declare const LinkBlankIcon: any;
 export declare const LinkBlank: ({ children, target, rel, ...props }: LinkBlankProps) => import("react/jsx-runtime").JSX.Element;

package/Link/LinkBlank.js

@@ -20,6 +20,7 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _md = require("react-icons/md");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const _media = require("../styles/media");
@@ -41,5 +42,11 @@ const LinkBlankIcon = (0, _styledcomponents.default)(_md.MdLaunch)`
   }
 `;
 const LinkBlank = ({ children, target, rel, ...props })=>{
-    return /*#__PURE__*/ React.createElement(LinkBlankA, props, children, /*#__PURE__*/ React.createElement(LinkBlankIcon, null));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(LinkBlankA, {
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(LinkBlankIcon, {})
+        ]
+    });
 };

package/Link/LinkBlank.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MdLaunch as IconOutboundLink } from "react-icons/md";
 import styled from "styled-components";
 import { max } from "../styles/media";
@@ -21,5 +22,11 @@ export const LinkBlankIcon = styled(IconOutboundLink)`
   }
 `;
 export const LinkBlank = ({ children, target, rel, ...props })=>{
-    return /*#__PURE__*/ React.createElement(LinkBlankA, props, children, /*#__PURE__*/ React.createElement(LinkBlankIcon, null));
+    return /*#__PURE__*/ _jsxs(LinkBlankA, {
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ _jsx(LinkBlankIcon, {})
+        ]
+    });
 };

package/Menu/Menu.d.ts

@@ -1 +1 @@
-export declare const Menu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const Menu: any;

package/MenuItem/MenuItem.d.ts

@@ -1,4 +1 @@
-export declare const MenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    $active?: boolean | undefined;
-    disabled?: boolean | undefined;
-}, never>;
+export declare const MenuItem: any;

package/Meta/Meta.js

@@ -16,8 +16,9 @@ _export(exports, {
         return _default;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const Meta = ({ zoom })=>{
-    return /*#__PURE__*/ React.createElement("meta", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("meta", {
         name: "viewport",
         content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}`
     });

package/Meta/Meta.mjs

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 export const Meta = ({ zoom })=>{
-    return /*#__PURE__*/ React.createElement("meta", {
+    return /*#__PURE__*/ _jsx("meta", {
         name: "viewport",
         content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}`
     });

package/NoJs/NoJs.js

@@ -16,8 +16,9 @@ _export(exports, {
         return _default;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const NoJs = (_props)=>{
-    return /*#__PURE__*/ React.createElement("script", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("script", {
         id: "no-js",
         dangerouslySetInnerHTML: {
             __html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`

package/NoJs/NoJs.mjs

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 export const NoJs = (_props)=>{
-    return /*#__PURE__*/ React.createElement("script", {
+    return /*#__PURE__*/ _jsx("script", {
         id: "no-js",
         dangerouslySetInnerHTML: {
             __html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`

package/Pagination/PaginationNav.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "KoinePaginationNav", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _cg = require("react-icons/cg");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const _ensureInt = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/ensureInt"));
@@ -81,27 +82,45 @@ const KoinePaginationNav = ({ total, perPage, currentPage: _currentPage, baseUrl
     }
     const prevDots = pages[0] > firstPage + 1;
     const nextDots = pages[pages.length - 1] < lastPage - 1;
-    return /*#__PURE__*/ React.createElement(Root, null, prevArrow && /*#__PURE__*/ React.createElement(ItemPrev, {
-        as: Link,
-        href: `${baseUrl}/${prevPage}`
-    }, /*#__PURE__*/ React.createElement(_cg.CgArrowLeftR, null)), firstPage !== currentPage && /*#__PURE__*/ React.createElement(ItemLink, {
-        as: Link,
-        href: `${baseUrl}`,
-        prev: true
-    }, firstPage), prevDots && /*#__PURE__*/ React.createElement(DotsSeparator, null, "..."), pages.map((page)=>page === currentPage ? /*#__PURE__*/ React.createElement(ItemCurrent, {
-            key: page
-        }, page) : /*#__PURE__*/ React.createElement(ItemLink, {
-            key: `pagination-${page}`,
-            as: Link,
-            href: `${baseUrl}/${page}`,
-            prev: page < currentPage,
-            next: page > currentPage
-        }, page)), nextDots && /*#__PURE__*/ React.createElement(DotsSeparator, null, "..."), lastPage !== currentPage && /*#__PURE__*/ React.createElement(ItemLink, {
-        as: Link,
-        href: `${baseUrl}/${lastPage}`,
-        next: true
-    }, lastPage), nextArrow && /*#__PURE__*/ React.createElement(ItemNext, {
-        as: Link,
-        href: `${baseUrl}/${nextPage}`
-    }, /*#__PURE__*/ React.createElement(_cg.CgArrowRightR, null)));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(Root, {
+        children: [
+            prevArrow && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemPrev, {
+                as: Link,
+                href: `${baseUrl}/${prevPage}`,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_cg.CgArrowLeftR, {})
+            }),
+            firstPage !== currentPage && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemLink, {
+                as: Link,
+                href: `${baseUrl}`,
+                prev: true,
+                children: firstPage
+            }),
+            prevDots && /*#__PURE__*/ (0, _jsxruntime.jsx)(DotsSeparator, {
+                children: "..."
+            }),
+            pages.map((page)=>page === currentPage ? /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemCurrent, {
+                    children: page
+                }, page) : /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemLink, {
+                    as: Link,
+                    href: `${baseUrl}/${page}`,
+                    prev: page < currentPage,
+                    next: page > currentPage,
+                    children: page
+                }, `pagination-${page}`)),
+            nextDots && /*#__PURE__*/ (0, _jsxruntime.jsx)(DotsSeparator, {
+                children: "..."
+            }),
+            lastPage !== currentPage && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemLink, {
+                as: Link,
+                href: `${baseUrl}/${lastPage}`,
+                next: true,
+                children: lastPage
+            }),
+            nextArrow && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemNext, {
+                as: Link,
+                href: `${baseUrl}/${nextPage}`,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_cg.CgArrowRightR, {})
+            })
+        ]
+    });
 };