@citygross/components 0.10.2 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/build/@types/components/Pagination/Pagination.d.ts +5 -6
  2. package/build/@types/components/Pagination/Pagination.styles.d.ts +5 -7
  3. package/build/cjs/components/src/components/Pagination/Pagination.js +38 -40
  4. package/build/cjs/components/src/components/Pagination/Pagination.js.map +1 -1
  5. package/build/cjs/components/src/components/Pagination/Pagination.styles.js +6 -6
  6. package/build/es/components/src/components/Pagination/Pagination.js +40 -42
  7. package/build/es/components/src/components/Pagination/Pagination.js.map +1 -1
  8. package/build/es/components/src/components/Pagination/Pagination.styles.js +4 -4
  9. package/package.json +2 -2
package/build/@types/components/Pagination/Pagination.d.ts CHANGED
@@ -1,12 +1,11 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  export declare type TPagination = {
3
- totalItems?: number;
4
3
  fetchItems: (page: number) => void;
5
4
  currentPage: number;
5
+ totalItems?: number;
6
6
  itemsPerPage?: number;
7
7
  setPage?: (page: number) => void;
8
- numOfPaginationsToShow?: number;
9
- rightIcon?: React.ReactNode;
10
- leftIcon?: React.ReactNode;
8
+ pageLabel?: string;
9
+ onPageChange?: (page: number) => void;
11
10
  };
12
- export declare function Pagination({ totalItems, currentPage, fetchItems, itemsPerPage, setPage, numOfPaginationsToShow, rightIcon, leftIcon }: TPagination): JSX.Element;
11
+ export declare function Pagination({ totalItems, currentPage, fetchItems, itemsPerPage, setPage, pageLabel, onPageChange }: TPagination): JSX.Element | null;
package/build/@types/components/Pagination/Pagination.styles.d.ts CHANGED
@@ -1,7 +1,5 @@
1
- declare type TPaginationButtonWrapper = {
2
- show?: boolean;
3
- };
4
- export declare const PaginationButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TPaginationButtonWrapper, never>;
5
- export declare const LeftPaginationButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TPaginationButtonWrapper, never>;
6
- export declare const Flex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
- export {};
1
+ export declare const PaginationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2
+ export declare const ArrowButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
3
+ disabled?: boolean | undefined;
4
+ }, never>;
5
+ export declare const PageInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/build/cjs/components/src/components/Pagination/Pagination.js CHANGED
@@ -3,55 +3,53 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var PaginationButton = require('../Button/PaginationButton.js');
7
- var Box = require('../Box/Box.js');
6
+ var icons = require('@citygross/icons');
7
+ var typography = require('@citygross/typography');
8
+ var designTokens = require('@citygross/design-tokens');
8
9
  var Pagination_styles = require('./Pagination.styles.js');
9
10
 
10
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
12
 
12
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
14
 
14
- function createPagination(totalItems, itemsPerPage, numOfPaginationsToShow) {
15
- var amountOfPages = Math.ceil((totalItems || 0) / (itemsPerPage !== null && itemsPerPage !== void 0 ? itemsPerPage : 6));
16
- if (amountOfPages === 0 || itemsPerPage === 0) {
17
- return [];
18
- }
19
- var pagination = [];
20
- var block = [];
21
- var counter = 0;
22
- new Array(amountOfPages).fill(0).map(function (_, index) {
23
- if (counter < (numOfPaginationsToShow !== null && numOfPaginationsToShow !== void 0 ? numOfPaginationsToShow : 4) - 1) {
24
- counter++;
25
- block.push(index);
26
- if (index === amountOfPages - 1) {
27
- pagination.push(block);
28
- }
15
+ function Pagination(_a) {
16
+ var _b, _c, _d, _e;
17
+ var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, _f = _a.itemsPerPage, itemsPerPage = _f === void 0 ? 10 : _f, setPage = _a.setPage, _g = _a.pageLabel, pageLabel = _g === void 0 ? 'Sida' : _g, onPageChange = _a.onPageChange;
18
+ var totalPages = Math.ceil((totalItems || 0) / itemsPerPage);
19
+ var hasNextPage = currentPage < totalPages;
20
+ var hasPrevPage = currentPage > 1;
21
+ var handlePrev = function () {
22
+ if (hasPrevPage) {
23
+ var newPage = currentPage - 1;
24
+ setPage && setPage(newPage);
25
+ fetchItems(newPage);
26
+ onPageChange && onPageChange(newPage);
29
27
  }
30
- else {
31
- counter = 0;
32
- block.push(index);
33
- pagination.push(block);
34
- block = [];
28
+ };
29
+ var handleNext = function () {
30
+ if (hasNextPage) {
31
+ var newPage = currentPage + 1;
32
+ setPage && setPage(newPage);
33
+ fetchItems(newPage);
34
+ onPageChange && onPageChange(newPage);
35
35
  }
36
+ };
37
+ if (totalPages === 0) {
36
38
  return null;
37
- });
38
- return pagination;
39
- }
40
- function Pagination(_a) {
41
- var _b;
42
- var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, itemsPerPage = _a.itemsPerPage, setPage = _a.setPage, _c = _a.numOfPaginationsToShow, numOfPaginationsToShow = _c === void 0 ? 4 : _c, rightIcon = _a.rightIcon, leftIcon = _a.leftIcon;
43
- var _d = React.useState(Math.floor((currentPage - 1) / numOfPaginationsToShow)), currentIndex = _d[0], setIndex = _d[1];
44
- var pagination = createPagination(totalItems, itemsPerPage, numOfPaginationsToShow);
45
- return (React__default["default"].createElement(Box.Box, null, pagination && pagination.length > 0 && (React__default["default"].createElement(Pagination_styles.Flex, null,
46
- currentIndex > 0 && (React__default["default"].createElement(Pagination_styles.LeftPaginationButtonWrapper, null,
47
- React__default["default"].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: function () {
48
- setPage && setPage(currentPage - 1);
49
- setIndex(currentIndex - 1);
50
- }, width: 36, height: 36 }, leftIcon || '...'))), (_b = pagination === null || pagination === void 0 ? void 0 : pagination[currentIndex]) === null || _b === void 0 ? void 0 :
51
- _b.map(function (page) { return (React__default["default"].createElement(Pagination_styles.PaginationButtonWrapper, { key: page },
52
- React__default["default"].createElement(PaginationButton.PaginationButton, { color: currentPage === page + 1 ? 'primary' : 'white', width: 36, height: 36, onClick: function () { return fetchItems(page + 1); } }, page + 1))); }),
53
- pagination.length > 1 && currentIndex < pagination.length - 1 && (React__default["default"].createElement(Pagination_styles.PaginationButtonWrapper, null,
54
- React__default["default"].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex + 1); }, width: 36, height: 36 }, rightIcon || '...')))))));
39
+ }
40
+ return (React__default["default"].createElement("nav", { "aria-labelledby": "pagination_heading" },
41
+ React__default["default"].createElement(Pagination_styles.PaginationContainer, null,
42
+ React__default["default"].createElement(Pagination_styles.ArrowButton, { onClick: handlePrev, disabled: !hasPrevPage, "aria-disabled": !hasPrevPage, "aria-label": "F\u00F6reg\u00E5ende sida" },
43
+ React__default["default"].createElement(icons.Icons.ChevronLeft, { width: 20, height: 20, color: !hasPrevPage ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder : (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkest })),
44
+ React__default["default"].createElement(Pagination_styles.PageInfo, null,
45
+ React__default["default"].createElement(typography.BodyText, { id: "pagination_heading", "aria-live": "polite" },
46
+ pageLabel,
47
+ " ",
48
+ currentPage,
49
+ " av ",
50
+ totalPages)),
51
+ React__default["default"].createElement(Pagination_styles.ArrowButton, { onClick: handleNext, disabled: !hasNextPage, "aria-disabled": !hasNextPage, "aria-label": "N\u00E4sta sida" },
52
+ React__default["default"].createElement(icons.Icons.ChevronRight, { width: 20, height: 20, color: !hasNextPage ? (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.placeholder : (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.darkest })))));
55
53
  }
56
54
 
57
55
  exports.Pagination = Pagination;
package/build/cjs/components/src/components/Pagination/Pagination.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Pagination.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/Pagination/Pagination.styles.js CHANGED
@@ -9,12 +9,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
- var PaginationButtonWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n padding: 0 ", "px;\n"], ["\n padding: 0 ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
13
- var LeftPaginationButtonWrapper = styled__default["default"](PaginationButtonWrapper)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n padding: 0 ", "px;\n width: ", "px;\n"], ["\n padding: 0 ", "px;\n width: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.constants) === null || _b === void 0 ? void 0 : _b.paginationButtonWidth; });
14
- var Flex = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: center;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: center;\n"])));
12
+ var PaginationContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
13
+ var ArrowButton = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: none;\n border: 1px solid transparent;\n border-radius: ", ";\n padding: 0;\n width: 36px;\n height: 36px;\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.2s ease;\n\n &:hover:not(:disabled):not([aria-disabled='true']) {\n border-color: ", ";\n }\n\n &:focus {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: ", ";\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n"], ["\n background: none;\n border: 1px solid transparent;\n border-radius: ", ";\n padding: 0;\n width: 36px;\n height: 36px;\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.2s ease;\n\n &:hover:not(:disabled):not([aria-disabled='true']) {\n border-color: ", ";\n }\n\n &:focus {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: ", ";\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.circle; }, function (props) { return (props.disabled ? 'not-allowed' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.placeholder; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.black; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.circle; });
14
+ var PageInfo = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
15
15
  var templateObject_1, templateObject_2, templateObject_3;
16
16
 
17
- exports.Flex = Flex;
18
- exports.LeftPaginationButtonWrapper = LeftPaginationButtonWrapper;
19
- exports.PaginationButtonWrapper = PaginationButtonWrapper;
17
+ exports.ArrowButton = ArrowButton;
18
+ exports.PageInfo = PageInfo;
19
+ exports.PaginationContainer = PaginationContainer;
20
20
  //# sourceMappingURL=Pagination.styles.js.map
package/build/es/components/src/components/Pagination/Pagination.js CHANGED
@@ -1,49 +1,47 @@
1
- import React, { useState } from 'react';
2
- import { PaginationButton } from '../Button/PaginationButton.js';
3
- import { Box } from '../Box/Box.js';
4
- import { Flex, LeftPaginationButtonWrapper, PaginationButtonWrapper } from './Pagination.styles.js';
1
+ import React from 'react';
2
+ import { Icons } from '@citygross/icons';
3
+ import { BodyText } from '@citygross/typography';
4
+ import { theme } from '@citygross/design-tokens';
5
+ import { PaginationContainer, ArrowButton, PageInfo } from './Pagination.styles.js';
5
6
 
6
- function createPagination(totalItems, itemsPerPage, numOfPaginationsToShow) {
7
- var amountOfPages = Math.ceil((totalItems || 0) / (itemsPerPage !== null && itemsPerPage !== void 0 ? itemsPerPage : 6));
8
- if (amountOfPages === 0 || itemsPerPage === 0) {
9
- return [];
10
- }
11
- var pagination = [];
12
- var block = [];
13
- var counter = 0;
14
- new Array(amountOfPages).fill(0).map(function (_, index) {
15
- if (counter < (numOfPaginationsToShow !== null && numOfPaginationsToShow !== void 0 ? numOfPaginationsToShow : 4) - 1) {
16
- counter++;
17
- block.push(index);
18
- if (index === amountOfPages - 1) {
19
- pagination.push(block);
20
- }
7
+ function Pagination(_a) {
8
+ var _b, _c, _d, _e;
9
+ var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, _f = _a.itemsPerPage, itemsPerPage = _f === void 0 ? 10 : _f, setPage = _a.setPage, _g = _a.pageLabel, pageLabel = _g === void 0 ? 'Sida' : _g, onPageChange = _a.onPageChange;
10
+ var totalPages = Math.ceil((totalItems || 0) / itemsPerPage);
11
+ var hasNextPage = currentPage < totalPages;
12
+ var hasPrevPage = currentPage > 1;
13
+ var handlePrev = function () {
14
+ if (hasPrevPage) {
15
+ var newPage = currentPage - 1;
16
+ setPage && setPage(newPage);
17
+ fetchItems(newPage);
18
+ onPageChange && onPageChange(newPage);
21
19
  }
22
- else {
23
- counter = 0;
24
- block.push(index);
25
- pagination.push(block);
26
- block = [];
20
+ };
21
+ var handleNext = function () {
22
+ if (hasNextPage) {
23
+ var newPage = currentPage + 1;
24
+ setPage && setPage(newPage);
25
+ fetchItems(newPage);
26
+ onPageChange && onPageChange(newPage);
27
27
  }
28
+ };
29
+ if (totalPages === 0) {
28
30
  return null;
29
- });
30
- return pagination;
31
- }
32
- function Pagination(_a) {
33
- var _b;
34
- var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, itemsPerPage = _a.itemsPerPage, setPage = _a.setPage, _c = _a.numOfPaginationsToShow, numOfPaginationsToShow = _c === void 0 ? 4 : _c, rightIcon = _a.rightIcon, leftIcon = _a.leftIcon;
35
- var _d = useState(Math.floor((currentPage - 1) / numOfPaginationsToShow)), currentIndex = _d[0], setIndex = _d[1];
36
- var pagination = createPagination(totalItems, itemsPerPage, numOfPaginationsToShow);
37
- return (React.createElement(Box, null, pagination && pagination.length > 0 && (React.createElement(Flex, null,
38
- currentIndex > 0 && (React.createElement(LeftPaginationButtonWrapper, null,
39
- React.createElement(PaginationButton, { color: 'white', onClick: function () {
40
- setPage && setPage(currentPage - 1);
41
- setIndex(currentIndex - 1);
42
- }, width: 36, height: 36 }, leftIcon || '...'))), (_b = pagination === null || pagination === void 0 ? void 0 : pagination[currentIndex]) === null || _b === void 0 ? void 0 :
43
- _b.map(function (page) { return (React.createElement(PaginationButtonWrapper, { key: page },
44
- React.createElement(PaginationButton, { color: currentPage === page + 1 ? 'primary' : 'white', width: 36, height: 36, onClick: function () { return fetchItems(page + 1); } }, page + 1))); }),
45
- pagination.length > 1 && currentIndex < pagination.length - 1 && (React.createElement(PaginationButtonWrapper, null,
46
- React.createElement(PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex + 1); }, width: 36, height: 36 }, rightIcon || '...')))))));
31
+ }
32
+ return (React.createElement("nav", { "aria-labelledby": "pagination_heading" },
33
+ React.createElement(PaginationContainer, null,
34
+ React.createElement(ArrowButton, { onClick: handlePrev, disabled: !hasPrevPage, "aria-disabled": !hasPrevPage, "aria-label": "F\u00F6reg\u00E5ende sida" },
35
+ React.createElement(Icons.ChevronLeft, { width: 20, height: 20, color: !hasPrevPage ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkest })),
36
+ React.createElement(PageInfo, null,
37
+ React.createElement(BodyText, { id: "pagination_heading", "aria-live": "polite" },
38
+ pageLabel,
39
+ " ",
40
+ currentPage,
41
+ " av ",
42
+ totalPages)),
43
+ React.createElement(ArrowButton, { onClick: handleNext, disabled: !hasNextPage, "aria-disabled": !hasNextPage, "aria-label": "N\u00E4sta sida" },
44
+ React.createElement(Icons.ChevronRight, { width: 20, height: 20, color: !hasNextPage ? (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.placeholder : (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.darkest })))));
47
45
  }
48
46
 
49
47
  export { Pagination };
package/build/es/components/src/components/Pagination/Pagination.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Pagination.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/Pagination/Pagination.styles.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
 
4
- var PaginationButtonWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 ", "px;\n"], ["\n padding: 0 ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
5
- var LeftPaginationButtonWrapper = styled(PaginationButtonWrapper)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 0 ", "px;\n width: ", "px;\n"], ["\n padding: 0 ", "px;\n width: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.constants) === null || _b === void 0 ? void 0 : _b.paginationButtonWidth; });
6
- var Flex = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: center;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: center;\n"])));
4
+ var PaginationContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
5
+ var ArrowButton = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: none;\n border: 1px solid transparent;\n border-radius: ", ";\n padding: 0;\n width: 36px;\n height: 36px;\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.2s ease;\n\n &:hover:not(:disabled):not([aria-disabled='true']) {\n border-color: ", ";\n }\n\n &:focus {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: ", ";\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n"], ["\n background: none;\n border: 1px solid transparent;\n border-radius: ", ";\n padding: 0;\n width: 36px;\n height: 36px;\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.2s ease;\n\n &:hover:not(:disabled):not([aria-disabled='true']) {\n border-color: ", ";\n }\n\n &:focus {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: ", ";\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.circle; }, function (props) { return (props.disabled ? 'not-allowed' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.placeholder; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.black; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.circle; });
6
+ var PageInfo = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
7
7
  var templateObject_1, templateObject_2, templateObject_3;
8
8
 
9
- export { Flex, LeftPaginationButtonWrapper, PaginationButtonWrapper };
9
+ export { ArrowButton, PageInfo, PaginationContainer };
10
10
  //# sourceMappingURL=Pagination.styles.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.10.2",
3
+ "version": "0.11.0",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -75,5 +75,5 @@
75
75
  "react-slick": "^0.30.1",
76
76
  "slick-carousel": "^1.8.1"
77
77
  },
78
- "gitHead": "394466a4310f775b41dccfd831a2158878a7b570"
78
+ "gitHead": "cec21e798fc80a41db70950bae78d1f3272aaa35"
79
79
  }