maru_design2 2.23.0 → 2.23.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [2.23.2](https://github.com/42maru-ai/maru-design2/compare/v2.23.1...v2.23.2) (2025-03-04)
+
+
+### Bug Fixes
+
+* :lipstick: Button - UPDATE color-on-focus design ([2b830d5](https://github.com/42maru-ai/maru-design2/commit/2b830d543f22ce0e9cbfbf534a2af7e74512b074))
+* :lipstick: Modal - update border radius [#513](https://github.com/42maru-ai/maru-design2/issues/513) ([e4cf6cf](https://github.com/42maru-ai/maru-design2/commit/e4cf6cfe1e35c1a392868a9c6e099711168f7fd9))
+
+## [2.23.1](https://github.com/42maru-ai/maru-design2/compare/v2.23.0...v2.23.1) (2025-02-19)
+
+
+### Bug Fixes
+
+* :bug: Input - update date,time format length check ([ef06558](https://github.com/42maru-ai/maru-design2/commit/ef06558d6927dd9419451cc3fbe4250fdd2f0bf0))
+* :bug: SearchInput - update filter pos.left [#507](https://github.com/42maru-ai/maru-design2/issues/507) ([32175e3](https://github.com/42maru-ai/maru-design2/commit/32175e38eaebab151a1d5ceedcd91846c274bbea))
+* :lipstick: StyleProvider - add root color [#508](https://github.com/42maru-ai/maru-design2/issues/508) ([99c7715](https://github.com/42maru-ai/maru-design2/commit/99c7715d3dbfdc77ff5eac0c26a7db75ab7d2d47))
+* :lipstick: Table - update kebab menu align, width ([b1bd901](https://github.com/42maru-ai/maru-design2/commit/b1bd90130d347cd2ad7788368b53098d2277c950))
+
 ## [2.23.0](https://github.com/42maru-ai/maru-design2/compare/v2.22.4...v2.23.0) (2025-02-17)
 
 

package/dist/index.js

@@ -87,7 +87,7 @@ function styleInject(css, ref) {
 var css_248z$l = "* {\n  /* HTML5 display-role reset for older browsers */\n}\n* html,\n* body,\n* div,\n* span,\n* applet,\n* object,\n* iframe,\n* h1,\n* h2,\n* h3,\n* h4,\n* h5,\n* h6,\n* p,\n* blockquote,\n* pre,\n* a,\n* abbr,\n* acronym,\n* address,\n* big,\n* cite,\n* code,\n* del,\n* dfn,\n* em,\n* img,\n* ins,\n* kbd,\n* q,\n* s,\n* samp,\n* small,\n* strike,\n* strong,\n* sub,\n* sup,\n* tt,\n* var,\n* b,\n* u,\n* i,\n* center,\n* dl,\n* dt,\n* dd,\n* ol,\n* ul,\n* li,\n* fieldset,\n* form,\n* label,\n* legend,\n* table,\n* caption,\n* tbody,\n* tfoot,\n* thead,\n* tr,\n* th,\n* td,\n* article,\n* aside,\n* canvas,\n* details,\n* embed,\n* figure,\n* figcaption,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* output,\n* ruby,\n* section,\n* summary,\n* time,\n* mark,\n* audio,\n* video {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  font: inherit;\n  font-size: 100%;\n  vertical-align: baseline;\n}\n* article,\n* aside,\n* details,\n* figcaption,\n* figure,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* section {\n  display: block;\n}\n* ol,\n* ul {\n  list-style: none;\n}\n* blockquote,\n* q {\n  quotes: none;\n}\n* blockquote::before,\n* blockquote::after,\n* q::before,\n* q::after {\n  content: \"\";\n  content: none;\n}\n* table {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n* html {\n  box-sizing: border-box;\n}\n* *,\n* *::before,\n* *::after {\n  box-sizing: inherit;\n}";
 styleInject(css_248z$l);
 
-var css_248z$k = ".scrollbar, * {\n  scrollbar-track-color: #e4e4e4;\n  scrollbar-arrow-color: #e4e4e4;\n  scrollbar-3dlight-color: #e4e4e4;\n  scrollbar-highlight-color: #e4e4e4;\n  scrollbar-shadow-color: #e4e4e4;\n  scrollbar-face-color: #e4e4e4;\n}\n\n.scrollbar::-webkit-scrollbar, ::-webkit-scrollbar {\n  background: inherit;\n  width: 6px;\n  height: 6px;\n}\n\n.scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-track {\n  background: none;\n}\n\n.scrollbar::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {\n  background-color: #e4e4e4;\n  border-radius: 16px;\n}\n\n.scrollbar::-webkit-scrollbar-button, ::-webkit-scrollbar-button {\n  display: none;\n}\n\n@font-face {\n  font-family: \"Pretendard\";\n  src: url(\"../../assets/fonts/PretendardVariable.woff2\") format(\"woff2-variations\");\n}\n* {\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  --primary: var(--p);\n  --primary-50-per: var(--p-50-per);\n  --primary-50: var(--p-50);\n  --primary-20-per: var(--p-20-per);\n  --primary-20: var(--p-20);\n  --primary-10-per: var(--p-10-per);\n  --primary-10: var(--p-10);\n}\n\n[data-theme=blue] {\n  --p: #308acc;\n  --p-50-per: #308acc80;\n  --p-50: #97c4e5;\n  --p-20-per: #308acc33;\n  --p-20: #d6e8f5;\n  --p-10-per: #308acc1a;\n  --p-10: #eaf3fa;\n  --p-05-per: #308acc0d;\n  --p-05: #f5fafd;\n}\n\n[data-theme=green] {\n  --p: #096412;\n  --p-50-per: #09641280;\n  --p-50: #84b188;\n  --p-20-per: #09641233;\n  --p-20: #cee0d0;\n  --p-10-per: #0964121a;\n  --p-10: #e6f0e7;\n  --p-05-per: #0964120d;\n  --p-05: #f3f7f3;\n}\n\n[data-theme=navy] {\n  --p: #213a78;\n  --p-50-per: #213a787f;\n  --p-50: #909cbb;\n  --p-20-per: #213a7833;\n  --p-20: #d3d8e4;\n  --p-10-per: #213a781a;\n  --p-10: #e9ebf1;\n  --p-05-per: #213a780d;\n  --p-05: #f4f5f8;\n}";
+var css_248z$k = ".scrollbar, * {\n  scrollbar-track-color: #e4e4e4;\n  scrollbar-arrow-color: #e4e4e4;\n  scrollbar-3dlight-color: #e4e4e4;\n  scrollbar-highlight-color: #e4e4e4;\n  scrollbar-shadow-color: #e4e4e4;\n  scrollbar-face-color: #e4e4e4;\n}\n\n.scrollbar::-webkit-scrollbar, ::-webkit-scrollbar {\n  background: inherit;\n  width: 6px;\n  height: 6px;\n}\n\n.scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-track {\n  background: none;\n}\n\n.scrollbar::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {\n  background-color: #e4e4e4;\n  border-radius: 16px;\n}\n\n.scrollbar::-webkit-scrollbar-button, ::-webkit-scrollbar-button {\n  display: none;\n}\n\n@font-face {\n  font-family: \"Pretendard\";\n  src: url(\"../../assets/fonts/PretendardVariable.woff2\") format(\"woff2-variations\");\n}\n* {\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  --primary: var(--p);\n  --primary-50-per: var(--p-50-per);\n  --primary-50: var(--p-50);\n  --primary-20-per: var(--p-20-per);\n  --primary-20: var(--p-20);\n  --primary-10-per: var(--p-10-per);\n  --primary-10: var(--p-10);\n  --primary-05-per: var(--p-05-per);\n  --primary-05: var(--p-05);\n}\n\n[data-theme=blue] {\n  --p: #308acc;\n  --p-50-per: #308acc80;\n  --p-50: #97c4e5;\n  --p-20-per: #308acc33;\n  --p-20: #d6e8f5;\n  --p-10-per: #308acc1a;\n  --p-10: #eaf3fa;\n  --p-05-per: #308acc0d;\n  --p-05: #f5fafd;\n}\n\n[data-theme=green] {\n  --p: #096412;\n  --p-50-per: #09641280;\n  --p-50: #84b188;\n  --p-20-per: #09641233;\n  --p-20: #cee0d0;\n  --p-10-per: #0964121a;\n  --p-10: #e6f0e7;\n  --p-05-per: #0964120d;\n  --p-05: #f3f7f3;\n}\n\n[data-theme=navy] {\n  --p: #213a78;\n  --p-50-per: #213a787f;\n  --p-50: #909cbb;\n  --p-20-per: #213a7833;\n  --p-20: #d3d8e4;\n  --p-10-per: #213a781a;\n  --p-10: #e9ebf1;\n  --p-05-per: #213a780d;\n  --p-05: #f4f5f8;\n}";
 styleInject(css_248z$k);
 
 function StyleProvider(_a) {
@@ -6100,7 +6100,7 @@ function Icon(_a) {
   }));
 }
 
-var css_248z$j = ".size-small {\n  padding: 5px 16px;\n  border-radius: 4px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n}\n\n.size-normal {\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n}\n\n.size-large {\n  padding: 10px 16px;\n  border-radius: 6px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n}\n\n.maru-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  border: 0;\n  cursor: pointer;\n  gap: 6px;\n}\n.maru-button:focus-within {\n  outline: none;\n}\n.maru-button:disabled {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-button-primary-default {\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-primary-default:hover {\n  box-shadow: 0 0 6px var(--p);\n}\n.maru-button-primary-default:focus-visible, .maru-button-primary-default:active {\n  box-shadow: none;\n  background-color: var(--p-10);\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-default-light {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-primary-default-light:hover {\n  box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-default-light:focus-visible, .maru-button-primary-default-light:active {\n  box-shadow: none;\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-primary-outline {\n  background-color: white;\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  box-shadow: 0 0 6px var(--p-20);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n  box-shadow: none;\n  background-color: var(--p-20);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  box-shadow: 0 0 0 1px var(--p) inset, 0 0 6px var(--p);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n  box-shadow: none;\n  background-color: var(--p-10);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-text {\n  background-color: transparent;\n  color: var(--p);\n}\n.maru-button-primary-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n  background-color: var(--p-10);\n}\n.maru-button-primary-color-on-focus:focus-visible, .maru-button-primary-color-on-focus:active {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-secondary-default {\n  background-color: #8c8c8c;\n  color: white;\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n  box-shadow: 0 0 6px #8c8c8c;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-color: #fafafa;\n  color: #8c8c8c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-default:hover {\n  box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-default-light {\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default-light:hover {\n  box-shadow: 0 0 6px;\n}\n.maru-button-secondary-default-light:focus-visible, .maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-color: #8c8c8c;\n  color: white;\n}\n.maru-button-secondary-outline {\n  background-color: white;\n  color: #8c8c8c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-outline:hover {\n  box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-outline:focus-visible, .maru-button-secondary-outline:active {\n  box-shadow: none;\n  background-color: #e4e4e4;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-text {\n  background-color: transparent;\n  color: #8c8c8c;\n}\n.maru-button-secondary-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n  background-color: #fafafa;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-button-positive-default {\n  background-color: #32a483;\n  color: white;\n}\n.maru-button-positive-default:hover {\n  box-shadow: 0 0 6px #32a483;\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n  box-shadow: none;\n  background-color: #eaf6f3;\n  color: #32a483;\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-default-light {\n  background-color: #eaf6f3;\n  color: #32a483;\n}\n.maru-button-positive-default-light:hover {\n  box-shadow: 0 0 6px rgba(50, 164, 131, 0.5019607843);\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n  box-shadow: none;\n  background-color: #32a483;\n  color: white;\n}\n.maru-button-positive-outline {\n  background-color: white;\n  color: #32a483;\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-outline:hover {\n  box-shadow: 0 0 6px #d6ede6;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n  box-shadow: none;\n  background-color: #d6ede6;\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-text {\n  background-color: transparent;\n  color: #32a483;\n}\n.maru-button-positive-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n  background-color: #eaf6f3;\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n  background-color: #eaf6f3;\n  color: #32a483;\n}\n.maru-button-warning-default {\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-default:hover {\n  box-shadow: 0 0 6px #ffb020;\n}\n.maru-button-warning-default:focus-visible, .maru-button-warning-default:active {\n  box-shadow: none;\n  background-color: #ffefd2;\n  color: #ffb020;\n}\n.maru-button-warning-default-light {\n  background-color: #fff7e9;\n  color: #ffb020;\n}\n.maru-button-warning-default-light:hover {\n  box-shadow: 0 0 6px rgba(255, 177, 32, 0.5019607843);\n}\n.maru-button-warning-default-light:focus-visible, .maru-button-warning-default-light:active {\n  box-shadow: none;\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-outline {\n  background-color: white;\n  color: #ffb020;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-outline:hover {\n  box-shadow: 0 0 6px #ffefd2;\n}\n.maru-button-warning-outline:focus-visible, .maru-button-warning-outline:active {\n  box-shadow: none;\n  background-color: #ffefd2;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-text {\n  background-color: transparent;\n  color: #ffb020;\n}\n.maru-button-warning-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n  background-color: #fff7e9;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n  background-color: #fff7e9;\n  color: #ffb020;\n}\n.maru-button-danger-default {\n  background-color: #e53e3e;\n  color: white;\n}\n.maru-button-danger-default:hover {\n  box-shadow: 0 0 6px #e53e3e;\n}\n.maru-button-danger-default:focus-visible, .maru-button-danger-default:active {\n  box-shadow: none;\n  background-color: #fcecec;\n  color: #e53e3e;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-default-light {\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-button-danger-default-light:hover {\n  box-shadow: 0 0 6px rgba(229, 62, 62, 0.5019607843);\n}\n.maru-button-danger-default-light:focus-visible, .maru-button-danger-default-light:active {\n  box-shadow: none;\n  background-color: #e53e3e;\n  color: white;\n}\n.maru-button-danger-outline {\n  background-color: white;\n  color: #e53e3e;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-outline:hover {\n  box-shadow: 0 0 6px #fad8d8;\n}\n.maru-button-danger-outline:focus-visible, .maru-button-danger-outline:active {\n  box-shadow: none;\n  background-color: #fad8d8;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-text {\n  background-color: transparent;\n  color: #e53e3e;\n}\n.maru-button-danger-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n  background-color: #fcecec;\n}\n.maru-button-danger-color-on-focus:focus-visible, .maru-button-danger-color-on-focus:active {\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-button-success-default {\n  background-color: #308acc;\n  color: white;\n}\n.maru-button-success-default:hover {\n  box-shadow: 0 0 6px #308acc;\n}\n.maru-button-success-default:focus-visible, .maru-button-success-default:active {\n  box-shadow: none;\n  background-color: #eaf3fa;\n  color: #308acc;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-default-light {\n  background-color: #eaf3fa;\n  color: #308acc;\n}\n.maru-button-success-default-light:hover {\n  box-shadow: 0 0 6px rgba(48, 138, 204, 0.5019607843);\n}\n.maru-button-success-default-light:focus-visible, .maru-button-success-default-light:active {\n  box-shadow: none;\n  background-color: #308acc;\n  color: white;\n}\n.maru-button-success-outline {\n  background-color: white;\n  color: #308acc;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-outline:hover {\n  box-shadow: 0 0 6px #d6e8f5;\n}\n.maru-button-success-outline:focus-visible, .maru-button-success-outline:active {\n  box-shadow: none;\n  background-color: #d6e8f5;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-text {\n  background-color: transparent;\n  color: #308acc;\n}\n.maru-button-success-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n  background-color: #eaf3fa;\n}\n.maru-button-success-color-on-focus:focus-visible, .maru-button-success-color-on-focus:active {\n  background-color: #eaf3fa;\n  color: #308acc;\n}\n\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n  padding: 5px 12px;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:hover,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:hover {\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:focus-visible, .maru-button-with-start-icon.size-small.maru-button-secondary-outline:active,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:focus-visible,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:active {\n  background-color: var(--p-10);\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n  padding: 8px 12px;\n}\n\n.maru-button-only-icon.size-normal {\n  padding: 0;\n  justify-content: center;\n  background-color: transparent;\n}\n.maru-button-only-icon.size-normal:hover, .maru-button-only-icon.size-normal:focus-visible, .maru-button-only-icon.size-normal:active {\n  box-shadow: none;\n  background-color: transparent;\n}";
+var css_248z$j = ".size-small {\n  padding: 5px 16px;\n  border-radius: 4px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n}\n\n.size-normal {\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n}\n\n.size-large {\n  padding: 10px 16px;\n  border-radius: 6px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n}\n\n.maru-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  border: 0;\n  cursor: pointer;\n  gap: 6px;\n}\n.maru-button:focus-within {\n  outline: none;\n}\n.maru-button:disabled {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-button-primary-default {\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-primary-default:hover {\n  box-shadow: 0 0 6px var(--p);\n}\n.maru-button-primary-default:focus-visible, .maru-button-primary-default:active {\n  box-shadow: none;\n  background-color: var(--p-10);\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-default-light {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-primary-default-light:hover {\n  box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-default-light:focus-visible, .maru-button-primary-default-light:active {\n  box-shadow: none;\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-primary-outline {\n  background-color: white;\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  box-shadow: 0 0 6px var(--p-20);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n  box-shadow: none;\n  background-color: var(--p-20);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  box-shadow: 0 0 0 1px var(--p) inset, 0 0 6px var(--p);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n  box-shadow: none;\n  background-color: var(--p-10);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-text {\n  background-color: transparent;\n  color: var(--p);\n}\n.maru-button-primary-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n  background-color: var(--p-10);\n}\n.maru-button-primary-color-on-focus:focus-visible, .maru-button-primary-color-on-focus:active {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-secondary-default {\n  background-color: #8c8c8c;\n  color: white;\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n  box-shadow: 0 0 6px #8c8c8c;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-color: #fafafa;\n  color: #8c8c8c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-default:hover {\n  box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-default-light {\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default-light:hover {\n  box-shadow: 0 0 6px;\n}\n.maru-button-secondary-default-light:focus-visible, .maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-color: #8c8c8c;\n  color: white;\n}\n.maru-button-secondary-outline {\n  background-color: white;\n  color: #8c8c8c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-outline:hover {\n  box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-outline:focus-visible, .maru-button-secondary-outline:active {\n  box-shadow: none;\n  background-color: #e4e4e4;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-text {\n  background-color: transparent;\n  color: #8c8c8c;\n}\n.maru-button-secondary-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n  background-color: #fafafa;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-button-positive-default {\n  background-color: #32a483;\n  color: white;\n}\n.maru-button-positive-default:hover {\n  box-shadow: 0 0 6px #32a483;\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n  box-shadow: none;\n  background-color: #eaf6f3;\n  color: #32a483;\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-default-light {\n  background-color: #eaf6f3;\n  color: #32a483;\n}\n.maru-button-positive-default-light:hover {\n  box-shadow: 0 0 6px rgba(50, 164, 131, 0.5019607843);\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n  box-shadow: none;\n  background-color: #32a483;\n  color: white;\n}\n.maru-button-positive-outline {\n  background-color: white;\n  color: #32a483;\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-outline:hover {\n  box-shadow: 0 0 6px #d6ede6;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n  box-shadow: none;\n  background-color: #d6ede6;\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-text {\n  background-color: transparent;\n  color: #32a483;\n}\n.maru-button-positive-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n  background-color: #eaf6f3;\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n  background-color: #eaf6f3;\n  color: #32a483;\n}\n.maru-button-warning-default {\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-default:hover {\n  box-shadow: 0 0 6px #ffb020;\n}\n.maru-button-warning-default:focus-visible, .maru-button-warning-default:active {\n  box-shadow: none;\n  background-color: #ffefd2;\n  color: #ffb020;\n}\n.maru-button-warning-default-light {\n  background-color: #fff7e9;\n  color: #ffb020;\n}\n.maru-button-warning-default-light:hover {\n  box-shadow: 0 0 6px rgba(255, 177, 32, 0.5019607843);\n}\n.maru-button-warning-default-light:focus-visible, .maru-button-warning-default-light:active {\n  box-shadow: none;\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-outline {\n  background-color: white;\n  color: #ffb020;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-outline:hover {\n  box-shadow: 0 0 6px #ffefd2;\n}\n.maru-button-warning-outline:focus-visible, .maru-button-warning-outline:active {\n  box-shadow: none;\n  background-color: #ffefd2;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-text {\n  background-color: transparent;\n  color: #ffb020;\n}\n.maru-button-warning-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n  background-color: #fff7e9;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n  background-color: #fff7e9;\n  color: #ffb020;\n}\n.maru-button-danger-default {\n  background-color: #e53e3e;\n  color: white;\n}\n.maru-button-danger-default:hover {\n  box-shadow: 0 0 6px #e53e3e;\n}\n.maru-button-danger-default:focus-visible, .maru-button-danger-default:active {\n  box-shadow: none;\n  background-color: #fcecec;\n  color: #e53e3e;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-default-light {\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-button-danger-default-light:hover {\n  box-shadow: 0 0 6px rgba(229, 62, 62, 0.5019607843);\n}\n.maru-button-danger-default-light:focus-visible, .maru-button-danger-default-light:active {\n  box-shadow: none;\n  background-color: #e53e3e;\n  color: white;\n}\n.maru-button-danger-outline {\n  background-color: white;\n  color: #e53e3e;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-outline:hover {\n  box-shadow: 0 0 6px #fad8d8;\n}\n.maru-button-danger-outline:focus-visible, .maru-button-danger-outline:active {\n  box-shadow: none;\n  background-color: #fad8d8;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-text {\n  background-color: transparent;\n  color: #e53e3e;\n}\n.maru-button-danger-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n  background-color: #fcecec;\n}\n.maru-button-danger-color-on-focus:focus-visible, .maru-button-danger-color-on-focus:active {\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-button-success-default {\n  background-color: #308acc;\n  color: white;\n}\n.maru-button-success-default:hover {\n  box-shadow: 0 0 6px #308acc;\n}\n.maru-button-success-default:focus-visible, .maru-button-success-default:active {\n  box-shadow: none;\n  background-color: #eaf3fa;\n  color: #308acc;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-default-light {\n  background-color: #eaf3fa;\n  color: #308acc;\n}\n.maru-button-success-default-light:hover {\n  box-shadow: 0 0 6px rgba(48, 138, 204, 0.5019607843);\n}\n.maru-button-success-default-light:focus-visible, .maru-button-success-default-light:active {\n  box-shadow: none;\n  background-color: #308acc;\n  color: white;\n}\n.maru-button-success-outline {\n  background-color: white;\n  color: #308acc;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-outline:hover {\n  box-shadow: 0 0 6px #d6e8f5;\n}\n.maru-button-success-outline:focus-visible, .maru-button-success-outline:active {\n  box-shadow: none;\n  background-color: #d6e8f5;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-text {\n  background-color: transparent;\n  color: #308acc;\n}\n.maru-button-success-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n  background-color: #eaf3fa;\n}\n.maru-button-success-color-on-focus:focus-visible, .maru-button-success-color-on-focus:active {\n  background-color: #eaf3fa;\n  color: #308acc;\n}\n\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n  padding: 5px 12px;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:hover,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:hover {\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:focus-visible, .maru-button-with-start-icon.size-small.maru-button-secondary-outline:active,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:focus-visible,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:active {\n  background-color: var(--p-10);\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n  padding: 8px 12px;\n}\n\n.maru-button-only-icon.size-normal {\n  padding: 0;\n  justify-content: center;\n  background-color: transparent;\n}\n.maru-button-only-icon.size-normal:hover, .maru-button-only-icon.size-normal:focus-visible, .maru-button-only-icon.size-normal:active {\n  box-shadow: none;\n  background-color: transparent;\n}";
 styleInject(css_248z$j);
 
 var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -6439,6 +6439,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
     } else if (type === 'date') {
       var regexNum = /[^0-9]/g;
       var onlyNum = value.replace(regexNum, ''); // 숫자가 아닌 경우 ''
+      onlyNum = onlyNum.length <= 8 ? onlyNum : onlyNum.slice(0, onlyNum.length - 1);
       var format = void 0;
       var regexDate = void 0;
       if (onlyNum.length <= 6) {
@@ -6454,6 +6455,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
     } else if (type === 'time') {
       var regexNum = /[^0-9]/g;
       var onlyNum = value.replace(regexNum, ''); // 숫자가 아닌 경우 ''
+      onlyNum = onlyNum.length <= 6 ? onlyNum : onlyNum.slice(0, onlyNum.length - 1);
       var format = void 0;
       var regexTime = void 0;
       if (onlyNum.length <= 4) {
@@ -26021,7 +26023,7 @@ function Dropdown(_a) {
   }));
 }
 
-var css_248z$5 = ".maru-modal-wrapper {\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background-color: rgba(92, 92, 92, 0.5019607843);\n  z-index: 6006;\n  display: block;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-modal-wrapper .maru-modal {\n  background-color: white;\n  border-radius: 12px;\n  box-shadow: 0px 5px 20px 0px #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xs {\n  width: 300px;\n  border-radius: 10px;\n  box-shadow: 0px 2px 8px 1px #8c8c8c;\n  padding: 32px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-s {\n  width: 400px;\n  padding: 32px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m {\n  width: 550px;\n  padding: 28px 36px 36px 36px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l {\n  width: 860px;\n  padding: 28px 36px 36px 36px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl {\n  width: 1200px;\n  padding: 30px 40px 40px 40px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div > h1 {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 16px;\n  letter-spacing: -0.64px;\n  font-weight: 600;\n  color: #5c5c5c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div .sub-title-wrapper {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 400;\n  color: #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-body {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-direction: row;\n  margin-top: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer button {\n  margin: 0 0 0 6px;\n}";
+var css_248z$5 = ".maru-modal-wrapper {\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background-color: rgba(92, 92, 92, 0.5019607843);\n  z-index: 6006;\n  display: block;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-modal-wrapper .maru-modal {\n  background-color: white;\n  box-shadow: 0px 5px 20px 0px #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xs {\n  width: 300px;\n  box-shadow: 0px 2px 8px 1px #8c8c8c;\n  padding: 32px;\n  border-radius: 10px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-s {\n  width: 400px;\n  padding: 32px;\n  border-radius: 10px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m {\n  width: 550px;\n  padding: 28px 36px 36px 36px;\n  border-radius: 12px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l {\n  width: 860px;\n  padding: 28px 36px 36px 36px;\n  border-radius: 12px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl {\n  width: 1200px;\n  padding: 30px 40px 40px 40px;\n  border-radius: 12px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div > h1 {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 16px;\n  letter-spacing: -0.64px;\n  font-weight: 600;\n  color: #5c5c5c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div .sub-title-wrapper {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 400;\n  color: #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-body {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-direction: row;\n  margin-top: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer button {\n  margin: 0 0 0 6px;\n}";
 styleInject(css_248z$5);
 
 function Modal(_a) {
@@ -26831,8 +26833,9 @@ function FilterPopover(_a) {
         pw = _a.width,
         ph = _a.height,
         pt = _a.top,
-        pr = _a.right;
-      popover.style.right = "".concat(pr - pw, "px");
+        pl = _a.left;
+      // 402: 팝오버's width
+      popover.style.left = "".concat(pl + (pw - 402), "px");
       if (ph + pt + popover.offsetHeight + 10 > document.body.offsetHeight) {
         popover.style.top = "".concat(pt - popover.offsetHeight - 4, "px");
       } else {
@@ -26949,7 +26952,7 @@ function Filter(_a) {
   }));
 }
 
-var css_248z$2 = ".maru-search-input .maru-input {\n  border: 1px solid #e4e4e4;\n  background-color: white;\n}\n.maru-search-input .maru-input:focus-visible, .maru-search-input .maru-input:focus-within {\n  background-color: white;\n}\n.maru-search-input .maru-input:hover {\n  background-color: white;\n}\n.maru-search-input .maru-input .maru-input-start-node {\n  margin-right: 8px;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button {\n  border: unset;\n  background-color: unset;\n  padding: unset;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button .maru-tooltip-wrapper {\n  padding: 6px 0;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button svg > path {\n  stroke: #bdbdbd;\n  fill: white;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button:hover svg > path {\n  stroke: #8c8c8c;\n  fill: #e4e4e4;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button.active {\n  visibility: hidden;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button.selected svg > path {\n  stroke: var(--p);\n  fill: var(--p-50);\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 6px;\n  box-shadow: 0px 0px 4px #e4e4e4;\n  background-color: white;\n  padding: 32px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li {\n  display: flex;\n  gap: 16px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li .filter-key {\n  width: 88px;\n  display: flex;\n  align-items: center;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li .filter-value {\n  width: 232px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > div {\n  margin-top: 24px;\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n}";
+var css_248z$2 = ".maru-search-input .maru-input {\n  border: 1px solid #e4e4e4;\n  background-color: white;\n}\n.maru-search-input .maru-input:focus-visible, .maru-search-input .maru-input:focus-within {\n  background-color: white;\n}\n.maru-search-input .maru-input:hover {\n  background-color: white;\n}\n.maru-search-input .maru-input .maru-input-start-node {\n  margin-right: 8px;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button {\n  border: unset;\n  background-color: unset;\n  padding: unset;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button .maru-tooltip-wrapper {\n  padding: 6px 0;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button svg > path {\n  stroke: #bdbdbd;\n  fill: white;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button:hover svg > path {\n  stroke: #8c8c8c;\n  fill: #e4e4e4;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button.active {\n  visibility: hidden;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button.selected svg > path {\n  stroke: var(--p);\n  fill: var(--p-50);\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 6px;\n  box-shadow: 0px 0px 4px #e4e4e4;\n  background-color: white;\n  padding: 32px;\n  border: 1px solid #e4e4e4;\n  width: 402px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li {\n  display: flex;\n  gap: 16px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li .filter-key {\n  width: 88px;\n  display: flex;\n  align-items: center;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li .filter-value {\n  width: 232px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > div {\n  margin-top: 24px;\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n}";
 styleInject(css_248z$2);
 
 function SearchInput(_a) {
@@ -27542,7 +27545,7 @@ function THead(_a) {
   }));
 }
 
-var css_248z$1 = "@-webkit-keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes blink {\n  0% {\n    opacity: 0.6;\n  }\n  20% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n@keyframes blink {\n  0% {\n    opacity: 0.6;\n  }\n  20% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n@-webkit-keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.maru-table-wrapper {\n  width: 100%;\n  background-color: white;\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n  border-radius: 6px;\n  overflow-x: auto;\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n  width: 100%;\n}\n.maru-table-wrapper tr {\n  height: 54px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n  text-align: start;\n  vertical-align: middle;\n  padding: 16.5px 15px;\n  word-break: break-word;\n  color: #5c5c5c;\n}\n.maru-table-wrapper th:first-of-type,\n.maru-table-wrapper td:first-of-type {\n  padding: 16.5px 25px;\n}\n.maru-table-wrapper .checkbox-td {\n  padding: 18px 15px 18px 25px !important;\n}\n.maru-table-wrapper .radio-td {\n  padding: 11px 15px !important;\n}\n.maru-table-wrapper .maru-table-header tr {\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-table-wrapper .maru-table-header tr th {\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.maru-table-wrapper .maru-table-header .filter-th {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 16.5px;\n}\n.maru-table-wrapper .maru-table-header .filter-th.toggle-on .filter-box {\n  width: 100%;\n  height: 33px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on {\n  padding: 18px 15px 16px 15px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on .filter-buttons-wrapper {\n  height: 67px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper .reset-button {\n  margin-bottom: 8px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n  padding: unset;\n  margin: unset;\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: 600;\n}\n.maru-table-wrapper .maru-table-header .sort-icon-wrapper-th {\n  display: flex;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n  border-bottom: 1px solid #fafafa;\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .clickable-row:hover,\n.maru-table-wrapper .maru-table-body .selected-row {\n  background-color: var(--p-05);\n}\n.maru-table-wrapper .maru-table-body .highlight-row {\n  background-color: var(--p-20);\n}\n.maru-table-wrapper .maru-table-body td {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n  border-bottom-left-radius: 6px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n  border-bottom-right-radius: 6px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n  cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body-kebab-td .maru-table-body-kebab-wrapper {\n  display: flex;\n  flex-direction: column;\n}\n.maru-table-wrapper .maru-table-body-bin-button-td .maru-table-body-bin-button-wrapper {\n  display: flex;\n  flex-direction: column;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n  margin: unset;\n  padding: unset;\n  height: auto;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n  width: 100%;\n  vertical-align: middle;\n  text-align: center;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n  margin-top: 20px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-empty-tr:hover {\n  background-color: inherit !important;\n}\n.maru-table-wrapper .maru-table-body-empty-tr .loading-wrapper {\n  -webkit-animation: blink 1s infinite;\n  animation: blink 1s infinite;\n}";
+var css_248z$1 = "@-webkit-keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes blink {\n  0% {\n    opacity: 0.6;\n  }\n  20% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n@keyframes blink {\n  0% {\n    opacity: 0.6;\n  }\n  20% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n@-webkit-keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.maru-table-wrapper {\n  width: 100%;\n  background-color: white;\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n  border-radius: 6px;\n  overflow-x: auto;\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n  width: 100%;\n}\n.maru-table-wrapper tr {\n  height: 54px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n  text-align: start;\n  vertical-align: middle;\n  padding: 16.5px 15px;\n  word-break: break-word;\n  color: #5c5c5c;\n}\n.maru-table-wrapper th:first-of-type,\n.maru-table-wrapper td:first-of-type {\n  padding: 16.5px 25px;\n}\n.maru-table-wrapper .checkbox-td {\n  padding: 18px 15px 18px 25px !important;\n}\n.maru-table-wrapper .radio-td {\n  padding: 11px 15px !important;\n}\n.maru-table-wrapper .maru-table-header tr {\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-table-wrapper .maru-table-header tr th {\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.maru-table-wrapper .maru-table-header .filter-th {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 16.5px;\n}\n.maru-table-wrapper .maru-table-header .filter-th.toggle-on .filter-box {\n  width: 100%;\n  height: 33px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on {\n  padding: 18px 15px 16px 15px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on .filter-buttons-wrapper {\n  height: 67px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper .reset-button {\n  margin-bottom: 8px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n  padding: unset;\n  margin: unset;\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: 600;\n}\n.maru-table-wrapper .maru-table-header .sort-icon-wrapper-th {\n  display: flex;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n  border-bottom: 1px solid #fafafa;\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .clickable-row:hover,\n.maru-table-wrapper .maru-table-body .selected-row {\n  background-color: var(--p-05);\n}\n.maru-table-wrapper .maru-table-body .highlight-row {\n  background-color: var(--p-20);\n}\n.maru-table-wrapper .maru-table-body td {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n  border-bottom-left-radius: 6px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n  border-bottom-right-radius: 6px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n  cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body-kebab-td .maru-table-body-kebab-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.maru-table-wrapper .maru-table-body-bin-button-td .maru-table-body-bin-button-wrapper {\n  display: flex;\n  flex-direction: column;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n  margin: unset;\n  padding: unset;\n  height: auto;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n  width: 100%;\n  vertical-align: middle;\n  text-align: center;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n  margin-top: 20px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-empty-tr:hover {\n  background-color: inherit !important;\n}\n.maru-table-wrapper .maru-table-body-empty-tr .loading-wrapper {\n  -webkit-animation: blink 1s infinite;\n  animation: blink 1s infinite;\n}";
 styleInject(css_248z$1);
 
 // eslint-disable-next-line import/prefer-default-export

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru_design2",
-  "version": "2.23.0",
+  "version": "2.23.2",
   "main": "./dist/index.js",
   "author": "zena-42maru",
   "license": "MIT",