maru_design2 2.4.1 → 2.5.2
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 +38 -0
- package/dist/index.js +31 -16
- package/package.json +1 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## [2.5.2](https://github.com/42maru-ai/maru-design2/compare/v2.5.1...v2.5.2) (2024-05-20)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* chip style - gap, paddingfor dot ([76542bf](https://github.com/42maru-ai/maru-design2/commit/76542bfe81e0e484c9d725744f0a71424f55371a))
|
|
9
|
+
* REMOVE background-color on button ([b067db0](https://github.com/42maru-ai/maru-design2/commit/b067db077da798360dd1fa96c6e2e7b3f3ee3b56))
|
|
10
|
+
* UPDATE dropdown toggle style - font,color,placeholder ([1afa3b0](https://github.com/42maru-ai/maru-design2/commit/1afa3b0e7adfc5f0033d39b2d055a3565207a4d2))
|
|
11
|
+
|
|
12
|
+
## [2.5.1](https://github.com/42maru-ai/maru-design2/compare/v2.5.0...v2.5.1) (2024-05-10)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* welcome storybook ([e760689](https://github.com/42maru-ai/maru-design2/commit/e760689a0553859037ceaddcfbbdb03084688f1a))
|
|
18
|
+
|
|
19
|
+
## [2.5.0](https://github.com/42maru-ai/maru-design2/compare/v2.4.3...v2.5.0) (2024-05-10)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Features
|
|
23
|
+
|
|
24
|
+
* add release-please.yml ([21d18be](https://github.com/42maru-ai/maru-design2/commit/21d18bef2f30e759b9bbd7d7c80ceb81d9b0c1eb))
|
|
25
|
+
* update release-please.yml ([9b36847](https://github.com/42maru-ai/maru-design2/commit/9b36847339d53de4a0a31b37641f7ccef97aa985))
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Bug Fixes
|
|
29
|
+
|
|
30
|
+
* release-please to main ([eabe524](https://github.com/42maru-ai/maru-design2/commit/eabe5247c003ed35e5afe79fde8ae9719623e5a2))
|
|
31
|
+
|
|
32
|
+
## 2.4.3 (2024-05-10)
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
### Features
|
|
36
|
+
|
|
37
|
+
* add release-please.yml ([21d18be](https://github.com/42maru-ai/maru-design2/commit/21d18bef2f30e759b9bbd7d7c80ceb81d9b0c1eb))
|
|
38
|
+
* update release-please.yml ([9b36847](https://github.com/42maru-ai/maru-design2/commit/9b36847339d53de4a0a31b37641f7ccef97aa985))
|
package/dist/index.js
CHANGED
|
@@ -2611,7 +2611,7 @@ function Icon(_a) {
|
|
|
2611
2611
|
}));
|
|
2612
2612
|
}
|
|
2613
2613
|
|
|
2614
|
-
var css_248z$b = ".size-small {\n padding: 6px 12px;\n border-radius: 6px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 600;\n}\n\n.size-normal {\n padding: 8px 10px;\n border-radius: 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: 600;\n}\n\n.size-large {\n padding: 4px 12px;\n border-radius: 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: 600;\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: 8px;\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}\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 6px var(--p-50-per);\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: #bdbdbd;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 8px !important;\n gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n box-shadow: 0px 0px 6px 0px #e4e4e4;\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 box-shadow: 0 0 0 1px var(--p) inset;\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}\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: #8c8c8c;\n color: white;\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: #bdbdbd;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 8px !important;\n gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n background-color: #e4e4e4;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #5c5c5c inset;\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}\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: #bdbdbd;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 8px !important;\n gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n box-shadow: 0px 0px 6px 0px #e4e4e4;\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 box-shadow: 0 0 0 1px #58c5a6 inset;\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: #bdbdbd;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 8px !important;\n gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n background-color: #ffefd2;\n color: #ffb020;\n box-shadow: 0 0 0 1px #ffb020 inset;\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}\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: #bdbdbd;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 8px !important;\n gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n box-shadow: 0px 0px 6px 0px #e4e4e4;\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 box-shadow: 0 0 0 1px #e53e3e inset;\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}\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: #bdbdbd;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 8px !important;\n gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n box-shadow: 0px 0px 6px 0px #e4e4e4;\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 box-shadow: 0 0 0 1px #308acc inset;\n}\n\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n padding: 8px 14px;\n}\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n padding: 6px 12px;\n}\n.maru-button-with-start-icon.maru-button-primary-text:hover, .maru-button-with-start-icon.maru-button-primary-text:focus-visible, .maru-button-with-start-icon.maru-button-primary-text:active,\n.maru-button-with-end-icon.maru-button-primary-text:hover,\n.maru-button-with-end-icon.maru-button-primary-text:focus-visible,\n.maru-button-with-end-icon.maru-button-primary-text:active {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-button-with-start-icon.maru-button-secondary-default-light:hover, .maru-button-with-start-icon.maru-button-secondary-default-light:focus-visible, .maru-button-with-start-icon.maru-button-secondary-default-light:active,\n.maru-button-with-end-icon.maru-button-secondary-default-light:hover,\n.maru-button-with-end-icon.maru-button-secondary-default-light:focus-visible,\n.maru-button-with-end-icon.maru-button-secondary-default-light:active {\n box-shadow: none;\n background-color: #fafafa;\n color: #8c8c8c;\n}\n\n.maru-button-only-icon {\n padding: 0;\n justify-content: center;\n background-color: transparent;\n}\n.maru-button-only-icon:hover, .maru-button-only-icon:focus-visible, .maru-button-only-icon:active {\n box-shadow: none;\n background-color: transparent;\n}";
|
|
2614
|
+
var css_248z$b = ".size-small {\n padding: 6px 12px;\n border-radius: 6px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 600;\n}\n\n.size-normal {\n padding: 8px 10px;\n border-radius: 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: 600;\n}\n\n.size-large {\n padding: 4px 12px;\n border-radius: 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: 600;\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: 8px;\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}\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: transparent;\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 6px var(--p-50-per);\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: transparent;\n color: #bdbdbd;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 8px !important;\n gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n box-shadow: 0px 0px 6px 0px #e4e4e4;\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 box-shadow: 0 0 0 1px var(--p) inset;\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}\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: #8c8c8c;\n color: white;\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: transparent;\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: transparent;\n color: #bdbdbd;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 8px !important;\n gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n background-color: #e4e4e4;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #5c5c5c inset;\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}\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: transparent;\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: transparent;\n color: #bdbdbd;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 8px !important;\n gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n box-shadow: 0px 0px 6px 0px #e4e4e4;\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 box-shadow: 0 0 0 1px #58c5a6 inset;\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: transparent;\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: transparent;\n color: #bdbdbd;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 8px !important;\n gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n background-color: #ffefd2;\n color: #ffb020;\n box-shadow: 0 0 0 1px #ffb020 inset;\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}\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: transparent;\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: transparent;\n color: #bdbdbd;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 8px !important;\n gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n box-shadow: 0px 0px 6px 0px #e4e4e4;\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 box-shadow: 0 0 0 1px #e53e3e inset;\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}\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: transparent;\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: transparent;\n color: #bdbdbd;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 8px !important;\n gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n box-shadow: 0px 0px 6px 0px #e4e4e4;\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 box-shadow: 0 0 0 1px #308acc inset;\n}\n\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n padding: 8px 14px;\n}\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n padding: 6px 12px;\n}\n.maru-button-with-start-icon.maru-button-primary-text:hover, .maru-button-with-start-icon.maru-button-primary-text:focus-visible, .maru-button-with-start-icon.maru-button-primary-text:active,\n.maru-button-with-end-icon.maru-button-primary-text:hover,\n.maru-button-with-end-icon.maru-button-primary-text:focus-visible,\n.maru-button-with-end-icon.maru-button-primary-text:active {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-button-with-start-icon.maru-button-secondary-default-light:hover, .maru-button-with-start-icon.maru-button-secondary-default-light:focus-visible, .maru-button-with-start-icon.maru-button-secondary-default-light:active,\n.maru-button-with-end-icon.maru-button-secondary-default-light:hover,\n.maru-button-with-end-icon.maru-button-secondary-default-light:focus-visible,\n.maru-button-with-end-icon.maru-button-secondary-default-light:active {\n box-shadow: none;\n background-color: #fafafa;\n color: #8c8c8c;\n}\n\n.maru-button-only-icon {\n padding: 0;\n justify-content: center;\n background-color: transparent;\n}\n.maru-button-only-icon:hover, .maru-button-only-icon:focus-visible, .maru-button-only-icon:active {\n box-shadow: none;\n background-color: transparent;\n}";
|
|
2615
2615
|
styleInject(css_248z$b);
|
|
2616
2616
|
|
|
2617
2617
|
var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
@@ -2746,36 +2746,51 @@ function uuidv4(length) {
|
|
|
2746
2746
|
}
|
|
2747
2747
|
}
|
|
2748
2748
|
|
|
2749
|
-
var css_248z$a = ".maru-checkbox-wrapper
|
|
2749
|
+
var css_248z$a = ".maru-checkbox-wrapper {\n display: flex;\n align-items: center;\n flex-direction: row;\n width: fit-content;\n}\n\n.maru-checkbox-wrapper-4px {\n gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\n gap: 8px;\n}\n\n.maru-checkbox-inner-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n position: relative;\n}\n\n.maru-checkbox {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.maru-checkbox-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n cursor: pointer;\n}\n.maru-checkbox-label.label-disabled {\n color: #8c8c8c;\n}\n\n.maru-checkbox:disabled,\n.label-disabled {\n cursor: default;\n}";
|
|
2750
2750
|
styleInject(css_248z$a);
|
|
2751
2751
|
|
|
2752
2752
|
var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
2753
|
+
var _b;
|
|
2753
2754
|
var checked = _a.checked,
|
|
2754
|
-
|
|
2755
|
-
color =
|
|
2756
|
-
|
|
2757
|
-
gap =
|
|
2755
|
+
_c = _a.color,
|
|
2756
|
+
color = _c === void 0 ? 'primary' : _c,
|
|
2757
|
+
_d = _a.gap,
|
|
2758
|
+
gap = _d === void 0 ? '4px' : _d,
|
|
2758
2759
|
label = _a.label,
|
|
2759
|
-
|
|
2760
|
-
size =
|
|
2760
|
+
_e = _a.size,
|
|
2761
|
+
size = _e === void 0 ? 18 : _e,
|
|
2761
2762
|
props = __rest(_a, ["checked", "color", "gap", "label", "size"]);
|
|
2762
2763
|
var keyColor = useColor(color).keyColor;
|
|
2763
2764
|
var hashId = uuidv4(4);
|
|
2765
|
+
var _f = useState((_b = checked !== null && checked !== void 0 ? checked : props.defaultChecked) !== null && _b !== void 0 ? _b : false),
|
|
2766
|
+
isChecked = _f[0],
|
|
2767
|
+
setIsChecked = _f[1];
|
|
2764
2768
|
var combineRef = useCombineRef(ref);
|
|
2769
|
+
useEffect(function () {
|
|
2770
|
+
var _a;
|
|
2771
|
+
setIsChecked((_a = checked !== null && checked !== void 0 ? checked : props.defaultChecked) !== null && _a !== void 0 ? _a : false);
|
|
2772
|
+
}, [checked, props.defaultChecked]);
|
|
2773
|
+
var handleChange = function handleChange(e) {
|
|
2774
|
+
setIsChecked(e.target.checked);
|
|
2775
|
+
if (props.onChange) {
|
|
2776
|
+
props.onChange(e);
|
|
2777
|
+
}
|
|
2778
|
+
};
|
|
2765
2779
|
return jsxs("div", __assign({
|
|
2766
|
-
className: "maru-checkbox-wrapper-".concat(gap)
|
|
2780
|
+
className: classNames('maru-checkbox-wrapper', "maru-checkbox-wrapper-".concat(gap), props.className)
|
|
2767
2781
|
}, {
|
|
2768
2782
|
children: [jsxs("div", __assign({
|
|
2769
2783
|
className: "maru-checkbox-inner-wrapper"
|
|
2770
2784
|
}, {
|
|
2771
|
-
children: [jsx("input", __assign({
|
|
2785
|
+
children: [jsx("input", __assign({}, props, {
|
|
2772
2786
|
ref: combineRef,
|
|
2773
2787
|
id: "maru-checkbox-".concat(hashId),
|
|
2774
2788
|
type: "checkbox",
|
|
2775
|
-
checked:
|
|
2789
|
+
checked: isChecked,
|
|
2790
|
+
onChange: handleChange,
|
|
2776
2791
|
className: "maru-checkbox"
|
|
2777
|
-
}
|
|
2778
|
-
name:
|
|
2792
|
+
})), jsx(Icon, {
|
|
2793
|
+
name: isChecked ? 'CheckboxOnThin' : 'CheckboxOffThin',
|
|
2779
2794
|
size: size,
|
|
2780
2795
|
color: props.disabled ? '#BDBDBD' : keyColor
|
|
2781
2796
|
})]
|
|
@@ -2798,7 +2813,7 @@ Checkbox.defaultProps = {
|
|
|
2798
2813
|
};
|
|
2799
2814
|
Checkbox.displayName = 'Checkbox';
|
|
2800
2815
|
|
|
2801
|
-
var css_248z$9 = ".maru-chip {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n border-radius: 10px;\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}\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}\n.maru-chip-positive-default {\n background-color: #eef9f6;\n color: #58c5a6;\n}\n.maru-chip-positive-default.maru-chip-warning-default, .maru-chip-positive-default.maru-chip-positive-default {\n background-color: #def3ed;\n}\n.maru-chip-positive-outline {\n background-color: #eef9f6;\n border: 1px solid #58c5a6;\n color: #58c5a6;\n}\n.maru-chip-positive-outline.maru-chip-warning-default, .maru-chip-positive-outline.maru-chip-positive-default {\n background-color: #def3ed;\n}\n.maru-chip-positive-dot {\n color: #58c5a6;\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}\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}\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
|
|
2816
|
+
var css_248z$9 = ".maru-chip {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n border-radius: 10px;\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: 500;\n}\n.maru-chip-size-normal {\n padding: 2px 10px;\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-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: 4px;\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: 4px;\n padding: unset;\n}\n.maru-chip-positive-default {\n background-color: #eef9f6;\n color: #58c5a6;\n}\n.maru-chip-positive-default.maru-chip-warning-default, .maru-chip-positive-default.maru-chip-positive-default {\n background-color: #def3ed;\n}\n.maru-chip-positive-outline {\n background-color: #eef9f6;\n border: 1px solid #58c5a6;\n color: #58c5a6;\n}\n.maru-chip-positive-outline.maru-chip-warning-default, .maru-chip-positive-outline.maru-chip-positive-default {\n background-color: #def3ed;\n}\n.maru-chip-positive-dot {\n color: #58c5a6;\n gap: 4px;\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: 4px;\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: 4px;\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: 4px;\n padding: unset;\n}";
|
|
2802
2817
|
styleInject(css_248z$9);
|
|
2803
2818
|
|
|
2804
2819
|
function Chip(_a) {
|
|
@@ -5136,7 +5151,7 @@ function Arrow(_a) {
|
|
|
5136
5151
|
}, {
|
|
5137
5152
|
children: jsx(Icon, {
|
|
5138
5153
|
name: open ? ICONS.ChevronUp : ICONS.ChevronDown,
|
|
5139
|
-
color: focus || open ? color : '#
|
|
5154
|
+
color: focus || open ? color : '#bdbdbd',
|
|
5140
5155
|
size: 16
|
|
5141
5156
|
})
|
|
5142
5157
|
}));
|
|
@@ -5462,7 +5477,7 @@ function DropdownMenu(_a) {
|
|
|
5462
5477
|
}));
|
|
5463
5478
|
}
|
|
5464
5479
|
|
|
5465
|
-
var css_248z$3 = ".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: 600;\n color: #5c5c5c;\n display: block;\n margin-bottom: 4px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper {\n width: 100%;\n border-radius: 8px;\n border: 1px solid #e4e4e4;\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}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover {\n border: 1px solid var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input {\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-within {\n border: 1px solid var(--p);\n outline: none;\n background-color: var(--p-10);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button,\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-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-input > input {\n color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover {\n border: 1px solid #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input {\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-within {\n border: 1px solid #8c8c8c;\n outline: none;\n background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button,\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-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-input > input {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover {\n border: 1px solid #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input {\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-within {\n border: 1px solid #58c5a6;\n outline: none;\n background-color: #eef9f6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button,\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-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-input > input {\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover {\n border: 1px solid #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input {\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-within {\n border: 1px solid #ffb020;\n outline: none;\n background-color: #fff7e9;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button,\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-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-input > input {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover {\n border: 1px solid #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input {\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-within {\n border: 1px solid #e53e3e;\n outline: none;\n background-color: #fcecec;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button,\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-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-input > input {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover {\n border: 1px solid #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input {\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-within {\n border: 1px solid #308acc;\n outline: none;\n background-color: #eaf3fa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button,\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-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-input > input {\n color: #308acc;\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: 8px;\n background-color: transparent;\n cursor: pointer;\n padding: 8px 10px 8px 14px;\n color: #5c5c5c;\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 color: #bdbdbd;\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: 8px;\n background-color: transparent;\n cursor: pointer;\n padding: 8px 10px 8px 14px;\n color: #5c5c5c;\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 overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-webkit-input-placeholder {\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-moz-placeholder {\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input:-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::placeholder {\n color: #bdbdbd;\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: 2px solid #e53e3e;\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: 500;\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: 8px;\n box-shadow: 0px 0px 6px #e4e4e4;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper {\n overflow-y: auto;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\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: 500;\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}";
|
|
5480
|
+
var css_248z$3 = ".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: 600;\n color: #5c5c5c;\n display: block;\n margin-bottom: 4px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper {\n width: 100%;\n border-radius: 8px;\n border: 1px solid #e4e4e4;\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}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover {\n border: 1px solid var(--p);\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: 600;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input::-webkit-input-placeholder {\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 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 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 color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input::placeholder {\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: 600;\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-within {\n border: 1px solid var(--p);\n outline: none;\n background-color: var(--p-10);\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-within .maru-dropdown-input > input {\n color: var(--p);\n font-weight: 600;\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-within .maru-dropdown-input > input::-webkit-input-placeholder {\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-within .maru-dropdown-input > input::-moz-placeholder {\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-within .maru-dropdown-input > input:-ms-input-placeholder {\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-within .maru-dropdown-input > input::-ms-input-placeholder {\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-within .maru-dropdown-input > input::placeholder {\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-within .maru-dropdown-button {\n color: var(--p);\n font-weight: 600;\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-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-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-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-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-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-secondary:hover {\n border: 1px solid #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input {\n color: #8c8c8c;\n font-weight: 600;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input::-webkit-input-placeholder {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input::-moz-placeholder {\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 color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input::-ms-input-placeholder {\n color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input::placeholder {\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: 600;\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-within {\n border: 1px solid #8c8c8c;\n outline: none;\n background-color: #fafafa;\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-within .maru-dropdown-input > input {\n color: #8c8c8c;\n font-weight: 600;\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-within .maru-dropdown-input > input::-webkit-input-placeholder {\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-within .maru-dropdown-input > input::-moz-placeholder {\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-within .maru-dropdown-input > input:-ms-input-placeholder {\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-within .maru-dropdown-input > input::-ms-input-placeholder {\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-within .maru-dropdown-input > input::placeholder {\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-within .maru-dropdown-button {\n color: #8c8c8c;\n font-weight: 600;\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-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-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-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-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-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-positive:hover {\n border: 1px solid #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input {\n color: #58c5a6;\n font-weight: 600;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input::-webkit-input-placeholder {\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input::-moz-placeholder {\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 color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input::-ms-input-placeholder {\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input::placeholder {\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: 600;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::-webkit-input-placeholder {\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::-moz-placeholder {\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button :-ms-input-placeholder {\n color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::-ms-input-placeholder {\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 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-within {\n border: 1px solid #58c5a6;\n outline: none;\n background-color: #eef9f6;\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-within .maru-dropdown-input > input {\n color: #58c5a6;\n font-weight: 600;\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-within .maru-dropdown-input > input::-webkit-input-placeholder {\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-within .maru-dropdown-input > input::-moz-placeholder {\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-within .maru-dropdown-input > input:-ms-input-placeholder {\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-within .maru-dropdown-input > input::-ms-input-placeholder {\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-within .maru-dropdown-input > input::placeholder {\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-within .maru-dropdown-button {\n color: #58c5a6;\n font-weight: 600;\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-within .maru-dropdown-button ::-webkit-input-placeholder {\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-within .maru-dropdown-button ::-moz-placeholder {\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-within .maru-dropdown-button :-ms-input-placeholder {\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-within .maru-dropdown-button ::-ms-input-placeholder {\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-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: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover {\n border: 1px solid #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input {\n color: #ffb020;\n font-weight: 600;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input::-webkit-input-placeholder {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input::-moz-placeholder {\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 color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input::-ms-input-placeholder {\n color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input::placeholder {\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: 600;\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-within {\n border: 1px solid #ffb020;\n outline: none;\n background-color: #fff7e9;\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-within .maru-dropdown-input > input {\n color: #ffb020;\n font-weight: 600;\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-within .maru-dropdown-input > input::-webkit-input-placeholder {\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-within .maru-dropdown-input > input::-moz-placeholder {\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-within .maru-dropdown-input > input:-ms-input-placeholder {\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-within .maru-dropdown-input > input::-ms-input-placeholder {\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-within .maru-dropdown-input > input::placeholder {\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-within .maru-dropdown-button {\n color: #ffb020;\n font-weight: 600;\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-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-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-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-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-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-danger:hover {\n border: 1px solid #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input {\n color: #e53e3e;\n font-weight: 600;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input::-webkit-input-placeholder {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input::-moz-placeholder {\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 color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input::-ms-input-placeholder {\n color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input::placeholder {\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: 600;\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-within {\n border: 1px solid #e53e3e;\n outline: none;\n background-color: #fcecec;\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-within .maru-dropdown-input > input {\n color: #e53e3e;\n font-weight: 600;\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-within .maru-dropdown-input > input::-webkit-input-placeholder {\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-within .maru-dropdown-input > input::-moz-placeholder {\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-within .maru-dropdown-input > input:-ms-input-placeholder {\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-within .maru-dropdown-input > input::-ms-input-placeholder {\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-within .maru-dropdown-input > input::placeholder {\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-within .maru-dropdown-button {\n color: #e53e3e;\n font-weight: 600;\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-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-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-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-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-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-success:hover {\n border: 1px solid #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input {\n color: #308acc;\n font-weight: 600;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input::-webkit-input-placeholder {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input::-moz-placeholder {\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 color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input::-ms-input-placeholder {\n color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input::placeholder {\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: 600;\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-within {\n border: 1px solid #308acc;\n outline: none;\n background-color: #eaf3fa;\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-within .maru-dropdown-input > input {\n color: #308acc;\n font-weight: 600;\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-within .maru-dropdown-input > input::-webkit-input-placeholder {\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-within .maru-dropdown-input > input::-moz-placeholder {\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-within .maru-dropdown-input > input:-ms-input-placeholder {\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-within .maru-dropdown-input > input::-ms-input-placeholder {\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-within .maru-dropdown-input > input::placeholder {\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-within .maru-dropdown-button {\n color: #308acc;\n font-weight: 600;\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-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-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-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-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-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.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: 8px;\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: 500;\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 color: #bdbdbd;\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: 8px;\n background-color: transparent;\n cursor: pointer;\n padding: 8px 10px 8px 14px;\n color: #5c5c5c;\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: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-webkit-input-placeholder {\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-moz-placeholder {\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input:-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::placeholder {\n color: #bdbdbd;\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: 2px solid #e53e3e;\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: 500;\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: 8px;\n box-shadow: 0px 0px 6px #e4e4e4;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper {\n overflow-y: auto;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\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: 500;\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}";
|
|
5466
5481
|
styleInject(css_248z$3);
|
|
5467
5482
|
|
|
5468
5483
|
// eslint-disable-next-line import/prefer-default-export
|