maru_design2 2.22.3 → 2.23.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 (11) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/components/atoms/checkbox/Checkbox.d.ts +1 -1
  3. package/dist/components/atoms/icon/iconmap.d.ts +14 -0
  4. package/dist/components/atoms/input/Input.d.ts +5 -1
  5. package/dist/components/atoms/tooltip/Tooltip.d.ts +1 -1
  6. package/dist/components/molecules/searchInput/filter/FilterPopover.d.ts +16 -0
  7. package/dist/enums/gap.d.ts +1 -1
  8. package/dist/enums/type.d.ts +1 -1
  9. package/dist/index.js +439 -91
  10. package/package.json +1 -1
  11. /package/dist/components/molecules/searchInput/{Filter.d.ts → filter/index.d.ts} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.23.0](https://github.com/42maru-ai/maru-design2/compare/v2.22.4...v2.23.0) (2025-02-17)
4
+
5
+
6
+ ### Features
7
+
8
+ * :bug: Popover,Tooltip,Dropdown - update open logics [#486](https://github.com/42maru-ai/maru-design2/issues/486) ([dc76a0d](https://github.com/42maru-ai/maru-design2/commit/dc76a0d067598bc2cc070c584611d0707c824f17))
9
+ * :sparkles: Input - add date, time type [#444](https://github.com/42maru-ai/maru-design2/issues/444) ([f520e00](https://github.com/42maru-ai/maru-design2/commit/f520e004c4416ce9a4c2ba5b977d9b175ca87bdb))
10
+ * :sparkles: Input - add persistent placeholder [#479](https://github.com/42maru-ai/maru-design2/issues/479) ([7c30ffc](https://github.com/42maru-ai/maru-design2/commit/7c30ffcf02231764c5869d58369b3669a75d5227))
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * :bug: SearchInput - update popover to div [#480](https://github.com/42maru-ai/maru-design2/issues/480) ([b20ea19](https://github.com/42maru-ai/maru-design2/commit/b20ea1959991000e07bbfb196dc65d6816d62885))
16
+
17
+ ## [2.22.4](https://github.com/42maru-ai/maru-design2/compare/v2.22.3...v2.22.4) (2025-02-12)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * :bento: Icon - add llm studio icon [#402](https://github.com/42maru-ai/maru-design2/issues/402) ([92a95ee](https://github.com/42maru-ai/maru-design2/commit/92a95ee016fc0f873da444d14e8a78873dd979bf))
23
+ * :lipstick: Checkbox - UPDATE label font-weight ([48da755](https://github.com/42maru-ai/maru-design2/commit/48da755b2fe2969b8835f55ec325e09b100cefa9))
24
+ * :lipstick: Radio - UPDATE label font-weight ([a0c9eaa](https://github.com/42maru-ai/maru-design2/commit/a0c9eaa174a5c3188f40591b7b95bd8580e1f947))
25
+ * :lipstick: Textarea - update clear button style [#491](https://github.com/42maru-ai/maru-design2/issues/491) ([f3e6434](https://github.com/42maru-ai/maru-design2/commit/f3e64341c57d306dddaddd88d87d1f41d658d107))
26
+ * :lipstick: Toast - update close button style ([4f2b957](https://github.com/42maru-ai/maru-design2/commit/4f2b957dd428698eb5c43a26e08d75dcbc5df663))
27
+
3
28
  ## [2.22.3](https://github.com/42maru-ai/maru-design2/compare/v2.22.2...v2.22.3) (2025-02-11)
4
29
 
5
30
 
package/dist/components/atoms/checkbox/Checkbox.d.ts CHANGED
@@ -4,6 +4,7 @@ import { TCheckboxSize } from '../../../enums/size';
4
4
  import './checkbox.scss';
5
5
  export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'type'> {
6
6
  checked?: boolean;
7
+ label?: string;
7
8
  /**
8
9
  * (@v1 variant)
9
10
  */
@@ -12,7 +13,6 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
12
13
  * 컴포넌트와 라벨 사이의 거리
13
14
  */
14
15
  gap?: TGap;
15
- label?: string;
16
16
  /**
17
17
  * [16, 18, 24]
18
18
  */
package/dist/components/atoms/icon/iconmap.d.ts CHANGED
@@ -54,8 +54,10 @@ export declare const ICONS: {
54
54
  readonly BarChartSquare01Bg_s1810: "BarChartSquare01Bg_s1810";
55
55
  readonly BarChartSquare01_s1810: "BarChartSquare01_s1810";
56
56
  readonly BarChartSquare01_s2420: "BarChartSquare01_s2420";
57
+ readonly BarChartSquare02_s2415: "BarChartSquare02_s2415";
57
58
  readonly BarChartSquare02_s2420: "BarChartSquare02_s2420";
58
59
  readonly BookClosed_s2420: "BookClosed_s2420";
60
+ readonly BookMark_s1810: "BookMark_s1810";
59
61
  readonly BookOpen02_s1615: "BookOpen02_s1615";
60
62
  readonly BulbOff_s1613: "BulbOff_s1613";
61
63
  readonly BulbOn_s1613: "BulbOn_s1613";
@@ -107,6 +109,7 @@ export declare const ICONS: {
107
109
  readonly ClipboardPlus_s2415: "ClipboardPlus_s2415";
108
110
  readonly ClipboardX_s1613: "ClipboardX_s1613";
109
111
  readonly Clipboard_s1615: "Clipboard_s1615";
112
+ readonly CodeBox_s2410: "CodeBox_s2410";
110
113
  readonly CodeSnippet02_s2420: "CodeSnippet02_s2420";
111
114
  readonly Connection_s1810: "Connection_s1810";
112
115
  readonly Copy03_s1615: "Copy03_s1615";
@@ -161,6 +164,7 @@ export declare const ICONS: {
161
164
  readonly Drag_s1613: "Drag_s1613";
162
165
  readonly Edit03_s1413: "Edit03_s1413";
163
166
  readonly Edit03_s1613: "Edit03_s1613";
167
+ readonly Expand_s1613: "Expand_s1613";
164
168
  readonly Expand_s1815: "Expand_s1815";
165
169
  readonly EyeOff_s1610: "EyeOff_s1610";
166
170
  readonly Eye_s1610: "Eye_s1610";
@@ -182,6 +186,7 @@ export declare const ICONS: {
182
186
  readonly FileQuestion02_s1615: "FileQuestion02_s1615";
183
187
  readonly FileRefresh_s1810: "FileRefresh_s1810";
184
188
  readonly FileRefresh_s1812: "FileRefresh_s1812";
189
+ readonly FileSlash_02_s1810: "FileSlash_02_s1810";
185
190
  readonly FileSlash_s1413: "FileSlash_s1413";
186
191
  readonly FileX02_s1615: "FileX02_s1615";
187
192
  readonly FileX02_s3220: "FileX02_s3220";
@@ -207,6 +212,7 @@ export declare const ICONS: {
207
212
  readonly GraduationHat01_s1615: "GraduationHat01_s1615";
208
213
  readonly GraduationHat01_s2415: "GraduationHat01_s2415";
209
214
  readonly GraduationHat01_s2420: "GraduationHat01_s2420";
215
+ readonly HistoryTimer_s1210: "HistoryTimer_s1210";
210
216
  readonly HomeOutline24_s2410: "HomeOutline24_s2410";
211
217
  readonly Home_s2015: "Home_s2015";
212
218
  readonly Home_s2415: "Home_s2415";
@@ -244,6 +250,7 @@ export declare const ICONS: {
244
250
  readonly PieChart03_s2420: "PieChart03_s2420";
245
251
  readonly PlayCircleLeft_s2420: "PlayCircleLeft_s2420";
246
252
  readonly PlayCircleRight_s2420: "PlayCircleRight_s2420";
253
+ readonly PlayRight_s1413: "PlayRight_s1413";
247
254
  readonly PlusCircle_s1210: "PlusCircle_s1210";
248
255
  readonly PlusCircle_s1413: "PlusCircle_s1413";
249
256
  readonly PlusCircle_s1613: "PlusCircle_s1613";
@@ -253,6 +260,7 @@ export declare const ICONS: {
253
260
  readonly PlusCircle_s2410: "PlusCircle_s2410";
254
261
  readonly PlusCircle_s2420: "PlusCircle_s2420";
255
262
  readonly PlusDownLines_s1413: "PlusDownLines_s1413";
263
+ readonly PlusLines_s1210: "PlusLines_s1210";
256
264
  readonly PlusUpLines_s1413: "PlusUpLines_s1413";
257
265
  readonly Plus_s1610: "Plus_s1610";
258
266
  readonly PreviewLine_s2013: "PreviewLine_s2013";
@@ -264,6 +272,7 @@ export declare const ICONS: {
264
272
  readonly RefreshCcw02_s1415: "RefreshCcw02_s1415";
265
273
  readonly RefreshCcw02_s1615: "RefreshCcw02_s1615";
266
274
  readonly RefreshCcw02_s2420: "RefreshCcw02_s2420";
275
+ readonly RefreshCw01_s1210: "RefreshCw01_s1210";
267
276
  readonly RefreshCw01_s1613: "RefreshCw01_s1613";
268
277
  readonly RefreshCw01_s1815: "RefreshCw01_s1815";
269
278
  readonly RefreshCw02_s1413: "RefreshCw02_s1413";
@@ -271,6 +280,8 @@ export declare const ICONS: {
271
280
  readonly ReverseLeft2_s1613: "ReverseLeft2_s1613";
272
281
  readonly ReverseLeft_s1815: "ReverseLeft_s1815";
273
282
  readonly ReverseRight2Circle_s1413: "ReverseRight2Circle_s1413";
283
+ readonly Role_s2415: "Role_s2415";
284
+ readonly SaveAll_s1610: "SaveAll_s1610";
274
285
  readonly SaveAll_s1810: "SaveAll_s1810";
275
286
  readonly SaveAll_s1812: "SaveAll_s1812";
276
287
  readonly Save_s1413: "Save_s1413";
@@ -281,12 +292,15 @@ export declare const ICONS: {
281
292
  readonly Settings02_s1615: "Settings02_s1615";
282
293
  readonly Settings02_s2415: "Settings02_s2415";
283
294
  readonly Settings02_s2420: "Settings02_s2420";
295
+ readonly Settings03_s2415: "Settings03_s2415";
284
296
  readonly Share03_s1215: "Share03_s1215";
285
297
  readonly Share03_s1413: "Share03_s1413";
286
298
  readonly Share03_s1613: "Share03_s1613";
287
299
  readonly SortDown_s0815: "SortDown_s0815";
288
300
  readonly SortOutline_s1415: "SortOutline_s1415";
289
301
  readonly SortUp_s0815: "SortUp_s0815";
302
+ readonly StarBg_s1610: "StarBg_s1610";
303
+ readonly Star_s1613: "Star_s1613";
290
304
  readonly State_s1610: "State_s1610";
291
305
  readonly State_s1810: "State_s1810";
292
306
  readonly StopCircle_s1413: "StopCircle_s1413";
package/dist/components/atoms/input/Input.d.ts CHANGED
@@ -11,7 +11,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
11
11
  };
12
12
  label?: string;
13
13
  /**
14
- * 데이터 타입. ['text', 'password', 'number']
14
+ * 데이터 타입
15
15
  */
16
16
  type?: TInputType;
17
17
  /**
@@ -35,5 +35,9 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
35
35
  */
36
36
  endNode?: React.ReactNode;
37
37
  className?: string;
38
+ /**
39
+ * true이면 placeholder가 없어지지 않음
40
+ */
41
+ persistentPlaceholder?: boolean;
38
42
  }
39
43
  export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
package/dist/components/atoms/tooltip/Tooltip.d.ts CHANGED
@@ -22,7 +22,7 @@ export interface TooltipProps {
22
22
  */
23
23
  portal?: boolean;
24
24
  /**
25
- * 대상와 툴팁 사이의 거리. ['6px', '4px', '0px']
25
+ * 대상와 툴팁 사이의 거리
26
26
  */
27
27
  gap?: TTooltipGap;
28
28
  }
package/dist/components/molecules/searchInput/filter/FilterPopover.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ interface Props {
3
+ parent: HTMLElement;
4
+ onClose: () => void;
5
+ formats: {
6
+ columnIdKey: string;
7
+ columnName?: string;
8
+ filter?: React.ReactNode;
9
+ }[];
10
+ resetButtonContent?: string;
11
+ onReset: () => void;
12
+ searchButtonContent?: string;
13
+ onSearch: () => void;
14
+ }
15
+ declare function FilterPopover({ parent, onClose, formats, resetButtonContent, onReset, searchButtonContent, onSearch, }: Props): import("react/jsx-runtime").JSX.Element;
16
+ export default FilterPopover;
package/dist/enums/gap.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export declare const GAPS: readonly ["8px", "4px", "2px"];
2
2
  export type TGap = (typeof GAPS)[number];
3
- export declare const TOOLTIP_GAPS: readonly ["6px", "4px", "0px"];
3
+ export declare const TOOLTIP_GAPS: readonly [6, 4, 0];
4
4
  export type TTooltipGap = (typeof TOOLTIP_GAPS)[number];
package/dist/enums/type.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const INPUT_TYPES: readonly ["text", "password", "number"];
1
+ export declare const INPUT_TYPES: readonly ["text", "password", "number", "date", "time"];
2
2
  export type TInputType = (typeof INPUT_TYPES)[number];
3
3
  export declare const DROPDOWN_TYPES: readonly ["button", "search"];
4
4
  export type TDropdownType = (typeof DROPDOWN_TYPES)[number];
package/dist/index.js CHANGED
@@ -495,6 +495,21 @@ var iconmap = {
495
495
  "circles": [],
496
496
  "rects": []
497
497
  },
498
+ "BarChartSquare02_s2415": {
499
+ "width": "24",
500
+ "height": "24",
501
+ "viewBox": "0 0 24 24",
502
+ "fill": "none",
503
+ "paths": [{
504
+ "d": "M8 15V17M12 11V17M16 7V17M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z",
505
+ "stroke": "#8C8C8C",
506
+ "strokeWidth": "1.5",
507
+ "strokeLinecap": "round",
508
+ "strokeLinejoin": "round"
509
+ }],
510
+ "circles": [],
511
+ "rects": []
512
+ },
498
513
  "BarChartSquare02_s2420": {
499
514
  "width": "24",
500
515
  "height": "24",
@@ -525,6 +540,18 @@ var iconmap = {
525
540
  "circles": [],
526
541
  "rects": []
527
542
  },
543
+ "BookMark_s1810": {
544
+ "width": "18",
545
+ "height": "18",
546
+ "viewBox": "0 0 18 18",
547
+ "fill": "none",
548
+ "paths": [{
549
+ "d": "M11.5 2C12.1377 1.99997 12.7513 2.22736 13.2152 2.63566C13.6792 3.04395 13.9584 3.60228 13.9958 4.19641L14 4.3333V15.222C14 15.3521 13.9651 15.4801 13.8984 15.5944C13.8317 15.7086 13.7354 15.8054 13.6182 15.8759C13.5011 15.9464 13.3668 15.9884 13.2278 15.9979C13.0888 16.0075 12.9494 15.9843 12.8225 15.9306L12.7383 15.8886L8.99917 13.7956L5.26167 15.8886C5.14216 15.9555 5.00657 15.9934 4.86731 15.9988C4.72805 16.0042 4.58957 15.9768 4.46455 15.9194C4.33952 15.8619 4.23194 15.776 4.15166 15.6697C4.07138 15.5633 4.02095 15.4399 4.005 15.3107L4 15.222V4.3333C3.99996 3.73814 4.2436 3.16547 4.68107 2.73245C5.11854 2.29943 5.71676 2.0388 6.35333 2.00389L6.5 2H11.5Z",
550
+ "fill": "#213A78"
551
+ }],
552
+ "circles": [],
553
+ "rects": []
554
+ },
528
555
  "BookOpen02_s1615": {
529
556
  "width": "16",
530
557
  "height": "16",
@@ -1298,6 +1325,18 @@ var iconmap = {
1298
1325
  "circles": [],
1299
1326
  "rects": []
1300
1327
  },
1328
+ "CodeBox_s2410": {
1329
+ "width": "24",
1330
+ "height": "24",
1331
+ "viewBox": "0 0 24 24",
1332
+ "fill": "none",
1333
+ "paths": [{
1334
+ "d": "M7.62124 9.83331C7.32835 9.54041 6.85347 9.54041 6.56058 9.83331C6.26769 10.1262 6.26769 10.6011 6.56058 10.894L7.62124 9.83331ZM9.25618 12.5289L9.78651 11.9986L9.25618 12.5289ZM9.25618 13.1075L9.78651 13.6378L9.25618 13.1075ZM6.56058 14.7424C6.26769 15.0353 6.26769 15.5102 6.56058 15.8031C6.85347 16.096 7.32835 16.096 7.62124 15.8031L6.56058 14.7424ZM11.1818 14.5227C10.7676 14.5227 10.4318 14.8585 10.4318 15.2727C10.4318 15.6869 10.7676 16.0227 11.1818 16.0227V14.5227ZM13.6364 16.0227C14.0506 16.0227 14.3864 15.6869 14.3864 15.2727C14.3864 14.8585 14.0506 14.5227 13.6364 14.5227V16.0227ZM5.23368 20.5541L5.57417 19.8859H5.57417L5.23368 20.5541ZM3.44588 18.7663L4.11414 18.4258L3.44588 18.7663ZM20.5541 18.7663L19.8859 18.4258V18.4258L20.5541 18.7663ZM18.7663 20.5541L18.4258 19.8859H18.4258L18.7663 20.5541ZM18.7663 3.44588L18.4258 4.11414L18.7663 3.44588ZM20.9607 7.09091L21.7094 7.0452L20.9607 7.09091ZM20.5541 5.23368L19.8859 5.57417V5.57417L20.5541 5.23368ZM5.23368 3.44588L5.57417 4.11414L5.23368 3.44588ZM3.44588 5.23368L4.11414 5.57417L3.44588 5.23368ZM6.56058 10.894L8.72585 13.0592L9.78651 11.9986L7.62124 9.83331L6.56058 10.894ZM8.72585 12.5771L6.56058 14.7424L7.62124 15.8031L9.78651 13.6378L8.72585 12.5771ZM8.72585 13.0592C8.59272 12.9261 8.59272 12.7103 8.72585 12.5771L9.78651 13.6378C10.2392 13.1851 10.2392 12.4512 9.78651 11.9986L8.72585 13.0592ZM11.1818 16.0227H13.6364V14.5227H11.1818V16.0227ZM9.54545 3.75H14.4545V2.25H9.54545V3.75ZM20.25 9.54545V14.4545H21.75V9.54545H20.25ZM14.4545 20.25H9.54545V21.75H14.4545V20.25ZM3.75 14.4545V9.54545H2.25V14.4545H3.75ZM9.54545 20.25C8.38752 20.25 7.56417 20.2494 6.91963 20.1968C6.28384 20.1448 5.88836 20.046 5.57417 19.8859L4.89318 21.2224C5.45408 21.5082 6.06893 21.6322 6.79748 21.6918C7.51727 21.7506 8.41227 21.75 9.54545 21.75V20.25ZM2.25 14.4545C2.25 15.5877 2.24942 16.4827 2.30823 17.2025C2.36775 17.9311 2.49184 18.5459 2.77763 19.1068L4.11414 18.4258C3.95405 18.1116 3.85519 17.7162 3.80324 17.0804C3.75058 16.4358 3.75 15.6125 3.75 14.4545H2.25ZM5.57417 19.8859C4.94554 19.5656 4.43444 19.0545 4.11414 18.4258L2.77763 19.1068C3.24174 20.0177 3.98231 20.7583 4.89318 21.2224L5.57417 19.8859ZM20.25 14.4545C20.25 15.6125 20.2494 16.4358 20.1968 17.0804C20.1448 17.7162 20.046 18.1116 19.8859 18.4258L21.2224 19.1068C21.5082 18.5459 21.6322 17.9311 21.6918 17.2025C21.7506 16.4827 21.75 15.5877 21.75 14.4545H20.25ZM14.4545 21.75C15.5877 21.75 16.4827 21.7506 17.2025 21.6918C17.9311 21.6322 18.5459 21.5082 19.1068 21.2224L18.4258 19.8859C18.1116 20.046 17.7162 20.1448 17.0804 20.1968C16.4358 20.2494 15.6125 20.25 14.4545 20.25V21.75ZM19.8859 18.4258C19.5656 19.0545 19.0545 19.5656 18.4258 19.8859L19.1068 21.2224C20.0177 20.7583 20.7583 20.0177 21.2224 19.1068L19.8859 18.4258ZM14.4545 3.75C15.6125 3.75 16.4358 3.75058 17.0804 3.80324C17.7162 3.85519 18.1116 3.95405 18.4258 4.11414L19.1068 2.77763C18.5459 2.49184 17.9311 2.36775 17.2025 2.30823C16.4827 2.24942 15.5877 2.25 14.4545 2.25V3.75ZM21.75 9.54545C21.75 8.53498 21.7503 7.7161 21.7094 7.0452L20.2121 7.13662C20.2497 7.75141 20.25 8.51754 20.25 9.54545H21.75ZM21.7094 7.0452C21.6581 6.20532 21.5392 5.51497 21.2224 4.89318L19.8859 5.57417C20.0641 5.92401 20.1655 6.37199 20.2121 7.13662L21.7094 7.0452ZM18.4258 4.11414C19.0545 4.43444 19.5656 4.94554 19.8859 5.57417L21.2224 4.89318C20.7583 3.98231 20.0177 3.24174 19.1068 2.77763L18.4258 4.11414ZM9.54545 2.25C8.41227 2.25 7.51727 2.24942 6.79748 2.30823C6.06893 2.36775 5.45408 2.49184 4.89318 2.77763L5.57417 4.11414C5.88836 3.95405 6.28384 3.85519 6.91963 3.80324C7.56417 3.75058 8.38752 3.75 9.54545 3.75V2.25ZM3.75 9.54545C3.75 8.51754 3.75032 7.75141 3.78786 7.13662L2.29064 7.0452C2.24968 7.7161 2.25 8.53498 2.25 9.54545H3.75ZM3.78786 7.13662C3.83454 6.372 3.93589 5.92401 4.11414 5.57417L2.77763 4.89318C2.46081 5.51497 2.34193 6.20532 2.29064 7.0452L3.78786 7.13662ZM4.89318 2.77763C3.98231 3.24174 3.24174 3.98231 2.77763 4.89318L4.11414 5.57417C4.43444 4.94554 4.94554 4.43444 5.57417 4.11414L4.89318 2.77763ZM3.03925 7.84091H20.9607V6.34091H3.03925V7.84091Z",
1335
+ "fill": "#8C8C8C"
1336
+ }],
1337
+ "circles": [],
1338
+ "rects": []
1339
+ },
1301
1340
  "CodeSnippet02_s2420": {
1302
1341
  "width": "24",
1303
1342
  "height": "24",
@@ -2528,6 +2567,21 @@ var iconmap = {
2528
2567
  "circles": [],
2529
2568
  "rects": []
2530
2569
  },
2570
+ "Expand_s1613": {
2571
+ "width": "19",
2572
+ "height": "16",
2573
+ "viewBox": "0 0 19 16",
2574
+ "fill": "none",
2575
+ "paths": [{
2576
+ "d": "M12.4972 5.33333L16.1229 2M16.1229 2H12.4972M16.1229 2V5.33333M6.69604 5.33333L3.07031 2M3.07031 2L3.07031 5.33333M3.07031 2L6.69604 2M6.69604 10.6667L3.07031 14M3.07031 14H6.69604M3.07031 14L3.07031 10.6667M12.4972 10.6667L16.1229 14M16.1229 14V10.6667M16.1229 14H12.4972",
2577
+ "stroke": "#8C8C8C",
2578
+ "strokeWidth": "1.3",
2579
+ "strokeLinecap": "round",
2580
+ "strokeLinejoin": "round"
2581
+ }],
2582
+ "circles": [],
2583
+ "rects": []
2584
+ },
2531
2585
  "Expand_s1815": {
2532
2586
  "width": "18",
2533
2587
  "height": "18",
@@ -2925,6 +2979,40 @@ var iconmap = {
2925
2979
  "circles": [],
2926
2980
  "rects": []
2927
2981
  },
2982
+ "FileSlash_02_s1810": {
2983
+ "width": "18",
2984
+ "height": "18",
2985
+ "viewBox": "0 0 18 18",
2986
+ "fill": "none",
2987
+ "paths": [{
2988
+ "d": "M5.25 2.25H12.75C13.1478 2.25 13.5294 2.40804 13.8107 2.68934C14.092 2.97064 14.25 3.35218 14.25 3.75V11.25M14.25 14.25C14.25 14.6478 14.092 15.0294 13.8107 15.3107C13.5294 15.592 13.1478 15.75 12.75 15.75H5.25C4.85218 15.75 4.47064 15.592 4.18934 15.3107C3.90804 15.0294 3.75 14.6478 3.75 14.25V3.75",
2989
+ "stroke": "#BDBDBD",
2990
+ "strokeLinecap": "round",
2991
+ "strokeLinejoin": "round"
2992
+ }, {
2993
+ "d": "M8.25 5.25H11.25",
2994
+ "stroke": "#BDBDBD",
2995
+ "strokeLinecap": "round",
2996
+ "strokeLinejoin": "round"
2997
+ }, {
2998
+ "d": "M6.75 8.25H8.25",
2999
+ "stroke": "#BDBDBD",
3000
+ "strokeLinecap": "round",
3001
+ "strokeLinejoin": "round"
3002
+ }, {
3003
+ "d": "M6.75 11.25H9.75",
3004
+ "stroke": "#BDBDBD",
3005
+ "strokeLinecap": "round",
3006
+ "strokeLinejoin": "round"
3007
+ }, {
3008
+ "d": "M2.25 2.25L15.75 15.75",
3009
+ "stroke": "#BDBDBD",
3010
+ "strokeLinecap": "round",
3011
+ "strokeLinejoin": "round"
3012
+ }],
3013
+ "circles": [],
3014
+ "rects": []
3015
+ },
2928
3016
  "FileSlash_s1413": {
2929
3017
  "width": "14",
2930
3018
  "height": "16",
@@ -3347,6 +3435,25 @@ var iconmap = {
3347
3435
  "circles": [],
3348
3436
  "rects": []
3349
3437
  },
3438
+ "HistoryTimer_s1210": {
3439
+ "width": "12",
3440
+ "height": "13",
3441
+ "viewBox": "0 0 12 13",
3442
+ "fill": "none",
3443
+ "paths": [{
3444
+ "d": "M6 4.5V6.5L7 7.5",
3445
+ "stroke": "#213A78",
3446
+ "strokeLinecap": "round",
3447
+ "strokeLinejoin": "round"
3448
+ }, {
3449
+ "d": "M1.52539 6.00101C1.63744 4.90104 2.15052 3.88082 2.96676 3.13499C3.78299 2.38917 4.84524 1.96995 5.95083 1.95733C7.05642 1.9447 8.12797 2.33954 8.96102 3.06653C9.79408 3.79351 10.3303 4.80175 10.4675 5.89888C10.6046 6.996 10.333 8.10522 9.70457 9.01489C9.07609 9.92457 8.13471 10.571 7.06003 10.8309C5.98535 11.0908 4.8526 10.946 3.87789 10.424C2.90318 9.90209 2.15475 9.03956 1.77539 8.00101M1.52539 10.501V8.00101H4.02539",
3450
+ "stroke": "#213A78",
3451
+ "strokeLinecap": "round",
3452
+ "strokeLinejoin": "round"
3453
+ }],
3454
+ "circles": [],
3455
+ "rects": []
3456
+ },
3350
3457
  "HomeOutline24_s2410": {
3351
3458
  "width": "24",
3352
3459
  "height": "24",
@@ -4019,6 +4126,21 @@ var iconmap = {
4019
4126
  "circles": [],
4020
4127
  "rects": []
4021
4128
  },
4129
+ "PlayRight_s1413": {
4130
+ "width": "14",
4131
+ "height": "15",
4132
+ "viewBox": "0 0 14 15",
4133
+ "fill": "none",
4134
+ "paths": [{
4135
+ "d": "M4.0835 2.83301V12.1663L11.6668 7.49967L4.0835 2.83301Z",
4136
+ "stroke": "#213A78",
4137
+ "strokeWidth": "1.3",
4138
+ "strokeLinecap": "round",
4139
+ "strokeLinejoin": "round"
4140
+ }],
4141
+ "circles": [],
4142
+ "rects": []
4143
+ },
4022
4144
  "PlusCircle_s1210": {
4023
4145
  "width": "12",
4024
4146
  "height": "13",
@@ -4163,6 +4285,20 @@ var iconmap = {
4163
4285
  "circles": [],
4164
4286
  "rects": []
4165
4287
  },
4288
+ "PlusLines_s1210": {
4289
+ "width": "12",
4290
+ "height": "12",
4291
+ "viewBox": "0 0 12 12",
4292
+ "fill": "none",
4293
+ "paths": [{
4294
+ "d": "M6.42836 5.57129H0.856934M4.28551 8.57129H0.856934M8.57122 2.57129H0.856934M8.57122 11.1427V5.99986M5.99979 8.57129H11.1426",
4295
+ "stroke": "#213A78",
4296
+ "strokeLinecap": "round",
4297
+ "strokeLinejoin": "round"
4298
+ }],
4299
+ "circles": [],
4300
+ "rects": []
4301
+ },
4166
4302
  "PlusUpLines_s1413": {
4167
4303
  "width": "13",
4168
4304
  "height": "9",
@@ -4331,6 +4467,20 @@ var iconmap = {
4331
4467
  "circles": [],
4332
4468
  "rects": []
4333
4469
  },
4470
+ "RefreshCw01_s1210": {
4471
+ "width": "12",
4472
+ "height": "12",
4473
+ "viewBox": "0 0 12 12",
4474
+ "fill": "none",
4475
+ "paths": [{
4476
+ "d": "M1.5 5C1.5 5 2.44973 3.63411 3.22129 2.81912C3.99285 2.00413 5.05907 1.5 6.23684 1.5C8.59132 1.5 10.5 3.51472 10.5 6C10.5 8.48528 8.59132 10.5 6.23684 10.5C4.29327 10.5 2.65347 9.12714 2.14031 7.25M1.5 5V2M1.5 5H4.34211",
4477
+ "stroke": "#213A78",
4478
+ "strokeLinecap": "round",
4479
+ "strokeLinejoin": "round"
4480
+ }],
4481
+ "circles": [],
4482
+ "rects": []
4483
+ },
4334
4484
  "RefreshCw01_s1613": {
4335
4485
  "width": "16",
4336
4486
  "height": "16",
@@ -4442,6 +4592,47 @@ var iconmap = {
4442
4592
  "circles": [],
4443
4593
  "rects": []
4444
4594
  },
4595
+ "Role_s2415": {
4596
+ "width": "24",
4597
+ "height": "24",
4598
+ "viewBox": "0 0 24 24",
4599
+ "fill": "none",
4600
+ "paths": [{
4601
+ "d": "M9.07847 5.25H18.7213C19.2328 5.25 19.7234 5.48705 20.085 5.90901C20.4467 6.33097 20.6499 6.90326 20.6499 7.5V18.75C20.6499 19.3467 20.4467 19.919 20.085 20.341C19.7234 20.7629 19.2328 21 18.7213 21H7.1499",
4602
+ "stroke": "#8C8C8C",
4603
+ "strokeWidth": "1.5",
4604
+ "strokeLinecap": "round",
4605
+ "strokeLinejoin": "round"
4606
+ }, {
4607
+ "d": "M4 18.75C4 19.3467 4.23705 19.919 4.65901 20.341C5.08097 20.7629 5.65326 21 6.25 21C6.84674 21 7.41903 20.7629 7.84099 20.341C8.26295 19.919 8.5 19.3467 8.5 18.75C8.5 18.1533 8.26295 17.581 7.84099 17.159C7.41903 16.7371 6.84674 16.5 6.25 16.5C5.65326 16.5 5.08097 16.7371 4.65901 17.159C4.23705 17.581 4 18.1533 4 18.75Z",
4608
+ "stroke": "#8C8C8C",
4609
+ "strokeWidth": "1.5",
4610
+ "strokeLinecap": "round",
4611
+ "strokeLinejoin": "round"
4612
+ }, {
4613
+ "d": "M8.5 18.75V5.25C8.5 4.65326 8.26295 4.08097 7.84099 3.65901C7.41903 3.23705 6.84674 3 6.25 3C5.65326 3 5.08097 3.23705 4.65901 3.65901C4.23705 4.08097 4 4.65326 4 5.25V18.75",
4614
+ "stroke": "#8C8C8C",
4615
+ "strokeWidth": "1.5",
4616
+ "strokeLinecap": "round",
4617
+ "strokeLinejoin": "round"
4618
+ }],
4619
+ "circles": [],
4620
+ "rects": []
4621
+ },
4622
+ "SaveAll_s1610": {
4623
+ "width": "16",
4624
+ "height": "17",
4625
+ "viewBox": "0 0 16 17",
4626
+ "fill": "none",
4627
+ "paths": [{
4628
+ "d": "M5.03736 3.16699H9.58522C9.87511 3.16699 10.0201 3.16699 10.1565 3.19974C10.2774 3.22877 10.393 3.27666 10.499 3.34164C10.6186 3.41493 10.7211 3.51742 10.9261 3.7224L12.7782 5.57454C12.9832 5.77952 13.0857 5.88201 13.159 6.00162C13.224 6.10766 13.2719 6.22327 13.3009 6.3442C13.3337 6.4806 13.3337 6.62554 13.3337 6.91543V11.4633M8.29662 7.31514H5.98551C5.65363 7.31514 5.48769 7.31514 5.36092 7.25055C5.24942 7.19374 5.15877 7.10308 5.10195 6.99158C5.03736 6.86482 5.03736 6.69888 5.03736 6.36699V5.24107M8.88921 13.8337V11.2263C8.88921 10.8944 8.88921 10.7284 8.82463 10.6017C8.76781 10.4902 8.67716 10.3995 8.56565 10.3427C8.43889 10.2781 8.27295 10.2781 7.94107 10.2781H5.98551C5.65363 10.2781 5.48769 10.2781 5.36092 10.3427C5.24942 10.3995 5.15877 10.4902 5.10195 10.6017C5.03736 10.7284 5.03736 10.8944 5.03736 11.2263V13.8337M11.2596 7.41158V11.9374C11.2596 12.6011 11.2596 12.933 11.1304 13.1865C11.0168 13.4095 10.8355 13.5909 10.6125 13.7045C10.3589 13.8337 10.0271 13.8337 9.36329 13.8337H4.56329C3.89952 13.8337 3.56764 13.8337 3.31411 13.7045C3.09111 13.5909 2.9098 13.4095 2.79617 13.1865C2.66699 12.933 2.66699 12.6011 2.66699 11.9374V7.13736C2.66699 6.4736 2.66699 6.14171 2.79617 5.88819C2.9098 5.66518 3.09111 5.48387 3.31411 5.37024C3.56764 5.24107 3.89952 5.24107 4.56329 5.24107H9.08907C9.23401 5.24107 9.30649 5.24107 9.37469 5.25744C9.43515 5.27196 9.49295 5.2959 9.54598 5.32839C9.60578 5.36504 9.65702 5.41628 9.75951 5.51877L10.9819 6.74114C11.0844 6.84363 11.1356 6.89487 11.1723 6.95468C11.2048 7.0077 11.2287 7.0655 11.2432 7.12597C11.2596 7.19417 11.2596 7.26664 11.2596 7.41158Z",
4629
+ "stroke": "white",
4630
+ "strokeLinecap": "round",
4631
+ "strokeLinejoin": "round"
4632
+ }],
4633
+ "circles": [],
4634
+ "rects": []
4635
+ },
4445
4636
  "SaveAll_s1810": {
4446
4637
  "width": "18",
4447
4638
  "height": "18",
@@ -4615,6 +4806,20 @@ var iconmap = {
4615
4806
  "circles": [],
4616
4807
  "rects": []
4617
4808
  },
4809
+ "Settings03_s2415": {
4810
+ "width": "24",
4811
+ "height": "24",
4812
+ "viewBox": "0 0 24 24",
4813
+ "fill": "none",
4814
+ "paths": [{
4815
+ "d": "M5 5.77778H15.6667M15.6667 5.77778C15.6667 6.75962 16.4626 7.55556 17.4444 7.55556C18.4263 7.55556 19.2222 6.75962 19.2222 5.77778C19.2222 4.79594 18.4263 4 17.4444 4C16.4626 4 15.6667 4.79594 15.6667 5.77778ZM8.55556 12H19.2222M8.55556 12C8.55556 12.9818 7.75962 13.7778 6.77778 13.7778C5.79594 13.7778 5 12.9818 5 12C5 11.0182 5.79594 10.2222 6.77778 10.2222C7.75962 10.2222 8.55556 11.0182 8.55556 12ZM5 18.2222H15.6667M15.6667 18.2222C15.6667 19.2041 16.4626 20 17.4444 20C18.4263 20 19.2222 19.2041 19.2222 18.2222C19.2222 17.2404 18.4263 16.4444 17.4444 16.4444C16.4626 16.4444 15.6667 17.2404 15.6667 18.2222Z",
4816
+ "stroke": "#213A78",
4817
+ "strokeWidth": "1.5",
4818
+ "strokeLinecap": "round"
4819
+ }],
4820
+ "circles": [],
4821
+ "rects": []
4822
+ },
4618
4823
  "Share03_s1215": {
4619
4824
  "width": "12",
4620
4825
  "height": "12",
@@ -4747,6 +4952,31 @@ var iconmap = {
4747
4952
  "circles": [],
4748
4953
  "rects": []
4749
4954
  },
4955
+ "StarBg_s1610": {
4956
+ "width": "16",
4957
+ "height": "17",
4958
+ "viewBox": "0 0 16 17",
4959
+ "fill": "none",
4960
+ "paths": [{
4961
+ "d": "M11.1618 14.5C10.8659 14.5 10.4862 14.4044 10.0117 14.1234L8.34236 13.1286C8.16929 13.0274 7.83431 13.0274 7.66682 13.1286L5.99192 14.1234C5.00372 14.7136 4.42309 14.4775 4.16069 14.2864C3.90387 14.0953 3.5019 13.6063 3.7643 12.4822L4.16069 10.7567C4.20535 10.5768 4.11603 10.2677 3.98203 10.1328L2.59745 8.73888C1.90515 8.04192 1.96098 7.44614 2.0559 7.15386C2.15081 6.86159 2.45229 6.3445 3.41257 6.1815L5.19355 5.88361C5.36104 5.8555 5.60111 5.67564 5.67369 5.52389L6.66188 3.53981C7.10852 2.63489 7.69474 2.5 8.0018 2.5C8.30887 2.5 8.89508 2.63489 9.34172 3.53981L10.3243 5.51827C10.4025 5.67002 10.6426 5.84988 10.8101 5.87799L12.591 6.17588C13.5569 6.33888 13.8584 6.85597 13.9477 7.14824C14.037 7.44052 14.0929 8.0363 13.4062 8.73326L12.0216 10.1328C11.8876 10.2677 11.8038 10.5712 11.8429 10.7567L12.2393 12.4822C12.4961 13.6063 12.0997 14.0953 11.8429 14.2864C11.7033 14.3876 11.48 14.5 11.1618 14.5Z",
4962
+ "fill": "#FFB020"
4963
+ }],
4964
+ "circles": [],
4965
+ "rects": []
4966
+ },
4967
+ "Star_s1613": {
4968
+ "width": "16",
4969
+ "height": "17",
4970
+ "viewBox": "0 0 16 17",
4971
+ "fill": "none",
4972
+ "paths": [{
4973
+ "d": "M8.67513 12.5702L8.67514 12.5702L8.67039 12.5674C8.44847 12.4377 8.19391 12.4027 8.0025 12.4027C7.81365 12.4027 7.55654 12.4368 7.33336 12.5706L5.65997 13.5646L5.65864 13.5654C5.24572 13.812 4.97481 13.8528 4.82381 13.8482C4.67921 13.8438 4.59276 13.7964 4.54611 13.763C4.50324 13.7305 4.43067 13.6613 4.38165 13.5205C4.33067 13.3741 4.28766 13.0995 4.39728 12.63L4.3978 12.6277L4.79326 10.9063C4.85141 10.6644 4.81228 10.4196 4.7631 10.2484C4.71278 10.0732 4.61546 9.84814 4.44319 9.67471L3.05861 8.2808C2.78647 8.00683 2.69634 7.78985 2.66592 7.6533C2.63503 7.5146 2.65546 7.41206 2.67412 7.35462C2.69362 7.29457 2.73808 7.19798 2.84408 7.10276C2.94808 7.00934 3.1456 6.88624 3.52054 6.82247C3.52081 6.82242 3.52108 6.82238 3.52134 6.82233L5.30078 6.5247L5.30111 6.52465C5.52805 6.48657 5.72695 6.36921 5.85894 6.27032C5.98912 6.17279 6.15688 6.01634 6.25719 5.81031L7.24371 3.8296L7.24371 3.8296L7.24475 3.8275C7.42241 3.46755 7.60287 3.30854 7.72262 3.2355C7.84357 3.16174 7.94484 3.15 8.0018 3.15C8.05877 3.15 8.16003 3.16174 8.28098 3.2355C8.40074 3.30854 8.58119 3.46755 8.75885 3.8275L8.75957 3.82894L9.74218 5.8074L9.74212 5.80743L9.74647 5.81589C9.84852 6.01402 10.0134 6.16764 10.1459 6.26614C10.2771 6.36365 10.4756 6.48096 10.7025 6.51902L10.7028 6.51908L12.4829 6.81682C12.4831 6.81685 12.4832 6.81688 12.4834 6.81691C12.8622 6.88091 13.0606 7.00448 13.1637 7.09714C13.2687 7.19148 13.3099 7.28526 13.3261 7.33823C13.3453 7.40094 13.3648 7.50694 13.3335 7.64768C13.3027 7.78609 13.2127 8.00335 12.9437 8.27651C12.9435 8.27669 12.9433 8.27687 12.9431 8.27705L11.5604 9.67471C11.5601 9.67498 11.5599 9.67524 11.5596 9.67551C11.5596 9.67555 11.5595 9.6756 11.5595 9.67564C11.3865 9.85023 11.2911 10.075 11.2419 10.2488C11.1922 10.4245 11.1582 10.6597 11.2069 10.8907L11.2068 10.8907L11.2094 10.9022L11.6056 12.627C11.6057 12.6272 11.6057 12.6275 11.6058 12.6277C11.7132 13.0982 11.6705 13.3741 11.6194 13.5218C11.5706 13.6629 11.4991 13.7313 11.458 13.7626C11.4038 13.8012 11.3118 13.85 11.1618 13.85C11.0096 13.85 10.7437 13.8014 10.3436 13.5645C10.3433 13.5644 10.3431 13.5643 10.3429 13.5641L8.67513 12.5702Z",
4974
+ "stroke": "#5C5C5C",
4975
+ "strokeWidth": "1.3"
4976
+ }],
4977
+ "circles": [],
4978
+ "rects": []
4979
+ },
4750
4980
  "State_s1610": {
4751
4981
  "width": "16",
4752
4982
  "height": "16",
@@ -5485,8 +5715,10 @@ var ICONS = {
5485
5715
  "BarChartSquare01Bg_s1810": "BarChartSquare01Bg_s1810",
5486
5716
  "BarChartSquare01_s1810": "BarChartSquare01_s1810",
5487
5717
  "BarChartSquare01_s2420": "BarChartSquare01_s2420",
5718
+ "BarChartSquare02_s2415": "BarChartSquare02_s2415",
5488
5719
  "BarChartSquare02_s2420": "BarChartSquare02_s2420",
5489
5720
  "BookClosed_s2420": "BookClosed_s2420",
5721
+ "BookMark_s1810": "BookMark_s1810",
5490
5722
  "BookOpen02_s1615": "BookOpen02_s1615",
5491
5723
  "BulbOff_s1613": "BulbOff_s1613",
5492
5724
  "BulbOn_s1613": "BulbOn_s1613",
@@ -5538,6 +5770,7 @@ var ICONS = {
5538
5770
  "ClipboardPlus_s2415": "ClipboardPlus_s2415",
5539
5771
  "ClipboardX_s1613": "ClipboardX_s1613",
5540
5772
  "Clipboard_s1615": "Clipboard_s1615",
5773
+ "CodeBox_s2410": "CodeBox_s2410",
5541
5774
  "CodeSnippet02_s2420": "CodeSnippet02_s2420",
5542
5775
  "Connection_s1810": "Connection_s1810",
5543
5776
  "Copy03_s1615": "Copy03_s1615",
@@ -5592,6 +5825,7 @@ var ICONS = {
5592
5825
  "Drag_s1613": "Drag_s1613",
5593
5826
  "Edit03_s1413": "Edit03_s1413",
5594
5827
  "Edit03_s1613": "Edit03_s1613",
5828
+ "Expand_s1613": "Expand_s1613",
5595
5829
  "Expand_s1815": "Expand_s1815",
5596
5830
  "EyeOff_s1610": "EyeOff_s1610",
5597
5831
  "Eye_s1610": "Eye_s1610",
@@ -5613,6 +5847,7 @@ var ICONS = {
5613
5847
  "FileQuestion02_s1615": "FileQuestion02_s1615",
5614
5848
  "FileRefresh_s1810": "FileRefresh_s1810",
5615
5849
  "FileRefresh_s1812": "FileRefresh_s1812",
5850
+ "FileSlash_02_s1810": "FileSlash_02_s1810",
5616
5851
  "FileSlash_s1413": "FileSlash_s1413",
5617
5852
  "FileX02_s1615": "FileX02_s1615",
5618
5853
  "FileX02_s3220": "FileX02_s3220",
@@ -5638,6 +5873,7 @@ var ICONS = {
5638
5873
  "GraduationHat01_s1615": "GraduationHat01_s1615",
5639
5874
  "GraduationHat01_s2415": "GraduationHat01_s2415",
5640
5875
  "GraduationHat01_s2420": "GraduationHat01_s2420",
5876
+ "HistoryTimer_s1210": "HistoryTimer_s1210",
5641
5877
  "HomeOutline24_s2410": "HomeOutline24_s2410",
5642
5878
  "Home_s2015": "Home_s2015",
5643
5879
  "Home_s2415": "Home_s2415",
@@ -5675,6 +5911,7 @@ var ICONS = {
5675
5911
  "PieChart03_s2420": "PieChart03_s2420",
5676
5912
  "PlayCircleLeft_s2420": "PlayCircleLeft_s2420",
5677
5913
  "PlayCircleRight_s2420": "PlayCircleRight_s2420",
5914
+ "PlayRight_s1413": "PlayRight_s1413",
5678
5915
  "PlusCircle_s1210": "PlusCircle_s1210",
5679
5916
  "PlusCircle_s1413": "PlusCircle_s1413",
5680
5917
  "PlusCircle_s1613": "PlusCircle_s1613",
@@ -5684,6 +5921,7 @@ var ICONS = {
5684
5921
  "PlusCircle_s2410": "PlusCircle_s2410",
5685
5922
  "PlusCircle_s2420": "PlusCircle_s2420",
5686
5923
  "PlusDownLines_s1413": "PlusDownLines_s1413",
5924
+ "PlusLines_s1210": "PlusLines_s1210",
5687
5925
  "PlusUpLines_s1413": "PlusUpLines_s1413",
5688
5926
  "Plus_s1610": "Plus_s1610",
5689
5927
  "PreviewLine_s2013": "PreviewLine_s2013",
@@ -5695,6 +5933,7 @@ var ICONS = {
5695
5933
  "RefreshCcw02_s1415": "RefreshCcw02_s1415",
5696
5934
  "RefreshCcw02_s1615": "RefreshCcw02_s1615",
5697
5935
  "RefreshCcw02_s2420": "RefreshCcw02_s2420",
5936
+ "RefreshCw01_s1210": "RefreshCw01_s1210",
5698
5937
  "RefreshCw01_s1613": "RefreshCw01_s1613",
5699
5938
  "RefreshCw01_s1815": "RefreshCw01_s1815",
5700
5939
  "RefreshCw02_s1413": "RefreshCw02_s1413",
@@ -5702,6 +5941,8 @@ var ICONS = {
5702
5941
  "ReverseLeft2_s1613": "ReverseLeft2_s1613",
5703
5942
  "ReverseLeft_s1815": "ReverseLeft_s1815",
5704
5943
  "ReverseRight2Circle_s1413": "ReverseRight2Circle_s1413",
5944
+ "Role_s2415": "Role_s2415",
5945
+ "SaveAll_s1610": "SaveAll_s1610",
5705
5946
  "SaveAll_s1810": "SaveAll_s1810",
5706
5947
  "SaveAll_s1812": "SaveAll_s1812",
5707
5948
  "Save_s1413": "Save_s1413",
@@ -5712,12 +5953,15 @@ var ICONS = {
5712
5953
  "Settings02_s1615": "Settings02_s1615",
5713
5954
  "Settings02_s2415": "Settings02_s2415",
5714
5955
  "Settings02_s2420": "Settings02_s2420",
5956
+ "Settings03_s2415": "Settings03_s2415",
5715
5957
  "Share03_s1215": "Share03_s1215",
5716
5958
  "Share03_s1413": "Share03_s1413",
5717
5959
  "Share03_s1613": "Share03_s1613",
5718
5960
  "SortDown_s0815": "SortDown_s0815",
5719
5961
  "SortOutline_s1415": "SortOutline_s1415",
5720
5962
  "SortUp_s0815": "SortUp_s0815",
5963
+ "StarBg_s1610": "StarBg_s1610",
5964
+ "Star_s1613": "Star_s1613",
5721
5965
  "State_s1610": "State_s1610",
5722
5966
  "State_s1810": "State_s1810",
5723
5967
  "StopCircle_s1413": "StopCircle_s1413",
@@ -6020,7 +6264,7 @@ function uuidv4(length) {
6020
6264
  }
6021
6265
  }
6022
6266
 
6023
- var css_248z$i = ".maru-checkbox-wrapper {\n display: flex;\n align-items: center;\n flex-direction: row;\n width: fit-content;\n}\n\n.maru-checkbox-wrapper-2px {\n gap: 2px;\n}\n\n.maru-checkbox-wrapper-4px {\n gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\n gap: 8px;\n}\n\n.maru-checkbox-inner-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n position: relative;\n}\n\n.maru-checkbox {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.maru-checkbox-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n cursor: pointer;\n}\n.maru-checkbox-label.label-disabled {\n color: #8c8c8c;\n}\n\n.maru-checkbox:disabled,\n.label-disabled {\n cursor: default;\n}";
6267
+ var css_248z$i = ".maru-checkbox-wrapper {\n display: flex;\n align-items: center;\n flex-direction: row;\n width: fit-content;\n}\n\n.maru-checkbox-wrapper-2px {\n gap: 2px;\n}\n\n.maru-checkbox-wrapper-4px {\n gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\n gap: 8px;\n}\n\n.maru-checkbox-inner-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n position: relative;\n}\n\n.maru-checkbox {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.maru-checkbox-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 400;\n color: #5c5c5c;\n cursor: pointer;\n}\n.maru-checkbox-label.label-disabled {\n color: #8c8c8c;\n}\n\n.maru-checkbox:disabled,\n.label-disabled {\n cursor: default;\n}";
6024
6268
  styleInject(css_248z$i);
6025
6269
 
6026
6270
  var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -6118,7 +6362,7 @@ function Chip(_a) {
6118
6362
  }));
6119
6363
  }
6120
6364
 
6121
- var css_248z$g = ".maru-input-wrapper .maru-input-label {\n margin-bottom: 8px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n}\n.maru-input-wrapper .maru-input-label label {\n color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n height: 37px;\n padding: 8px 10px 8px 14px;\n border: 1px solid #e4e4e4;\n border-radius: 6px;\n}\n.maru-input-wrapper .maru-input > input {\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 font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 400;\n color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n border-color: #5c5c5c;\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.errored {\n outline: 1px solid #e53e3e;\n border-color: #e53e3e;\n}\n.maru-input-wrapper .maru-input:hover {\n outline: 1px solid #e4e4e4;\n border-color: #e4e4e4;\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled {\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled > input {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-webkit-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-moz-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input:-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled:hover {\n outline: unset;\n}\n.maru-input-wrapper .maru-input-start-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n margin-right: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n gap: 6px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n padding: unset;\n margin: unset;\n border: unset;\n background-color: unset;\n cursor: pointer;\n display: flex;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-input-wrapper .maru-input-footer {\n display: block;\n margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 500;\n color: #e53e3e;\n font-weight: 400;\n}";
6365
+ var css_248z$g = ".maru-input-wrapper .maru-input-label {\n margin-bottom: 8px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n}\n.maru-input-wrapper .maru-input-label label {\n color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n height: 37px;\n padding: 8px 10px 8px 14px;\n border: 1px solid #e4e4e4;\n border-radius: 6px;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder {\n position: absolute;\n z-index: -1;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder > span {\n color: #8c8c8c;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 300;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder > span[data-hidden] {\n visibility: hidden;\n}\n.maru-input-wrapper .maru-input > input {\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 font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 400;\n color: #5c5c5c;\n padding: unset;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n border-color: #5c5c5c;\n background-color: rgba(228, 228, 228, 0.2);\n}\n.maru-input-wrapper .maru-input.errored {\n outline: 1px solid #e53e3e;\n border-color: #e53e3e;\n}\n.maru-input-wrapper .maru-input:hover {\n outline: 1px solid #e4e4e4;\n border-color: #e4e4e4;\n background-color: rgba(228, 228, 228, 0.2);\n}\n.maru-input-wrapper .maru-input.disabled {\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled > input {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-webkit-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-moz-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input:-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled:hover {\n outline: unset;\n}\n.maru-input-wrapper .maru-input-start-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n margin-right: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n gap: 6px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n padding: unset;\n margin: unset;\n border: unset;\n background-color: unset;\n cursor: pointer;\n display: flex;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-input-wrapper .maru-input-footer {\n display: block;\n margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 500;\n color: #e53e3e;\n font-weight: 400;\n}";
6122
6366
  styleInject(css_248z$g);
6123
6367
 
6124
6368
  var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
@@ -6132,13 +6376,21 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
6132
6376
  startNode = _a.startNode,
6133
6377
  endNode = _a.endNode,
6134
6378
  className = _a.className,
6135
- props = __rest(_a, ["invalid", "label", "type", "onClear", "hiddenClearButton", "wrapperRef", "startNode", "endNode", "className"]);
6136
- var _c = useState(true),
6137
- maskingPassword = _c[0],
6138
- setMaskingPassword = _c[1]; // *로 보이고 싶으면 true
6139
- var _d = useState(false),
6140
- showClearButton = _d[0],
6141
- setShowClearButton = _d[1];
6379
+ _c = _a.persistentPlaceholder,
6380
+ persistentPlaceholder = _c === void 0 ? false : _c,
6381
+ props = __rest(_a, ["invalid", "label", "type", "onClear", "hiddenClearButton", "wrapperRef", "startNode", "endNode", "className", "persistentPlaceholder"]);
6382
+ var _d = useState(true),
6383
+ maskingPassword = _d[0],
6384
+ setMaskingPassword = _d[1]; // *로 보이고 싶으면 true
6385
+ var _e = useState(false),
6386
+ showClearButton = _e[0],
6387
+ setShowClearButton = _e[1];
6388
+ var _f = useState(''),
6389
+ hiddenPlaceholder = _f[0],
6390
+ setHiddenPlaceholder = _f[1];
6391
+ var _g = useState(''),
6392
+ remainPlaceholder = _g[0],
6393
+ setRemainPlaceholder = _g[1];
6142
6394
  var combineRef = useCombineRef(inputRef);
6143
6395
  var hashId = uuidv4(4);
6144
6396
  useEffect(function () {
@@ -6164,6 +6416,14 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
6164
6416
  setShowClearButton(!hiddenClearButton);
6165
6417
  }
6166
6418
  }, [combineRef.current, hiddenClearButton]);
6419
+ /**
6420
+ * persistentPlaceholder = true일때 보여줄 placeholder 세팅
6421
+ */
6422
+ useEffect(function () {
6423
+ if (persistentPlaceholder && props.placeholder) {
6424
+ setRemainPlaceholder(props.placeholder);
6425
+ }
6426
+ }, [persistentPlaceholder, props.placeholder]);
6167
6427
  var handleInputChange = function handleInputChange(e) {
6168
6428
  var _a;
6169
6429
  setShowClearButton(!hiddenClearButton);
@@ -6176,10 +6436,44 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
6176
6436
  } else {
6177
6437
  newValue = value.slice(0, value.length - 1);
6178
6438
  }
6439
+ } else if (type === 'date') {
6440
+ var regexNum = /[^0-9]/g;
6441
+ var onlyNum = value.replace(regexNum, ''); // 숫자가 아닌 경우 ''
6442
+ var format = void 0;
6443
+ var regexDate = void 0;
6444
+ if (onlyNum.length <= 6) {
6445
+ // 000000 -> 0000-00
6446
+ format = '$1-$2';
6447
+ regexDate = /([0-9]{4})([0-9]+)/;
6448
+ } else if (onlyNum.length <= 8) {
6449
+ // 00000000 -> 0000-00-00
6450
+ format = '$1-$2-$3';
6451
+ regexDate = /([0-9]{4})([0-9]{2})([0-9]+)/;
6452
+ }
6453
+ newValue = onlyNum.replace(regexDate, format);
6454
+ } else if (type === 'time') {
6455
+ var regexNum = /[^0-9]/g;
6456
+ var onlyNum = value.replace(regexNum, ''); // 숫자가 아닌 경우 ''
6457
+ var format = void 0;
6458
+ var regexTime = void 0;
6459
+ if (onlyNum.length <= 4) {
6460
+ // 0000 -> 00:00
6461
+ format = '$1:$2';
6462
+ regexTime = /([0-9]{2})([0-9]+)/;
6463
+ } else if (onlyNum.length <= 6) {
6464
+ // 000000 -> 00:00:00
6465
+ format = '$1:$2:$3';
6466
+ regexTime = /([0-9]{2})([0-9]{2})([0-9]+)/;
6467
+ }
6468
+ newValue = onlyNum.replace(regexTime, format);
6179
6469
  }
6180
6470
  if (!newValue) {
6181
6471
  setShowClearButton(false );
6182
6472
  }
6473
+ if (persistentPlaceholder && props.placeholder) {
6474
+ setHiddenPlaceholder(newValue);
6475
+ setRemainPlaceholder(props.placeholder.substring(newValue.length));
6476
+ }
6183
6477
  e.currentTarget.value = newValue;
6184
6478
  (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
6185
6479
  };
@@ -6203,6 +6497,10 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
6203
6497
  setShowClearButton(false );
6204
6498
  combineRef.current.value = '';
6205
6499
  combineRef.current.focus();
6500
+ if (persistentPlaceholder && props.placeholder) {
6501
+ setHiddenPlaceholder('');
6502
+ setRemainPlaceholder(props.placeholder);
6503
+ }
6206
6504
  }
6207
6505
  onClear === null || onClear === void 0 ? void 0 : onClear();
6208
6506
  };
@@ -6228,12 +6526,23 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
6228
6526
  className: "maru-input-start-node"
6229
6527
  }, {
6230
6528
  children: startNode
6529
+ })), persistentPlaceholder && jsxs("span", __assign({
6530
+ className: "persistent-placeholder"
6531
+ }, {
6532
+ children: [jsx("span", __assign({
6533
+ "data-hidden": true
6534
+ }, {
6535
+ children: hiddenPlaceholder
6536
+ })), jsx("span", {
6537
+ children: remainPlaceholder
6538
+ })]
6231
6539
  })), jsx("input", __assign({}, props, {
6232
6540
  id: "maru-input-".concat(hashId),
6233
6541
  ref: combineRef,
6234
6542
  type: type === 'password' && maskingPassword ? 'password' : 'text',
6235
6543
  onChange: handleInputChange,
6236
- onBlur: handleInputBlur
6544
+ onBlur: handleInputBlur,
6545
+ placeholder: persistentPlaceholder ? undefined : props.placeholder
6237
6546
  })), jsxs("div", __assign({
6238
6547
  className: "maru-input-end-node-wrapper"
6239
6548
  }, {
@@ -6286,7 +6595,8 @@ Input.defaultProps = {
6286
6595
  wrapperRef: undefined,
6287
6596
  startNode: undefined,
6288
6597
  endNode: undefined,
6289
- className: undefined
6598
+ className: undefined,
6599
+ persistentPlaceholder: undefined
6290
6600
  };
6291
6601
  Input.displayName = 'Input';
6292
6602
 
@@ -8109,36 +8419,16 @@ function Popover(_a) {
8109
8419
  * instance를 useMemo로 선언하면 레퍼런스의 DOM을 찾지 못 하고,
8110
8420
  * useCallback으로 선언하면 함수라서 호출 될 때 마다 새로운 객체가 생성되어 .update가 동작하지 않음
8111
8421
  */
8112
- var instance_1 = createPopper(anchorEl, popoverRef.current, {
8422
+ var instance = createPopper(anchorEl, popoverRef.current, {
8113
8423
  placement: direction,
8114
8424
  modifiers: [{
8115
- name: 'flip',
8116
- options: {
8117
- padding: 10
8118
- }
8119
- }, {
8120
8425
  name: 'offset',
8121
8426
  options: {
8122
8427
  offset: [0, 4]
8123
8428
  }
8124
8429
  }]
8125
8430
  });
8126
- var instanceSetOptions = function instanceSetOptions(isEnabled) {
8127
- return instance_1.setOptions(function (options) {
8128
- return __assign(__assign({}, options), {
8129
- modifiers: __spreadArray(__spreadArray([], options.modifiers, true), [{
8130
- name: 'eventListeners',
8131
- enabled: isEnabled,
8132
- options: {
8133
- resize: isEnabled,
8134
- scroll: isEnabled
8135
- }
8136
- }], false)
8137
- });
8138
- });
8139
- };
8140
- instanceSetOptions(true);
8141
- instance_1.update();
8431
+ instance.update();
8142
8432
  popoverRef.current.focus();
8143
8433
  }
8144
8434
  }, [open]);
@@ -8157,18 +8447,15 @@ function Popover(_a) {
8157
8447
  var PopoverBody = open ? jsx("div", __assign({
8158
8448
  className: "maru-popover-background",
8159
8449
  onClick: handleBackgroundClick,
8160
- tabIndex: -1,
8161
- "aria-hidden": true
8450
+ tabIndex: -1
8162
8451
  }, {
8163
8452
  children: jsx("div", __assign({
8164
8453
  ref: popoverRef,
8165
8454
  className: classNames('maru-popover', className),
8166
8455
  role: "tooltip",
8167
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
8168
8456
  tabIndex: 0,
8169
8457
  onKeyUp: handleKeyUp,
8170
- onClick: handlePopoverClick,
8171
- "aria-hidden": true
8458
+ onClick: handlePopoverClick
8172
8459
  }, {
8173
8460
  children: children
8174
8461
  }))
@@ -8178,7 +8465,7 @@ function Popover(_a) {
8178
8465
  }) : PopoverBody;
8179
8466
  }
8180
8467
 
8181
- var css_248z$e = ".maru-radio-wrapper-8px {\n display: flex;\n gap: 8px;\n}\n\n.maru-radio-wrapper-4px {\n display: flex;\n gap: 4px;\n}\n\n.maru-radio-wrapper-2px {\n display: flex;\n gap: 2px;\n}\n\n.maru-radio {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid #5c5c5c;\n position: relative;\n display: inline-block;\n cursor: pointer;\n}\n.maru-radio:checked::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: #5c5c5c;\n}\n.maru-radio:not(:disabled):hover::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: #5c5c5c;\n}\n\n.maru-radio-primary {\n border: 2px solid var(--p);\n}\n.maru-radio-primary:checked::before {\n background-color: var(--p);\n}\n.maru-radio-primary:not(:disabled):hover::before {\n background-color: var(--p);\n}\n\n.maru-radio-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n cursor: pointer;\n}\n\n.maru-radio:disabled,\n.label-disabled {\n cursor: default;\n opacity: 0.5;\n}";
8468
+ var css_248z$e = ".maru-radio-wrapper-8px {\n display: flex;\n gap: 8px;\n}\n\n.maru-radio-wrapper-4px {\n display: flex;\n gap: 4px;\n}\n\n.maru-radio-wrapper-2px {\n display: flex;\n gap: 2px;\n}\n\n.maru-radio {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid #5c5c5c;\n position: relative;\n display: inline-block;\n cursor: pointer;\n}\n.maru-radio:checked::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: #5c5c5c;\n}\n.maru-radio:not(:disabled):hover::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: #5c5c5c;\n}\n\n.maru-radio-primary {\n border: 2px solid var(--p);\n}\n.maru-radio-primary:checked::before {\n background-color: var(--p);\n}\n.maru-radio-primary:not(:disabled):hover::before {\n background-color: var(--p);\n}\n\n.maru-radio-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 400;\n color: #5c5c5c;\n cursor: pointer;\n}\n\n.maru-radio:disabled,\n.label-disabled {\n cursor: default;\n opacity: 0.5;\n}";
8182
8469
  styleInject(css_248z$e);
8183
8470
 
8184
8471
  var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -8421,8 +8708,8 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
8421
8708
  tabIndex: -1
8422
8709
  }, {
8423
8710
  children: jsx(Icon, {
8424
- name: ICONS.X_s1613,
8425
- color: "#bdbdbd"
8711
+ name: ICONS.X_s1615,
8712
+ color: "#5c5c5c"
8426
8713
  })
8427
8714
  }))
8428
8715
  }))]
@@ -8531,7 +8818,7 @@ function Toggle(_a) {
8531
8818
  });
8532
8819
  }
8533
8820
 
8534
- var css_248z$9 = ".maru-tooltip-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n padding: 0;\n}\n.maru-tooltip-wrapper[data-dir=top][data-gap=\"6px\"] {\n padding-top: 6px;\n}\n.maru-tooltip-wrapper[data-dir=top][data-gap=\"4px\"] {\n padding-top: 4px;\n}\n.maru-tooltip-wrapper[data-dir=left][data-gap=\"6px\"] {\n padding-left: 6px;\n}\n.maru-tooltip-wrapper[data-dir=left][data-gap=\"4px\"] {\n padding-left: 4px;\n}\n.maru-tooltip-wrapper[data-dir=bottom][data-gap=\"6px\"] {\n padding-bottom: 6px;\n}\n.maru-tooltip-wrapper[data-dir=bottom][data-gap=\"4px\"] {\n padding-bottom: 4px;\n}\n.maru-tooltip-wrapper[data-dir=right][data-gap=\"6px\"] {\n padding-right: 6px;\n}\n.maru-tooltip-wrapper[data-dir=right][data-gap=\"4px\"] {\n padding-right: 4px;\n}\n\n.maru-tooltip {\n z-index: 1612;\n border-radius: 6px;\n padding: 6px 10px 6px 12px;\n display: none;\n background-color: rgba(0, 0, 0, 0.8);\n}\n.maru-tooltip[data-show=true] {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-tooltip[data-show=false] {\n display: none;\n}\n.maru-tooltip,\n.maru-tooltip span,\n.maru-tooltip p,\n.maru-tooltip pre {\n color: white;\n white-space: pre-wrap;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 400;\n line-height: 140%;\n}";
8821
+ var css_248z$9 = ".maru-tooltip-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.maru-tooltip {\n z-index: 1612;\n border-radius: 6px;\n padding: 6px 10px 6px 12px;\n display: none;\n background-color: rgba(0, 0, 0, 0.8);\n}\n.maru-tooltip[data-show=true] {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-tooltip[data-show=false] {\n display: none;\n}\n.maru-tooltip,\n.maru-tooltip span,\n.maru-tooltip p,\n.maru-tooltip pre {\n color: white;\n white-space: pre-wrap;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 400;\n line-height: 140%;\n}";
8535
8822
  styleInject(css_248z$9);
8536
8823
 
8537
8824
  function Tooltip(_a) {
@@ -8545,7 +8832,7 @@ function Tooltip(_a) {
8545
8832
  _d = _a.portal,
8546
8833
  portal = _d === void 0 ? false : _d,
8547
8834
  _e = _a.gap,
8548
- gap = _e === void 0 ? '6px' : _e;
8835
+ gap = _e === void 0 ? 6 : _e;
8549
8836
  var _f = useState(false),
8550
8837
  open = _f[0],
8551
8838
  setOpen = _f[1];
@@ -8559,11 +8846,17 @@ function Tooltip(_a) {
8559
8846
  * useCallback으로 선언하면 함수라서 호출 될 때 마다 새로운 객체가 생성되어 .update가 동작하지 않음
8560
8847
  */
8561
8848
  var instance = createPopper(wrapperRef.current, tooltipRef.current, {
8562
- placement: direction
8849
+ placement: direction,
8850
+ modifiers: [{
8851
+ name: 'offset',
8852
+ options: {
8853
+ offset: [0, gap]
8854
+ }
8855
+ }]
8563
8856
  });
8564
8857
  instance.update();
8565
8858
  }
8566
- }, [show]);
8859
+ }, [show, gap]);
8567
8860
  var Tootip = useMemo(function () {
8568
8861
  return jsx("div", __assign({
8569
8862
  className: "maru-tooltip",
@@ -25365,7 +25658,6 @@ function DropdownMenu$1(_a) {
25365
25658
  var newWidth = width || pw;
25366
25659
  menu.style.width = "".concat(newWidth, "px");
25367
25660
  menu.style.left = "".concat(pl, "px");
25368
- // FIXME: 무슨 조건인지 잘 모르겠음
25369
25661
  if (ph + pt + menu.offsetHeight + 10 > document.body.offsetHeight) {
25370
25662
  menu.style.top = "".concat(pt - menu.offsetHeight - 4, "px");
25371
25663
  } else {
@@ -25412,17 +25704,13 @@ function DropdownMenu$1(_a) {
25412
25704
  return jsx("div", __assign({
25413
25705
  ref: menuWrapperRef,
25414
25706
  className: "maru-dropdown-menu-wrapper",
25415
- "aria-hidden": true,
25416
25707
  onClick: handleWrapperClick
25417
25708
  }, {
25418
25709
  children: jsxs("div", __assign({
25419
25710
  ref: menuRef,
25420
25711
  className: classNames('maru-dropdown-menu', "maru-dropdown-menu-".concat(color), {
25421
25712
  'maru-dropdown-search-menu': isSearch
25422
- // TODO:
25423
- // footer: menuBottomButton,
25424
25713
  }),
25425
- "aria-hidden": true,
25426
25714
  onClick: handleMenuClick
25427
25715
  }, {
25428
25716
  children: [jsx("div", __assign({
@@ -26523,6 +26811,89 @@ function Pagination(_a) {
26523
26811
  }));
26524
26812
  }
26525
26813
 
26814
+ function FilterPopover(_a) {
26815
+ var parent = _a.parent,
26816
+ onClose = _a.onClose,
26817
+ formats = _a.formats,
26818
+ resetButtonContent = _a.resetButtonContent,
26819
+ onReset = _a.onReset,
26820
+ searchButtonContent = _a.searchButtonContent,
26821
+ onSearch = _a.onSearch;
26822
+ var wrapperRef = useRef(null);
26823
+ var ref = useRef(null);
26824
+ /**
26825
+ * 팝오버 위치 설정
26826
+ */
26827
+ useEffect(function () {
26828
+ var popover = ref.current;
26829
+ if (popover) {
26830
+ var _a = parent.getClientRects()[0],
26831
+ pw = _a.width,
26832
+ ph = _a.height,
26833
+ pt = _a.top,
26834
+ pr = _a.right;
26835
+ popover.style.right = "".concat(pr - pw, "px");
26836
+ if (ph + pt + popover.offsetHeight + 10 > document.body.offsetHeight) {
26837
+ popover.style.top = "".concat(pt - popover.offsetHeight - 4, "px");
26838
+ } else {
26839
+ popover.style.top = "".concat(pt + ph, "px");
26840
+ }
26841
+ if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
26842
+ wrapperRef.current.style.display = 'block';
26843
+ }
26844
+ }
26845
+ }, []);
26846
+ var handleWrapperClick = function handleWrapperClick(e) {
26847
+ e.stopPropagation();
26848
+ onClose();
26849
+ };
26850
+ var handlePopoverClick = function handlePopoverClick(e) {
26851
+ e.stopPropagation();
26852
+ };
26853
+ return jsx("div", __assign({
26854
+ ref: wrapperRef,
26855
+ className: "maru-search-input-filter-popover-wrapper",
26856
+ onClick: handleWrapperClick
26857
+ }, {
26858
+ children: jsx("div", __assign({
26859
+ ref: ref,
26860
+ className: "maru-search-input-filter-popover",
26861
+ onClick: handlePopoverClick
26862
+ }, {
26863
+ children: jsxs("div", {
26864
+ children: [jsx("ul", {
26865
+ children: formats.map(function (f) {
26866
+ return jsxs("li", {
26867
+ children: [jsx("div", __assign({
26868
+ className: "filter-key"
26869
+ }, {
26870
+ children: jsx("span", {
26871
+ children: f.columnName
26872
+ })
26873
+ })), jsx("div", __assign({
26874
+ className: "filter-value"
26875
+ }, {
26876
+ children: f.filter
26877
+ }))]
26878
+ }, f.columnIdKey);
26879
+ })
26880
+ }), jsxs("div", {
26881
+ children: [jsx(Button, __assign({
26882
+ variant: "outline",
26883
+ onClick: onReset
26884
+ }, {
26885
+ children: resetButtonContent
26886
+ })), jsx(Button, __assign({
26887
+ onClick: onSearch
26888
+ }, {
26889
+ children: searchButtonContent
26890
+ }))]
26891
+ })]
26892
+ })
26893
+ }))
26894
+ }));
26895
+ }
26896
+
26526
26897
  function Filter(_a) {
26527
26898
  var on = _a.on,
26528
26899
  formats = _a.formats,
@@ -26539,7 +26910,9 @@ function Filter(_a) {
26539
26910
  onSearch();
26540
26911
  setOpen(false);
26541
26912
  };
26542
- return jsxs(Fragment, {
26913
+ return jsxs("div", __assign({
26914
+ className: "maru-search-input-filter"
26915
+ }, {
26543
26916
  children: [jsx("button", __assign({
26544
26917
  type: "button",
26545
26918
  className: classNames('maru-search-input-filter-button', {
@@ -26558,50 +26931,25 @@ function Filter(_a) {
26558
26931
  name: ICONS.Filter_s1613
26559
26932
  })
26560
26933
  }))
26561
- })), jsx(Popover, __assign({
26562
- anchorEl: inputWrapperRef.current,
26563
- open: open,
26564
- onClose: function onClose() {
26565
- return setOpen(false);
26566
- },
26567
- direction: "bottom-end",
26568
- className: "maru-search-input-filter-popover"
26934
+ })), open && jsx(CreatePortal, __assign({
26935
+ parent: inputWrapperRef.current
26569
26936
  }, {
26570
- children: jsxs("div", {
26571
- children: [jsx("ul", {
26572
- children: formats.map(function (f) {
26573
- return jsxs("li", {
26574
- children: [jsx("div", __assign({
26575
- className: "filter-key"
26576
- }, {
26577
- children: jsx("span", {
26578
- children: f.columnName
26579
- })
26580
- })), jsx("div", __assign({
26581
- className: "filter-value"
26582
- }, {
26583
- children: f.filter
26584
- }))]
26585
- }, f.columnIdKey);
26586
- })
26587
- }), jsxs("div", {
26588
- children: [jsx(Button, __assign({
26589
- variant: "outline",
26590
- onClick: onReset
26591
- }, {
26592
- children: resetButtonContent
26593
- })), jsx(Button, __assign({
26594
- onClick: handleSearch
26595
- }, {
26596
- children: searchButtonContent
26597
- }))]
26598
- })]
26937
+ children: jsx(FilterPopover, {
26938
+ parent: inputWrapperRef.current,
26939
+ onClose: function onClose() {
26940
+ return setOpen(false);
26941
+ },
26942
+ formats: formats,
26943
+ resetButtonContent: resetButtonContent,
26944
+ onReset: onReset,
26945
+ searchButtonContent: searchButtonContent,
26946
+ onSearch: handleSearch
26599
26947
  })
26600
26948
  }))]
26601
- });
26949
+ }));
26602
26950
  }
26603
26951
 
26604
- var css_248z$2 = ".maru-search-input .maru-input {\n border: 1px solid #e4e4e4;\n background-color: white;\n}\n.maru-search-input .maru-input:focus-visible, .maru-search-input .maru-input:focus-within {\n background-color: white;\n}\n.maru-search-input .maru-input:hover {\n background-color: white;\n}\n.maru-search-input .maru-input .maru-input-start-node {\n margin-right: 8px;\n}\n.maru-search-input .maru-search-input-filter-button {\n border: unset;\n background-color: unset;\n padding: unset;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n}\n.maru-search-input .maru-search-input-filter-button .maru-tooltip-wrapper {\n padding: 6px 0;\n}\n.maru-search-input .maru-search-input-filter-button svg > path {\n stroke: #bdbdbd;\n fill: white;\n}\n.maru-search-input .maru-search-input-filter-button:hover svg > path {\n stroke: #8c8c8c;\n fill: #e4e4e4;\n}\n.maru-search-input .maru-search-input-filter-button.active {\n visibility: hidden;\n}\n.maru-search-input .maru-search-input-filter-button.selected svg > path {\n stroke: var(--p);\n fill: var(--p-50);\n}\n.maru-search-input .maru-search-input-filter-popover {\n padding: 32px;\n border: 1px solid #e4e4e4;\n border-radius: 6px;\n}\n.maru-search-input .maru-search-input-filter-popover > div > ul {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.maru-search-input .maru-search-input-filter-popover > div > ul > li {\n display: flex;\n gap: 16px;\n}\n.maru-search-input .maru-search-input-filter-popover > div > ul > li .filter-key {\n width: 88px;\n display: flex;\n align-items: center;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n}\n.maru-search-input .maru-search-input-filter-popover > div > ul > li .filter-value {\n width: 232px;\n}\n.maru-search-input .maru-search-input-filter-popover > div > div {\n margin-top: 24px;\n display: flex;\n justify-content: flex-end;\n gap: 6px;\n}";
26952
+ var css_248z$2 = ".maru-search-input .maru-input {\n border: 1px solid #e4e4e4;\n background-color: white;\n}\n.maru-search-input .maru-input:focus-visible, .maru-search-input .maru-input:focus-within {\n background-color: white;\n}\n.maru-search-input .maru-input:hover {\n background-color: white;\n}\n.maru-search-input .maru-input .maru-input-start-node {\n margin-right: 8px;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button {\n border: unset;\n background-color: unset;\n padding: unset;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button .maru-tooltip-wrapper {\n padding: 6px 0;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button svg > path {\n stroke: #bdbdbd;\n fill: white;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button:hover svg > path {\n stroke: #8c8c8c;\n fill: #e4e4e4;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button.active {\n visibility: hidden;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button.selected svg > path {\n stroke: var(--p);\n fill: var(--p-50);\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper {\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n position: fixed;\n z-index: 1600;\n display: none;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover {\n margin-top: 4px;\n position: absolute;\n z-index: 1601;\n border-radius: 6px;\n box-shadow: 0px 0px 4px #e4e4e4;\n background-color: white;\n padding: 32px;\n border: 1px solid #e4e4e4;\n border-radius: 6px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li {\n display: flex;\n gap: 16px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li .filter-key {\n width: 88px;\n display: flex;\n align-items: center;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li .filter-value {\n width: 232px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > div {\n margin-top: 24px;\n display: flex;\n justify-content: flex-end;\n gap: 6px;\n}";
26605
26953
  styleInject(css_248z$2);
26606
26954
 
26607
26955
  function SearchInput(_a) {
@@ -27502,7 +27850,7 @@ function ToastStyle(_a) {
27502
27850
  children: closeButton.content
27503
27851
  })) : jsx(Button, {
27504
27852
  startIcon: {
27505
- name: ICONS.X_s1613,
27853
+ name: ICONS.X_s1615,
27506
27854
  color: '#5C5C5C'
27507
27855
  },
27508
27856
  color: "secondary",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "maru_design2",
3
- "version": "2.22.3",
3
+ "version": "2.23.0",
4
4
  "main": "./dist/index.js",
5
5
  "author": "zena-42maru",
6
6
  "license": "MIT",