maru_design2 3.2.0 → 3.3.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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [3.3.0](https://github.com/42maru-ai/maru-design2/compare/v3.2.1...v3.3.0) (2026-09-16)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* add textarea copy and end actions ([0ddb23d](https://github.com/42maru-ai/maru-design2/commit/0ddb23dcc0809a6d85cfd9b259a9ae3e4591348b))
|
|
9
|
+
|
|
10
|
+
## [3.2.1](https://github.com/42maru-ai/maru-design2/compare/v3.2.0...v3.2.1) (2026-09-10)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* make pagination button backgrounds transparent ([fbd4425](https://github.com/42maru-ai/maru-design2/commit/fbd442583c9ddb9158537d11c078b63412bdd662))
|
|
16
|
+
* preserve shared control styles in simple pagination ([dd1e6b4](https://github.com/42maru-ai/maru-design2/commit/dd1e6b494f381a084f1fc02edc55299c909a85cc))
|
|
17
|
+
|
|
3
18
|
## [3.2.0](https://github.com/42maru-ai/maru-design2/compare/v3.1.1...v3.2.0) (2026-09-10)
|
|
4
19
|
|
|
5
20
|
|
|
@@ -143,6 +143,7 @@ export declare const ICONS: {
|
|
|
143
143
|
readonly Copy03_s1810: "Copy03_s1810";
|
|
144
144
|
readonly Copy_s1413: "Copy_s1413";
|
|
145
145
|
readonly Copy_s1613: "Copy_s1613";
|
|
146
|
+
readonly Copy_s1617: "Copy_s1617";
|
|
146
147
|
readonly CornerDownRight_s1615: "CornerDownRight_s1615";
|
|
147
148
|
readonly CornerDownRight_s2420: "CornerDownRight_s2420";
|
|
148
149
|
readonly CornerUpLeft_s1413: "CornerUpLeft_s1413";
|
|
@@ -386,6 +387,7 @@ export declare const ICONS: {
|
|
|
386
387
|
readonly Trash01_s1210: "Trash01_s1210";
|
|
387
388
|
readonly Trash01_s1413: "Trash01_s1413";
|
|
388
389
|
readonly Trash01_s1613: "Trash01_s1613";
|
|
390
|
+
readonly Trash01_s1617: "Trash01_s1617";
|
|
389
391
|
readonly Trash01_s1810: "Trash01_s1810";
|
|
390
392
|
readonly Trash01_s1815: "Trash01_s1815";
|
|
391
393
|
readonly Triangle_s1615: "Triangle_s1615";
|
|
@@ -20,6 +20,14 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
|
|
|
20
20
|
* textarea을 감싸고 있는 div의 ref, textarea은 일반 ref 사용
|
|
21
21
|
*/
|
|
22
22
|
wrapperRef?: React.RefObject<HTMLDivElement>;
|
|
23
|
+
/**
|
|
24
|
+
* 현재 입력값 복사 버튼 표시
|
|
25
|
+
*/
|
|
26
|
+
copyable?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* 컴포넌트 끝점에 위치시킬 추가 노드
|
|
29
|
+
*/
|
|
30
|
+
endNode?: React.ReactNode;
|
|
23
31
|
className?: string;
|
|
24
32
|
/**
|
|
25
33
|
* 최소 높이. 없으면 props.rows 이거나 1로 설정.
|
package/dist/index.js
CHANGED
|
@@ -2258,6 +2258,21 @@ var iconmap = {
|
|
|
2258
2258
|
"circles": [],
|
|
2259
2259
|
"rects": []
|
|
2260
2260
|
},
|
|
2261
|
+
"Copy_s1617": {
|
|
2262
|
+
"width": "16",
|
|
2263
|
+
"height": "16",
|
|
2264
|
+
"viewBox": "0 0 16 16",
|
|
2265
|
+
"fill": "none",
|
|
2266
|
+
"paths": [{
|
|
2267
|
+
"d": "M5.44 5.44V3.648C5.44 2.93113 5.44 2.5727 5.57951 2.29889C5.70223 2.05804 5.89804 1.86223 6.13889 1.73951C6.4127 1.6 6.77113 1.6 7.488 1.6H12.352C13.0689 1.6 13.4273 1.6 13.7011 1.73951C13.942 1.86223 14.1378 2.05804 14.2605 2.29889C14.4 2.5727 14.4 2.93113 14.4 3.648V8.512C14.4 9.22887 14.4 9.5873 14.2605 9.86111C14.1378 10.102 13.942 10.2978 13.7011 10.4205C13.4273 10.56 13.0689 10.56 12.352 10.56H10.56M3.648 14.4H8.512C9.22887 14.4 9.5873 14.4 9.86111 14.2605C10.102 14.1378 10.2978 13.942 10.4205 13.7011C10.56 13.4273 10.56 13.0689 10.56 12.352V7.488C10.56 6.77113 10.56 6.4127 10.4205 6.13889C10.2978 5.89804 10.102 5.70223 9.86111 5.57951C9.5873 5.44 9.22887 5.44 8.512 5.44H3.648C2.93113 5.44 2.5727 5.44 2.29889 5.57951C2.05804 5.70223 1.86223 5.89804 1.73951 6.13889C1.6 6.4127 1.6 6.77113 1.6 7.488V12.352C1.6 13.0689 1.6 13.4273 1.73951 13.7011C1.86223 13.942 2.05804 14.1378 2.29889 14.2605C2.5727 14.4 2.93113 14.4 3.648 14.4Z",
|
|
2268
|
+
"stroke": "#828588",
|
|
2269
|
+
"strokeWidth": "1.67",
|
|
2270
|
+
"strokeLinecap": "round",
|
|
2271
|
+
"strokeLinejoin": "round"
|
|
2272
|
+
}],
|
|
2273
|
+
"circles": [],
|
|
2274
|
+
"rects": []
|
|
2275
|
+
},
|
|
2261
2276
|
"CornerDownRight_s1615": {
|
|
2262
2277
|
"width": "16",
|
|
2263
2278
|
"height": "16",
|
|
@@ -6955,6 +6970,21 @@ var iconmap = {
|
|
|
6955
6970
|
"circles": [],
|
|
6956
6971
|
"rects": []
|
|
6957
6972
|
},
|
|
6973
|
+
"Trash01_s1617": {
|
|
6974
|
+
"width": "16",
|
|
6975
|
+
"height": "16",
|
|
6976
|
+
"viewBox": "0 0 16 16",
|
|
6977
|
+
"fill": "none",
|
|
6978
|
+
"paths": [{
|
|
6979
|
+
"d": "M10.6667 4V3.46667C10.6667 2.71993 10.6667 2.34656 10.5213 2.06135C10.3935 1.81046 10.1895 1.60649 9.93865 1.47866C9.65344 1.33333 9.28007 1.33333 8.53333 1.33333H7.46667C6.71993 1.33333 6.34656 1.33333 6.06135 1.47866C5.81046 1.60649 5.60649 1.81046 5.47866 2.06135C5.33333 2.34656 5.33333 2.71993 5.33333 3.46667V4M6.66667 7.66667V11M9.33333 7.66667V11M2 4H14M12.6667 4V11.4667C12.6667 12.5868 12.6667 13.1468 12.4487 13.5746C12.2569 13.951 11.951 14.2569 11.5746 14.4487C11.1468 14.6667 10.5868 14.6667 9.46667 14.6667H6.53333C5.41323 14.6667 4.85318 14.6667 4.42535 14.4487C4.04903 14.2569 3.74307 13.951 3.55132 13.5746C3.33333 13.1468 3.33333 12.5868 3.33333 11.4667V4",
|
|
6980
|
+
"stroke": "#828588",
|
|
6981
|
+
"strokeWidth": "1.67",
|
|
6982
|
+
"strokeLinecap": "round",
|
|
6983
|
+
"strokeLinejoin": "round"
|
|
6984
|
+
}],
|
|
6985
|
+
"circles": [],
|
|
6986
|
+
"rects": []
|
|
6987
|
+
},
|
|
6958
6988
|
"Trash01_s1810": {
|
|
6959
6989
|
"width": "18",
|
|
6960
6990
|
"height": "18",
|
|
@@ -7715,6 +7745,7 @@ var ICONS = {
|
|
|
7715
7745
|
"Copy03_s1810": "Copy03_s1810",
|
|
7716
7746
|
"Copy_s1413": "Copy_s1413",
|
|
7717
7747
|
"Copy_s1613": "Copy_s1613",
|
|
7748
|
+
"Copy_s1617": "Copy_s1617",
|
|
7718
7749
|
"CornerDownRight_s1615": "CornerDownRight_s1615",
|
|
7719
7750
|
"CornerDownRight_s2420": "CornerDownRight_s2420",
|
|
7720
7751
|
"CornerUpLeft_s1413": "CornerUpLeft_s1413",
|
|
@@ -7958,6 +7989,7 @@ var ICONS = {
|
|
|
7958
7989
|
"Trash01_s1210": "Trash01_s1210",
|
|
7959
7990
|
"Trash01_s1413": "Trash01_s1413",
|
|
7960
7991
|
"Trash01_s1613": "Trash01_s1613",
|
|
7992
|
+
"Trash01_s1617": "Trash01_s1617",
|
|
7961
7993
|
"Trash01_s1810": "Trash01_s1810",
|
|
7962
7994
|
"Trash01_s1815": "Trash01_s1815",
|
|
7963
7995
|
"Triangle_s1615": "Triangle_s1615",
|
|
@@ -72957,7 +72989,7 @@ function Slider(_a) {
|
|
|
72957
72989
|
}));
|
|
72958
72990
|
}
|
|
72959
72991
|
|
|
72960
|
-
var css_248z$g = ".maru-textarea-wrapper .maru-textarea-resizable-wrapper {\n position: relative;\n}\n.maru-textarea-wrapper .maru-textarea {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n flex-direction: row;\n padding: 8px 8px 8px 12px;\n border: 1px solid var(--maru-border-secondary);\n border-radius: 6px;\n gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea > textarea {\n width: 100%;\n border: unset;\n outline: unset;\n background-color: transparent;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n color: var(--maru-text-secondary);\n resize: none;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-webkit-input-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-moz-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea:-ms-input-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-ms-input-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea:focus-visible, .maru-textarea-wrapper .maru-textarea:focus-within {\n border-color: #5c5c5c;\n background-color: var(--maru-background-primary-hover);\n}\n.maru-textarea-wrapper .maru-textarea.errored {\n outline: 1px solid var(--maru-border-error-primary);\n border-color: var(--maru-border-error-primary);\n}\n.maru-textarea-wrapper .maru-textarea:hover {\n outline: 1px solid var(--maru-border-secondary);\n border-color: var(--maru-border-secondary);\n background-color: var(--maru-background-primary-hover);\n}\n.maru-textarea-wrapper .maru-textarea.disabled {\n background-color: var(--maru-background-secondary);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-webkit-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-moz-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea:-ms-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-ms-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled:hover {\n outline: unset;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper
|
|
72992
|
+
var css_248z$g = ".maru-textarea-wrapper .maru-textarea-resizable-wrapper {\n position: relative;\n}\n.maru-textarea-wrapper .maru-textarea {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n flex-direction: row;\n padding: 8px 8px 8px 12px;\n border: 1px solid var(--maru-border-secondary);\n border-radius: 6px;\n gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea > textarea {\n width: 100%;\n border: unset;\n outline: unset;\n background-color: transparent;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n color: var(--maru-text-secondary);\n resize: none;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-webkit-input-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-moz-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea:-ms-input-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-ms-input-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea:focus-visible, .maru-textarea-wrapper .maru-textarea:focus-within {\n border-color: #5c5c5c;\n background-color: var(--maru-background-primary-hover);\n}\n.maru-textarea-wrapper .maru-textarea.errored {\n outline: 1px solid var(--maru-border-error-primary);\n border-color: var(--maru-border-error-primary);\n}\n.maru-textarea-wrapper .maru-textarea:hover {\n outline: 1px solid var(--maru-border-secondary);\n border-color: var(--maru-border-secondary);\n background-color: var(--maru-background-primary-hover);\n}\n.maru-textarea-wrapper .maru-textarea.disabled {\n background-color: var(--maru-background-secondary);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-webkit-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-moz-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea:-ms-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-ms-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled:hover {\n outline: unset;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n flex-shrink: 0;\n gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper .maru-textarea-end-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n flex-shrink: 0;\n}\n.maru-textarea-wrapper .resizer {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 5px;\n width: 100%;\n cursor: ns-resize;\n background: transparent;\n}\n.maru-textarea-wrapper .maru-textarea-footer {\n display: block;\n margin-top: 4px;\n}\n.maru-textarea-wrapper .maru-textarea-footer > span {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 500;\n color: var(--maru-text-error-primary);\n}";
|
|
72961
72993
|
styleInject(css_248z$g);
|
|
72962
72994
|
|
|
72963
72995
|
var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
|
|
@@ -72965,15 +72997,18 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
|
|
|
72965
72997
|
onClear = _a.onClear,
|
|
72966
72998
|
hiddenClearButton = _a.hiddenClearButton,
|
|
72967
72999
|
wrapperRef = _a.wrapperRef,
|
|
73000
|
+
_b = _a.copyable,
|
|
73001
|
+
copyable = _b === void 0 ? false : _b,
|
|
73002
|
+
endNode = _a.endNode,
|
|
72968
73003
|
className = _a.className,
|
|
72969
73004
|
minRows = _a.minRows,
|
|
72970
73005
|
maxRows = _a.maxRows,
|
|
72971
|
-
|
|
72972
|
-
resizable =
|
|
72973
|
-
props = __rest(_a, ["invalid", "onClear", "hiddenClearButton", "wrapperRef", "className", "minRows", "maxRows", "resizable"]);
|
|
72974
|
-
var
|
|
72975
|
-
showClearButton =
|
|
72976
|
-
setShowClearButton =
|
|
73006
|
+
_c = _a.resizable,
|
|
73007
|
+
resizable = _c === void 0 ? false : _c,
|
|
73008
|
+
props = __rest(_a, ["invalid", "onClear", "hiddenClearButton", "wrapperRef", "copyable", "endNode", "className", "minRows", "maxRows", "resizable"]);
|
|
73009
|
+
var _d = useState(false),
|
|
73010
|
+
showClearButton = _d[0],
|
|
73011
|
+
setShowClearButton = _d[1];
|
|
72977
73012
|
var combineRef = useCombineRef(textareaRef);
|
|
72978
73013
|
var minHeight = useCallback(function (lineHeight) {
|
|
72979
73014
|
return minRows ? minRows * lineHeight : 0;
|
|
@@ -73041,6 +73076,11 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
|
|
|
73041
73076
|
onClear === null || onClear === void 0 ? void 0 : onClear();
|
|
73042
73077
|
resizeHeight();
|
|
73043
73078
|
};
|
|
73079
|
+
var handleCopyClick = function handleCopyClick() {
|
|
73080
|
+
if (combineRef.current) {
|
|
73081
|
+
textCopy(combineRef.current.value);
|
|
73082
|
+
}
|
|
73083
|
+
};
|
|
73044
73084
|
var handleResizerMouseDown = function handleResizerMouseDown(e) {
|
|
73045
73085
|
var combine = combineRef === null || combineRef === void 0 ? void 0 : combineRef.current;
|
|
73046
73086
|
if (resizable && combine) {
|
|
@@ -73082,19 +73122,33 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
|
|
|
73082
73122
|
ref: combineRef,
|
|
73083
73123
|
onChange: handleTextareaChange,
|
|
73084
73124
|
rows: props.rows || minRows || 1
|
|
73085
|
-
})),
|
|
73125
|
+
})), jsxs("div", __assign({
|
|
73086
73126
|
className: "maru-textarea-end-node-wrapper"
|
|
73087
73127
|
}, {
|
|
73088
|
-
children: showClearButton && !props.disabled && jsx(
|
|
73089
|
-
|
|
73128
|
+
children: [showClearButton && !props.disabled && jsx(Button, {
|
|
73129
|
+
color: "secondary",
|
|
73130
|
+
size: "xs",
|
|
73131
|
+
variant: "text",
|
|
73090
73132
|
onClick: handleClearClick,
|
|
73091
|
-
tabIndex: -1
|
|
73133
|
+
tabIndex: -1,
|
|
73134
|
+
startIcon: {
|
|
73135
|
+
name: ICONS.Trash01_s1617,
|
|
73136
|
+
color: 'iconTertiary'
|
|
73137
|
+
}
|
|
73138
|
+
}), copyable && jsx(Button, {
|
|
73139
|
+
color: "secondary",
|
|
73140
|
+
size: "xs",
|
|
73141
|
+
variant: "text",
|
|
73142
|
+
onClick: handleCopyClick,
|
|
73143
|
+
startIcon: {
|
|
73144
|
+
name: ICONS.Copy_s1617,
|
|
73145
|
+
color: 'iconTertiary'
|
|
73146
|
+
}
|
|
73147
|
+
}), endNode && jsx("div", __assign({
|
|
73148
|
+
className: "maru-textarea-end-node"
|
|
73092
73149
|
}, {
|
|
73093
|
-
children:
|
|
73094
|
-
|
|
73095
|
-
color: "textSecondary"
|
|
73096
|
-
})
|
|
73097
|
-
}))
|
|
73150
|
+
children: endNode
|
|
73151
|
+
}))]
|
|
73098
73152
|
}))]
|
|
73099
73153
|
})), resizable && jsx("div", {
|
|
73100
73154
|
className: "resizer",
|
|
@@ -73114,6 +73168,8 @@ Textarea.defaultProps = {
|
|
|
73114
73168
|
onClear: undefined,
|
|
73115
73169
|
hiddenClearButton: undefined,
|
|
73116
73170
|
wrapperRef: undefined,
|
|
73171
|
+
copyable: false,
|
|
73172
|
+
endNode: undefined,
|
|
73117
73173
|
className: undefined,
|
|
73118
73174
|
minRows: undefined,
|
|
73119
73175
|
maxRows: undefined,
|
|
@@ -92667,7 +92723,7 @@ var img$1 = "data:image/svg+xml,%3csvg preserveAspectRatio='none' overflow='visi
|
|
|
92667
92723
|
|
|
92668
92724
|
var img = "data:image/svg+xml,%3csvg preserveAspectRatio='none' overflow='visible' style='display: block%3b' width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Icon-left'%3e%3cpath id='Icon' d='M12.6667 8H3.33333M8 12.6667L3.33333 8L8 3.33333' stroke='%23828588' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/g%3e%3c/svg%3e";
|
|
92669
92725
|
|
|
92670
|
-
var css_248z$5 = ".maru-pagination-wrapper {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n width: 100%;\n min-width: 0;\n color: var(--maru-text-tertiary);\n line-height: 20px;\n}\n.maru-pagination-wrapper.maru-pagination-with-divider {\n border-top: 1px solid var(--maru-border-secondary);\n padding-top: 24px;\n}\n.maru-pagination-wrapper .maru-pagination {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 16px;\n}\n.maru-pagination-wrapper .maru-pagination-summary,\n.maru-pagination-wrapper .maru-pagination-count,\n.maru-pagination-wrapper .maru-pagination-controls,\n.maru-pagination-wrapper .maru-pagination-input-wrapper,\n.maru-pagination-wrapper .maru-pagination-page-size,\n.maru-pagination-wrapper .maru-pagination-pages {\n display: flex;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n}\n.maru-pagination-wrapper .maru-pagination-summary,\n.maru-pagination-wrapper .maru-pagination-page-size,\n.maru-pagination-wrapper .maru-pagination-pages {\n gap: 8px;\n}\n.maru-pagination-wrapper .maru-pagination-controls {\n margin-left: auto;\n}\n.maru-pagination-wrapper .maru-pagination-navigation-button,\n.maru-pagination-wrapper .maru-pagination-page {\n flex-shrink: 0;\n
|
|
92726
|
+
var css_248z$5 = ".maru-pagination-wrapper {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n width: 100%;\n min-width: 0;\n color: var(--maru-text-tertiary);\n line-height: 20px;\n}\n.maru-pagination-wrapper.maru-pagination-with-divider {\n border-top: 1px solid var(--maru-border-secondary);\n padding-top: 24px;\n}\n.maru-pagination-wrapper .maru-pagination {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 16px;\n}\n.maru-pagination-wrapper .maru-pagination-summary,\n.maru-pagination-wrapper .maru-pagination-count,\n.maru-pagination-wrapper .maru-pagination-controls,\n.maru-pagination-wrapper .maru-pagination-input-wrapper,\n.maru-pagination-wrapper .maru-pagination-page-size,\n.maru-pagination-wrapper .maru-pagination-pages {\n display: flex;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n}\n.maru-pagination-wrapper .maru-pagination-summary,\n.maru-pagination-wrapper .maru-pagination-page-size,\n.maru-pagination-wrapper .maru-pagination-pages {\n gap: 8px;\n}\n.maru-pagination-wrapper .maru-pagination-controls {\n margin-left: auto;\n}\n.maru-pagination-wrapper .maru-pagination-navigation-button,\n.maru-pagination-wrapper .maru-pagination-page {\n flex-shrink: 0;\n}\n.maru-pagination-wrapper .maru-pagination-navigation-button img,\n.maru-pagination-wrapper .maru-pagination-page img {\n display: block;\n width: 16px;\n height: 16px;\n}\n.maru-pagination-wrapper:not(.maru-pagination-simple) .maru-pagination-navigation-button,\n.maru-pagination-wrapper:not(.maru-pagination-simple) .maru-pagination-page {\n color: var(--maru-text-primary);\n background: transparent;\n}\n.maru-pagination-wrapper:not(.maru-pagination-simple) .maru-pagination-navigation-button:focus-visible,\n.maru-pagination-wrapper:not(.maru-pagination-simple) .maru-pagination-page:focus-visible {\n outline: 2px solid var(--maru-border-brand-primary);\n outline-offset: 2px;\n}\n.maru-pagination-wrapper:not(.maru-pagination-simple) .maru-pagination-navigation-button:hover:not(:disabled), .maru-pagination-wrapper:not(.maru-pagination-simple) .maru-pagination-navigation-button:active:not(:disabled),\n.maru-pagination-wrapper:not(.maru-pagination-simple) .maru-pagination-page:hover:not(:disabled),\n.maru-pagination-wrapper:not(.maru-pagination-simple) .maru-pagination-page:active:not(:disabled) {\n background: var(--maru-background-primary-hover);\n}\n.maru-pagination-wrapper .maru-pagination-button-hidden {\n visibility: hidden;\n}\n.maru-pagination-wrapper .maru-pagination-input {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n box-sizing: content-box;\n min-width: 18px;\n height: 20px;\n padding: 7px 8px;\n margin: 0;\n border: 1px solid var(--maru-border-primary);\n border-radius: 8px;\n background: var(--maru-background-primary);\n color: var(--maru-text-tertiary);\n line-height: 20px;\n text-align: center;\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.maru-pagination-wrapper .maru-pagination-input::-webkit-outer-spin-button, .maru-pagination-wrapper .maru-pagination-input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.maru-pagination-wrapper .maru-pagination-input:focus-visible {\n outline: 2px solid var(--maru-border-brand-primary);\n outline-offset: 2px;\n}\n.maru-pagination-wrapper .maru-pagination-input:disabled {\n color: var(--maru-text-tertiary);\n background: var(--maru-background-secondary);\n cursor: default;\n}\n.maru-pagination-wrapper .maru-pagination-slash {\n width: 20px;\n text-align: center;\n}\n.maru-pagination-wrapper .maru-pagination-size-select {\n flex-shrink: 0;\n}\n.maru-pagination-wrapper.maru-pagination-simple .maru-pagination-controls {\n gap: 12px;\n}\n.maru-pagination-wrapper.maru-pagination-number .maru-pagination-navigation-button {\n border-radius: 6px;\n}\n.maru-pagination-wrapper.maru-pagination-number .maru-pagination {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n gap: 8px;\n}\n.maru-pagination-wrapper.maru-pagination-number .maru-pagination-pages {\n flex-wrap: wrap;\n justify-content: center;\n min-width: 0;\n}\n.maru-pagination-wrapper.maru-pagination-number .maru-pagination-page {\n min-width: 32px;\n padding: 6px 12px;\n border-radius: 8px;\n font-weight: 500;\n}\n.maru-pagination-wrapper.maru-pagination-number .maru-pagination-page[aria-current=page] {\n background: var(--maru-background-brand-secondary);\n font-weight: 600;\n}\n.maru-pagination-wrapper.maru-pagination-number .maru-pagination-page[aria-current=page]:hover, .maru-pagination-wrapper.maru-pagination-number .maru-pagination-page[aria-current=page]:active {\n background: var(--maru-background-brand-secondary-hover);\n}\n.maru-pagination-wrapper.maru-pagination-number .maru-pagination-gap {\n padding: 6px 16px;\n color: var(--maru-text-primary);\n font-weight: 500;\n}";
|
|
92671
92727
|
styleInject(css_248z$5);
|
|
92672
92728
|
|
|
92673
92729
|
var nonNegativeInteger = function nonNegativeInteger(value) {
|