maru_design2 2.21.0 → 2.22.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 +36 -0
- package/dist/components/atoms/icon/iconmap.d.ts +5 -1
- package/dist/components/atoms/tooltip/Tooltip.d.ts +6 -1
- package/dist/components/molecules/dropdown/Dropdown.d.ts +50 -23
- package/dist/components/molecules/dropdown/menu/index.d.ts +31 -0
- package/dist/components/molecules/dropdown/toggleButton/Clear.d.ts +6 -0
- package/dist/components/molecules/dropdown/{toggles/Button.d.ts → toggleButton/index.d.ts} +12 -15
- package/dist/components/molecules/multiSelectDropdown/MultiSelectDropdown.d.ts +42 -16
- package/dist/components/molecules/multiSelectDropdown/menu/index.d.ts +12 -9
- package/dist/components/molecules/multiSelectDropdown/toggleButton/Arrow.d.ts +9 -0
- package/dist/components/molecules/multiSelectDropdown/toggleButton/Clear.d.ts +6 -0
- package/dist/components/molecules/multiSelectDropdown/toggleButton/index.d.ts +17 -0
- package/dist/components/molecules/table/types.d.ts +1 -2
- package/dist/enums/color.d.ts +1 -1
- package/dist/enums/gap.d.ts +2 -0
- package/dist/enums/type.d.ts +2 -2
- package/dist/hooks/useColor.d.ts +1 -1
- package/dist/index.js +603 -589
- package/package.json +1 -1
- package/dist/components/molecules/dropdown/Menu.d.ts +0 -19
- package/dist/components/molecules/dropdown/toggles/Clear.d.ts +0 -10
- package/dist/components/molecules/dropdown/toggles/Input.d.ts +0 -24
- package/dist/components/molecules/multiSelectDropdown/toggle/Arrow.d.ts +0 -7
- package/dist/components/molecules/multiSelectDropdown/toggle/index.d.ts +0 -12
- /package/dist/components/molecules/dropdown/{toggles → toggleButton}/Arrow.d.ts +0 -0
package/dist/index.js
CHANGED
|
@@ -199,7 +199,7 @@ function useButtonState() {
|
|
|
199
199
|
var DColor = {
|
|
200
200
|
primary: 'var(--p)',
|
|
201
201
|
secondary: '#8c8c8c',
|
|
202
|
-
positive: '#
|
|
202
|
+
positive: '#32a483',
|
|
203
203
|
warning: '#ffb020',
|
|
204
204
|
danger: '#e53e3e',
|
|
205
205
|
success: '#308acc' // $success
|
|
@@ -2420,6 +2420,27 @@ var iconmap = {
|
|
|
2420
2420
|
"circles": [],
|
|
2421
2421
|
"rects": []
|
|
2422
2422
|
},
|
|
2423
|
+
"Downstream_s1310": {
|
|
2424
|
+
"width": "13",
|
|
2425
|
+
"height": "13",
|
|
2426
|
+
"viewBox": "0 0 13 13",
|
|
2427
|
+
"fill": "none",
|
|
2428
|
+
"paths": [{
|
|
2429
|
+
"d": "M1.73329 9.96697C1.01539 9.96697 0.433294 10.5491 0.433294 11.267C0.433294 11.9849 1.01539 12.567 1.73329 12.567C2.4512 12.567 3.03329 11.9849 3.03329 11.267C3.03329 10.5491 2.4512 9.96697 1.73329 9.96697ZM1.73329 11.7003C1.49401 11.7003 1.29996 11.5063 1.29996 11.267C1.29996 11.0277 1.49401 10.8336 1.73329 10.8336C1.97258 10.8336 2.16663 11.0277 2.16663 11.267C2.16663 11.5063 1.97258 11.7003 1.73329 11.7003Z",
|
|
2430
|
+
"fill": "white"
|
|
2431
|
+
}, {
|
|
2432
|
+
"d": "M6.49996 9.96697C5.78206 9.96697 5.19996 10.5491 5.19996 11.267C5.19996 11.9849 5.78206 12.567 6.49996 12.567C7.21786 12.567 7.79996 11.9849 7.79996 11.267C7.79996 10.5491 7.21786 9.96697 6.49996 9.96697ZM6.49996 11.7003C6.26067 11.7003 6.06663 11.5063 6.06663 11.267C6.06663 11.0277 6.26067 10.8336 6.49996 10.8336C6.73925 10.8336 6.93329 11.0277 6.93329 11.267C6.93329 11.5063 6.73925 11.7003 6.49996 11.7003Z",
|
|
2433
|
+
"fill": "white"
|
|
2434
|
+
}, {
|
|
2435
|
+
"d": "M11.2666 9.96697C10.5487 9.96697 9.96663 10.5491 9.96663 11.267C9.96663 11.9849 10.5487 12.567 11.2666 12.567C11.9845 12.567 12.5666 11.9849 12.5666 11.267C12.5666 10.5491 11.9845 9.96697 11.2666 9.96697ZM11.2666 11.7003C11.0273 11.7003 10.8333 11.5063 10.8333 11.267C10.8333 11.0277 11.0273 10.8336 11.2666 10.8336C11.5059 10.8336 11.7 11.0277 11.7 11.267C11.7 11.5063 11.5059 11.7003 11.2666 11.7003Z",
|
|
2436
|
+
"fill": "white"
|
|
2437
|
+
}, {
|
|
2438
|
+
"d": "M12.3872 7.18753L11.7 7.87475V6.50026C11.7 4.96011 10.5453 3.68719 9.05671 3.49488C9.08371 3.34507 9.1 3.19124 9.1 3.03359C9.1 1.59774 7.93594 0.433594 6.5 0.433594C5.06406 0.433594 3.9 1.59774 3.9 3.03359C3.9 3.19124 3.91629 3.34507 3.94329 3.49488C2.45466 3.68719 1.3 4.96011 1.3 6.50026V7.87453L0.612777 7.18753L0 7.8003L1.73333 9.53364L3.46667 7.8003L2.85389 7.18753L2.16667 7.87475V6.50026C2.16667 5.3323 3.09742 4.38351 4.25546 4.34144C4.63675 4.99417 5.29308 5.46455 6.06667 5.59468V7.87475L5.37944 7.18753L4.76667 7.8003L6.5 9.53364L8.23333 7.8003L7.62056 7.18753L6.93333 7.87475V5.59468C7.70692 5.46455 8.36325 4.99421 8.74454 4.34144C9.90258 4.38356 10.8333 5.3323 10.8333 6.50026V7.87453L10.1461 7.18753L9.53333 7.8003L11.2667 9.53364L13 7.8003L12.3872 7.18753ZM6.5 4.76697C5.54424 4.76697 4.76667 3.9894 4.76667 3.03364C4.76667 2.07788 5.54424 1.3003 6.5 1.3003C7.45576 1.3003 8.23333 2.07788 8.23333 3.03364C8.23333 3.9894 7.45576 4.76697 6.5 4.76697Z",
|
|
2439
|
+
"fill": "white"
|
|
2440
|
+
}],
|
|
2441
|
+
"circles": [],
|
|
2442
|
+
"rects": []
|
|
2443
|
+
},
|
|
2423
2444
|
"Downstream_s1410": {
|
|
2424
2445
|
"width": "14",
|
|
2425
2446
|
"height": "14",
|
|
@@ -3245,19 +3266,19 @@ var iconmap = {
|
|
|
3245
3266
|
"circles": [],
|
|
3246
3267
|
"rects": []
|
|
3247
3268
|
},
|
|
3248
|
-
"
|
|
3249
|
-
"width": "
|
|
3250
|
-
"height": "
|
|
3251
|
-
"viewBox": "0 0
|
|
3269
|
+
"Folders_s2415": {
|
|
3270
|
+
"width": "24",
|
|
3271
|
+
"height": "24",
|
|
3272
|
+
"viewBox": "0 0 24 24",
|
|
3252
3273
|
"fill": "none",
|
|
3253
3274
|
"paths": [{
|
|
3254
|
-
"d": "
|
|
3275
|
+
"d": "M9.33332 4H12L13.7778 5.77778H18.2222C18.6937 5.77778 19.1459 5.96508 19.4793 6.29848C19.8127 6.63187 20 7.08406 20 7.55556V13.7778C20 14.2493 19.8127 14.7015 19.4793 15.0349C19.1459 15.3683 18.6937 15.5556 18.2222 15.5556H9.33332C8.86182 15.5556 8.40964 15.3683 8.07624 15.0349C7.74284 14.7015 7.55554 14.2493 7.55554 13.7778V5.77778C7.55554 5.30628 7.74284 4.8541 8.07624 4.5207C8.40964 4.1873 8.86182 4 9.33332 4Z",
|
|
3255
3276
|
"stroke": "#5C5C5C",
|
|
3256
3277
|
"strokeWidth": "1.5",
|
|
3257
3278
|
"strokeLinecap": "round",
|
|
3258
3279
|
"strokeLinejoin": "round"
|
|
3259
3280
|
}, {
|
|
3260
|
-
"d": "
|
|
3281
|
+
"d": "M16.4444 15.5556V17.3333C16.4444 17.8048 16.2571 18.257 15.9237 18.5904C15.5903 18.9238 15.1382 19.1111 14.6667 19.1111H5.77778C5.30628 19.1111 4.8541 18.9238 4.5207 18.5904C4.1873 18.257 4 17.8048 4 17.3333V9.33334C4 8.86184 4.1873 8.40965 4.5207 8.07626C4.8541 7.74286 5.30628 7.55556 5.77778 7.55556H7.55556",
|
|
3261
3282
|
"stroke": "#5C5C5C",
|
|
3262
3283
|
"strokeWidth": "1.5",
|
|
3263
3284
|
"strokeLinecap": "round",
|
|
@@ -3725,6 +3746,30 @@ var iconmap = {
|
|
|
3725
3746
|
"circles": [],
|
|
3726
3747
|
"rects": []
|
|
3727
3748
|
},
|
|
3749
|
+
"Network03_s1110": {
|
|
3750
|
+
"width": "11",
|
|
3751
|
+
"height": "11",
|
|
3752
|
+
"viewBox": "0 0 11 11",
|
|
3753
|
+
"fill": "none",
|
|
3754
|
+
"paths": [{
|
|
3755
|
+
"d": "M11 11H7.85714V7.85714H11V11ZM8.64286 10.2143H10.2143V8.64286H8.64286V10.2143Z",
|
|
3756
|
+
"fill": "white"
|
|
3757
|
+
}, {
|
|
3758
|
+
"d": "M7.07143 9.82143H2.35714C1.73199 9.82143 1.13244 9.57309 0.690391 9.13104C0.248341 8.68899 0 8.08944 0 7.46429C0 6.83913 0.248341 6.23958 0.690391 5.79753C1.13244 5.35548 1.73199 5.10714 2.35714 5.10714H3.14286V5.89286H2.35714C1.94037 5.89286 1.54067 6.05842 1.24597 6.35312C0.951275 6.64782 0.785714 7.04752 0.785714 7.46429C0.785714 7.88105 0.951275 8.28075 1.24597 8.57545C1.54067 8.87015 1.94037 9.03571 2.35714 9.03571H7.07143V9.82143Z",
|
|
3759
|
+
"fill": "white"
|
|
3760
|
+
}, {
|
|
3761
|
+
"d": "M7.07143 7.07143H3.92857V3.92857H7.07143V7.07143ZM4.71429 6.28571H6.28571V4.71429H4.71429V6.28571Z",
|
|
3762
|
+
"fill": "white"
|
|
3763
|
+
}, {
|
|
3764
|
+
"d": "M8.64286 5.89286H7.85714V5.10714H8.64286C9.05963 5.10714 9.45932 4.94158 9.75402 4.64688C10.0487 4.35218 10.2143 3.95248 10.2143 3.53571C10.2143 3.11895 10.0487 2.71925 9.75402 2.42455C9.45932 2.12985 9.05963 1.96429 8.64286 1.96429H3.92857V1.17857H8.64286C9.26801 1.17857 9.86756 1.42691 10.3096 1.86896C10.7517 2.31101 11 2.91056 11 3.53571C11 4.16087 10.7517 4.76042 10.3096 5.20247C9.86756 5.64452 9.26801 5.89286 8.64286 5.89286Z",
|
|
3765
|
+
"fill": "white"
|
|
3766
|
+
}, {
|
|
3767
|
+
"d": "M3.14286 3.14286H0V0H3.14286V3.14286ZM0.785714 2.35714H2.35714V0.785714H0.785714V2.35714Z",
|
|
3768
|
+
"fill": "white"
|
|
3769
|
+
}],
|
|
3770
|
+
"circles": [],
|
|
3771
|
+
"rects": []
|
|
3772
|
+
},
|
|
3728
3773
|
"Network03_s1410": {
|
|
3729
3774
|
"width": "14",
|
|
3730
3775
|
"height": "14",
|
|
@@ -3788,6 +3833,27 @@ var iconmap = {
|
|
|
3788
3833
|
"circles": [],
|
|
3789
3834
|
"rects": []
|
|
3790
3835
|
},
|
|
3836
|
+
"Network04_s1310": {
|
|
3837
|
+
"width": "13",
|
|
3838
|
+
"height": "13",
|
|
3839
|
+
"viewBox": "0 0 13 13",
|
|
3840
|
+
"fill": "none",
|
|
3841
|
+
"paths": [{
|
|
3842
|
+
"d": "M8.23335 11.7003C8.71199 11.7003 9.10001 11.3123 9.10001 10.8336C9.10001 10.355 8.71199 9.96694 8.23335 9.96694C7.7547 9.96694 7.36668 10.355 7.36668 10.8336C7.36668 11.3123 7.7547 11.7003 8.23335 11.7003Z",
|
|
3843
|
+
"fill": "white"
|
|
3844
|
+
}, {
|
|
3845
|
+
"d": "M8.23335 3.0336C8.71199 3.0336 9.10001 2.64558 9.10001 2.16693C9.10001 1.68828 8.71199 1.30026 8.23335 1.30026C7.7547 1.30026 7.36668 1.68828 7.36668 2.16693C7.36668 2.64558 7.7547 3.0336 8.23335 3.0336Z",
|
|
3846
|
+
"fill": "white"
|
|
3847
|
+
}, {
|
|
3848
|
+
"d": "M0.866668 7.36694C1.34532 7.36694 1.73334 6.97892 1.73334 6.50027C1.73334 6.02162 1.34532 5.6336 0.866668 5.6336C0.38802 5.6336 0 6.02162 0 6.50027C0 6.97892 0.38802 7.36694 0.866668 7.36694Z",
|
|
3849
|
+
"fill": "white"
|
|
3850
|
+
}, {
|
|
3851
|
+
"d": "M11.2667 4.76693C10.8835 4.7681 10.5114 4.89635 10.2089 5.1316C9.9064 5.36685 9.69046 5.69581 9.59492 6.06694H7.73844C7.67708 5.82253 7.56273 5.59461 7.40347 5.39932C7.24422 5.20404 7.04397 5.04617 6.8169 4.9369C6.58984 4.82763 6.34152 4.76963 6.08954 4.76703C5.83757 4.76442 5.5881 4.81726 5.35882 4.92181L3.98234 3.20139C4.20883 2.90397 4.33206 2.54076 4.33334 2.16693C4.33334 1.82411 4.23168 1.48899 4.04122 1.20394C3.85076 0.918895 3.58005 0.696729 3.26332 0.565537C2.9466 0.434345 2.59808 0.400019 2.26185 0.4669C1.92561 0.533781 1.61676 0.698865 1.37435 0.941277C1.13194 1.18369 0.966855 1.49254 0.899974 1.82877C0.833092 2.16501 0.867418 2.51352 0.99861 2.83025C1.1298 3.14698 1.35197 3.41769 1.63701 3.60815C1.92206 3.79861 2.25718 3.90027 2.6 3.90027C2.84433 3.89963 3.08571 3.84683 3.30798 3.74539L4.68425 5.46573C4.45671 5.76257 4.33338 6.12616 4.33338 6.50018C4.33338 6.87421 4.45671 7.23779 4.68425 7.53464L3.30807 9.25497C3.08575 9.15358 2.84435 9.10084 2.6 9.10027C2.25718 9.10027 1.92206 9.20193 1.63701 9.39239C1.35197 9.58286 1.1298 9.85357 0.99861 10.1703C0.867418 10.487 0.833092 10.8355 0.899974 11.1718C0.966855 11.508 1.13194 11.8169 1.37435 12.0593C1.61676 12.3017 1.92561 12.4668 2.26185 12.5336C2.59808 12.6005 2.9466 12.5662 3.26332 12.435C3.58005 12.3038 3.85076 12.0816 4.04122 11.7966C4.23168 11.5116 4.33334 11.1764 4.33334 10.8336C4.33207 10.4598 4.20883 10.0966 3.98234 9.79916L5.35852 8.07882C5.58782 8.1834 5.83732 8.23626 6.08933 8.23366C6.34134 8.23107 6.58969 8.17307 6.81679 8.06379C7.04389 7.95452 7.24417 7.79662 7.40344 7.60131C7.56272 7.406 7.67708 7.17804 7.73844 6.9336H9.59492C9.6765 7.24678 9.84426 7.5308 10.0791 7.75341C10.314 7.97603 10.6066 8.12832 10.9237 8.19298C11.2408 8.25765 11.5697 8.2321 11.873 8.11924C12.1763 8.00639 12.4419 7.81074 12.6396 7.55452C12.8373 7.2983 12.9592 6.99178 12.9914 6.66977C13.0236 6.34776 12.9649 6.02316 12.8219 5.73284C12.6789 5.44252 12.4574 5.19811 12.1825 5.02737C11.9076 4.85663 11.5903 4.7664 11.2667 4.76693ZM1.73334 2.16693C1.73334 1.99552 1.78417 1.82796 1.8794 1.68544C1.97463 1.54291 2.10998 1.43183 2.26834 1.36623C2.42671 1.30064 2.60097 1.28347 2.76908 1.31692C2.9372 1.35036 3.09162 1.4329 3.21283 1.5541C3.33404 1.67531 3.41658 1.82973 3.45002 1.99785C3.48346 2.16597 3.4663 2.34023 3.4007 2.49859C3.3351 2.65695 3.22402 2.79231 3.0815 2.88754C2.93898 2.98277 2.77141 3.0336 2.6 3.0336C2.37023 3.03333 2.14994 2.94194 1.98747 2.77947C1.82499 2.61699 1.7336 2.3967 1.73334 2.16693ZM2.6 11.7003C2.42859 11.7003 2.26103 11.6494 2.11851 11.5542C1.97599 11.459 1.8649 11.3236 1.79931 11.1653C1.73371 11.0069 1.71655 10.8326 1.74999 10.6645C1.78343 10.4964 1.86597 10.342 1.98718 10.2208C2.10838 10.0996 2.26281 10.017 2.43093 9.98359C2.59904 9.95015 2.7733 9.96732 2.93166 10.0329C3.09003 10.0985 3.22538 10.2096 3.32061 10.3521C3.41584 10.4946 3.46667 10.6622 3.46667 10.8336C3.46641 11.0634 3.37501 11.2837 3.21254 11.4461C3.05006 11.6086 2.82978 11.7 2.6 11.7003ZM6.06668 7.36694C5.89527 7.36694 5.7277 7.31611 5.58518 7.22088C5.44266 7.12565 5.33157 6.99029 5.26598 6.83193C5.20038 6.67357 5.18322 6.49931 5.21666 6.33119C5.2501 6.16307 5.33264 6.00865 5.45385 5.88744C5.57506 5.76624 5.72948 5.6837 5.8976 5.65025C6.06571 5.61681 6.23997 5.63398 6.39834 5.69957C6.5567 5.76517 6.69205 5.87625 6.78728 6.01878C6.88251 6.1613 6.93334 6.32886 6.93334 6.50027C6.93308 6.73004 6.84169 6.95033 6.67921 7.11281C6.51674 7.27528 6.29645 7.36667 6.06668 7.36694ZM11.2667 7.36694C11.0953 7.36694 10.9277 7.31611 10.7852 7.22088C10.6427 7.12565 10.5316 6.99029 10.466 6.83193C10.4004 6.67357 10.3832 6.49931 10.4167 6.33119C10.4501 6.16307 10.5327 6.00865 10.6539 5.88744C10.7751 5.76624 10.9295 5.6837 11.0976 5.65025C11.2657 5.61681 11.44 5.63398 11.5983 5.69957C11.7567 5.76517 11.8921 5.87625 11.9873 6.01878C12.0825 6.1613 12.1334 6.32886 12.1334 6.50027C12.1331 6.73004 12.0417 6.95033 11.8792 7.11281C11.7167 7.27528 11.4965 7.36667 11.2667 7.36694Z",
|
|
3852
|
+
"fill": "white"
|
|
3853
|
+
}],
|
|
3854
|
+
"circles": [],
|
|
3855
|
+
"rects": []
|
|
3856
|
+
},
|
|
3791
3857
|
"Network04_s1410": {
|
|
3792
3858
|
"width": "14",
|
|
3793
3859
|
"height": "14",
|
|
@@ -5314,6 +5380,21 @@ var iconmap = {
|
|
|
5314
5380
|
"circles": [],
|
|
5315
5381
|
"rects": []
|
|
5316
5382
|
},
|
|
5383
|
+
"X_s1615": {
|
|
5384
|
+
"width": "16",
|
|
5385
|
+
"height": "17",
|
|
5386
|
+
"viewBox": "0 0 16 17",
|
|
5387
|
+
"fill": "none",
|
|
5388
|
+
"paths": [{
|
|
5389
|
+
"d": "M11.3333 5.16602L4.66663 11.8327M4.66663 5.16602L11.3333 11.8327",
|
|
5390
|
+
"stroke": "#BDBDBD",
|
|
5391
|
+
"strokeWidth": "1.5",
|
|
5392
|
+
"strokeLinecap": "round",
|
|
5393
|
+
"strokeLinejoin": "round"
|
|
5394
|
+
}],
|
|
5395
|
+
"circles": [],
|
|
5396
|
+
"rects": []
|
|
5397
|
+
},
|
|
5317
5398
|
"X_s2420": {
|
|
5318
5399
|
"width": "24",
|
|
5319
5400
|
"height": "24",
|
|
@@ -5505,6 +5586,7 @@ var ICONS = {
|
|
|
5505
5586
|
"Download01_s1313": "Download01_s1313",
|
|
5506
5587
|
"Download01_s1413": "Download01_s1413",
|
|
5507
5588
|
"Download01_s1613": "Download01_s1613",
|
|
5589
|
+
"Downstream_s1310": "Downstream_s1310",
|
|
5508
5590
|
"Downstream_s1410": "Downstream_s1410",
|
|
5509
5591
|
"Downstream_s2410": "Downstream_s2410",
|
|
5510
5592
|
"Drag_s1613": "Drag_s1613",
|
|
@@ -5551,7 +5633,7 @@ var ICONS = {
|
|
|
5551
5633
|
"Folder_s2415": "Folder_s2415",
|
|
5552
5634
|
"Folder_s2420": "Folder_s2420",
|
|
5553
5635
|
"Folder_s2820": "Folder_s2820",
|
|
5554
|
-
"
|
|
5636
|
+
"Folders_s2415": "Folders_s2415",
|
|
5555
5637
|
"Globe01_s1615": "Globe01_s1615",
|
|
5556
5638
|
"GraduationHat01_s1615": "GraduationHat01_s1615",
|
|
5557
5639
|
"GraduationHat01_s2415": "GraduationHat01_s2415",
|
|
@@ -5579,9 +5661,11 @@ var ICONS = {
|
|
|
5579
5661
|
"MessageText_s1815": "MessageText_s1815",
|
|
5580
5662
|
"MessageX_s1615": "MessageX_s1615",
|
|
5581
5663
|
"Move_s1613": "Move_s1613",
|
|
5664
|
+
"Network03_s1110": "Network03_s1110",
|
|
5582
5665
|
"Network03_s1410": "Network03_s1410",
|
|
5583
5666
|
"Network03_s2410": "Network03_s2410",
|
|
5584
5667
|
"Network03_s2415": "Network03_s2415",
|
|
5668
|
+
"Network04_s1310": "Network04_s1310",
|
|
5585
5669
|
"Network04_s1410": "Network04_s1410",
|
|
5586
5670
|
"Network04_s2410": "Network04_s2410",
|
|
5587
5671
|
"Pause_s1615": "Pause_s1615",
|
|
@@ -5672,6 +5756,7 @@ var ICONS = {
|
|
|
5672
5756
|
"XDiamondBg_s2415": "XDiamondBg_s2415",
|
|
5673
5757
|
"X_s1410": "X_s1410",
|
|
5674
5758
|
"X_s1613": "X_s1613",
|
|
5759
|
+
"X_s1615": "X_s1615",
|
|
5675
5760
|
"X_s2420": "X_s2420",
|
|
5676
5761
|
"Zap_s1810": "Zap_s1810",
|
|
5677
5762
|
"Zap_s1812": "Zap_s1812",
|
|
@@ -5771,7 +5856,7 @@ function Icon(_a) {
|
|
|
5771
5856
|
}));
|
|
5772
5857
|
}
|
|
5773
5858
|
|
|
5774
|
-
var css_248z$j = ".size-small {\n padding: 5px 16px;\n border-radius: 4px;\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}\n\n.size-normal {\n padding: 8px 16px;\n border-radius: 6px;\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}\n\n.size-large {\n padding: 10px 16px;\n border-radius: 6px;\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}\n\n.maru-button {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n border: 0;\n cursor: pointer;\n gap: 6px;\n}\n.maru-button:focus-within {\n outline: none;\n}\n.maru-button:disabled {\n cursor: default;\n opacity: 0.5;\n pointer-events: none;\n}\n.maru-button-primary-default {\n background-color: var(--p);\n color: white;\n}\n.maru-button-primary-default:hover {\n box-shadow: 0 0 6px var(--p);\n}\n.maru-button-primary-default:focus-visible, .maru-button-primary-default:active {\n box-shadow: none;\n background-color: var(--p-10);\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-default-light {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-button-primary-default-light:hover {\n box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-default-light:focus-visible, .maru-button-primary-default-light:active {\n box-shadow: none;\n background-color: var(--p);\n color: white;\n}\n.maru-button-primary-outline {\n background-color: white;\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n box-shadow: 0 0 6px var(--p-20);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n box-shadow: none;\n background-color: var(--p-20);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n box-shadow: 0 0 0 1px var(--p) inset, 0 0 6px var(--p);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n box-shadow: none;\n background-color: var(--p-10);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-text {\n background-color: transparent;\n color: var(--p);\n}\n.maru-button-primary-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n background-color: var(--p-10);\n}\n.maru-button-primary-color-on-focus:focus-visible, .maru-button-primary-color-on-focus:active {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-button-secondary-default {\n background-color: #8c8c8c;\n color: white;\n background-color: #e4e4e4;\n color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n box-shadow: 0 0 6px #8c8c8c;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n box-shadow: none;\n background-color: #fafafa;\n color: #8c8c8c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-default:hover {\n box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n box-shadow: none;\n background-color: #e4e4e4;\n color: #8c8c8c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-default-light {\n background-color: #fafafa;\n color: #8c8c8c;\n}\n.maru-button-secondary-default-light:hover {\n box-shadow: 0 0 6px;\n}\n.maru-button-secondary-default-light:focus-visible, .maru-button-secondary-default-light:active {\n box-shadow: none;\n background-color: #8c8c8c;\n color: white;\n}\n.maru-button-secondary-outline {\n background-color: white;\n color: #8c8c8c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-outline:hover {\n box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-outline:focus-visible, .maru-button-secondary-outline:active {\n box-shadow: none;\n background-color: #e4e4e4;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-text {\n background-color: transparent;\n color: #8c8c8c;\n}\n.maru-button-secondary-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n background-color: #fafafa;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n background-color: #fafafa;\n color: #8c8c8c;\n}\n.maru-button-positive-default {\n background-color: #58c5a6;\n color: white;\n}\n.maru-button-positive-default:hover {\n box-shadow: 0 0 6px #58c5a6;\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n box-shadow: none;\n background-color: #eef9f6;\n color: #58c5a6;\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-default-light {\n background-color: #eef9f6;\n color: #58c5a6;\n}\n.maru-button-positive-default-light:hover {\n box-shadow: 0 0 6px rgba(88, 196, 166, 0.5019607843);\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n box-shadow: none;\n background-color: #58c5a6;\n color: white;\n}\n.maru-button-positive-outline {\n background-color: white;\n color: #58c5a6;\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-outline:hover {\n box-shadow: 0 0 6px #def3ed;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n box-shadow: none;\n background-color: #def3ed;\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-text {\n background-color: transparent;\n color: #58c5a6;\n}\n.maru-button-positive-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n background-color: #eef9f6;\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n background-color: #eef9f6;\n color: #58c5a6;\n}\n.maru-button-warning-default {\n background-color: #ffb020;\n color: white;\n}\n.maru-button-warning-default:hover {\n box-shadow: 0 0 6px #ffb020;\n}\n.maru-button-warning-default:focus-visible, .maru-button-warning-default:active {\n box-shadow: none;\n background-color: #ffefd2;\n color: #ffb020;\n}\n.maru-button-warning-default-light {\n background-color: #fff7e9;\n color: #ffb020;\n}\n.maru-button-warning-default-light:hover {\n box-shadow: 0 0 6px rgba(255, 177, 32, 0.5019607843);\n}\n.maru-button-warning-default-light:focus-visible, .maru-button-warning-default-light:active {\n box-shadow: none;\n background-color: #ffb020;\n color: white;\n}\n.maru-button-warning-outline {\n background-color: white;\n color: #ffb020;\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-outline:hover {\n box-shadow: 0 0 6px #ffefd2;\n}\n.maru-button-warning-outline:focus-visible, .maru-button-warning-outline:active {\n box-shadow: none;\n background-color: #ffefd2;\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-text {\n background-color: transparent;\n color: #ffb020;\n}\n.maru-button-warning-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n background-color: #fff7e9;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n background-color: #fff7e9;\n color: #ffb020;\n}\n.maru-button-danger-default {\n background-color: #e53e3e;\n color: white;\n}\n.maru-button-danger-default:hover {\n box-shadow: 0 0 6px #e53e3e;\n}\n.maru-button-danger-default:focus-visible, .maru-button-danger-default:active {\n box-shadow: none;\n background-color: #fcecec;\n color: #e53e3e;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-default-light {\n background-color: #fcecec;\n color: #e53e3e;\n}\n.maru-button-danger-default-light:hover {\n box-shadow: 0 0 6px rgba(229, 62, 62, 0.5019607843);\n}\n.maru-button-danger-default-light:focus-visible, .maru-button-danger-default-light:active {\n box-shadow: none;\n background-color: #e53e3e;\n color: white;\n}\n.maru-button-danger-outline {\n background-color: white;\n color: #e53e3e;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-outline:hover {\n box-shadow: 0 0 6px #fad8d8;\n}\n.maru-button-danger-outline:focus-visible, .maru-button-danger-outline:active {\n box-shadow: none;\n background-color: #fad8d8;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-text {\n background-color: transparent;\n color: #e53e3e;\n}\n.maru-button-danger-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n background-color: #fcecec;\n}\n.maru-button-danger-color-on-focus:focus-visible, .maru-button-danger-color-on-focus:active {\n background-color: #fcecec;\n color: #e53e3e;\n}\n.maru-button-success-default {\n background-color: #308acc;\n color: white;\n}\n.maru-button-success-default:hover {\n box-shadow: 0 0 6px #308acc;\n}\n.maru-button-success-default:focus-visible, .maru-button-success-default:active {\n box-shadow: none;\n background-color: #eaf3fa;\n color: #308acc;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-default-light {\n background-color: #eaf3fa;\n color: #308acc;\n}\n.maru-button-success-default-light:hover {\n box-shadow: 0 0 6px rgba(48, 138, 204, 0.5019607843);\n}\n.maru-button-success-default-light:focus-visible, .maru-button-success-default-light:active {\n box-shadow: none;\n background-color: #308acc;\n color: white;\n}\n.maru-button-success-outline {\n background-color: white;\n color: #308acc;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-outline:hover {\n box-shadow: 0 0 6px #d6e8f5;\n}\n.maru-button-success-outline:focus-visible, .maru-button-success-outline:active {\n box-shadow: none;\n background-color: #d6e8f5;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-text {\n background-color: transparent;\n color: #308acc;\n}\n.maru-button-success-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n background-color: #eaf3fa;\n}\n.maru-button-success-color-on-focus:focus-visible, .maru-button-success-color-on-focus:active {\n background-color: #eaf3fa;\n color: #308acc;\n}\n\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n padding: 5px 12px;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline {\n background-color: white;\n color: #bdbdbd;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:hover,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:hover {\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:focus-visible, .maru-button-with-start-icon.size-small.maru-button-secondary-outline:active,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:focus-visible,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:active {\n background-color: var(--p-10);\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n padding: 8px 12px;\n}\n\n.maru-button-only-icon.size-normal {\n padding: 0;\n justify-content: center;\n background-color: transparent;\n}\n.maru-button-only-icon.size-normal:hover, .maru-button-only-icon.size-normal:focus-visible, .maru-button-only-icon.size-normal:active {\n box-shadow: none;\n background-color: transparent;\n}";
|
|
5859
|
+
var css_248z$j = ".size-small {\n padding: 5px 16px;\n border-radius: 4px;\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}\n\n.size-normal {\n padding: 8px 16px;\n border-radius: 6px;\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}\n\n.size-large {\n padding: 10px 16px;\n border-radius: 6px;\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}\n\n.maru-button {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n border: 0;\n cursor: pointer;\n gap: 6px;\n}\n.maru-button:focus-within {\n outline: none;\n}\n.maru-button:disabled {\n cursor: default;\n opacity: 0.5;\n pointer-events: none;\n}\n.maru-button-primary-default {\n background-color: var(--p);\n color: white;\n}\n.maru-button-primary-default:hover {\n box-shadow: 0 0 6px var(--p);\n}\n.maru-button-primary-default:focus-visible, .maru-button-primary-default:active {\n box-shadow: none;\n background-color: var(--p-10);\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-default-light {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-button-primary-default-light:hover {\n box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-default-light:focus-visible, .maru-button-primary-default-light:active {\n box-shadow: none;\n background-color: var(--p);\n color: white;\n}\n.maru-button-primary-outline {\n background-color: white;\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n box-shadow: 0 0 6px var(--p-20);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n box-shadow: none;\n background-color: var(--p-20);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n box-shadow: 0 0 0 1px var(--p) inset, 0 0 6px var(--p);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n box-shadow: none;\n background-color: var(--p-10);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-text {\n background-color: transparent;\n color: var(--p);\n}\n.maru-button-primary-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n background-color: var(--p-10);\n}\n.maru-button-primary-color-on-focus:focus-visible, .maru-button-primary-color-on-focus:active {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-button-secondary-default {\n background-color: #8c8c8c;\n color: white;\n background-color: #e4e4e4;\n color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n box-shadow: 0 0 6px #8c8c8c;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n box-shadow: none;\n background-color: #fafafa;\n color: #8c8c8c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-default:hover {\n box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n box-shadow: none;\n background-color: #e4e4e4;\n color: #8c8c8c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-default-light {\n background-color: #fafafa;\n color: #8c8c8c;\n}\n.maru-button-secondary-default-light:hover {\n box-shadow: 0 0 6px;\n}\n.maru-button-secondary-default-light:focus-visible, .maru-button-secondary-default-light:active {\n box-shadow: none;\n background-color: #8c8c8c;\n color: white;\n}\n.maru-button-secondary-outline {\n background-color: white;\n color: #8c8c8c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-outline:hover {\n box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-outline:focus-visible, .maru-button-secondary-outline:active {\n box-shadow: none;\n background-color: #e4e4e4;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-text {\n background-color: transparent;\n color: #8c8c8c;\n}\n.maru-button-secondary-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n background-color: #fafafa;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n background-color: #fafafa;\n color: #8c8c8c;\n}\n.maru-button-positive-default {\n background-color: #32a483;\n color: white;\n}\n.maru-button-positive-default:hover {\n box-shadow: 0 0 6px #32a483;\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n box-shadow: none;\n background-color: #eaf6f3;\n color: #32a483;\n box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-default-light {\n background-color: #eaf6f3;\n color: #32a483;\n}\n.maru-button-positive-default-light:hover {\n box-shadow: 0 0 6px rgba(50, 164, 131, 0.5019607843);\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n box-shadow: none;\n background-color: #32a483;\n color: white;\n}\n.maru-button-positive-outline {\n background-color: white;\n color: #32a483;\n box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-outline:hover {\n box-shadow: 0 0 6px #d6ede6;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n box-shadow: none;\n background-color: #d6ede6;\n box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-text {\n background-color: transparent;\n color: #32a483;\n}\n.maru-button-positive-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n background-color: #eaf6f3;\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n background-color: #eaf6f3;\n color: #32a483;\n}\n.maru-button-warning-default {\n background-color: #ffb020;\n color: white;\n}\n.maru-button-warning-default:hover {\n box-shadow: 0 0 6px #ffb020;\n}\n.maru-button-warning-default:focus-visible, .maru-button-warning-default:active {\n box-shadow: none;\n background-color: #ffefd2;\n color: #ffb020;\n}\n.maru-button-warning-default-light {\n background-color: #fff7e9;\n color: #ffb020;\n}\n.maru-button-warning-default-light:hover {\n box-shadow: 0 0 6px rgba(255, 177, 32, 0.5019607843);\n}\n.maru-button-warning-default-light:focus-visible, .maru-button-warning-default-light:active {\n box-shadow: none;\n background-color: #ffb020;\n color: white;\n}\n.maru-button-warning-outline {\n background-color: white;\n color: #ffb020;\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-outline:hover {\n box-shadow: 0 0 6px #ffefd2;\n}\n.maru-button-warning-outline:focus-visible, .maru-button-warning-outline:active {\n box-shadow: none;\n background-color: #ffefd2;\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-text {\n background-color: transparent;\n color: #ffb020;\n}\n.maru-button-warning-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n background-color: #fff7e9;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n background-color: #fff7e9;\n color: #ffb020;\n}\n.maru-button-danger-default {\n background-color: #e53e3e;\n color: white;\n}\n.maru-button-danger-default:hover {\n box-shadow: 0 0 6px #e53e3e;\n}\n.maru-button-danger-default:focus-visible, .maru-button-danger-default:active {\n box-shadow: none;\n background-color: #fcecec;\n color: #e53e3e;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-default-light {\n background-color: #fcecec;\n color: #e53e3e;\n}\n.maru-button-danger-default-light:hover {\n box-shadow: 0 0 6px rgba(229, 62, 62, 0.5019607843);\n}\n.maru-button-danger-default-light:focus-visible, .maru-button-danger-default-light:active {\n box-shadow: none;\n background-color: #e53e3e;\n color: white;\n}\n.maru-button-danger-outline {\n background-color: white;\n color: #e53e3e;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-outline:hover {\n box-shadow: 0 0 6px #fad8d8;\n}\n.maru-button-danger-outline:focus-visible, .maru-button-danger-outline:active {\n box-shadow: none;\n background-color: #fad8d8;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-text {\n background-color: transparent;\n color: #e53e3e;\n}\n.maru-button-danger-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n background-color: #fcecec;\n}\n.maru-button-danger-color-on-focus:focus-visible, .maru-button-danger-color-on-focus:active {\n background-color: #fcecec;\n color: #e53e3e;\n}\n.maru-button-success-default {\n background-color: #308acc;\n color: white;\n}\n.maru-button-success-default:hover {\n box-shadow: 0 0 6px #308acc;\n}\n.maru-button-success-default:focus-visible, .maru-button-success-default:active {\n box-shadow: none;\n background-color: #eaf3fa;\n color: #308acc;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-default-light {\n background-color: #eaf3fa;\n color: #308acc;\n}\n.maru-button-success-default-light:hover {\n box-shadow: 0 0 6px rgba(48, 138, 204, 0.5019607843);\n}\n.maru-button-success-default-light:focus-visible, .maru-button-success-default-light:active {\n box-shadow: none;\n background-color: #308acc;\n color: white;\n}\n.maru-button-success-outline {\n background-color: white;\n color: #308acc;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-outline:hover {\n box-shadow: 0 0 6px #d6e8f5;\n}\n.maru-button-success-outline:focus-visible, .maru-button-success-outline:active {\n box-shadow: none;\n background-color: #d6e8f5;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-text {\n background-color: transparent;\n color: #308acc;\n}\n.maru-button-success-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n background-color: #eaf3fa;\n}\n.maru-button-success-color-on-focus:focus-visible, .maru-button-success-color-on-focus:active {\n background-color: #eaf3fa;\n color: #308acc;\n}\n\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n padding: 5px 12px;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline {\n background-color: white;\n color: #bdbdbd;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:hover,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:hover {\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:focus-visible, .maru-button-with-start-icon.size-small.maru-button-secondary-outline:active,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:focus-visible,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:active {\n background-color: var(--p-10);\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n padding: 8px 12px;\n}\n\n.maru-button-only-icon.size-normal {\n padding: 0;\n justify-content: center;\n background-color: transparent;\n}\n.maru-button-only-icon.size-normal:hover, .maru-button-only-icon.size-normal:focus-visible, .maru-button-only-icon.size-normal:active {\n box-shadow: none;\n background-color: transparent;\n}";
|
|
5775
5860
|
styleInject(css_248z$j);
|
|
5776
5861
|
|
|
5777
5862
|
var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
@@ -6001,7 +6086,7 @@ Checkbox.defaultProps = {
|
|
|
6001
6086
|
};
|
|
6002
6087
|
Checkbox.displayName = 'Checkbox';
|
|
6003
6088
|
|
|
6004
|
-
var css_248z$h = ".maru-chip {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-chip-size-small {\n padding: 1.5px 8px;\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 border-radius: 10px;\n gap: 2px;\n}\n.maru-chip-size-normal {\n padding: 2px 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: 400;\n border-radius: 16px;\n gap: 8px;\n}\n.maru-chip-primary-default {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-chip-primary-default.maru-chip-warning-default, .maru-chip-primary-default.maru-chip-positive-default {\n background-color: var(--p-20);\n}\n.maru-chip-primary-outline {\n background-color: var(--p-10);\n border: 1px solid var(--p);\n color: var(--p);\n}\n.maru-chip-primary-outline.maru-chip-warning-default, .maru-chip-primary-outline.maru-chip-positive-default {\n background-color: var(--p-20);\n}\n.maru-chip-primary-dot {\n color: var(--p);\n gap: 2px;\n padding: unset;\n}\n.maru-chip-secondary-default {\n background-color: #fafafa;\n color: #8c8c8c;\n}\n.maru-chip-secondary-default.maru-chip-warning-default, .maru-chip-secondary-default.maru-chip-positive-default {\n background-color: #e4e4e4;\n}\n.maru-chip-secondary-outline {\n background-color: #fafafa;\n border: 1px solid #8c8c8c;\n color: #8c8c8c;\n}\n.maru-chip-secondary-outline.maru-chip-warning-default, .maru-chip-secondary-outline.maru-chip-positive-default {\n background-color: #e4e4e4;\n}\n.maru-chip-secondary-dot {\n color: #8c8c8c;\n gap: 2px;\n padding: unset;\n}\n.maru-chip-positive-default {\n background-color: #
|
|
6089
|
+
var css_248z$h = ".maru-chip {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-chip-size-small {\n padding: 1.5px 8px;\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 border-radius: 10px;\n gap: 2px;\n}\n.maru-chip-size-normal {\n padding: 2px 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: 400;\n border-radius: 16px;\n gap: 8px;\n}\n.maru-chip-primary-default {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-chip-primary-default.maru-chip-warning-default, .maru-chip-primary-default.maru-chip-positive-default {\n background-color: var(--p-20);\n}\n.maru-chip-primary-outline {\n background-color: var(--p-10);\n border: 1px solid var(--p);\n color: var(--p);\n}\n.maru-chip-primary-outline.maru-chip-warning-default, .maru-chip-primary-outline.maru-chip-positive-default {\n background-color: var(--p-20);\n}\n.maru-chip-primary-dot {\n color: var(--p);\n gap: 2px;\n padding: unset;\n}\n.maru-chip-secondary-default {\n background-color: #fafafa;\n color: #8c8c8c;\n}\n.maru-chip-secondary-default.maru-chip-warning-default, .maru-chip-secondary-default.maru-chip-positive-default {\n background-color: #e4e4e4;\n}\n.maru-chip-secondary-outline {\n background-color: #fafafa;\n border: 1px solid #8c8c8c;\n color: #8c8c8c;\n}\n.maru-chip-secondary-outline.maru-chip-warning-default, .maru-chip-secondary-outline.maru-chip-positive-default {\n background-color: #e4e4e4;\n}\n.maru-chip-secondary-dot {\n color: #8c8c8c;\n gap: 2px;\n padding: unset;\n}\n.maru-chip-positive-default {\n background-color: #eaf6f3;\n color: #32a483;\n}\n.maru-chip-positive-default.maru-chip-warning-default, .maru-chip-positive-default.maru-chip-positive-default {\n background-color: #d6ede6;\n}\n.maru-chip-positive-outline {\n background-color: #eaf6f3;\n border: 1px solid #32a483;\n color: #32a483;\n}\n.maru-chip-positive-outline.maru-chip-warning-default, .maru-chip-positive-outline.maru-chip-positive-default {\n background-color: #d6ede6;\n}\n.maru-chip-positive-dot {\n color: #32a483;\n gap: 2px;\n padding: unset;\n}\n.maru-chip-warning-default {\n background-color: #fff7e9;\n color: #ffb020;\n}\n.maru-chip-warning-default.maru-chip-warning-default, .maru-chip-warning-default.maru-chip-positive-default {\n background-color: #ffefd2;\n}\n.maru-chip-warning-outline {\n background-color: #fff7e9;\n border: 1px solid #ffb020;\n color: #ffb020;\n}\n.maru-chip-warning-outline.maru-chip-warning-default, .maru-chip-warning-outline.maru-chip-positive-default {\n background-color: #ffefd2;\n}\n.maru-chip-warning-dot {\n color: #ffb020;\n gap: 2px;\n padding: unset;\n}\n.maru-chip-danger-default {\n background-color: #fcecec;\n color: #e53e3e;\n}\n.maru-chip-danger-default.maru-chip-warning-default, .maru-chip-danger-default.maru-chip-positive-default {\n background-color: #fad8d8;\n}\n.maru-chip-danger-outline {\n background-color: #fcecec;\n border: 1px solid #e53e3e;\n color: #e53e3e;\n}\n.maru-chip-danger-outline.maru-chip-warning-default, .maru-chip-danger-outline.maru-chip-positive-default {\n background-color: #fad8d8;\n}\n.maru-chip-danger-dot {\n color: #e53e3e;\n gap: 2px;\n padding: unset;\n}\n.maru-chip-success-default {\n background-color: #eaf3fa;\n color: #308acc;\n}\n.maru-chip-success-default.maru-chip-warning-default, .maru-chip-success-default.maru-chip-positive-default {\n background-color: #d6e8f5;\n}\n.maru-chip-success-outline {\n background-color: #eaf3fa;\n border: 1px solid #308acc;\n color: #308acc;\n}\n.maru-chip-success-outline.maru-chip-warning-default, .maru-chip-success-outline.maru-chip-positive-default {\n background-color: #d6e8f5;\n}\n.maru-chip-success-dot {\n color: #308acc;\n gap: 2px;\n padding: unset;\n}\n.maru-chip .maru-chip-x-icon-button {\n transform: translateY(-1px);\n}";
|
|
6005
6090
|
styleInject(css_248z$h);
|
|
6006
6091
|
|
|
6007
6092
|
function Chip(_a) {
|
|
@@ -6033,7 +6118,7 @@ function Chip(_a) {
|
|
|
6033
6118
|
}));
|
|
6034
6119
|
}
|
|
6035
6120
|
|
|
6036
|
-
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}\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
|
|
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}";
|
|
6037
6122
|
styleInject(css_248z$g);
|
|
6038
6123
|
|
|
6039
6124
|
var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
|
|
@@ -6168,19 +6253,19 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
|
|
|
6168
6253
|
name: maskingPassword ? ICONS.Eye_s1610 : ICONS.EyeOff_s1610,
|
|
6169
6254
|
color: "#bdbdbd"
|
|
6170
6255
|
})
|
|
6171
|
-
})), endNode && jsx("div", __assign({
|
|
6172
|
-
className: "maru-input-end-node"
|
|
6173
|
-
}, {
|
|
6174
|
-
children: endNode
|
|
6175
6256
|
})), showClearButton && !props.disabled && jsx("button", __assign({
|
|
6176
6257
|
type: "button",
|
|
6177
6258
|
onClick: handleClearClick,
|
|
6178
6259
|
tabIndex: -1
|
|
6179
6260
|
}, {
|
|
6180
6261
|
children: jsx(Icon, {
|
|
6181
|
-
name: ICONS.
|
|
6182
|
-
color: "#
|
|
6262
|
+
name: ICONS.X_s1615,
|
|
6263
|
+
color: "#5c5c5c"
|
|
6183
6264
|
})
|
|
6265
|
+
})), endNode && jsx("div", __assign({
|
|
6266
|
+
className: "maru-input-end-node"
|
|
6267
|
+
}, {
|
|
6268
|
+
children: endNode
|
|
6184
6269
|
}))]
|
|
6185
6270
|
}))]
|
|
6186
6271
|
})), invalid && invalid.on && jsx("div", __assign({
|
|
@@ -8208,7 +8293,7 @@ function Skeleton(_a) {
|
|
|
8208
8293
|
});
|
|
8209
8294
|
}
|
|
8210
8295
|
|
|
8211
|
-
var css_248z$c = ".maru-slider-container {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n position: relative;\n width: 100%;\n}\n\n.maru-slider {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n width: 100%;\n height: 6px;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n.maru-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 14px;\n height: 14px;\n background: white;\n border-radius: 50%;\n transition: transform 0.2s ease;\n}\n.maru-slider::-moz-range-thumb {\n appearance: none;\n width: 14px;\n height: 14px;\n background: white;\n border-radius: 50%;\n transition: transform 0.2s ease;\n}\n.maru-slider:active::-webkit-slider-thumb {\n transform: scale(1.2);\n}\n.maru-slider:active::-moz-range-thumb {\n transform: scale(1.2);\n}\n.maru-slider[disabled] {\n cursor: default;\n opacity: 0.5;\n}\n.maru-slider[disabled]:active::-webkit-slider-thumb {\n transform: none;\n}\n.maru-slider[disabled]:active::-moz-range-thumb {\n transform: none;\n}\n\n.maru-slider-primary .maru-slider {\n background: linear-gradient(to right, var(--p) 0%, var(--p) calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-primary .maru-slider::-webkit-slider-thumb {\n border: 3px solid var(--p);\n}\n.maru-slider-primary .maru-slider::-moz-range-thumb {\n border: 3px solid var(--p);\n}\n\n.maru-slider-secondary .maru-slider {\n background: linear-gradient(to right, #8c8c8c 0%, #8c8c8c calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-secondary .maru-slider::-webkit-slider-thumb {\n border: 3px solid #8c8c8c;\n}\n.maru-slider-secondary .maru-slider::-moz-range-thumb {\n border: 3px solid #8c8c8c;\n}\n\n.maru-slider-positive .maru-slider {\n background: linear-gradient(to right, #
|
|
8296
|
+
var css_248z$c = ".maru-slider-container {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n position: relative;\n width: 100%;\n}\n\n.maru-slider {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n width: 100%;\n height: 6px;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n.maru-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 14px;\n height: 14px;\n background: white;\n border-radius: 50%;\n transition: transform 0.2s ease;\n}\n.maru-slider::-moz-range-thumb {\n appearance: none;\n width: 14px;\n height: 14px;\n background: white;\n border-radius: 50%;\n transition: transform 0.2s ease;\n}\n.maru-slider:active::-webkit-slider-thumb {\n transform: scale(1.2);\n}\n.maru-slider:active::-moz-range-thumb {\n transform: scale(1.2);\n}\n.maru-slider[disabled] {\n cursor: default;\n opacity: 0.5;\n}\n.maru-slider[disabled]:active::-webkit-slider-thumb {\n transform: none;\n}\n.maru-slider[disabled]:active::-moz-range-thumb {\n transform: none;\n}\n\n.maru-slider-primary .maru-slider {\n background: linear-gradient(to right, var(--p) 0%, var(--p) calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-primary .maru-slider::-webkit-slider-thumb {\n border: 3px solid var(--p);\n}\n.maru-slider-primary .maru-slider::-moz-range-thumb {\n border: 3px solid var(--p);\n}\n\n.maru-slider-secondary .maru-slider {\n background: linear-gradient(to right, #8c8c8c 0%, #8c8c8c calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-secondary .maru-slider::-webkit-slider-thumb {\n border: 3px solid #8c8c8c;\n}\n.maru-slider-secondary .maru-slider::-moz-range-thumb {\n border: 3px solid #8c8c8c;\n}\n\n.maru-slider-positive .maru-slider {\n background: linear-gradient(to right, #32a483 0%, #32a483 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-positive .maru-slider::-webkit-slider-thumb {\n border: 3px solid #32a483;\n}\n.maru-slider-positive .maru-slider::-moz-range-thumb {\n border: 3px solid #32a483;\n}\n\n.maru-slider-warning .maru-slider {\n background: linear-gradient(to right, #ffb020 0%, #ffb020 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-warning .maru-slider::-webkit-slider-thumb {\n border: 3px solid #ffb020;\n}\n.maru-slider-warning .maru-slider::-moz-range-thumb {\n border: 3px solid #ffb020;\n}\n\n.maru-slider-danger .maru-slider {\n background: linear-gradient(to right, #e53e3e 0%, #e53e3e calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-danger .maru-slider::-webkit-slider-thumb {\n border: 3px solid #e53e3e;\n}\n.maru-slider-danger .maru-slider::-moz-range-thumb {\n border: 3px solid #e53e3e;\n}\n\n.maru-slider-success .maru-slider {\n background: linear-gradient(to right, #308acc 0%, #308acc calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-success .maru-slider::-webkit-slider-thumb {\n border: 3px solid #308acc;\n}\n.maru-slider-success .maru-slider::-moz-range-thumb {\n border: 3px solid #308acc;\n}";
|
|
8212
8297
|
styleInject(css_248z$c);
|
|
8213
8298
|
|
|
8214
8299
|
function Slider(_a) {
|
|
@@ -8359,7 +8444,7 @@ Textarea.defaultProps = {
|
|
|
8359
8444
|
};
|
|
8360
8445
|
Textarea.displayName = 'Textarea';
|
|
8361
8446
|
|
|
8362
|
-
var css_248z$a = ".maru-toggle-wrapper {\n display: inline-block;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper {\n position: relative;\n width: 30px;\n height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 11;\n cursor: pointer;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:not(:checked) ~ .maru-toggle-rail {\n background-color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail {\n position: absolute;\n width: 30px;\n height: 18px;\n border-radius: 17.5px;\n background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-primary {\n background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-secondary {\n background-color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-positive {\n background-color: #58c5a6;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-warning {\n background-color: #ffb020;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-danger {\n background-color: #e53e3e;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-success {\n background-color: #308acc;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb {\n position: absolute;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n transition: all 0.2s ease-in-out;\n background-color: white;\n top: 2px;\n right: 14px;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:checked ~ .maru-toggle-thumb {\n transform: translateX(12px);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle {\n cursor: default;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-thumb {\n background-color: #bdbdbd;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-rail {\n background-color: #e4e4e4 !important;\n}\n\n.maru-toggle-text {\n position: relative;\n width: 66px;\n height: 23px;\n background-color: white;\n border-radius: 62px;\n overflow: hidden;\n}\n.maru-toggle-text-primary {\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb {\n background-color: var(--p);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-button {\n color: var(--p);\n}\n.maru-toggle-text-primary .toggle-active {\n color: white;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px var(--p-50) inset;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: var(--p-50);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-button {\n color: var(--p-50);\n cursor: default;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-secondary {\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb {\n background-color: #8c8c8c;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-button {\n color: #8c8c8c;\n}\n.maru-toggle-text-secondary .toggle-active {\n color: white;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #bdbdbd inset;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #bdbdbd;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #bdbdbd;\n cursor: default;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-positive {\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb {\n background-color: #58c5a6;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #def3ed;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #def3ed;\n}\n.maru-toggle-text-positive .maru-toggle-text-button {\n color: #58c5a6;\n}\n.maru-toggle-text-positive .toggle-active {\n color: white;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #abe1d2 inset;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #abe1d2;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #eef9f6;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #eef9f6;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #abe1d2;\n cursor: default;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-warning {\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb {\n background-color: #ffb020;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-button {\n color: #ffb020;\n}\n.maru-toggle-text-warning .toggle-active {\n color: white;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #ffd78f inset;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #ffd78f;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #ffd78f;\n cursor: default;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-danger {\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb {\n background-color: #e53e3e;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-button {\n color: #e53e3e;\n}\n.maru-toggle-text-danger .toggle-active {\n color: white;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #f29e9e inset;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #f29e9e;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #f29e9e;\n cursor: default;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-success {\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb {\n background-color: #308acc;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-button {\n color: #308acc;\n}\n.maru-toggle-text-success .toggle-active {\n color: white;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #97c4e5 inset;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #97c4e5;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #97c4e5;\n cursor: default;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text .maru-toggle-text-thumb {\n top: 0;\n left: 0;\n position: absolute;\n width: 33px;\n height: 23px;\n border-radius: 62px;\n transition: all 0.2s ease-in-out;\n z-index: 1;\n}\n\n.slide-after {\n transform: translateX(33px);\n}\n\n.maru-toggle-text-button-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n\n.maru-toggle-text-button {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 10px;\n letter-spacing: -0.4px;\n font-weight: 700;\n position: relative;\n width: 33px;\n height: 23px;\n cursor: pointer;\n z-index: 2;\n background-color: transparent;\n border: 0;\n transition: color 0.4s ease;\n}";
|
|
8447
|
+
var css_248z$a = ".maru-toggle-wrapper {\n display: inline-block;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper {\n position: relative;\n width: 30px;\n height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 11;\n cursor: pointer;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:not(:checked) ~ .maru-toggle-rail {\n background-color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail {\n position: absolute;\n width: 30px;\n height: 18px;\n border-radius: 17.5px;\n background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-primary {\n background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-secondary {\n background-color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-positive {\n background-color: #32a483;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-warning {\n background-color: #ffb020;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-danger {\n background-color: #e53e3e;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-success {\n background-color: #308acc;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb {\n position: absolute;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n transition: all 0.2s ease-in-out;\n background-color: white;\n top: 2px;\n right: 14px;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:checked ~ .maru-toggle-thumb {\n transform: translateX(12px);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle {\n cursor: default;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-thumb {\n background-color: #bdbdbd;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-rail {\n background-color: #e4e4e4 !important;\n}\n\n.maru-toggle-text {\n position: relative;\n width: 66px;\n height: 23px;\n background-color: white;\n border-radius: 62px;\n overflow: hidden;\n}\n.maru-toggle-text-primary {\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb {\n background-color: var(--p);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-button {\n color: var(--p);\n}\n.maru-toggle-text-primary .toggle-active {\n color: white;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px var(--p-50) inset;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: var(--p-50);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-button {\n color: var(--p-50);\n cursor: default;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-secondary {\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb {\n background-color: #8c8c8c;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-button {\n color: #8c8c8c;\n}\n.maru-toggle-text-secondary .toggle-active {\n color: white;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #bdbdbd inset;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #bdbdbd;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #bdbdbd;\n cursor: default;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-positive {\n box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb {\n background-color: #32a483;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #d6ede6;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #d6ede6;\n}\n.maru-toggle-text-positive .maru-toggle-text-button {\n color: #32a483;\n}\n.maru-toggle-text-positive .toggle-active {\n color: white;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #98d1c1 inset;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #98d1c1;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #eaf6f3;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #eaf6f3;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #98d1c1;\n cursor: default;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-warning {\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb {\n background-color: #ffb020;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-button {\n color: #ffb020;\n}\n.maru-toggle-text-warning .toggle-active {\n color: white;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #ffd78f inset;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #ffd78f;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #ffd78f;\n cursor: default;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-danger {\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb {\n background-color: #e53e3e;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-button {\n color: #e53e3e;\n}\n.maru-toggle-text-danger .toggle-active {\n color: white;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #f29e9e inset;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #f29e9e;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #f29e9e;\n cursor: default;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-success {\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb {\n background-color: #308acc;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-button {\n color: #308acc;\n}\n.maru-toggle-text-success .toggle-active {\n color: white;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #97c4e5 inset;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #97c4e5;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #97c4e5;\n cursor: default;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text .maru-toggle-text-thumb {\n top: 0;\n left: 0;\n position: absolute;\n width: 33px;\n height: 23px;\n border-radius: 62px;\n transition: all 0.2s ease-in-out;\n z-index: 1;\n}\n\n.slide-after {\n transform: translateX(33px);\n}\n\n.maru-toggle-text-button-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n\n.maru-toggle-text-button {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 10px;\n letter-spacing: -0.4px;\n font-weight: 700;\n position: relative;\n width: 33px;\n height: 23px;\n cursor: pointer;\n z-index: 2;\n background-color: transparent;\n border: 0;\n transition: color 0.4s ease;\n}";
|
|
8363
8448
|
styleInject(css_248z$a);
|
|
8364
8449
|
|
|
8365
8450
|
function Toggle(_a) {
|
|
@@ -8446,7 +8531,7 @@ function Toggle(_a) {
|
|
|
8446
8531
|
});
|
|
8447
8532
|
}
|
|
8448
8533
|
|
|
8449
|
-
var css_248z$9 = ".maru-tooltip-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n padding: 6px;\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:
|
|
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}";
|
|
8450
8535
|
styleInject(css_248z$9);
|
|
8451
8536
|
|
|
8452
8537
|
function Tooltip(_a) {
|
|
@@ -8458,10 +8543,12 @@ function Tooltip(_a) {
|
|
|
8458
8543
|
_c = _a.direction,
|
|
8459
8544
|
direction = _c === void 0 ? 'right' : _c,
|
|
8460
8545
|
_d = _a.portal,
|
|
8461
|
-
portal = _d === void 0 ? false : _d
|
|
8462
|
-
|
|
8463
|
-
|
|
8464
|
-
|
|
8546
|
+
portal = _d === void 0 ? false : _d,
|
|
8547
|
+
_e = _a.gap,
|
|
8548
|
+
gap = _e === void 0 ? '6px' : _e;
|
|
8549
|
+
var _f = useState(false),
|
|
8550
|
+
open = _f[0],
|
|
8551
|
+
setOpen = _f[1];
|
|
8465
8552
|
var wrapperRef = useRef(null);
|
|
8466
8553
|
var tooltipRef = useRef(null);
|
|
8467
8554
|
var show = open && !hidden;
|
|
@@ -8471,30 +8558,10 @@ function Tooltip(_a) {
|
|
|
8471
8558
|
* instance를 useMemo로 선언하면 레퍼런스의 DOM을 찾지 못 하고,
|
|
8472
8559
|
* useCallback으로 선언하면 함수라서 호출 될 때 마다 새로운 객체가 생성되어 .update가 동작하지 않음
|
|
8473
8560
|
*/
|
|
8474
|
-
var
|
|
8475
|
-
placement: direction
|
|
8476
|
-
modifiers: [{
|
|
8477
|
-
name: 'flip',
|
|
8478
|
-
options: {
|
|
8479
|
-
padding: 10
|
|
8480
|
-
}
|
|
8481
|
-
}, {
|
|
8482
|
-
name: 'offset',
|
|
8483
|
-
options: {
|
|
8484
|
-
offset: [0, 2]
|
|
8485
|
-
}
|
|
8486
|
-
}]
|
|
8561
|
+
var instance = createPopper(wrapperRef.current, tooltipRef.current, {
|
|
8562
|
+
placement: direction
|
|
8487
8563
|
});
|
|
8488
|
-
|
|
8489
|
-
return instance_1.setOptions(function (options) {
|
|
8490
|
-
var modifiers = __spreadArray([], options.modifiers, true);
|
|
8491
|
-
return __assign(__assign({}, options), {
|
|
8492
|
-
modifiers: modifiers
|
|
8493
|
-
});
|
|
8494
|
-
});
|
|
8495
|
-
};
|
|
8496
|
-
instanceSetOptions();
|
|
8497
|
-
instance_1.update();
|
|
8564
|
+
instance.update();
|
|
8498
8565
|
}
|
|
8499
8566
|
}, [show]);
|
|
8500
8567
|
var Tootip = useMemo(function () {
|
|
@@ -8509,6 +8576,8 @@ function Tooltip(_a) {
|
|
|
8509
8576
|
}, [show]);
|
|
8510
8577
|
return jsxs("div", __assign({
|
|
8511
8578
|
className: classNames('maru-tooltip-wrapper', className),
|
|
8579
|
+
"data-dir": direction.split('-')[0],
|
|
8580
|
+
"data-gap": gap,
|
|
8512
8581
|
ref: wrapperRef,
|
|
8513
8582
|
onMouseOver: function onMouseOver() {
|
|
8514
8583
|
return setOpen(true);
|
|
@@ -25245,6 +25314,190 @@ var searchData = function searchData(data, displayKey, query) {
|
|
|
25245
25314
|
}, []);
|
|
25246
25315
|
};
|
|
25247
25316
|
|
|
25317
|
+
function DropdownMenu$1(_a) {
|
|
25318
|
+
var data = _a.data,
|
|
25319
|
+
selectedId = _a.selectedId,
|
|
25320
|
+
onSelect = _a.onSelect,
|
|
25321
|
+
idKey = _a.idKey,
|
|
25322
|
+
displayKey = _a.displayKey,
|
|
25323
|
+
color = _a.color,
|
|
25324
|
+
searchPlaceholder = _a.searchPlaceholder,
|
|
25325
|
+
noDataMessage = _a.noDataMessage,
|
|
25326
|
+
noResultMessage = _a.noResultMessage,
|
|
25327
|
+
width = _a.width,
|
|
25328
|
+
height = _a.height,
|
|
25329
|
+
CustomMenuItem = _a.customMenuItem,
|
|
25330
|
+
isSearch = _a.isSearch,
|
|
25331
|
+
parent = _a.parent,
|
|
25332
|
+
open = _a.open,
|
|
25333
|
+
onClose = _a.onClose,
|
|
25334
|
+
menuBottomButton = _a.menuBottomButton;
|
|
25335
|
+
var menuWrapperRef = useRef(null);
|
|
25336
|
+
var menuRef = useRef(null);
|
|
25337
|
+
var _b = useState(data),
|
|
25338
|
+
filteredData = _b[0],
|
|
25339
|
+
setFilteredData = _b[1];
|
|
25340
|
+
var _c = useState(''),
|
|
25341
|
+
query = _c[0],
|
|
25342
|
+
setQuery = _c[1];
|
|
25343
|
+
var initFilteredData = function initFilteredData() {
|
|
25344
|
+
return setFilteredData(data);
|
|
25345
|
+
};
|
|
25346
|
+
/**
|
|
25347
|
+
* init filtered data
|
|
25348
|
+
*/
|
|
25349
|
+
useEffect(function () {
|
|
25350
|
+
if (open) {
|
|
25351
|
+
initFilteredData();
|
|
25352
|
+
}
|
|
25353
|
+
}, [open]);
|
|
25354
|
+
/**
|
|
25355
|
+
* 메뉴의 사이즈와 위치 설정
|
|
25356
|
+
*/
|
|
25357
|
+
useEffect(function () {
|
|
25358
|
+
var menu = menuRef.current;
|
|
25359
|
+
if (menu) {
|
|
25360
|
+
var _a = parent.getClientRects()[0],
|
|
25361
|
+
pw = _a.width,
|
|
25362
|
+
ph = _a.height,
|
|
25363
|
+
pt = _a.top,
|
|
25364
|
+
pl = _a.left;
|
|
25365
|
+
var newWidth = width || pw;
|
|
25366
|
+
menu.style.width = "".concat(newWidth, "px");
|
|
25367
|
+
menu.style.left = "".concat(pl, "px");
|
|
25368
|
+
// FIXME: 무슨 조건인지 잘 모르겠음
|
|
25369
|
+
if (ph + pt + menu.offsetHeight + 10 > document.body.offsetHeight) {
|
|
25370
|
+
menu.style.top = "".concat(pt - menu.offsetHeight - 4, "px");
|
|
25371
|
+
} else {
|
|
25372
|
+
menu.style.top = "".concat(pt + ph, "px");
|
|
25373
|
+
}
|
|
25374
|
+
if (menuWrapperRef === null || menuWrapperRef === void 0 ? void 0 : menuWrapperRef.current) {
|
|
25375
|
+
menuWrapperRef.current.style.display = 'block';
|
|
25376
|
+
}
|
|
25377
|
+
}
|
|
25378
|
+
}, [width]);
|
|
25379
|
+
var handleWrapperClick = function handleWrapperClick(e) {
|
|
25380
|
+
e.stopPropagation();
|
|
25381
|
+
onClose();
|
|
25382
|
+
};
|
|
25383
|
+
var handleMenuClick = function handleMenuClick(e) {
|
|
25384
|
+
e.stopPropagation();
|
|
25385
|
+
};
|
|
25386
|
+
var handleInputChange = function handleInputChange(e) {
|
|
25387
|
+
var value = e.currentTarget.value;
|
|
25388
|
+
setQuery(value);
|
|
25389
|
+
var trimmedValue = noSpace(value).toLowerCase();
|
|
25390
|
+
if (trimmedValue !== '') {
|
|
25391
|
+
setFilteredData(searchData(data, displayKey, trimmedValue));
|
|
25392
|
+
} else {
|
|
25393
|
+
initFilteredData();
|
|
25394
|
+
}
|
|
25395
|
+
};
|
|
25396
|
+
var handleInputClear = function handleInputClear() {
|
|
25397
|
+
setQuery('');
|
|
25398
|
+
initFilteredData();
|
|
25399
|
+
};
|
|
25400
|
+
var handleMenuItemClick = function handleMenuItemClick(id) {
|
|
25401
|
+
return function () {
|
|
25402
|
+
onSelect(id);
|
|
25403
|
+
onClose();
|
|
25404
|
+
};
|
|
25405
|
+
};
|
|
25406
|
+
var handleMenuBottomButtonClick = function handleMenuBottomButtonClick(e) {
|
|
25407
|
+
e.preventDefault();
|
|
25408
|
+
e.stopPropagation();
|
|
25409
|
+
menuBottomButton === null || menuBottomButton === void 0 ? void 0 : menuBottomButton.onClick();
|
|
25410
|
+
onClose();
|
|
25411
|
+
};
|
|
25412
|
+
return jsx("div", __assign({
|
|
25413
|
+
ref: menuWrapperRef,
|
|
25414
|
+
className: "maru-dropdown-menu-wrapper",
|
|
25415
|
+
"aria-hidden": true,
|
|
25416
|
+
onClick: handleWrapperClick
|
|
25417
|
+
}, {
|
|
25418
|
+
children: jsxs("div", __assign({
|
|
25419
|
+
ref: menuRef,
|
|
25420
|
+
className: classNames('maru-dropdown-menu', "maru-dropdown-menu-".concat(color), {
|
|
25421
|
+
'maru-dropdown-search-menu': isSearch
|
|
25422
|
+
// TODO:
|
|
25423
|
+
// footer: menuBottomButton,
|
|
25424
|
+
}),
|
|
25425
|
+
"aria-hidden": true,
|
|
25426
|
+
onClick: handleMenuClick
|
|
25427
|
+
}, {
|
|
25428
|
+
children: [jsx("div", __assign({
|
|
25429
|
+
className: "maru-dropdown-menu-item-wrapper",
|
|
25430
|
+
style: {
|
|
25431
|
+
maxHeight: height ? "".concat(height, "px") : 'auto'
|
|
25432
|
+
}
|
|
25433
|
+
}, {
|
|
25434
|
+
children: data.length < 1 ? jsxs("div", __assign({
|
|
25435
|
+
className: "maru-dropdown-menu-item maru-dropdown-menu-item-empty"
|
|
25436
|
+
}, {
|
|
25437
|
+
children: [jsx(Icon, {
|
|
25438
|
+
name: ICONS.Information_s1410,
|
|
25439
|
+
color: "#8c8c8c"
|
|
25440
|
+
}), jsx("span", {
|
|
25441
|
+
children: noDataMessage
|
|
25442
|
+
})]
|
|
25443
|
+
})) : jsxs(Fragment, {
|
|
25444
|
+
children: [isSearch && jsx("div", __assign({
|
|
25445
|
+
className: "maru-dropdown-menu-item-menu-header"
|
|
25446
|
+
}, {
|
|
25447
|
+
children: jsx(Input, {
|
|
25448
|
+
value: query,
|
|
25449
|
+
onChange: handleInputChange,
|
|
25450
|
+
startNode: jsx(Icon, {
|
|
25451
|
+
name: ICONS.SearchMd_s1615,
|
|
25452
|
+
color: "#bdbdbd"
|
|
25453
|
+
}),
|
|
25454
|
+
className: "maru-dropdown-menu-item-search-input",
|
|
25455
|
+
onClear: handleInputClear,
|
|
25456
|
+
placeholder: searchPlaceholder
|
|
25457
|
+
})
|
|
25458
|
+
})), filteredData.length < 1 ? jsxs("div", __assign({
|
|
25459
|
+
className: "maru-dropdown-menu-item maru-dropdown-menu-item-empty"
|
|
25460
|
+
}, {
|
|
25461
|
+
children: [jsx(Icon, {
|
|
25462
|
+
name: ICONS.Information_s1410,
|
|
25463
|
+
color: "#8c8c8c"
|
|
25464
|
+
}), jsx("span", {
|
|
25465
|
+
children: noResultMessage
|
|
25466
|
+
})]
|
|
25467
|
+
})) : filteredData.map(function (item) {
|
|
25468
|
+
return jsx("button", __assign({
|
|
25469
|
+
type: "button",
|
|
25470
|
+
className: classNames('maru-dropdown-menu-item', {
|
|
25471
|
+
selected: item[idKey] === selectedId
|
|
25472
|
+
}),
|
|
25473
|
+
value: item[idKey],
|
|
25474
|
+
onClick: handleMenuItemClick(item[idKey])
|
|
25475
|
+
}, {
|
|
25476
|
+
children: CustomMenuItem ? jsx(CustomMenuItem, __assign({
|
|
25477
|
+
rowId: item[idKey]
|
|
25478
|
+
}, {
|
|
25479
|
+
children: jsx("span", {
|
|
25480
|
+
children: item[displayKey]
|
|
25481
|
+
})
|
|
25482
|
+
})) : jsx("span", {
|
|
25483
|
+
children: item[displayKey]
|
|
25484
|
+
})
|
|
25485
|
+
}), item[idKey]);
|
|
25486
|
+
})]
|
|
25487
|
+
})
|
|
25488
|
+
})), menuBottomButton && jsx(Button, __assign({
|
|
25489
|
+
startIcon: menuBottomButton.startIcon,
|
|
25490
|
+
onClick: handleMenuBottomButtonClick,
|
|
25491
|
+
variant: "outline",
|
|
25492
|
+
className: "maru-dropdown-menu-bottom-button",
|
|
25493
|
+
color: color
|
|
25494
|
+
}, {
|
|
25495
|
+
children: menuBottomButton.content
|
|
25496
|
+
}))]
|
|
25497
|
+
}))
|
|
25498
|
+
}));
|
|
25499
|
+
}
|
|
25500
|
+
|
|
25248
25501
|
function Arrow$1(_a) {
|
|
25249
25502
|
var open = _a.open,
|
|
25250
25503
|
focus = _a.focus,
|
|
@@ -25260,56 +25513,43 @@ function Arrow$1(_a) {
|
|
|
25260
25513
|
}));
|
|
25261
25514
|
}
|
|
25262
25515
|
|
|
25263
|
-
function Clear(_a) {
|
|
25264
|
-
var
|
|
25265
|
-
|
|
25266
|
-
onClear = _a.onClear,
|
|
25267
|
-
initFilteredData = _a.initFilteredData,
|
|
25268
|
-
focus = _a.focus,
|
|
25269
|
-
color = _a.color;
|
|
25516
|
+
function Clear$1(_a) {
|
|
25517
|
+
var focus = _a.focus,
|
|
25518
|
+
onClear = _a.onClear;
|
|
25270
25519
|
var handleClick = function handleClick(e) {
|
|
25271
25520
|
e.preventDefault();
|
|
25272
25521
|
e.stopPropagation();
|
|
25273
|
-
clearSelected();
|
|
25274
|
-
initInputValue();
|
|
25275
25522
|
onClear();
|
|
25276
|
-
initFilteredData();
|
|
25277
25523
|
};
|
|
25278
|
-
return (
|
|
25279
|
-
|
|
25280
|
-
|
|
25281
|
-
|
|
25282
|
-
|
|
25283
|
-
|
|
25284
|
-
|
|
25285
|
-
|
|
25286
|
-
|
|
25287
|
-
|
|
25288
|
-
})
|
|
25289
|
-
}))
|
|
25290
|
-
);
|
|
25524
|
+
return jsx("button", __assign({
|
|
25525
|
+
type: "button",
|
|
25526
|
+
className: "maru-dropdown-toggle-clear",
|
|
25527
|
+
onClick: handleClick
|
|
25528
|
+
}, {
|
|
25529
|
+
children: jsx(Icon, {
|
|
25530
|
+
name: ICONS.X_s1615,
|
|
25531
|
+
color: focus ? '#5c5c5c' : '#bdbdbd'
|
|
25532
|
+
})
|
|
25533
|
+
}));
|
|
25291
25534
|
}
|
|
25292
25535
|
|
|
25293
25536
|
function DropdownToggleButton$1(_a) {
|
|
25294
|
-
var
|
|
25295
|
-
selected = _a.selected,
|
|
25296
|
-
displayKey = _a.displayKey,
|
|
25297
|
-
color = _a.color,
|
|
25298
|
-
width = _a.width,
|
|
25299
|
-
disabled = _a.disabled,
|
|
25537
|
+
var displayKey = _a.displayKey,
|
|
25300
25538
|
placeholder = _a.placeholder,
|
|
25301
|
-
|
|
25539
|
+
disabled = _a.disabled,
|
|
25540
|
+
color = _a.color,
|
|
25541
|
+
stopPropagation = _a.stopPropagation,
|
|
25302
25542
|
inlineLabel = _a.inlineLabel,
|
|
25543
|
+
width = _a.width,
|
|
25544
|
+
customButton = _a.customButton,
|
|
25303
25545
|
startArrow = _a.startArrow,
|
|
25304
25546
|
toggleEndNode = _a.toggleEndNode,
|
|
25305
|
-
|
|
25306
|
-
|
|
25307
|
-
|
|
25308
|
-
|
|
25309
|
-
clearSelected = _a.clearSelected,
|
|
25547
|
+
open = _a.open,
|
|
25548
|
+
selected = _a.selected,
|
|
25549
|
+
errored = _a.errored,
|
|
25550
|
+
hasClearBtn = _a.hasClearBtn,
|
|
25310
25551
|
onClear = _a.onClear,
|
|
25311
|
-
|
|
25312
|
-
stopPropagation = _a.stopPropagation;
|
|
25552
|
+
onClick = _a.onClick;
|
|
25313
25553
|
var _b = useState(false),
|
|
25314
25554
|
focus = _b[0],
|
|
25315
25555
|
setFocus = _b[1];
|
|
@@ -25318,8 +25558,7 @@ function DropdownToggleButton$1(_a) {
|
|
|
25318
25558
|
e.stopPropagation();
|
|
25319
25559
|
}
|
|
25320
25560
|
if (disabled) return;
|
|
25321
|
-
|
|
25322
|
-
toggleMenuOpen();
|
|
25561
|
+
onClick();
|
|
25323
25562
|
};
|
|
25324
25563
|
return jsxs("div", __assign({
|
|
25325
25564
|
className: classNames('maru-dropdown-toggle-wrapper', "maru-dropdown-toggle-wrapper-".concat(color), {
|
|
@@ -25352,247 +25591,39 @@ function DropdownToggleButton$1(_a) {
|
|
|
25352
25591
|
type: "button",
|
|
25353
25592
|
className: "maru-dropdown-button",
|
|
25354
25593
|
disabled: disabled,
|
|
25355
|
-
onClick: handleClick
|
|
25356
|
-
onKeyDown: onKeyDown
|
|
25594
|
+
onClick: handleClick
|
|
25357
25595
|
}, {
|
|
25358
|
-
children: [
|
|
25359
|
-
|
|
25360
|
-
|
|
25361
|
-
|
|
25362
|
-
|
|
25363
|
-
|
|
25364
|
-
|
|
25365
|
-
|
|
25366
|
-
|
|
25367
|
-
|
|
25368
|
-
|
|
25369
|
-
|
|
25370
|
-
|
|
25371
|
-
}),
|
|
25372
|
-
|
|
25373
|
-
|
|
25374
|
-
|
|
25375
|
-
|
|
25376
|
-
|
|
25377
|
-
|
|
25378
|
-
|
|
25379
|
-
|
|
25380
|
-
|
|
25381
|
-
|
|
25382
|
-
|
|
25383
|
-
})]
|
|
25384
|
-
}))]
|
|
25385
|
-
}));
|
|
25386
|
-
}
|
|
25387
|
-
|
|
25388
|
-
function DropdownToggleInput(_a) {
|
|
25389
|
-
var open = _a.open,
|
|
25390
|
-
value = _a.value,
|
|
25391
|
-
selected = _a.selected,
|
|
25392
|
-
color = _a.color,
|
|
25393
|
-
width = _a.width,
|
|
25394
|
-
disabled = _a.disabled,
|
|
25395
|
-
placeholder = _a.placeholder,
|
|
25396
|
-
errored = _a.errored,
|
|
25397
|
-
inlineLabel = _a.inlineLabel,
|
|
25398
|
-
startArrow = _a.startArrow,
|
|
25399
|
-
toggleEndNode = _a.toggleEndNode,
|
|
25400
|
-
onChange = _a.onChange,
|
|
25401
|
-
initFilteredData = _a.initFilteredData,
|
|
25402
|
-
toggleMenuOpen = _a.toggleMenuOpen,
|
|
25403
|
-
initInputValue = _a.initInputValue,
|
|
25404
|
-
clearSelected = _a.clearSelected,
|
|
25405
|
-
onClear = _a.onClear,
|
|
25406
|
-
onKeyDown = _a.onKeyDown;
|
|
25407
|
-
var _b = useState(false),
|
|
25408
|
-
focus = _b[0],
|
|
25409
|
-
setFocus = _b[1];
|
|
25410
|
-
var handleClick = function handleClick() {
|
|
25411
|
-
if (disabled) return;
|
|
25412
|
-
initFilteredData();
|
|
25413
|
-
toggleMenuOpen();
|
|
25414
|
-
};
|
|
25415
|
-
return jsxs("div", __assign({
|
|
25416
|
-
className: classNames('maru-dropdown-toggle-wrapper', "maru-dropdown-toggle-wrapper-".concat(color), {
|
|
25417
|
-
closed: !open,
|
|
25418
|
-
errored: errored,
|
|
25419
|
-
'inline-label-wrapper': inlineLabel,
|
|
25420
|
-
disabled: disabled
|
|
25421
|
-
}),
|
|
25422
|
-
onClick: handleClick,
|
|
25423
|
-
tabIndex: -1,
|
|
25424
|
-
"aria-hidden": true,
|
|
25425
|
-
"data-disabled": disabled,
|
|
25426
|
-
style: {
|
|
25427
|
-
width: width || '100%'
|
|
25428
|
-
},
|
|
25429
|
-
onKeyDown: onKeyDown,
|
|
25430
|
-
onMouseOver: function onMouseOver() {
|
|
25431
|
-
return setFocus(true);
|
|
25432
|
-
},
|
|
25433
|
-
onMouseLeave: function onMouseLeave() {
|
|
25434
|
-
return setFocus(open);
|
|
25435
|
-
},
|
|
25436
|
-
onFocus: function onFocus() {
|
|
25437
|
-
return setFocus(true);
|
|
25438
|
-
},
|
|
25439
|
-
onBlur: function onBlur() {
|
|
25440
|
-
return setFocus(false);
|
|
25441
|
-
}
|
|
25442
|
-
}, {
|
|
25443
|
-
children: [inlineLabel && jsx("span", __assign({
|
|
25444
|
-
className: "inline-label"
|
|
25445
|
-
}, {
|
|
25446
|
-
children: inlineLabel
|
|
25447
|
-
})), jsxs("div", __assign({
|
|
25448
|
-
className: "maru-dropdown-input"
|
|
25449
|
-
}, {
|
|
25450
|
-
children: [startArrow && jsx(Arrow$1, {
|
|
25451
|
-
open: open,
|
|
25452
|
-
focus: focus,
|
|
25453
|
-
color: color,
|
|
25454
|
-
disabled: disabled
|
|
25455
|
-
}), jsx("input", {
|
|
25456
|
-
"aria-autocomplete": "none",
|
|
25457
|
-
value: value,
|
|
25458
|
-
onChange: onChange,
|
|
25459
|
-
disabled: disabled,
|
|
25460
|
-
placeholder: placeholder
|
|
25461
|
-
}), toggleEndNode && jsx("div", {
|
|
25462
|
-
children: toggleEndNode
|
|
25463
|
-
}), !disabled && selected && onClear && jsx(Clear, {
|
|
25464
|
-
clearSelected: clearSelected,
|
|
25465
|
-
initInputValue: initInputValue,
|
|
25466
|
-
onClear: onClear,
|
|
25467
|
-
initFilteredData: initFilteredData,
|
|
25468
|
-
focus: focus,
|
|
25469
|
-
color: color
|
|
25470
|
-
}), !startArrow && jsx(Arrow$1, {
|
|
25471
|
-
open: open,
|
|
25472
|
-
focus: focus,
|
|
25473
|
-
color: color,
|
|
25474
|
-
disabled: disabled
|
|
25596
|
+
children: [jsxs("div", {
|
|
25597
|
+
children: [startArrow && jsx(Arrow$1, {
|
|
25598
|
+
open: open,
|
|
25599
|
+
focus: focus,
|
|
25600
|
+
color: color,
|
|
25601
|
+
disabled: disabled
|
|
25602
|
+
}), jsx("span", __assign({
|
|
25603
|
+
className: classNames('maru-dropdown-button-contents', {
|
|
25604
|
+
placeholder: !customButton && !selected && placeholder
|
|
25605
|
+
})
|
|
25606
|
+
}, {
|
|
25607
|
+
children: customButton || (selected ? selected[displayKey] : placeholder)
|
|
25608
|
+
}))]
|
|
25609
|
+
}), jsxs("div", {
|
|
25610
|
+
children: [toggleEndNode && jsx("div", {
|
|
25611
|
+
children: toggleEndNode
|
|
25612
|
+
}), !disabled && selected && hasClearBtn && jsx(Clear$1, {
|
|
25613
|
+
focus: focus,
|
|
25614
|
+
onClear: onClear
|
|
25615
|
+
}), !startArrow && jsx(Arrow$1, {
|
|
25616
|
+
open: open,
|
|
25617
|
+
focus: focus,
|
|
25618
|
+
color: color,
|
|
25619
|
+
disabled: disabled
|
|
25620
|
+
})]
|
|
25475
25621
|
})]
|
|
25476
25622
|
}))]
|
|
25477
25623
|
}));
|
|
25478
25624
|
}
|
|
25479
25625
|
|
|
25480
|
-
function DropdownMenu$1(_a) {
|
|
25481
|
-
var parent = _a.parent,
|
|
25482
|
-
menuItemEls = _a.menuItemEls,
|
|
25483
|
-
selectedId = _a.selectedId,
|
|
25484
|
-
idKey = _a.idKey,
|
|
25485
|
-
displayKey = _a.displayKey,
|
|
25486
|
-
filteredData = _a.filteredData,
|
|
25487
|
-
width = _a.width,
|
|
25488
|
-
height = _a.height,
|
|
25489
|
-
CustomMenuItem = _a.customMenuItem,
|
|
25490
|
-
onSelect = _a.onSelect,
|
|
25491
|
-
closeMenu = _a.closeMenu;
|
|
25492
|
-
var menuWrapperRef = useRef(null);
|
|
25493
|
-
var menuRef = useRef(null);
|
|
25494
|
-
// 메뉴의 사이즈와 위치 설정
|
|
25495
|
-
useEffect(function () {
|
|
25496
|
-
var menu = menuRef.current;
|
|
25497
|
-
if (menu) {
|
|
25498
|
-
var _a = parent.getClientRects()[0],
|
|
25499
|
-
pw = _a.width,
|
|
25500
|
-
ph = _a.height,
|
|
25501
|
-
pt = _a.top,
|
|
25502
|
-
pl = _a.left;
|
|
25503
|
-
var newWidth = width || pw;
|
|
25504
|
-
menu.style.width = "".concat(newWidth, "px");
|
|
25505
|
-
// if (!horizonMenu) {
|
|
25506
|
-
menu.style.left = "".concat(pl, "px");
|
|
25507
|
-
// } else {
|
|
25508
|
-
// TODO: horizon menu test
|
|
25509
|
-
// menu.style.left = `${pl + pw - newWidth}px`;
|
|
25510
|
-
// }
|
|
25511
|
-
// FIXME: 무슨 조건인지 잘 모르겠음
|
|
25512
|
-
if (ph + pt + menu.offsetHeight + 10 > document.body.offsetHeight) {
|
|
25513
|
-
menu.style.top = "".concat(pt - menu.offsetHeight - 4, "px");
|
|
25514
|
-
} else {
|
|
25515
|
-
menu.style.top = "".concat(pt + ph, "px");
|
|
25516
|
-
}
|
|
25517
|
-
if (menuWrapperRef === null || menuWrapperRef === void 0 ? void 0 : menuWrapperRef.current) {
|
|
25518
|
-
menuWrapperRef.current.style.display = 'block';
|
|
25519
|
-
}
|
|
25520
|
-
}
|
|
25521
|
-
}, [width]);
|
|
25522
|
-
// }, [horizonMenu]);
|
|
25523
|
-
var handleWrapperClick = function handleWrapperClick(e) {
|
|
25524
|
-
e.stopPropagation();
|
|
25525
|
-
closeMenu();
|
|
25526
|
-
};
|
|
25527
|
-
var handleMenuItemClick = function handleMenuItemClick(id) {
|
|
25528
|
-
return function () {
|
|
25529
|
-
onSelect(id);
|
|
25530
|
-
closeMenu();
|
|
25531
|
-
};
|
|
25532
|
-
};
|
|
25533
|
-
// TODO:
|
|
25534
|
-
// const handleMenuBottomButtonClick = (
|
|
25535
|
-
// e: React.MouseEvent<HTMLButtonElement>,
|
|
25536
|
-
// ) => {
|
|
25537
|
-
// e.preventDefault();
|
|
25538
|
-
// e.stopPropagation();
|
|
25539
|
-
// menuBottomButton?.onClick?.();
|
|
25540
|
-
// closeMenu();
|
|
25541
|
-
// };
|
|
25542
|
-
return jsx("div", __assign({
|
|
25543
|
-
ref: menuWrapperRef,
|
|
25544
|
-
className: "maru-dropdown-menu-wrapper",
|
|
25545
|
-
"aria-hidden": true,
|
|
25546
|
-
onClick: handleWrapperClick
|
|
25547
|
-
}, {
|
|
25548
|
-
children: jsx("div", __assign({
|
|
25549
|
-
ref: menuRef,
|
|
25550
|
-
className: classNames('maru-dropdown-menu', {
|
|
25551
|
-
// TODO:
|
|
25552
|
-
// footer: menuBottomButton,
|
|
25553
|
-
})
|
|
25554
|
-
}, {
|
|
25555
|
-
children: jsx("div", __assign({
|
|
25556
|
-
className: classNames('maru-dropdown-menu-item-wrapper', {
|
|
25557
|
-
// TODO:
|
|
25558
|
-
// horizon: horizonMenu,
|
|
25559
|
-
}),
|
|
25560
|
-
style: {
|
|
25561
|
-
maxHeight: height ? "".concat(height, "px") : 'auto'
|
|
25562
|
-
}
|
|
25563
|
-
}, {
|
|
25564
|
-
children: filteredData === null || filteredData === void 0 ? void 0 : filteredData.map(function (item) {
|
|
25565
|
-
return jsx("button", __assign({
|
|
25566
|
-
type: "button",
|
|
25567
|
-
className: classNames('maru-dropdown-menu-item', {
|
|
25568
|
-
'maru-dropdown-menu-item-selected': item[idKey] === selectedId
|
|
25569
|
-
}),
|
|
25570
|
-
value: item[idKey],
|
|
25571
|
-
onClick: handleMenuItemClick(item[idKey]),
|
|
25572
|
-
ref: function ref(el) {
|
|
25573
|
-
if (el) {
|
|
25574
|
-
menuItemEls.push(el);
|
|
25575
|
-
}
|
|
25576
|
-
},
|
|
25577
|
-
tabIndex: -1
|
|
25578
|
-
}, {
|
|
25579
|
-
children: CustomMenuItem ? jsx(CustomMenuItem, __assign({
|
|
25580
|
-
rowId: item[idKey]
|
|
25581
|
-
}, {
|
|
25582
|
-
children: jsx("span", {
|
|
25583
|
-
children: item[displayKey]
|
|
25584
|
-
})
|
|
25585
|
-
})) : jsx("span", {
|
|
25586
|
-
children: item[displayKey]
|
|
25587
|
-
})
|
|
25588
|
-
}), "maru-dropdown-menu-item-".concat(item[idKey]));
|
|
25589
|
-
})
|
|
25590
|
-
}))
|
|
25591
|
-
}))
|
|
25592
|
-
}));
|
|
25593
|
-
}
|
|
25594
|
-
|
|
25595
|
-
var css_248z$6 = ".maru-dropdown .maru-dropdown-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 display: block;\n margin-bottom: 4px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper {\n width: 100%;\n border-radius: 6px;\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n cursor: pointer;\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 background-color: white;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover {\n border: unset;\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input {\n color: var(--p);\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button {\n color: var(--p);\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px var(--p) inset;\n outline: none;\n background-color: var(--p-10);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px var(--p) inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-input > input {\n color: var(--p);\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button {\n color: var(--p);\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-input {\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-input > input {\n color: #bdbdbd;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover {\n border: unset;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input {\n color: #8c8c8c;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button {\n color: #8c8c8c;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #8c8c8c inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-input > input {\n color: #8c8c8c;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button {\n color: #8c8c8c;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-input {\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-input > input {\n color: #bdbdbd;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover {\n border: unset;\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input {\n color: #58c5a6;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button {\n color: #58c5a6;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #58c5a6 inset;\n outline: none;\n background-color: #eef9f6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #58c5a6 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-input > input {\n color: #58c5a6;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button {\n color: #58c5a6;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-input {\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-input > input {\n color: #bdbdbd;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover {\n border: unset;\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input {\n color: #ffb020;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button {\n color: #ffb020;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #ffb020 inset;\n outline: none;\n background-color: #fff7e9;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #ffb020 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-input > input {\n color: #ffb020;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button {\n color: #ffb020;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-input {\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-input > input {\n color: #bdbdbd;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover {\n border: unset;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input {\n color: #e53e3e;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button {\n color: #e53e3e;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #e53e3e inset;\n outline: none;\n background-color: #fcecec;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #e53e3e inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-input > input {\n color: #e53e3e;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button {\n color: #e53e3e;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-input {\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-input > input {\n color: #bdbdbd;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover {\n border: unset;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input {\n color: #308acc;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button {\n color: #308acc;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #308acc inset;\n outline: none;\n background-color: #eaf3fa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #308acc inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-input > input {\n color: #308acc;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-input > input::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-input > input::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-input > input:-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-input > input::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-input > input::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button {\n color: #308acc;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-input {\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-input > input {\n color: #bdbdbd;\n font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button ::placeholder {\n font-weight: 300;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.inline-label-wrapper .maru-dropdown-button {\n padding: 2px 10px 2px 14px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .inline-label {\n display: block;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 10px;\n letter-spacing: -0.4px;\n font-weight: 500;\n color: #bdbdbd;\n padding: 2px 10px 0 14px;\n transform: translateY(3px);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: row;\n width: 100%;\n height: 37px;\n border: unset;\n border-radius: 6px;\n background-color: transparent;\n cursor: pointer;\n padding: 8px 10px 8px 14px;\n color: #5c5c5c;\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}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents.placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: row;\n width: 100%;\n height: 37px;\n border: unset;\n border-radius: 6px;\n background-color: transparent;\n cursor: pointer;\n padding: 8px 10px 8px 14px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input {\n width: 100%;\n height: 100%;\n border: unset;\n outline: unset;\n background-color: unset;\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 overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #5c5c5c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-moz-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-arrow {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.errored {\n border: unset;\n box-shadow: 0 0 0 2px #e53e3e inset;\n}\n.maru-dropdown .maru-dropdown-error-message {\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 color: #e53e3e;\n display: block;\n margin-top: 4px;\n}\n.maru-dropdown .maru-dropdown-toggle-clear {\n padding: unset;\n margin: unset;\n border: unset;\n background-color: unset;\n cursor: pointer;\n width: 16px;\n height: 16px;\n}\n.maru-dropdown .maru-dropdown-toggle-clear:last-of-type {\n margin-left: 10px;\n}\n\n.maru-dropdown-menu-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-dropdown-menu-wrapper .maru-dropdown-menu {\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}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper {\n overflow-y: auto;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n border-bottom-left-radius: 6px;\n border-bottom-right-radius: 6px;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: row;\n width: 100%;\n background-color: white;\n border: unset;\n cursor: pointer;\n height: 37px;\n padding: 8px 14px;\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-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-selected, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item:hover {\n background-color: #fafafa;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n text-align: start;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-span em {\n font-style: unset;\n background-color: var(--p-20-per);\n}";
|
|
25626
|
+
var css_248z$6 = ".maru-dropdown .maru-dropdown-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 display: block;\n margin-bottom: 4px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper {\n width: 100%;\n border-radius: 6px;\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n cursor: pointer;\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 background-color: white;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover {\n border: unset;\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button ::-webkit-input-placeholder {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button ::-moz-placeholder {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button :-ms-input-placeholder {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button ::-ms-input-placeholder {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button ::placeholder {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px var(--p) inset;\n outline: none;\n background-color: var(--p-10);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px var(--p) inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button ::-moz-placeholder {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button :-ms-input-placeholder {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button ::placeholder {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button ::-moz-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button ::placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover {\n border: unset;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button ::-webkit-input-placeholder {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button ::-moz-placeholder {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button :-ms-input-placeholder {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button ::-ms-input-placeholder {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button ::placeholder {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #8c8c8c inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button ::-moz-placeholder {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button :-ms-input-placeholder {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button ::placeholder {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button ::-moz-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button ::placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover {\n border: unset;\n box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button {\n color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::-webkit-input-placeholder {\n color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::-moz-placeholder {\n color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button :-ms-input-placeholder {\n color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::-ms-input-placeholder {\n color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::placeholder {\n color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #32a483 inset;\n outline: none;\n background-color: #eaf6f3;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #32a483 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button {\n color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button ::-moz-placeholder {\n color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button :-ms-input-placeholder {\n color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button ::placeholder {\n color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button ::-moz-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button ::placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover {\n border: unset;\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button ::-webkit-input-placeholder {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button ::-moz-placeholder {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button :-ms-input-placeholder {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button ::-ms-input-placeholder {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button ::placeholder {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #ffb020 inset;\n outline: none;\n background-color: #fff7e9;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #ffb020 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button ::-moz-placeholder {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button :-ms-input-placeholder {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button ::placeholder {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button ::-moz-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button ::placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover {\n border: unset;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button ::-webkit-input-placeholder {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button ::-moz-placeholder {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button :-ms-input-placeholder {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button ::-ms-input-placeholder {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button ::placeholder {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #e53e3e inset;\n outline: none;\n background-color: #fcecec;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #e53e3e inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button ::-moz-placeholder {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button :-ms-input-placeholder {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button ::placeholder {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button ::-moz-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button ::placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover {\n border: unset;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button ::-webkit-input-placeholder {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button ::-moz-placeholder {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button :-ms-input-placeholder {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button ::-ms-input-placeholder {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button ::placeholder {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #308acc inset;\n outline: none;\n background-color: #eaf3fa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #308acc inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button ::-moz-placeholder {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button :-ms-input-placeholder {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button ::placeholder {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button ::-moz-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button ::placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: row;\n width: 100%;\n height: 37px;\n border: unset;\n border-radius: 6px;\n background-color: transparent;\n cursor: pointer;\n padding: 8px 10px 8px 14px;\n color: #5c5c5c;\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}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button ::placeholder {\n font-weight: 300;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button > div {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents.placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.inline-label-wrapper .maru-dropdown-button {\n padding: 2px 10px 2px 14px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .inline-label {\n display: block;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 10px;\n letter-spacing: -0.4px;\n font-weight: 500;\n color: #bdbdbd;\n padding: 2px 10px 0 14px;\n transform: translateY(3px);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.errored {\n border: unset;\n box-shadow: 0 0 0 2px #e53e3e inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-clear {\n padding: unset;\n margin: unset;\n border: unset;\n background-color: unset;\n cursor: pointer;\n display: flex;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-clear:last-of-type {\n margin: 0 6px 0 8px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-arrow {\n display: flex;\n}\n.maru-dropdown .maru-dropdown-error-message {\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 color: #e53e3e;\n display: block;\n margin-top: 4px;\n}\n\n.maru-dropdown-menu-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-dropdown-menu-wrapper .maru-dropdown-menu {\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}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-primary {\n border: 1px solid var(--p);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-primary .maru-dropdown-menu-item-menu-header {\n border-bottom: 1px solid var(--p);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-secondary {\n border: 1px solid #8c8c8c;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-secondary .maru-dropdown-menu-item-menu-header {\n border-bottom: 1px solid #8c8c8c;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-positive {\n border: 1px solid #32a483;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-positive .maru-dropdown-menu-item-menu-header {\n border-bottom: 1px solid #32a483;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-warning {\n border: 1px solid #ffb020;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-warning .maru-dropdown-menu-item-menu-header {\n border-bottom: 1px solid #ffb020;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-danger {\n border: 1px solid #e53e3e;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-danger .maru-dropdown-menu-item-menu-header {\n border-bottom: 1px solid #e53e3e;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-success {\n border: 1px solid #308acc;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-success .maru-dropdown-menu-item-menu-header {\n border-bottom: 1px solid #308acc;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper {\n overflow-y: auto;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n border-bottom-left-radius: 6px;\n border-bottom-right-radius: 6px;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: row;\n width: 100%;\n background-color: white;\n border: unset;\n cursor: pointer;\n height: 37px;\n padding: 8px 14px;\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-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item.selected, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item:hover {\n background-color: #fafafa;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-empty {\n justify-content: flex-start;\n gap: 6px;\n color: #8c8c8c;\n font-weight: 300;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-menu-header .maru-dropdown-menu-item-search-input .maru-input {\n border-bottom-left-radius: unset;\n border-bottom-right-radius: unset;\n border: unset;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-menu-header .maru-dropdown-menu-item-search-input .maru-input:focus-visible, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-menu-header .maru-dropdown-menu-item-search-input .maru-input:focus-within, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-menu-header .maru-dropdown-menu-item-search-input .maru-input:hover {\n outline: unset;\n border: unset;\n background-color: transparent;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-bottom-button {\n width: 100%;\n border-top-left-radius: unset;\n border-top-right-radius: unset;\n box-shadow: unset;\n gap: 8px;\n border-top: 1px solid #e4e4e4;\n}";
|
|
25596
25627
|
styleInject(css_248z$6);
|
|
25597
25628
|
|
|
25598
25629
|
// eslint-disable-next-line import/prefer-default-export
|
|
@@ -25602,141 +25633,41 @@ function Dropdown(_a) {
|
|
|
25602
25633
|
onSelect = _a.onSelect,
|
|
25603
25634
|
idKey = _a.idKey,
|
|
25604
25635
|
displayKey = _a.displayKey,
|
|
25605
|
-
anchorEl = _a.anchorEl,
|
|
25606
25636
|
className = _a.className,
|
|
25637
|
+
placeholder = _a.placeholder,
|
|
25638
|
+
searchPlaceholder = _a.searchPlaceholder,
|
|
25639
|
+
disabled = _a.disabled,
|
|
25607
25640
|
_b = _a.color,
|
|
25608
25641
|
color = _b === void 0 ? 'primary' : _b,
|
|
25609
|
-
|
|
25610
|
-
|
|
25611
|
-
|
|
25642
|
+
stopPropagation = _a.stopPropagation,
|
|
25643
|
+
_c = _a.type,
|
|
25644
|
+
type = _c === void 0 ? 'button' : _c,
|
|
25612
25645
|
errorMessage = _a.errorMessage,
|
|
25613
25646
|
inlineLabel = _a.inlineLabel,
|
|
25614
25647
|
label = _a.label,
|
|
25615
25648
|
onClear = _a.onClear,
|
|
25616
|
-
|
|
25617
|
-
|
|
25618
|
-
toggleEndNode = _a.toggleEndNode,
|
|
25619
|
-
_c = _a.type,
|
|
25620
|
-
type = _c === void 0 ? 'button' : _c,
|
|
25649
|
+
noDataMessage = _a.noDataMessage,
|
|
25650
|
+
noResultMessage = _a.noResultMessage,
|
|
25621
25651
|
width = _a.width,
|
|
25622
25652
|
height = _a.height,
|
|
25623
|
-
|
|
25653
|
+
customButton = _a.customButton,
|
|
25654
|
+
customMenuItem = _a.customMenuItem,
|
|
25655
|
+
anchorEl = _a.anchorEl,
|
|
25656
|
+
startArrow = _a.startArrow,
|
|
25657
|
+
toggleEndNode = _a.toggleEndNode,
|
|
25658
|
+
menuBottomButton = _a.menuBottomButton;
|
|
25624
25659
|
var _d = useState(false),
|
|
25625
25660
|
open = _d[0],
|
|
25626
25661
|
setOpen = _d[1];
|
|
25627
|
-
var _e = useState(data),
|
|
25628
|
-
filteredData = _e[0],
|
|
25629
|
-
setFilteredData = _e[1];
|
|
25630
|
-
var _f = useState(''),
|
|
25631
|
-
inputValue = _f[0],
|
|
25632
|
-
setInputValue = _f[1];
|
|
25633
|
-
var _g = useState([]),
|
|
25634
|
-
menuItemEls = _g[0],
|
|
25635
|
-
setMenuItemEls = _g[1];
|
|
25636
25662
|
var wrapperRef = useRef(null);
|
|
25637
25663
|
var selected = useMemo(function () {
|
|
25638
25664
|
return data.find(function (d) {
|
|
25639
25665
|
return d[idKey] === selectedId;
|
|
25640
25666
|
});
|
|
25641
25667
|
}, [data, idKey, selectedId]);
|
|
25642
|
-
var
|
|
25643
|
-
|
|
25644
|
-
|
|
25645
|
-
var toggleMenuOpen = function toggleMenuOpen() {
|
|
25646
|
-
return setOpen(function (prev) {
|
|
25647
|
-
return !prev;
|
|
25648
|
-
});
|
|
25649
|
-
};
|
|
25650
|
-
var initInputValue = function initInputValue() {
|
|
25651
|
-
return setInputValue('');
|
|
25652
|
-
};
|
|
25653
|
-
var clearSelected = function clearSelected() {
|
|
25654
|
-
return onSelect(undefined);
|
|
25655
|
-
};
|
|
25656
|
-
var closeMenu = function closeMenu() {
|
|
25657
|
-
setOpen(false);
|
|
25658
|
-
initFilteredData();
|
|
25659
|
-
initInputValue();
|
|
25660
|
-
};
|
|
25661
|
-
useEffect(function () {
|
|
25662
|
-
if (type === 'input') {
|
|
25663
|
-
if (selected === null || selected === void 0 ? void 0 : selected[displayKey]) {
|
|
25664
|
-
setInputValue(selected[displayKey]);
|
|
25665
|
-
} else {
|
|
25666
|
-
// selected === undefined
|
|
25667
|
-
setInputValue('');
|
|
25668
|
-
}
|
|
25669
|
-
}
|
|
25670
|
-
}, [type, selected]);
|
|
25671
|
-
// type=input 일때, inputValue 변경 시(사용자가 타이핑) 메뉴 아이템 파싱하여 표시하기 위한 useEffect
|
|
25672
|
-
useEffect(function () {
|
|
25673
|
-
if (type === 'input') {
|
|
25674
|
-
var pretreatedQeury = noSpace(inputValue).toLowerCase();
|
|
25675
|
-
if (pretreatedQeury !== '') {
|
|
25676
|
-
setFilteredData(searchData(data, displayKey, pretreatedQeury));
|
|
25677
|
-
} else {
|
|
25678
|
-
initFilteredData();
|
|
25679
|
-
}
|
|
25680
|
-
}
|
|
25681
|
-
}, [type, inputValue]);
|
|
25682
|
-
var handleInputChange = function handleInputChange(e) {
|
|
25683
|
-
setInputValue(e.currentTarget.value);
|
|
25684
|
-
};
|
|
25685
|
-
var handleToggleKeyDown = function handleToggleKeyDown(e) {
|
|
25686
|
-
var _a;
|
|
25687
|
-
setMenuItemEls([]);
|
|
25688
|
-
if (e.key === 'Tab' || e.key === 'Escape') {
|
|
25689
|
-
setOpen(false);
|
|
25690
|
-
return;
|
|
25691
|
-
}
|
|
25692
|
-
var CN_SELECTED_MENU_ITEM = 'maru-dropdown-menu-item-selected';
|
|
25693
|
-
if (!!data.length && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
|
25694
|
-
var scrollMenu_1 = function scrollMenu_1(idx) {
|
|
25695
|
-
menuItemEls[idx].classList.add(CN_SELECTED_MENU_ITEM);
|
|
25696
|
-
menuItemEls[idx].scrollIntoView({
|
|
25697
|
-
behavior: 'smooth',
|
|
25698
|
-
block: 'center'
|
|
25699
|
-
});
|
|
25700
|
-
};
|
|
25701
|
-
if (open) {
|
|
25702
|
-
if (!menuItemEls.some(function (ref, idx) {
|
|
25703
|
-
if (ref.className.includes(CN_SELECTED_MENU_ITEM)) {
|
|
25704
|
-
ref.classList.remove(CN_SELECTED_MENU_ITEM);
|
|
25705
|
-
if (e.key === 'ArrowDown' && idx !== menuItemEls.length - 1) {
|
|
25706
|
-
scrollMenu_1(idx + 1);
|
|
25707
|
-
}
|
|
25708
|
-
if (e.key === 'ArrowUp' && idx > 0) {
|
|
25709
|
-
scrollMenu_1(idx - 1);
|
|
25710
|
-
}
|
|
25711
|
-
return true;
|
|
25712
|
-
}
|
|
25713
|
-
return false;
|
|
25714
|
-
})) {
|
|
25715
|
-
if (e.key === 'ArrowDown') {
|
|
25716
|
-
scrollMenu_1(0);
|
|
25717
|
-
} else {
|
|
25718
|
-
scrollMenu_1(menuItemEls.length - 1);
|
|
25719
|
-
}
|
|
25720
|
-
}
|
|
25721
|
-
} else {
|
|
25722
|
-
setOpen(true);
|
|
25723
|
-
}
|
|
25724
|
-
e.preventDefault();
|
|
25725
|
-
}
|
|
25726
|
-
if (e.key === 'Enter') {
|
|
25727
|
-
if (open) {
|
|
25728
|
-
var activeValue = (_a = menuItemEls.find(function (ref) {
|
|
25729
|
-
return ref.className.includes(CN_SELECTED_MENU_ITEM);
|
|
25730
|
-
})) === null || _a === void 0 ? void 0 : _a.value;
|
|
25731
|
-
if (activeValue !== undefined) {
|
|
25732
|
-
onSelect(activeValue);
|
|
25733
|
-
closeMenu();
|
|
25734
|
-
}
|
|
25735
|
-
} else {
|
|
25736
|
-
setOpen(true);
|
|
25737
|
-
}
|
|
25738
|
-
e.preventDefault();
|
|
25739
|
-
}
|
|
25668
|
+
var handleClear = function handleClear() {
|
|
25669
|
+
onClear === null || onClear === void 0 ? void 0 : onClear();
|
|
25670
|
+
onSelect(undefined);
|
|
25740
25671
|
};
|
|
25741
25672
|
return jsxs("div", __assign({
|
|
25742
25673
|
ref: wrapperRef,
|
|
@@ -25746,64 +25677,57 @@ function Dropdown(_a) {
|
|
|
25746
25677
|
className: "maru-dropdown-label"
|
|
25747
25678
|
}, {
|
|
25748
25679
|
children: label
|
|
25749
|
-
})),
|
|
25750
|
-
open: open,
|
|
25751
|
-
selected: selected,
|
|
25680
|
+
})), jsx(DropdownToggleButton$1, {
|
|
25752
25681
|
displayKey: displayKey,
|
|
25753
|
-
color: color,
|
|
25754
|
-
width: width,
|
|
25755
|
-
disabled: disabled,
|
|
25756
25682
|
placeholder: placeholder,
|
|
25757
|
-
|
|
25683
|
+
disabled: disabled,
|
|
25684
|
+
color: color,
|
|
25685
|
+
stopPropagation: stopPropagation,
|
|
25758
25686
|
inlineLabel: inlineLabel,
|
|
25687
|
+
width: width,
|
|
25688
|
+
customButton: customButton,
|
|
25759
25689
|
startArrow: startArrow,
|
|
25760
25690
|
toggleEndNode: toggleEndNode,
|
|
25761
|
-
|
|
25762
|
-
initFilteredData: initFilteredData,
|
|
25763
|
-
toggleMenuOpen: toggleMenuOpen,
|
|
25764
|
-
initInputValue: initInputValue,
|
|
25765
|
-
clearSelected: clearSelected,
|
|
25766
|
-
onClear: onClear,
|
|
25767
|
-
onKeyDown: handleToggleKeyDown,
|
|
25768
|
-
stopPropagation: stopPropagation
|
|
25769
|
-
}) : jsx(DropdownToggleInput, {
|
|
25691
|
+
//
|
|
25770
25692
|
open: open,
|
|
25771
|
-
value: inputValue,
|
|
25772
25693
|
selected: selected,
|
|
25773
|
-
color: color,
|
|
25774
|
-
width: width,
|
|
25775
|
-
disabled: disabled,
|
|
25776
|
-
placeholder: placeholder,
|
|
25777
25694
|
errored: errorMessage != null,
|
|
25778
|
-
|
|
25779
|
-
|
|
25780
|
-
|
|
25781
|
-
|
|
25782
|
-
|
|
25783
|
-
|
|
25784
|
-
initInputValue: initInputValue,
|
|
25785
|
-
clearSelected: clearSelected,
|
|
25786
|
-
onClear: onClear,
|
|
25787
|
-
onKeyDown: handleToggleKeyDown
|
|
25695
|
+
hasClearBtn: onClear != null,
|
|
25696
|
+
onClear: handleClear,
|
|
25697
|
+
//
|
|
25698
|
+
onClick: function onClick() {
|
|
25699
|
+
return setOpen(true);
|
|
25700
|
+
}
|
|
25788
25701
|
}), errorMessage && jsx("span", __assign({
|
|
25789
25702
|
className: "maru-dropdown-error-message"
|
|
25790
25703
|
}, {
|
|
25791
25704
|
children: errorMessage
|
|
25792
|
-
})), open &&
|
|
25705
|
+
})), open && jsx(CreatePortal, __assign({
|
|
25793
25706
|
parent: anchorEl || wrapperRef.current
|
|
25794
25707
|
}, {
|
|
25795
25708
|
children: jsx(DropdownMenu$1, {
|
|
25796
|
-
|
|
25797
|
-
menuItemEls: menuItemEls,
|
|
25709
|
+
data: data,
|
|
25798
25710
|
selectedId: selectedId,
|
|
25711
|
+
onSelect: onSelect,
|
|
25799
25712
|
idKey: idKey,
|
|
25800
25713
|
displayKey: displayKey,
|
|
25801
|
-
|
|
25714
|
+
searchPlaceholder: searchPlaceholder,
|
|
25715
|
+
color: color,
|
|
25716
|
+
//
|
|
25717
|
+
noDataMessage: noDataMessage,
|
|
25718
|
+
noResultMessage: noResultMessage,
|
|
25802
25719
|
width: width,
|
|
25803
25720
|
height: height,
|
|
25804
25721
|
customMenuItem: customMenuItem,
|
|
25805
|
-
|
|
25806
|
-
|
|
25722
|
+
//
|
|
25723
|
+
isSearch: type === 'search',
|
|
25724
|
+
parent: anchorEl || wrapperRef.current,
|
|
25725
|
+
open: open,
|
|
25726
|
+
onClose: function onClose() {
|
|
25727
|
+
return setOpen(false);
|
|
25728
|
+
},
|
|
25729
|
+
//
|
|
25730
|
+
menuBottomButton: menuBottomButton
|
|
25807
25731
|
})
|
|
25808
25732
|
}))]
|
|
25809
25733
|
}));
|
|
@@ -25928,19 +25852,22 @@ function Modal(_a) {
|
|
|
25928
25852
|
}
|
|
25929
25853
|
|
|
25930
25854
|
function DropdownMenu(_a) {
|
|
25931
|
-
var
|
|
25932
|
-
parent = _a.parent,
|
|
25855
|
+
var data = _a.data,
|
|
25933
25856
|
selectedIds = _a.selectedIds,
|
|
25857
|
+
onSelect = _a.onSelect,
|
|
25934
25858
|
idKey = _a.idKey,
|
|
25935
25859
|
displayKey = _a.displayKey,
|
|
25936
|
-
|
|
25937
|
-
|
|
25938
|
-
|
|
25860
|
+
searchPlaceholder = _a.searchPlaceholder,
|
|
25861
|
+
allCheckLabel = _a.allCheckLabel,
|
|
25862
|
+
color = _a.color,
|
|
25863
|
+
noDataMessage = _a.noDataMessage,
|
|
25939
25864
|
noResultMessage = _a.noResultMessage,
|
|
25940
25865
|
width = _a.width,
|
|
25941
25866
|
height = _a.height,
|
|
25942
|
-
|
|
25943
|
-
|
|
25867
|
+
isSearch = _a.isSearch,
|
|
25868
|
+
parent = _a.parent,
|
|
25869
|
+
open = _a.open,
|
|
25870
|
+
onClose = _a.onClose;
|
|
25944
25871
|
var menuWrapperRef = useRef(null);
|
|
25945
25872
|
var menuRef = useRef(null);
|
|
25946
25873
|
var _b = useState(data),
|
|
@@ -25948,7 +25875,7 @@ function DropdownMenu(_a) {
|
|
|
25948
25875
|
setFilteredData = _b[1];
|
|
25949
25876
|
var _c = useState(false),
|
|
25950
25877
|
allChecked = _c[0],
|
|
25951
|
-
|
|
25878
|
+
setAllChecked = _c[1];
|
|
25952
25879
|
var _d = useState(''),
|
|
25953
25880
|
query = _d[0],
|
|
25954
25881
|
setQuery = _d[1];
|
|
@@ -25993,11 +25920,11 @@ function DropdownMenu(_a) {
|
|
|
25993
25920
|
*/
|
|
25994
25921
|
useEffect(function () {
|
|
25995
25922
|
if (!filteredData.length) {
|
|
25996
|
-
|
|
25923
|
+
setAllChecked(false);
|
|
25997
25924
|
} else {
|
|
25998
25925
|
// eslint-disable-next-line no-lonely-if
|
|
25999
25926
|
if (!selectedIds.length) {
|
|
26000
|
-
|
|
25927
|
+
setAllChecked(false);
|
|
26001
25928
|
} else {
|
|
26002
25929
|
var checkCount_1 = 0;
|
|
26003
25930
|
selectedIds.forEach(function (id) {
|
|
@@ -26007,13 +25934,13 @@ function DropdownMenu(_a) {
|
|
|
26007
25934
|
checkCount_1 += 1;
|
|
26008
25935
|
}
|
|
26009
25936
|
});
|
|
26010
|
-
|
|
25937
|
+
setAllChecked(checkCount_1 === filteredData.length);
|
|
26011
25938
|
}
|
|
26012
25939
|
}
|
|
26013
25940
|
}, [filteredData, selectedIds]);
|
|
26014
25941
|
var handleWrapperClick = function handleWrapperClick(e) {
|
|
26015
25942
|
e.stopPropagation();
|
|
26016
|
-
|
|
25943
|
+
onClose();
|
|
26017
25944
|
};
|
|
26018
25945
|
var handleMenuClick = function handleMenuClick(e) {
|
|
26019
25946
|
e.stopPropagation();
|
|
@@ -26023,7 +25950,7 @@ function DropdownMenu(_a) {
|
|
|
26023
25950
|
var dataIdArray = filteredData.map(function (el) {
|
|
26024
25951
|
return el[idKey];
|
|
26025
25952
|
});
|
|
26026
|
-
|
|
25953
|
+
setAllChecked(checked);
|
|
26027
25954
|
if (checked) {
|
|
26028
25955
|
var newCheckedArray = __spreadArray([], dataIdArray, true);
|
|
26029
25956
|
if (selectedIds.length) {
|
|
@@ -26071,6 +25998,10 @@ function DropdownMenu(_a) {
|
|
|
26071
25998
|
initFilteredData();
|
|
26072
25999
|
}
|
|
26073
26000
|
};
|
|
26001
|
+
var handleInputClear = function handleInputClear() {
|
|
26002
|
+
setQuery('');
|
|
26003
|
+
initFilteredData();
|
|
26004
|
+
};
|
|
26074
26005
|
return jsx("div", __assign({
|
|
26075
26006
|
ref: menuWrapperRef,
|
|
26076
26007
|
className: "maru-multi-select-dropdown-menu-wrapper",
|
|
@@ -26079,53 +26010,71 @@ function DropdownMenu(_a) {
|
|
|
26079
26010
|
}, {
|
|
26080
26011
|
children: jsx("div", __assign({
|
|
26081
26012
|
ref: menuRef,
|
|
26082
|
-
className: "maru-multi-select-dropdown-menu",
|
|
26013
|
+
className: classNames('maru-multi-select-dropdown-menu', "maru-multi-select-dropdown-menu-".concat(color)),
|
|
26083
26014
|
"aria-hidden": true,
|
|
26084
26015
|
onClick: handleMenuClick
|
|
26085
26016
|
}, {
|
|
26086
|
-
children:
|
|
26017
|
+
children: jsx("div", __assign({
|
|
26087
26018
|
className: "maru-multi-select-dropdown-menu-item-wrapper",
|
|
26088
26019
|
style: {
|
|
26089
26020
|
maxHeight: height ? "".concat(height, "px") : 'auto'
|
|
26090
26021
|
}
|
|
26091
26022
|
}, {
|
|
26092
|
-
children:
|
|
26093
|
-
className: "maru-multi-select-dropdown-menu-
|
|
26023
|
+
children: data.length < 1 ? jsxs("div", __assign({
|
|
26024
|
+
className: "maru-multi-select-dropdown-menu-item maru-multi-select-dropdown-menu-item-empty"
|
|
26094
26025
|
}, {
|
|
26095
|
-
children: [jsx(
|
|
26096
|
-
|
|
26097
|
-
|
|
26098
|
-
}),
|
|
26099
|
-
children:
|
|
26100
|
-
})
|
|
26101
|
-
|
|
26026
|
+
children: [jsx(Icon, {
|
|
26027
|
+
name: ICONS.Information_s1410,
|
|
26028
|
+
color: "#8c8c8c"
|
|
26029
|
+
}), jsx("span", {
|
|
26030
|
+
children: noDataMessage
|
|
26031
|
+
})]
|
|
26032
|
+
})) : jsxs(Fragment, {
|
|
26033
|
+
children: [jsxs("div", __assign({
|
|
26034
|
+
className: "maru-multi-select-dropdown-menu-item-menu-header"
|
|
26102
26035
|
}, {
|
|
26103
|
-
children: [jsx(
|
|
26104
|
-
|
|
26036
|
+
children: [jsx(Checkbox, {
|
|
26037
|
+
checked: allChecked,
|
|
26038
|
+
onChange: handleAllCheck,
|
|
26039
|
+
color: color
|
|
26040
|
+
}), isSearch ? jsx(Input, {
|
|
26105
26041
|
value: query,
|
|
26106
|
-
onChange: handleInputChange
|
|
26107
|
-
|
|
26108
|
-
|
|
26109
|
-
|
|
26110
|
-
|
|
26111
|
-
|
|
26112
|
-
|
|
26113
|
-
|
|
26042
|
+
onChange: handleInputChange,
|
|
26043
|
+
endNode: jsx(Icon, {
|
|
26044
|
+
name: ICONS.SearchMd_s1615,
|
|
26045
|
+
color: "#bdbdbd"
|
|
26046
|
+
}),
|
|
26047
|
+
className: "maru-multi-select-dropdown-menu-item-search-input",
|
|
26048
|
+
onClear: handleInputClear,
|
|
26049
|
+
placeholder: searchPlaceholder
|
|
26050
|
+
}) : jsx("span", __assign({
|
|
26051
|
+
className: "maru-multi-select-dropdown-menu-item-all-check-label"
|
|
26052
|
+
}, {
|
|
26053
|
+
children: allCheckLabel || ''
|
|
26054
|
+
}))]
|
|
26055
|
+
})), filteredData.length < 1 ? jsxs("div", __assign({
|
|
26056
|
+
className: "maru-multi-select-dropdown-menu-item maru-multi-select-dropdown-menu-item-empty"
|
|
26114
26057
|
}, {
|
|
26115
|
-
children: [jsx(
|
|
26116
|
-
|
|
26117
|
-
|
|
26058
|
+
children: [jsx(Icon, {
|
|
26059
|
+
name: ICONS.Information_s1410,
|
|
26060
|
+
color: "#8c8c8c"
|
|
26118
26061
|
}), jsx("span", {
|
|
26119
|
-
children:
|
|
26062
|
+
children: noResultMessage
|
|
26120
26063
|
})]
|
|
26121
|
-
})
|
|
26122
|
-
|
|
26123
|
-
|
|
26124
|
-
|
|
26125
|
-
|
|
26126
|
-
|
|
26127
|
-
|
|
26128
|
-
|
|
26064
|
+
})) : filteredData.map(function (item) {
|
|
26065
|
+
return jsxs("div", __assign({
|
|
26066
|
+
className: "maru-multi-select-dropdown-menu-item"
|
|
26067
|
+
}, {
|
|
26068
|
+
children: [jsx(Checkbox, {
|
|
26069
|
+
checked: selectedIds.includes(item[idKey]),
|
|
26070
|
+
onChange: handleCheck(item[idKey]),
|
|
26071
|
+
color: color
|
|
26072
|
+
}), jsx("span", {
|
|
26073
|
+
children: item[displayKey]
|
|
26074
|
+
})]
|
|
26075
|
+
}), item[idKey]);
|
|
26076
|
+
})]
|
|
26077
|
+
})
|
|
26129
26078
|
}))
|
|
26130
26079
|
}))
|
|
26131
26080
|
}));
|
|
@@ -26134,26 +26083,51 @@ function DropdownMenu(_a) {
|
|
|
26134
26083
|
function Arrow(_a) {
|
|
26135
26084
|
var open = _a.open,
|
|
26136
26085
|
focus = _a.focus,
|
|
26086
|
+
color = _a.color,
|
|
26137
26087
|
disabled = _a.disabled;
|
|
26138
26088
|
return jsx("span", __assign({
|
|
26139
26089
|
className: "maru-multi-select-dropdown-toggle-arrow"
|
|
26140
26090
|
}, {
|
|
26141
26091
|
children: jsx(Icon, {
|
|
26142
26092
|
name: open ? ICONS.ChevronUp_s1615 : ICONS.ChevronDown_s1615,
|
|
26143
|
-
color: disabled ? '#e4e4e4' : focus || open ?
|
|
26093
|
+
color: disabled ? '#e4e4e4' : focus || open ? color : '#bdbdbd'
|
|
26094
|
+
})
|
|
26095
|
+
}));
|
|
26096
|
+
}
|
|
26097
|
+
|
|
26098
|
+
function Clear(_a) {
|
|
26099
|
+
var focus = _a.focus,
|
|
26100
|
+
onClear = _a.onClear;
|
|
26101
|
+
var handleClick = function handleClick(e) {
|
|
26102
|
+
e.preventDefault();
|
|
26103
|
+
e.stopPropagation();
|
|
26104
|
+
onClear();
|
|
26105
|
+
};
|
|
26106
|
+
return jsx("button", __assign({
|
|
26107
|
+
type: "button",
|
|
26108
|
+
className: "maru-multi-select-dropdown-toggle-clear",
|
|
26109
|
+
onClick: handleClick
|
|
26110
|
+
}, {
|
|
26111
|
+
children: jsx(Icon, {
|
|
26112
|
+
name: ICONS.X_s1615,
|
|
26113
|
+
color: focus ? '#5c5c5c' : '#bdbdbd'
|
|
26144
26114
|
})
|
|
26145
26115
|
}));
|
|
26146
26116
|
}
|
|
26147
26117
|
|
|
26148
26118
|
function DropdownToggleButton(_a) {
|
|
26149
|
-
var
|
|
26150
|
-
openMenu = _a.openMenu,
|
|
26151
|
-
selected = _a.selected,
|
|
26152
|
-
content = _a.content,
|
|
26153
|
-
width = _a.width,
|
|
26154
|
-
disabled = _a.disabled,
|
|
26119
|
+
var content = _a.content,
|
|
26155
26120
|
placeholder = _a.placeholder,
|
|
26156
|
-
|
|
26121
|
+
disabled = _a.disabled,
|
|
26122
|
+
color = _a.color,
|
|
26123
|
+
stopPropagation = _a.stopPropagation,
|
|
26124
|
+
width = _a.width,
|
|
26125
|
+
open = _a.open,
|
|
26126
|
+
selected = _a.selected,
|
|
26127
|
+
errored = _a.errored,
|
|
26128
|
+
hasClearBtn = _a.hasClearBtn,
|
|
26129
|
+
onClear = _a.onClear,
|
|
26130
|
+
onClick = _a.onClick;
|
|
26157
26131
|
var _b = useState(false),
|
|
26158
26132
|
focus = _b[0],
|
|
26159
26133
|
setFocus = _b[1];
|
|
@@ -26162,11 +26136,12 @@ function DropdownToggleButton(_a) {
|
|
|
26162
26136
|
e.stopPropagation();
|
|
26163
26137
|
}
|
|
26164
26138
|
if (disabled) return;
|
|
26165
|
-
|
|
26139
|
+
onClick();
|
|
26166
26140
|
};
|
|
26167
26141
|
return jsx("div", __assign({
|
|
26168
|
-
className: classNames('maru-multi-select-dropdown-toggle-wrapper', {
|
|
26142
|
+
className: classNames('maru-multi-select-dropdown-toggle-wrapper', "maru-multi-select-dropdown-toggle-wrapper-".concat(color), {
|
|
26169
26143
|
closed: !open,
|
|
26144
|
+
errored: errored,
|
|
26170
26145
|
disabled: disabled
|
|
26171
26146
|
}),
|
|
26172
26147
|
style: {
|
|
@@ -26191,22 +26166,30 @@ function DropdownToggleButton(_a) {
|
|
|
26191
26166
|
disabled: disabled,
|
|
26192
26167
|
onClick: handleClick
|
|
26193
26168
|
}, {
|
|
26194
|
-
children: [jsx("
|
|
26195
|
-
|
|
26196
|
-
|
|
26197
|
-
|
|
26198
|
-
|
|
26199
|
-
|
|
26200
|
-
|
|
26201
|
-
|
|
26202
|
-
|
|
26203
|
-
|
|
26169
|
+
children: [jsx("div", {
|
|
26170
|
+
children: jsx("span", __assign({
|
|
26171
|
+
className: classNames('maru-multi-select-dropdown-button-contents', {
|
|
26172
|
+
placeholder: !selected && placeholder
|
|
26173
|
+
})
|
|
26174
|
+
}, {
|
|
26175
|
+
children: selected ? content : placeholder
|
|
26176
|
+
}))
|
|
26177
|
+
}), jsxs("div", {
|
|
26178
|
+
children: [!disabled && selected && hasClearBtn && jsx(Clear, {
|
|
26179
|
+
focus: focus,
|
|
26180
|
+
onClear: onClear
|
|
26181
|
+
}), jsx(Arrow, {
|
|
26182
|
+
open: open,
|
|
26183
|
+
focus: focus,
|
|
26184
|
+
color: color,
|
|
26185
|
+
disabled: disabled
|
|
26186
|
+
})]
|
|
26204
26187
|
})]
|
|
26205
26188
|
}))
|
|
26206
26189
|
}));
|
|
26207
26190
|
}
|
|
26208
26191
|
|
|
26209
|
-
var css_248z$4 = ".maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper {\n width: 100%;\n border-radius: 6px;\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n cursor: pointer;\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 background-color: white;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover {\n border: unset;\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button {\n font-weight: 400;\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button ::placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px var(--p) inset;\n outline: none;\n background-color: var(--p-10);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px var(--p) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button {\n font-weight: 400;\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button ::placeholder {\n font-weight: 300;\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.disabled .maru-multi-select-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: row;\n width: 100%;\n height: 37px;\n border: unset;\n border-radius: 6px;\n background-color: transparent;\n cursor: pointer;\n padding: 8px 10px 8px 14px;\n color: #5c5c5c;\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}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-contents {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-contents.placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-toggle-arrow {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n\n.maru-multi-select-dropdown-menu-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-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu {\n margin-top: 4px;\n position: absolute;\n z-index: 1601;\n border-radius: 6px;\n border: 1px solid var(--p);\n box-shadow: 0px 0px 4px #e4e4e4;\n background-color: white;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper {\n overflow-y: auto;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n border-bottom-left-radius: 6px;\n border-bottom-right-radius: 6px;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n gap: 8px;\n width: 100%;\n padding: 8px 14px;\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 border-bottom: 1px solid var(--p);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-header .input-wrapper {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: row;\n gap: 8px;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-header .input-wrapper > 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-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-header .input-wrapper > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-header .input-wrapper > input::-moz-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-header .input-wrapper > input:-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-header .input-wrapper > input::-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-header .input-wrapper > input::placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n gap: 8px;\n width: 100%;\n background-color: white;\n border: unset;\n height: 37px;\n padding: 8px 14px;\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-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item:hover {\n background-color: #fafafa;\n}";
|
|
26192
|
+
var css_248z$4 = ".maru-multi-select-dropdown .maru-multi-select-dropdown-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 display: block;\n margin-bottom: 4px;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper {\n width: 100%;\n border-radius: 6px;\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n cursor: pointer;\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 background-color: white;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover {\n border: unset;\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button {\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button ::placeholder {\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px var(--p) inset;\n outline: none;\n background-color: var(--p-10);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px var(--p) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button {\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button ::placeholder {\n color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button ::placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover {\n border: unset;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button {\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button ::placeholder {\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #8c8c8c inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button {\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button ::placeholder {\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button ::placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover {\n border: unset;\n box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button {\n color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button ::placeholder {\n color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #32a483 inset;\n outline: none;\n background-color: #eaf6f3;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #32a483 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button {\n color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button ::placeholder {\n color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button ::placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover {\n border: unset;\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button {\n color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button ::placeholder {\n color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #ffb020 inset;\n outline: none;\n background-color: #fff7e9;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #ffb020 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button {\n color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button ::placeholder {\n color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button ::placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover {\n border: unset;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button {\n color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button ::placeholder {\n color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #e53e3e inset;\n outline: none;\n background-color: #fcecec;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #e53e3e inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button {\n color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button ::placeholder {\n color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button ::placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover {\n border: unset;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button {\n color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button ::placeholder {\n color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within {\n border: unset;\n box-shadow: 0 0 0 1px #308acc inset;\n outline: none;\n background-color: #eaf3fa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within.closed {\n border: unset;\n box-shadow: 0 0 0 2px #308acc inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button {\n color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button:focus-visible {\n outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button ::placeholder {\n color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n outline: none;\n background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled.closed {\n border: unset;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button {\n color: #bdbdbd;\n font-weight: 400;\n cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button ::placeholder {\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: row;\n width: 100%;\n height: 37px;\n border: unset;\n border-radius: 6px;\n background-color: transparent;\n cursor: pointer;\n padding: 8px 10px 8px 14px;\n color: #5c5c5c;\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}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button ::-moz-placeholder {\n font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button :-ms-input-placeholder {\n font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button ::placeholder {\n font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button > div {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-contents {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-contents.placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.errored {\n border: unset;\n box-shadow: 0 0 0 2px #e53e3e inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-toggle-clear {\n padding: unset;\n margin: unset;\n border: unset;\n background-color: unset;\n cursor: pointer;\n display: flex;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-toggle-clear:last-of-type {\n margin: 0 6px 0 8px;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-toggle-arrow {\n display: flex;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-error-message {\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 color: #e53e3e;\n display: block;\n margin-top: 4px;\n}\n\n.maru-multi-select-dropdown-menu-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-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu {\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}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-primary {\n border: 1px solid var(--p);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-primary .maru-multi-select-dropdown-menu-item-menu-header {\n border-bottom: 1px solid var(--p);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-secondary {\n border: 1px solid #8c8c8c;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-secondary .maru-multi-select-dropdown-menu-item-menu-header {\n border-bottom: 1px solid #8c8c8c;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-positive {\n border: 1px solid #32a483;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-positive .maru-multi-select-dropdown-menu-item-menu-header {\n border-bottom: 1px solid #32a483;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-warning {\n border: 1px solid #ffb020;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-warning .maru-multi-select-dropdown-menu-item-menu-header {\n border-bottom: 1px solid #ffb020;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-danger {\n border: 1px solid #e53e3e;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-danger .maru-multi-select-dropdown-menu-item-menu-header {\n border-bottom: 1px solid #e53e3e;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-success {\n border: 1px solid #308acc;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-success .maru-multi-select-dropdown-menu-item-menu-header {\n border-bottom: 1px solid #308acc;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper {\n overflow-y: auto;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n border-bottom-left-radius: 6px;\n border-bottom-right-radius: 6px;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n gap: 8px;\n width: 100%;\n background-color: white;\n border: unset;\n cursor: pointer;\n height: 37px;\n padding: 8px 14px;\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-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item:hover {\n background-color: #fafafa;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-empty {\n justify-content: flex-start;\n gap: 6px;\n color: #8c8c8c;\n font-weight: 300;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header {\n display: flex;\n padding-left: 14px;\n height: 37px;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input {\n width: 100%;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input .maru-input {\n padding: 8px 10px 8px 8px;\n border-bottom-left-radius: unset;\n border-bottom-right-radius: unset;\n border: unset;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input .maru-input:focus-visible, .maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input .maru-input:focus-within, .maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input .maru-input:hover {\n outline: unset;\n border: unset;\n background-color: transparent;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-all-check-label {\n width: 100%;\n padding: 8px 10px 8px 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: 400;\n color: #5c5c5c;\n}";
|
|
26210
26193
|
styleInject(css_248z$4);
|
|
26211
26194
|
|
|
26212
26195
|
function MultiSelectDropdown(_a) {
|
|
@@ -26216,53 +26199,83 @@ function MultiSelectDropdown(_a) {
|
|
|
26216
26199
|
idKey = _a.idKey,
|
|
26217
26200
|
displayKey = _a.displayKey,
|
|
26218
26201
|
content = _a.content,
|
|
26219
|
-
anchorEl = _a.anchorEl,
|
|
26220
26202
|
className = _a.className,
|
|
26221
|
-
disabled = _a.disabled,
|
|
26222
26203
|
placeholder = _a.placeholder,
|
|
26223
|
-
|
|
26224
|
-
|
|
26225
|
-
|
|
26204
|
+
searchPlaceholder = _a.searchPlaceholder,
|
|
26205
|
+
disabled = _a.disabled,
|
|
26206
|
+
_b = _a.color,
|
|
26207
|
+
color = _b === void 0 ? 'primary' : _b,
|
|
26208
|
+
stopPropagation = _a.stopPropagation,
|
|
26209
|
+
_c = _a.type,
|
|
26210
|
+
type = _c === void 0 ? 'button' : _c,
|
|
26211
|
+
errorMessage = _a.errorMessage,
|
|
26212
|
+
label = _a.label,
|
|
26213
|
+
allCheckLabel = _a.allCheckLabel,
|
|
26214
|
+
onClear = _a.onClear,
|
|
26215
|
+
noDataMessage = _a.noDataMessage,
|
|
26226
26216
|
noResultMessage = _a.noResultMessage,
|
|
26227
26217
|
width = _a.width,
|
|
26228
26218
|
height = _a.height,
|
|
26229
|
-
|
|
26230
|
-
var
|
|
26231
|
-
open =
|
|
26232
|
-
setOpen =
|
|
26219
|
+
anchorEl = _a.anchorEl;
|
|
26220
|
+
var _d = useState(false),
|
|
26221
|
+
open = _d[0],
|
|
26222
|
+
setOpen = _d[1];
|
|
26233
26223
|
var wrapperRef = useRef(null);
|
|
26224
|
+
var handleClear = function handleClear() {
|
|
26225
|
+
onClear === null || onClear === void 0 ? void 0 : onClear();
|
|
26226
|
+
onSelect([]);
|
|
26227
|
+
};
|
|
26234
26228
|
return jsxs("div", __assign({
|
|
26235
26229
|
ref: wrapperRef,
|
|
26236
26230
|
className: classNames('maru-multi-select-dropdown', className)
|
|
26237
26231
|
}, {
|
|
26238
|
-
children: [jsx(
|
|
26239
|
-
|
|
26240
|
-
|
|
26241
|
-
|
|
26242
|
-
|
|
26243
|
-
selected: selectedIds.length > 0,
|
|
26232
|
+
children: [label && jsx("label", __assign({
|
|
26233
|
+
className: "maru-multi-select-dropdown-label"
|
|
26234
|
+
}, {
|
|
26235
|
+
children: label
|
|
26236
|
+
})), jsx(DropdownToggleButton, {
|
|
26244
26237
|
content: content,
|
|
26245
|
-
width: width,
|
|
26246
|
-
disabled: disabled,
|
|
26247
26238
|
placeholder: placeholder,
|
|
26248
|
-
|
|
26249
|
-
|
|
26239
|
+
disabled: disabled,
|
|
26240
|
+
color: color,
|
|
26241
|
+
stopPropagation: stopPropagation,
|
|
26242
|
+
width: width,
|
|
26243
|
+
//
|
|
26244
|
+
open: open,
|
|
26245
|
+
selected: selectedIds.length > 0,
|
|
26246
|
+
errored: errorMessage != null,
|
|
26247
|
+
hasClearBtn: onClear != null,
|
|
26248
|
+
onClear: handleClear,
|
|
26249
|
+
//
|
|
26250
|
+
onClick: function onClick() {
|
|
26251
|
+
return setOpen(true);
|
|
26252
|
+
}
|
|
26253
|
+
}), errorMessage && jsx("span", __assign({
|
|
26254
|
+
className: "maru-multi-select-dropdown-error-message"
|
|
26255
|
+
}, {
|
|
26256
|
+
children: errorMessage
|
|
26257
|
+
})), open && jsx(CreatePortal, __assign({
|
|
26250
26258
|
parent: anchorEl || wrapperRef.current
|
|
26251
26259
|
}, {
|
|
26252
26260
|
children: jsx(DropdownMenu, {
|
|
26253
|
-
|
|
26254
|
-
parent: anchorEl || wrapperRef.current,
|
|
26261
|
+
data: data,
|
|
26255
26262
|
selectedIds: selectedIds,
|
|
26263
|
+
onSelect: onSelect,
|
|
26256
26264
|
idKey: idKey,
|
|
26257
26265
|
displayKey: displayKey,
|
|
26258
|
-
|
|
26259
|
-
|
|
26260
|
-
|
|
26266
|
+
searchPlaceholder: searchPlaceholder,
|
|
26267
|
+
allCheckLabel: allCheckLabel,
|
|
26268
|
+
color: color,
|
|
26269
|
+
//
|
|
26270
|
+
noDataMessage: noDataMessage,
|
|
26261
26271
|
noResultMessage: noResultMessage,
|
|
26262
26272
|
width: width,
|
|
26263
26273
|
height: height,
|
|
26264
|
-
|
|
26265
|
-
|
|
26274
|
+
//
|
|
26275
|
+
isSearch: type === 'search',
|
|
26276
|
+
parent: anchorEl || wrapperRef.current,
|
|
26277
|
+
open: open,
|
|
26278
|
+
onClose: function onClose() {
|
|
26266
26279
|
return setOpen(false);
|
|
26267
26280
|
}
|
|
26268
26281
|
})
|
|
@@ -26586,7 +26599,7 @@ function Filter(_a) {
|
|
|
26586
26599
|
});
|
|
26587
26600
|
}
|
|
26588
26601
|
|
|
26589
|
-
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
|
|
26602
|
+
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}";
|
|
26590
26603
|
styleInject(css_248z$2);
|
|
26591
26604
|
|
|
26592
26605
|
function SearchInput(_a) {
|
|
@@ -26613,7 +26626,7 @@ function SearchInput(_a) {
|
|
|
26613
26626
|
searchButtonContent: filter.searchButtonContent,
|
|
26614
26627
|
inputWrapperRef: inputWrapperRef
|
|
26615
26628
|
}) : undefined,
|
|
26616
|
-
hiddenClearButton:
|
|
26629
|
+
hiddenClearButton: hiddenClearButton
|
|
26617
26630
|
}));
|
|
26618
26631
|
}
|
|
26619
26632
|
|
|
@@ -26654,7 +26667,11 @@ function EmptyTr(_a) {
|
|
|
26654
26667
|
function BinButtonTd(_a) {
|
|
26655
26668
|
var rowId = _a.rowId,
|
|
26656
26669
|
hovered = _a.hovered,
|
|
26657
|
-
|
|
26670
|
+
onClick = _a.onClick;
|
|
26671
|
+
var handleClick = function handleClick(e) {
|
|
26672
|
+
e.stopPropagation();
|
|
26673
|
+
onClick(rowId);
|
|
26674
|
+
};
|
|
26658
26675
|
return jsx("td", __assign({
|
|
26659
26676
|
className: "maru-table-body-bin-button-td"
|
|
26660
26677
|
}, {
|
|
@@ -26667,9 +26684,7 @@ function BinButtonTd(_a) {
|
|
|
26667
26684
|
color: hovered ? 'danger' : '#8c8c8c'
|
|
26668
26685
|
},
|
|
26669
26686
|
color: "danger",
|
|
26670
|
-
onClick:
|
|
26671
|
-
return _onClick(rowId);
|
|
26672
|
-
}
|
|
26687
|
+
onClick: handleClick
|
|
26673
26688
|
})
|
|
26674
26689
|
}))
|
|
26675
26690
|
}));
|
|
@@ -26679,7 +26694,11 @@ function ChartButtonTd(_a) {
|
|
|
26679
26694
|
var rowId = _a.rowId,
|
|
26680
26695
|
hovered = _a.hovered,
|
|
26681
26696
|
selected = _a.selected,
|
|
26682
|
-
|
|
26697
|
+
onClick = _a.onClick;
|
|
26698
|
+
var handleClick = function handleClick(e) {
|
|
26699
|
+
e.stopPropagation();
|
|
26700
|
+
onClick(rowId);
|
|
26701
|
+
};
|
|
26683
26702
|
return jsx("td", __assign({
|
|
26684
26703
|
className: "maru-table-body-bin-button-td"
|
|
26685
26704
|
}, {
|
|
@@ -26692,9 +26711,7 @@ function ChartButtonTd(_a) {
|
|
|
26692
26711
|
color: selected ? 'primary' : hovered ? '#5c5c5c' : '#8c8c8c'
|
|
26693
26712
|
},
|
|
26694
26713
|
color: "#8c8c8c",
|
|
26695
|
-
onClick:
|
|
26696
|
-
return _onClick(rowId);
|
|
26697
|
-
}
|
|
26714
|
+
onClick: handleClick
|
|
26698
26715
|
})
|
|
26699
26716
|
}))
|
|
26700
26717
|
}));
|
|
@@ -26814,11 +26831,7 @@ function Tr(_a) {
|
|
|
26814
26831
|
useEffect(function () {
|
|
26815
26832
|
var _a;
|
|
26816
26833
|
if (rowId === (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.scrollIntoView)) {
|
|
26817
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView(
|
|
26818
|
-
behavior: 'smooth',
|
|
26819
|
-
block: 'center',
|
|
26820
|
-
inline: 'center'
|
|
26821
|
-
});
|
|
26834
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView(selectedRow.scrollIntoView);
|
|
26822
26835
|
}
|
|
26823
26836
|
}, [rowId, selectedRow]);
|
|
26824
26837
|
var handleCheck = function handleCheck(checked) {
|
|
@@ -26866,10 +26879,9 @@ function Tr(_a) {
|
|
|
26866
26879
|
onCheck: handleRadioCheck
|
|
26867
26880
|
}), formats.map(function (format) {
|
|
26868
26881
|
if (format.isHide) return null;
|
|
26869
|
-
var cellHashId = uuidv4(4);
|
|
26870
26882
|
return jsx("td", {
|
|
26871
26883
|
children: format.customColumn ? format.customColumn(row[format.columnIdKey], rowId) : row[format.columnIdKey]
|
|
26872
|
-
},
|
|
26884
|
+
}, row[format.columnIdKey]);
|
|
26873
26885
|
}), (kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show(rowId)) === 'always' || (kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show(rowId)) === 'hover' && hoveredRowId === rowId ? jsx(KebabMenuTd, {
|
|
26874
26886
|
rowId: rowId,
|
|
26875
26887
|
kebabContent: kebabMenu.content
|
|
@@ -27138,10 +27150,11 @@ function THead(_a) {
|
|
|
27138
27150
|
sort: sort,
|
|
27139
27151
|
onSortClick: onSortClick
|
|
27140
27152
|
}), format.iconTooltip && jsx(Tooltip, __assign({
|
|
27141
|
-
content: format.iconTooltip
|
|
27153
|
+
content: format.iconTooltip,
|
|
27154
|
+
gap: "4px"
|
|
27142
27155
|
}, {
|
|
27143
27156
|
children: jsx(Icon, {
|
|
27144
|
-
name: ICONS.
|
|
27157
|
+
name: ICONS.Information_s1410,
|
|
27145
27158
|
color: "#5c5c5c"
|
|
27146
27159
|
})
|
|
27147
27160
|
}))]
|
|
@@ -27154,10 +27167,11 @@ function THead(_a) {
|
|
|
27154
27167
|
sort: sort,
|
|
27155
27168
|
onSortClick: onSortClick
|
|
27156
27169
|
}), format.iconTooltip && jsx(Tooltip, __assign({
|
|
27157
|
-
content: format.iconTooltip
|
|
27170
|
+
content: format.iconTooltip,
|
|
27171
|
+
gap: "4px"
|
|
27158
27172
|
}, {
|
|
27159
27173
|
children: jsx(Icon, {
|
|
27160
|
-
name: ICONS.
|
|
27174
|
+
name: ICONS.Information_s1410,
|
|
27161
27175
|
color: "#5c5c5c"
|
|
27162
27176
|
})
|
|
27163
27177
|
}))]
|