pds-dev-kit-web-test 2.7.201 → 2.7.203

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 (6) hide show
  1. package/dist/src/sub/DynamicLayout/mock_contentsList.js +1 -1
  2. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js +1 -2
  3. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/CustomPagination.js +23 -13
  4. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.d.ts +12 -9
  5. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.js +34 -28
  6. package/package.json +1 -1
package/dist/src/sub/DynamicLayout/mock_contentsList.js CHANGED
@@ -2379,7 +2379,7 @@ exports.SAMPLE_LIST_CB = {
2379
2379
  'CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': null,
2380
2380
  CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSIZE: 'MEDIUM',
2381
2381
  'CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSIZE:MOBILE': null,
2382
- CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSTYLE: 'DESIGN2',
2382
+ CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSTYLE: 'DESIGN1',
2383
2383
  'CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSTYLE:MOBILE': null
2384
2384
  },
2385
2385
  CB_STYLE_PROP_OPACITY: {
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js CHANGED
@@ -146,8 +146,7 @@ function ContentsList(props) {
146
146
  var renderElements = function (component) {
147
147
  switch (component.type) {
148
148
  case 'PAGINATION':
149
- return ((0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered
150
- ? __assign(__assign({}, paginationHoverStyle), { primaryColor: '#ff0000ff', secondaryColor: '#0000ffff' }) : __assign(__assign({}, paginationNormalStyle), { primaryColor: '#ff0000ff', secondaryColor: '#0000ffff' }), current: currentPage, total: totalPage, onPageClick: handlePageClick }));
149
+ return ((0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? paginationHoverStyle : paginationNormalStyle, current: currentPage, total: totalPage, onPageClick: handlePageClick }));
151
150
  default:
152
151
  return null;
153
152
  }
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/CustomPagination.js CHANGED
@@ -44,35 +44,45 @@ var CustomPagination = function (_a) {
44
44
  onPageClick(pageNumber);
45
45
  };
46
46
  var renderPagination = function () {
47
+ var buttonSize = 'large';
48
+ var iconSize = 24;
49
+ if (styles.size === 'SMALL') {
50
+ buttonSize = 'small';
51
+ iconSize = 16;
52
+ }
53
+ if (styles.size === 'LARGE') {
54
+ buttonSize = 'xxlarge';
55
+ iconSize = 32;
56
+ }
47
57
  switch (styles.type) {
48
58
  case 'NONE':
49
59
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
50
60
  case 'DESIGN1':
51
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design1, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
61
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design1, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
52
62
  case 'DESIGN2':
53
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design2, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
63
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design2, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
54
64
  case 'DESIGN3':
55
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design3, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
65
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design3, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
56
66
  case 'DESIGN4':
57
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design1, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, ellipsis: true, maxVisiblePages: 3 }));
67
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design1, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, ellipsis: true, maxVisiblePages: 3, buttonSize: buttonSize, iconSize: iconSize }));
58
68
  case 'DESIGN5':
59
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design2, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, ellipsis: true, maxVisiblePages: 3 }));
69
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design2, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, ellipsis: true, maxVisiblePages: 3, buttonSize: buttonSize, iconSize: iconSize }));
60
70
  case 'DESIGN6':
61
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design3, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, ellipsis: true, maxVisiblePages: 3 }));
71
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design3, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, ellipsis: true, maxVisiblePages: 3, buttonSize: buttonSize, iconSize: iconSize }));
62
72
  case 'DESIGN7':
63
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design7, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
73
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design7, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
64
74
  case 'DESIGN8':
65
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design8, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
75
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design8, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
66
76
  case 'DESIGN9':
67
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design9, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
77
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design9, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
68
78
  case 'DESIGN10':
69
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design10, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
79
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design10, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
70
80
  case 'DESIGN11':
71
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design11, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
81
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design11, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
72
82
  case 'DESIGN12':
73
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design12, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
83
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design12, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
74
84
  case 'DESIGN13':
75
- return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design13, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
85
+ return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design13, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
76
86
  default:
77
87
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
78
88
  }
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import type { IconButtonProps } from '../../../../../../../../../desktop/components/IconButton/IconButton';
2
3
  type Props = {
3
4
  total: number;
4
5
  current: number;
@@ -10,15 +11,17 @@ type Props = {
10
11
  onPageChange?: (page: number) => void;
11
12
  ellipsis?: boolean;
12
13
  maxVisiblePages?: number;
14
+ buttonSize?: IconButtonProps['baseSize'];
15
+ iconSize: IconButtonProps['iconSize'];
13
16
  };
14
- export declare function Design1({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
15
- export declare function Design2({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
16
- export declare function Design3({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
17
- export declare function Design7({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
18
- export declare function Design8({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
19
- export declare function Design9({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
20
- export declare function Design10({ total, current, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
21
- export declare function Design11({ total, current, primaryColor, secondaryColor, onNext, onPrevious }: Props): JSX.Element;
22
- export declare function Design12({ total, current, primaryColor, secondaryColor, onNext, onPrevious }: Props): JSX.Element;
17
+ export declare function Design1({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages, buttonSize, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
18
+ export declare function Design2({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages, buttonSize, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
19
+ export declare function Design3({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
20
+ export declare function Design7({ total, current, pages, primaryColor, secondaryColor, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
21
+ export declare function Design8({ total, current, pages, primaryColor, secondaryColor, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
22
+ export declare function Design9({ total, current, pages, primaryColor, secondaryColor, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
23
+ export declare function Design10({ total, current, primaryColor, secondaryColor, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
24
+ export declare function Design11({ total, current, primaryColor, secondaryColor, iconSize, onNext, onPrevious }: Props): JSX.Element;
25
+ export declare function Design12({ total, current, primaryColor, secondaryColor, iconSize, onNext, onPrevious }: Props): JSX.Element;
23
26
  export declare function Design13({ total, current, primaryColor, secondaryColor, onNext, onPrevious }: Props): JSX.Element;
24
27
  export {};
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.js CHANGED
@@ -45,75 +45,75 @@ var components_1 = require("../../../../../../../../DynamicLayout/components");
45
45
  var styled_components_1 = __importStar(require("styled-components"));
46
46
  var usePagination_1 = require("../hooks/usePagination");
47
47
  function Design1(_a) {
48
- var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, ellipsis = _a.ellipsis, _b = _a.maxVisiblePages, maxVisiblePages = _b === void 0 ? 5 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
48
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, ellipsis = _a.ellipsis, _b = _a.maxVisiblePages, maxVisiblePages = _b === void 0 ? 5 : _b, buttonSize = _a.buttonSize, _c = _a.iconSize, iconSize = _c === void 0 ? 24 : _c, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
49
49
  // ellipsis prop에 따라 렌더링할 페이지 목록 결정
50
50
  var pagesToRender = ellipsis
51
51
  ? (0, usePagination_1.getPaginationItems)(total, current, maxVisiblePages)
52
52
  : Array.from({ length: total }, function (_, i) { return i + 1; });
53
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) })), pagesToRender.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: primaryColor, activeTextColor: primaryColor,
53
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) })), pagesToRender.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: primaryColor, activeTextColor: primaryColor,
54
54
  // '...'인 경우 버튼 비활성화 및 클릭 방지
55
- isActive: pageNumber === current, disabled: pageNumber === '...', onClick: function () { return pageNumber !== '...' && onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) }))] })));
55
+ isActive: pageNumber === current, disabled: pageNumber === '...', onClick: function () { return pageNumber !== '...' && onPageChange && onPageChange(pageNumber); }, size: iconSize }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) }))] })));
56
56
  }
57
57
  exports.Design1 = Design1;
58
58
  function Design2(_a) {
59
- var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, ellipsis = _a.ellipsis, _b = _a.maxVisiblePages, maxVisiblePages = _b === void 0 ? 5 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
59
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, ellipsis = _a.ellipsis, _b = _a.maxVisiblePages, maxVisiblePages = _b === void 0 ? 5 : _b, buttonSize = _a.buttonSize, _c = _a.iconSize, iconSize = _c === void 0 ? 24 : _c, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
60
60
  var pagesToRender = ellipsis
61
61
  ? (0, usePagination_1.getPaginationItems)(total, current, maxVisiblePages)
62
62
  : Array.from({ length: total }, function (_, i) { return i + 1; });
63
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) })), pagesToRender.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: primaryColor, activeTextColor: primaryColor,
63
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) })), pagesToRender.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: primaryColor, activeTextColor: primaryColor,
64
64
  // '...'인 경우 버튼 비활성화 및 클릭 방지
65
- isActive: pageNumber === current, disabled: pageNumber === '...', onClick: function () { return pageNumber !== '...' && onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) }))] })));
65
+ isActive: pageNumber === current, size: iconSize, disabled: pageNumber === '...', onClick: function () { return pageNumber !== '...' && onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) }))] })));
66
66
  }
67
67
  exports.Design2 = Design2;
68
68
  function Design3(_a) {
69
- var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, ellipsis = _a.ellipsis, _b = _a.maxVisiblePages, maxVisiblePages = _b === void 0 ? 5 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
69
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, ellipsis = _a.ellipsis, _b = _a.maxVisiblePages, maxVisiblePages = _b === void 0 ? 5 : _b, _c = _a.iconSize, iconSize = _c === void 0 ? 24 : _c, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
70
70
  var pagesToRender = ellipsis
71
71
  ? (0, usePagination_1.getPaginationItems)(total, current, maxVisiblePages)
72
72
  : Array.from({ length: total }, function (_, i) { return i + 1; });
73
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) })), pagesToRender.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: primaryColor, activeTextColor: primaryColor,
73
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) })), pagesToRender.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: primaryColor, activeTextColor: primaryColor,
74
74
  // '...'인 경우 버튼 비활성화 및 클릭 방지
75
- isActive: pageNumber === current, disabled: pageNumber === '...', onClick: function () { return pageNumber !== '...' && onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) }))] })));
75
+ size: iconSize, isActive: pageNumber === current, disabled: pageNumber === '...', onClick: function () { return pageNumber !== '...' && onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) }))] })));
76
76
  }
77
77
  exports.Design3 = Design3;
78
78
  function Design7(_a) {
79
- var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
80
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
79
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
80
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
81
81
  marginLeft: '8px'
82
- }, colorTheme: "sysTextBlack", styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
82
+ }, colorTheme: "sysTextBlack", styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
83
83
  }
84
84
  exports.Design7 = Design7;
85
85
  function Design8(_a) {
86
- var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
87
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
86
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
87
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
88
88
  marginLeft: '8px'
89
- }, colorTheme: "sysTextBlack", styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '8px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: "|" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
89
+ }, colorTheme: "sysTextBlack", styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '8px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: "|" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
90
90
  }
91
91
  exports.Design8 = Design8;
92
92
  // NOTE: 이 밑은 NOT IN USE
93
93
  function Design9(_a) {
94
- var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
95
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: primaryColor, activeBackgroundColor: secondaryColor, textColor: secondaryColor, activeTextColor: primaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
94
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
95
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: primaryColor, activeBackgroundColor: secondaryColor, textColor: secondaryColor, activeTextColor: primaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); }, size: iconSize }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
96
96
  }
97
97
  exports.Design9 = Design9;
98
98
  function Design10(_a) {
99
- var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
99
+ var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
100
100
  var paginationPages = generatePaginationPages(total, current);
101
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), paginationPages === null || paginationPages === void 0 ? void 0 : paginationPages.map(function (pageNumber) {
101
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), paginationPages === null || paginationPages === void 0 ? void 0 : paginationPages.map(function (pageNumber) {
102
102
  if (typeof pageNumber === 'string') {
103
- return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: primaryColor, activeTextColor: secondaryColor, isActive: false, disabled: true }, { children: pageNumber }), pageNumber));
103
+ return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: primaryColor, activeTextColor: secondaryColor, isActive: false, size: iconSize, disabled: true }, { children: pageNumber }), pageNumber));
104
104
  }
105
- return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: primaryColor, activeTextColor: secondaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber));
106
- }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
105
+ return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: primaryColor, activeTextColor: secondaryColor, size: iconSize, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber));
106
+ }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
107
107
  }
108
108
  exports.Design10 = Design10;
109
109
  function Design11(_a) {
110
- var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onNext = _a.onNext, onPrevious = _a.onPrevious;
111
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": secondaryColor }, { children: current })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
110
+ var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, onNext = _a.onNext, onPrevious = _a.onPrevious;
111
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": secondaryColor }, { children: current })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
112
112
  }
113
113
  exports.Design11 = Design11;
114
114
  function Design12(_a) {
115
- var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onNext = _a.onNext, onPrevious = _a.onPrevious;
116
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": secondaryColor }, { children: current })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
115
+ var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, onNext = _a.onNext, onPrevious = _a.onPrevious;
116
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": secondaryColor }, { children: current })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
117
117
  }
118
118
  exports.Design12 = Design12;
119
119
  function Design13(_a) {
@@ -138,14 +138,14 @@ var FlexBox = styled_components_1.default.div(templateObject_1 || (templateObjec
138
138
  var _b = _a.justifyContent, justifyContent = _b === void 0 ? 'center' : _b;
139
139
  return justifyContent;
140
140
  });
141
- var S_Pointer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: ", ";\n height: 16px;\n opacity: ", ";\n"], ["\n cursor: ", ";\n height: 16px;\n opacity: ", ";\n"])), function (_a) {
141
+ var S_Pointer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n cursor: ", ";\n display: flex;\n justify-content: center;\n opacity: ", ";\n"], ["\n align-items: center;\n cursor: ", ";\n display: flex;\n justify-content: center;\n opacity: ", ";\n"])), function (_a) {
142
142
  var disabled = _a.disabled;
143
143
  return (disabled ? 'auto' : 'pointer');
144
144
  }, function (_a) {
145
145
  var disabled = _a.disabled;
146
146
  return (disabled ? 0.3 : 1);
147
147
  });
148
- var S_Page = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: none;\n border-radius: ", ";\n color: ", ";\n display: flex;\n font-size: ", ";\n font-weight: ", ";\n height: 32px;\n justify-content: center;\n outline: none;\n width: 32px;\n"], ["\n align-items: center;\n background-color: ", ";\n border: none;\n border-radius: ", ";\n color: ", ";\n display: flex;\n font-size: ", ";\n font-weight: ", ";\n height: 32px;\n justify-content: center;\n outline: none;\n width: 32px;\n"])), function (_a) {
148
+ var S_Page = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: none;\n border-radius: ", ";\n color: ", ";\n display: flex;\n font-size: ", ";\n font-weight: ", ";\n height: ", ";\n justify-content: center;\n outline: none;\n width: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border: none;\n border-radius: ", ";\n color: ", ";\n display: flex;\n font-size: ", ";\n font-weight: ", ";\n height: ", ";\n justify-content: center;\n outline: none;\n width: ", ";\n"])), function (_a) {
149
149
  var isActive = _a.isActive, backgroundColor = _a.backgroundColor, activeBackgroundColor = _a.activeBackgroundColor;
150
150
  return isActive ? activeBackgroundColor : backgroundColor;
151
151
  }, function (_a) {
@@ -162,6 +162,12 @@ var S_Page = styled_components_1.default.button(templateObject_3 || (templateObj
162
162
  }, function (_a) {
163
163
  var theme = _a.theme, isActive = _a.isActive;
164
164
  return isActive ? theme.fontWeight.bold : theme.fontWeight.normal;
165
+ }, function (_a) {
166
+ var size = _a.size;
167
+ return (typeof size === 'number' ? "".concat(size, "px") : size || '32px');
168
+ }, function (_a) {
169
+ var size = _a.size;
170
+ return (typeof size === 'number' ? "".concat(size, "px") : size || '32px');
165
171
  });
166
172
  var S_Text = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n"])), function (_a) {
167
173
  var $color = _a.$color;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.7.201",
3
+ "version": "2.7.203",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",