@vlinderclimate/net-zero-ui/components/Pagination.js

<div align="center"> <img src="https://storage.yandexcloud.net/static.vlinderstorage.com/Telegram_VlinderTech.png" width=200 /> </div> <h1 align="center">Net Zero UI kit</h1>

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../tslib.es6-9240d9d1.js');
var jsxRuntime = require('react/jsx-runtime');
var styles = require('@mui/material/styles');
var theme_typography = require('../theme/typography.js');
var MuiPagination = require('@mui/material/Pagination');
var MuiPaginationItem = require('@mui/material/PaginationItem');
var components_Icon = require('./Icon.js');
require('../icons/ArrowLeft.js');
require('../icons/ArrowRight.js');
require('../icons/CheckCircle.js');
require('../icons/CloseCircle.js');
require('../icons/InfoCircle.js');
require('../icons/ErrorCircle.js');
require('../icons/Attention.js');
require('../icons/HelpCircle.js');
require('../icons/Lock.js');
require('../icons/Delete.js');
require('../icons/TriangleRight.js');
require('../icons/TriangleLeft.js');
require('../icons/TriangleUp.js');
require('../icons/TriangleDown.js');
require('../icons/Download.js');
require('../icons/Key.js');
require('../icons/Edit.js');
require('../icons/Expand.js');
require('../icons/Collapse.js');
require('../icons/Success.js');
require('../icons/Fail.js');
require('../icons/Loading.js');
require('../icons/Check.js');
require('../icons/ChevronLeft.js');
require('../icons/ChevronRight.js');
require('../icons/Plus.js');
require('../icons/Minus.js');
require('../icons/Link.js');
require('../icons/Copy.js');
require('../icons/Medium.js');
require('../icons/Twitter.js');
require('../icons/Telegram.js');
require('../icons/Sort.js');
require('../icons/Close.js');
require('../icons/Search.js');
require('../icons/Instagram.js');
require('../icons/LinkedIn.js');
require('../icons/Reddit.js');
require('../icons/YouTube.js');
require('../icons/Update.js');
require('../icons/Facebook.js');
require('../icons/Cart.js');
require('../icons/Menu.js');
require('../icons/ShowPassword.js');
require('../icons/HidePassword.js');
require('../icons/Collection.js');
require('../icons/Sprout.js');
require('../icons/Verify.js');
require('../icons/User.js');
require('../icons/Convert.js');
require('../icons/Deposit.js');
require('../icons/Send.js');
require('../icons/Receive.js');
require('../icons/To.js');
require('../icons/Withdraw.js');
require('../icons/Clock.js');
require('../icons/Play.js');
require('../icons/Help.js');
require('../icons/CloseSmall.js');
require('../icons/MinusSmall.js');
require('../icons/PlusSmall.js');
require('../icons/Dropdown.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var MuiPagination__default = /*#__PURE__*/_interopDefaultLegacy(MuiPagination);
var MuiPaginationItem__default = /*#__PURE__*/_interopDefaultLegacy(MuiPaginationItem);

/**
 * Styles
 */
var StyledPagination = styles.styled(MuiPagination__default["default"])(function (_a) {
    var theme = _a.theme;
    return ({
        position: "relative",
        userSelect: "none",
        paddingInline: theme.spacing(6),
        ".MuiPagination-ul": {
            alignItems: "center",
            justifyContent: "center",
            lineHeight: 0,
            li: {
                "&:first-of-type, &:last-of-type": {
                    position: "absolute",
                    top: 0,
                    marginInline: 0
                },
                "&:first-of-type": {
                    left: 0
                },
                "&:last-of-type": {
                    right: 0
                }
            }
        },
        ".MuiPaginationItem-root": {
            fontSize: theme_typography.fontSize.xs2,
            color: theme.palette.gray["700"]
        },
        ".MuiButtonBase-root": {
            "&.MuiPaginationItem-text": {
                "&.Mui-selected": {
                    color: theme.palette.gray.white,
                    backgroundColor: theme.palette.primary.main
                }
            },
            "&.MuiPaginationItem-outlined": {
                border: "1.5px solid",
                borderColor: theme.palette.gray["500"],
                "&.Mui-selected": {
                    borderColor: theme.palette.gray["800"],
                    color: theme.palette.gray["800"],
                    backgroundColor: "transparent !important"
                }
            }
        },
        ".icon": {
            margin: -8
        }
    });
});
var ArrowLeftButton = function () { return jsxRuntime.jsx(components_Icon["default"], { iconKey: "arrowLeft", size: "md" }, void 0); };
var ArrowRightButton = function () { return jsxRuntime.jsx(components_Icon["default"], { iconKey: "arrowRight", size: "md" }, void 0); };
/**
 * Components
 */
var Pagination = function (_a) {
    var onChange = _a.onChange, page = _a.page, count = _a.count, _b = _a.variant, variant = _b === void 0 ? "outlined" : _b, _c = _a.size, size = _c === void 0 ? "large" : _c, props = tslib_es6.__rest(_a, ["onChange", "page", "count", "variant", "size"]);
    return (jsxRuntime.jsx(StyledPagination, tslib_es6.__assign({ count: count, variant: variant, size: size, onChange: onChange, page: page, renderItem: function (item) { return (jsxRuntime.jsx(MuiPaginationItem__default["default"], tslib_es6.__assign({ components: {
                previous: ArrowLeftButton,
                next: ArrowRightButton
            } }, item), void 0)); } }, props), void 0));
};

exports["default"] = Pagination;