maru_design2 2.19.0 → 2.19.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [2.19.1](https://github.com/42maru-ai/maru-design2/compare/v2.19.0...v2.19.1) (2024-12-12)
+
+
+### Bug Fixes
+
+* :bento: Icon - add DotsVertical02 [#395](https://github.com/42maru-ai/maru-design2/issues/395) ([98804e0](https://github.com/42maru-ai/maru-design2/commit/98804e0bff8042f9b6653d72220dcbcc619474f2))
+* :lipstick: Calendar - add letter-spacing ([4051b15](https://github.com/42maru-ai/maru-design2/commit/4051b15781f1fed0a6279dbc9bac620809588e88))
+* :lipstick: Calendar - footer button width ([12b6fcd](https://github.com/42maru-ai/maru-design2/commit/12b6fcdcef5f7c971f5fb269c26eaf9b15f17759))
+* :lipstick: Calendar - footer design [#396](https://github.com/42maru-ai/maru-design2/issues/396) ([d5c4d53](https://github.com/42maru-ai/maru-design2/commit/d5c4d53bdce42fa5c4c7704c38dbc7abdfba237a))
+
 ## [2.19.0](https://github.com/42maru-ai/maru-design2/compare/v2.18.1...v2.19.0) (2024-12-11)
 
 

package/dist/components/atoms/icon/iconmap.d.ts

@@ -143,6 +143,7 @@ export declare const ICONS: {
     readonly DotsGrid_s2420: "DotsGrid_s2420";
     readonly DotsGrid_s3220: "DotsGrid_s3220";
     readonly DotsVertical02_s1612: "DotsVertical02_s1612";
+    readonly DotsVertical02_s2010: "DotsVertical02_s2010";
     readonly DotsVertical_s1815: "DotsVertical_s1815";
     readonly DotsVertical_s2415: "DotsVertical_s2415";
     readonly Down_s1610: "Down_s1610";
@@ -263,6 +264,7 @@ export declare const ICONS: {
     readonly Settings02_s2415: "Settings02_s2415";
     readonly Settings02_s2420: "Settings02_s2420";
     readonly Share03_s1215: "Share03_s1215";
+    readonly Share03_s1413: "Share03_s1413";
     readonly Share03_s1613: "Share03_s1613";
     readonly SortDown_s0815: "SortDown_s0815";
     readonly SortOutline_s1415: "SortOutline_s1415";

package/dist/index.js

@@ -2196,6 +2196,18 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "DotsVertical02_s2010": {
+    "width": "20",
+    "height": "20",
+    "viewBox": "0 0 20 20",
+    "fill": "none",
+    "paths": [{
+      "d": "M12.5 16.25C12.1685 16.25 11.8505 16.1183 11.6161 15.8839C11.3817 15.6495 11.25 15.3315 11.25 15C11.25 14.6685 11.3817 14.3505 11.6161 14.1161C11.8505 13.8817 12.1685 13.75 12.5 13.75C12.8315 13.75 13.1495 13.8817 13.3839 14.1161C13.6183 14.3505 13.75 14.6685 13.75 15C13.75 15.3315 13.6183 15.6495 13.3839 15.8839C13.1495 16.1183 12.8315 16.25 12.5 16.25ZM12.5 11.25C12.1685 11.25 11.8505 11.1183 11.6161 10.8839C11.3817 10.6495 11.25 10.3315 11.25 10C11.25 9.66848 11.3817 9.35054 11.6161 9.11612C11.8505 8.8817 12.1685 8.75 12.5 8.75C12.8315 8.75 13.1495 8.8817 13.3839 9.11612C13.6183 9.35054 13.75 9.66848 13.75 10C13.75 10.3315 13.6183 10.6495 13.3839 10.8839C13.1495 11.1183 12.8315 11.25 12.5 11.25ZM7.5 16.25C7.16848 16.25 6.85054 16.1183 6.61612 15.8839C6.3817 15.6495 6.25 15.3315 6.25 15C6.25 14.6685 6.3817 14.3505 6.61612 14.1161C6.85054 13.8817 7.16848 13.75 7.5 13.75C7.83152 13.75 8.14946 13.8817 8.38388 14.1161C8.6183 14.3505 8.75 14.6685 8.75 15C8.75 15.3315 8.6183 15.6495 8.38388 15.8839C8.14946 16.1183 7.83152 16.25 7.5 16.25ZM13.75 5C13.75 5.33152 13.6183 5.64946 13.3839 5.88388C13.1495 6.1183 12.8315 6.25 12.5 6.25C12.1685 6.25 11.8505 6.1183 11.6161 5.88388C11.3817 5.64946 11.25 5.33152 11.25 5C11.25 4.66848 11.3817 4.35054 11.6161 4.11612C11.8505 3.8817 12.1685 3.75 12.5 3.75C12.8315 3.75 13.1495 3.8817 13.3839 4.11612C13.6183 4.35054 13.75 4.66848 13.75 5ZM8.75 10C8.75 10.3315 8.6183 10.6495 8.38388 10.8839C8.14946 11.1183 7.83152 11.25 7.5 11.25C7.16848 11.25 6.85054 11.1183 6.61612 10.8839C6.3817 10.6495 6.25 10.3315 6.25 10C6.25 9.66848 6.3817 9.35054 6.61612 9.11612C6.85054 8.8817 7.16848 8.75 7.5 8.75C7.83152 8.75 8.14946 8.8817 8.38388 9.11612C8.6183 9.35054 8.75 9.66848 8.75 10ZM7.5 6.25C7.16848 6.25 6.85054 6.1183 6.61612 5.88388C6.3817 5.64946 6.25 5.33152 6.25 5C6.25 4.66848 6.3817 4.35054 6.61612 4.11612C6.85054 3.8817 7.16848 3.75 7.5 3.75C7.83152 3.75 8.14946 3.8817 8.38388 4.11612C8.6183 4.35054 8.75 4.66848 8.75 5C8.75 5.33152 8.6183 5.64946 8.38388 5.88388C8.14946 6.1183 7.83152 6.25 7.5 6.25Z",
+      "fill": "#5C5C5C"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "DotsVertical_s1815": {
     "width": "18",
     "height": "18",
@@ -4281,6 +4293,21 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "Share03_s1413": {
+    "width": "14",
+    "height": "14",
+    "viewBox": "0 0 14 14",
+    "fill": "none",
+    "paths": [{
+      "d": "M12.25 5.25001L12.25 1.75001M12.25 1.75001H8.74999M12.25 1.75001L7 7M5.83333 1.75H4.55C3.56991 1.75 3.07986 1.75 2.70552 1.94074C2.37623 2.10852 2.10852 2.37623 1.94074 2.70552C1.75 3.07986 1.75 3.56991 1.75 4.55V9.45C1.75 10.4301 1.75 10.9201 1.94074 11.2945C2.10852 11.6238 2.37623 11.8915 2.70552 12.0593C3.07986 12.25 3.56991 12.25 4.55 12.25H9.45C10.4301 12.25 10.9201 12.25 11.2945 12.0593C11.6238 11.8915 11.8915 11.6238 12.0593 11.2945C12.25 10.9201 12.25 10.4301 12.25 9.45V8.16667",
+      "stroke": "#5C5C5C",
+      "strokeWidth": "1.3",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "Share03_s1613": {
     "width": "16",
     "height": "16",
@@ -5101,6 +5128,7 @@ var ICONS = {
   "DotsGrid_s2420": "DotsGrid_s2420",
   "DotsGrid_s3220": "DotsGrid_s3220",
   "DotsVertical02_s1612": "DotsVertical02_s1612",
+  "DotsVertical02_s2010": "DotsVertical02_s2010",
   "DotsVertical_s1815": "DotsVertical_s1815",
   "DotsVertical_s2415": "DotsVertical_s2415",
   "Down_s1610": "Down_s1610",
@@ -5221,6 +5249,7 @@ var ICONS = {
   "Settings02_s2415": "Settings02_s2415",
   "Settings02_s2420": "Settings02_s2420",
   "Share03_s1215": "Share03_s1215",
+  "Share03_s1413": "Share03_s1413",
   "Share03_s1613": "Share03_s1613",
   "SortDown_s0815": "SortDown_s0815",
   "SortOutline_s1415": "SortOutline_s1415",
@@ -24495,7 +24524,8 @@ function DatePickerHeader(_a) {
 var css_248z$7 = "@charset \"UTF-8\";\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {\n  border-color: #ccc;\n  border-style: solid;\n  border-width: 3px 3px 0 0;\n  content: \"\";\n  display: block;\n  height: 9px;\n  position: absolute;\n  top: 6px;\n  width: 9px;\n}\n.react-datepicker-wrapper {\n  display: inline-block;\n  padding: 0;\n  border: 0;\n}\n\n.react-datepicker {\n  font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n  font-size: 0.8rem;\n  background-color: #fff;\n  color: #000;\n  border: 1px solid #aeaeae;\n  border-radius: 0.3rem;\n  display: inline-block;\n  position: relative;\n  line-height: initial;\n}\n\n.react-datepicker--time-only .react-datepicker__time-container {\n  border-left: 0;\n}\n.react-datepicker--time-only .react-datepicker__time,\n.react-datepicker--time-only .react-datepicker__time-box {\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker-popper {\n  z-index: 1;\n  line-height: 0;\n}\n.react-datepicker-popper .react-datepicker__triangle {\n  stroke: #aeaeae;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n  fill: #f0f0f0;\n  color: #f0f0f0;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n  fill: #fff;\n  color: #fff;\n}\n\n.react-datepicker__header {\n  text-align: center;\n  background-color: #f0f0f0;\n  border-bottom: 1px solid #aeaeae;\n  border-top-left-radius: 0.3rem;\n  padding: 8px 0;\n  position: relative;\n}\n.react-datepicker__header--time {\n  padding-bottom: 8px;\n  padding-left: 5px;\n  padding-right: 5px;\n}\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n  border-top-left-radius: 0;\n}\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n  border-top-right-radius: 0.3rem;\n}\n\n.react-datepicker__year-dropdown-container--select,\n.react-datepicker__month-dropdown-container--select,\n.react-datepicker__month-year-dropdown-container--select,\n.react-datepicker__year-dropdown-container--scroll,\n.react-datepicker__month-dropdown-container--scroll,\n.react-datepicker__month-year-dropdown-container--scroll {\n  display: inline-block;\n  margin: 0 15px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header,\n.react-datepicker-year-header {\n  margin-top: 0;\n  color: #000;\n  font-weight: bold;\n  font-size: 0.944rem;\n}\n\n.react-datepicker-time__header {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.react-datepicker__navigation {\n  align-items: center;\n  background: none;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  cursor: pointer;\n  position: absolute;\n  top: 2px;\n  padding: 0;\n  border: none;\n  z-index: 1;\n  height: 32px;\n  width: 32px;\n  text-indent: -999em;\n  overflow: hidden;\n}\n.react-datepicker__navigation--previous {\n  left: 2px;\n}\n.react-datepicker__navigation--next {\n  right: 2px;\n}\n.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n  right: 85px;\n}\n.react-datepicker__navigation--years {\n  position: relative;\n  top: 0;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.react-datepicker__navigation--years-previous {\n  top: 4px;\n}\n.react-datepicker__navigation--years-upcoming {\n  top: -4px;\n}\n.react-datepicker__navigation:hover *::before {\n  border-color: #a6a6a6;\n}\n\n.react-datepicker__navigation-icon {\n  position: relative;\n  top: -1px;\n  font-size: 20px;\n  width: 0;\n}\n.react-datepicker__navigation-icon--next {\n  left: -2px;\n}\n.react-datepicker__navigation-icon--next::before {\n  transform: rotate(45deg);\n  left: -7px;\n}\n.react-datepicker__navigation-icon--previous {\n  right: -2px;\n}\n.react-datepicker__navigation-icon--previous::before {\n  transform: rotate(225deg);\n  right: -7px;\n}\n\n.react-datepicker__month-container {\n  float: left;\n}\n\n.react-datepicker__year {\n  margin: 0.4rem;\n  text-align: center;\n}\n.react-datepicker__year-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 180px;\n}\n.react-datepicker__year .react-datepicker__year-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n\n.react-datepicker__month {\n  margin: 0.4rem;\n  text-align: center;\n}\n.react-datepicker__month .react-datepicker__month-text,\n.react-datepicker__month .react-datepicker__quarter-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n\n.react-datepicker__input-time-container {\n  clear: both;\n  width: 100%;\n  float: left;\n  margin: 5px 0 10px 15px;\n  text-align: left;\n}\n.react-datepicker__input-time-container .react-datepicker-time__caption {\n  display: inline-block;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container {\n  display: inline-block;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n  display: inline-block;\n  margin-left: 10px;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n  width: auto;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {\n  -moz-appearance: textfield;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n  margin-left: 5px;\n  display: inline-block;\n}\n\n.react-datepicker__time-container {\n  float: right;\n  border-left: 1px solid #aeaeae;\n  width: 85px;\n}\n.react-datepicker__time-container--with-today-button {\n  display: inline;\n  border: 1px solid #aeaeae;\n  border-radius: 0.3rem;\n  position: absolute;\n  right: -87px;\n  top: 0;\n}\n.react-datepicker__time-container .react-datepicker__time {\n  position: relative;\n  background: white;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n  width: 85px;\n  overflow-x: hidden;\n  margin: 0 auto;\n  text-align: center;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n  list-style: none;\n  margin: 0;\n  height: calc(195px + 1.7rem / 2);\n  overflow-y: scroll;\n  padding-right: 0;\n  padding-left: 0;\n  width: 100%;\n  box-sizing: content-box;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n  height: 30px;\n  padding: 5px 10px;\n  white-space: nowrap;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n  cursor: pointer;\n  background-color: #f0f0f0;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n  background-color: #216ba5;\n  color: white;\n  font-weight: bold;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n  background-color: #216ba5;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n  color: #ccc;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n  cursor: default;\n  background-color: transparent;\n}\n\n.react-datepicker__week-number {\n  color: #ccc;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable {\n  cursor: pointer;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,\n.react-datepicker__week-number--keyboard-selected):hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n.react-datepicker__week-number--selected {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #fff;\n}\n.react-datepicker__week-number--selected:hover {\n  background-color: #1d5d90;\n}\n.react-datepicker__week-number--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: #2a87d0;\n  color: #fff;\n}\n.react-datepicker__week-number--keyboard-selected:hover {\n  background-color: #1d5d90;\n}\n\n.react-datepicker__day-names {\n  white-space: nowrap;\n  margin-bottom: -8px;\n}\n\n.react-datepicker__week {\n  white-space: nowrap;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n  color: #000;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n\n.react-datepicker__day,\n.react-datepicker__month-text,\n.react-datepicker__quarter-text,\n.react-datepicker__year-text {\n  cursor: pointer;\n}\n.react-datepicker__day:hover,\n.react-datepicker__month-text:hover,\n.react-datepicker__quarter-text:hover,\n.react-datepicker__year-text:hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n.react-datepicker__day--today,\n.react-datepicker__month-text--today,\n.react-datepicker__quarter-text--today,\n.react-datepicker__year-text--today {\n  font-weight: bold;\n}\n.react-datepicker__day--highlighted,\n.react-datepicker__month-text--highlighted,\n.react-datepicker__quarter-text--highlighted,\n.react-datepicker__year-text--highlighted {\n  border-radius: 0.3rem;\n  background-color: #3dcc4a;\n  color: #fff;\n}\n.react-datepicker__day--highlighted:hover,\n.react-datepicker__month-text--highlighted:hover,\n.react-datepicker__quarter-text--highlighted:hover,\n.react-datepicker__year-text--highlighted:hover {\n  background-color: #32be3f;\n}\n.react-datepicker__day--highlighted-custom-1,\n.react-datepicker__month-text--highlighted-custom-1,\n.react-datepicker__quarter-text--highlighted-custom-1,\n.react-datepicker__year-text--highlighted-custom-1 {\n  color: magenta;\n}\n.react-datepicker__day--highlighted-custom-2,\n.react-datepicker__month-text--highlighted-custom-2,\n.react-datepicker__quarter-text--highlighted-custom-2,\n.react-datepicker__year-text--highlighted-custom-2 {\n  color: green;\n}\n.react-datepicker__day--holidays,\n.react-datepicker__month-text--holidays,\n.react-datepicker__quarter-text--holidays,\n.react-datepicker__year-text--holidays {\n  position: relative;\n  border-radius: 0.3rem;\n  background-color: #ff6803;\n  color: #fff;\n}\n.react-datepicker__day--holidays .overlay,\n.react-datepicker__month-text--holidays .overlay,\n.react-datepicker__quarter-text--holidays .overlay,\n.react-datepicker__year-text--holidays .overlay {\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #fff;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.react-datepicker__day--holidays:hover,\n.react-datepicker__month-text--holidays:hover,\n.react-datepicker__quarter-text--holidays:hover,\n.react-datepicker__year-text--holidays:hover {\n  background-color: #cf5300;\n}\n.react-datepicker__day--holidays:hover .overlay,\n.react-datepicker__month-text--holidays:hover .overlay,\n.react-datepicker__quarter-text--holidays:hover .overlay,\n.react-datepicker__year-text--holidays:hover .overlay {\n  visibility: visible;\n  opacity: 1;\n}\n.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,\n.react-datepicker__month-text--selected,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--selected,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--selected,\n.react-datepicker__year-text--in-selecting-range,\n.react-datepicker__year-text--in-range {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #fff;\n}\n.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,\n.react-datepicker__month-text--selected:hover,\n.react-datepicker__month-text--in-selecting-range:hover,\n.react-datepicker__month-text--in-range:hover,\n.react-datepicker__quarter-text--selected:hover,\n.react-datepicker__quarter-text--in-selecting-range:hover,\n.react-datepicker__quarter-text--in-range:hover,\n.react-datepicker__year-text--selected:hover,\n.react-datepicker__year-text--in-selecting-range:hover,\n.react-datepicker__year-text--in-range:hover {\n  background-color: #1d5d90;\n}\n.react-datepicker__day--keyboard-selected,\n.react-datepicker__month-text--keyboard-selected,\n.react-datepicker__quarter-text--keyboard-selected,\n.react-datepicker__year-text--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: #bad9f1;\n  color: rgb(0, 0, 0);\n}\n.react-datepicker__day--keyboard-selected:hover,\n.react-datepicker__month-text--keyboard-selected:hover,\n.react-datepicker__quarter-text--keyboard-selected:hover,\n.react-datepicker__year-text--keyboard-selected:hover {\n  background-color: #1d5d90;\n}\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range) {\n  background-color: rgba(33, 107, 165, 0.5);\n}\n.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range) {\n  background-color: #f0f0f0;\n  color: #000;\n}\n.react-datepicker__day--disabled,\n.react-datepicker__month-text--disabled,\n.react-datepicker__quarter-text--disabled,\n.react-datepicker__year-text--disabled {\n  cursor: default;\n  color: #ccc;\n}\n.react-datepicker__day--disabled:hover,\n.react-datepicker__month-text--disabled:hover,\n.react-datepicker__quarter-text--disabled:hover,\n.react-datepicker__year-text--disabled:hover {\n  background-color: transparent;\n}\n.react-datepicker__day--disabled .overlay,\n.react-datepicker__month-text--disabled .overlay,\n.react-datepicker__quarter-text--disabled .overlay,\n.react-datepicker__year-text--disabled .overlay {\n  position: absolute;\n  bottom: 70%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #fff;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n\n.react-datepicker__input-container {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n.react-datepicker__input-container .react-datepicker__calendar-icon {\n  position: absolute;\n  padding: 0.5rem;\n  box-sizing: content-box;\n}\n\n.react-datepicker__view-calendar-icon input {\n  padding: 6px 10px 5px 25px;\n}\n\n.react-datepicker__year-read-view,\n.react-datepicker__month-read-view,\n.react-datepicker__month-year-read-view {\n  border: 1px solid transparent;\n  border-radius: 0.3rem;\n  position: relative;\n}\n.react-datepicker__year-read-view:hover,\n.react-datepicker__month-read-view:hover,\n.react-datepicker__month-year-read-view:hover {\n  cursor: pointer;\n}\n.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n  border-top-color: #b3b3b3;\n}\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view--down-arrow {\n  transform: rotate(135deg);\n  right: -16px;\n  top: 0;\n}\n\n.react-datepicker__year-dropdown,\n.react-datepicker__month-dropdown,\n.react-datepicker__month-year-dropdown {\n  background-color: #f0f0f0;\n  position: absolute;\n  width: 50%;\n  left: 25%;\n  top: 30px;\n  z-index: 1;\n  text-align: center;\n  border-radius: 0.3rem;\n  border: 1px solid #aeaeae;\n}\n.react-datepicker__year-dropdown:hover,\n.react-datepicker__month-dropdown:hover,\n.react-datepicker__month-year-dropdown:hover {\n  cursor: pointer;\n}\n.react-datepicker__year-dropdown--scrollable,\n.react-datepicker__month-dropdown--scrollable,\n.react-datepicker__month-year-dropdown--scrollable {\n  height: 150px;\n  overflow-y: scroll;\n}\n\n.react-datepicker__year-option,\n.react-datepicker__month-option,\n.react-datepicker__month-year-option {\n  line-height: 20px;\n  width: 100%;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.react-datepicker__year-option:first-of-type,\n.react-datepicker__month-option:first-of-type,\n.react-datepicker__month-year-option:first-of-type {\n  border-top-left-radius: 0.3rem;\n  border-top-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:last-of-type,\n.react-datepicker__month-option:last-of-type,\n.react-datepicker__month-year-option:last-of-type {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:hover,\n.react-datepicker__month-option:hover,\n.react-datepicker__month-year-option:hover {\n  background-color: #ccc;\n}\n.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n  border-bottom-color: #b3b3b3;\n}\n.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n  border-top-color: #b3b3b3;\n}\n.react-datepicker__year-option--selected,\n.react-datepicker__month-option--selected,\n.react-datepicker__month-year-option--selected {\n  position: absolute;\n  left: 15px;\n}\n\n.react-datepicker__close-icon {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  outline: 0;\n  padding: 0 6px 0 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: table-cell;\n  vertical-align: middle;\n}\n.react-datepicker__close-icon::after {\n  cursor: pointer;\n  background-color: #216ba5;\n  color: #fff;\n  border-radius: 50%;\n  height: 16px;\n  width: 16px;\n  padding: 2px;\n  font-size: 12px;\n  line-height: 1;\n  text-align: center;\n  display: table-cell;\n  vertical-align: middle;\n  content: \"×\";\n}\n.react-datepicker__close-icon--disabled {\n  cursor: default;\n}\n.react-datepicker__close-icon--disabled::after {\n  cursor: default;\n  background-color: #ccc;\n}\n\n.react-datepicker__today-button {\n  background: #f0f0f0;\n  border-top: 1px solid #aeaeae;\n  cursor: pointer;\n  text-align: center;\n  font-weight: bold;\n  padding: 5px 0;\n  clear: left;\n}\n\n.react-datepicker__portal {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.8);\n  left: 0;\n  top: 0;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  z-index: 2147483647;\n}\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n  width: 3rem;\n  line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n  .react-datepicker__portal .react-datepicker__day-name,\n  .react-datepicker__portal .react-datepicker__day,\n  .react-datepicker__portal .react-datepicker__time-name {\n    width: 2rem;\n    line-height: 2rem;\n  }\n}\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n  font-size: 1.44rem;\n}\n\n.react-datepicker__children-container {\n  width: 13.8rem;\n  margin: 0.4rem;\n  padding-right: 0.2rem;\n  padding-left: 0.2rem;\n  height: auto;\n}\n\n.react-datepicker__aria-live {\n  position: absolute;\n  clip-path: circle(0);\n  border: 0;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  width: 1px;\n  white-space: nowrap;\n}\n\n.react-datepicker__calendar-icon {\n  width: 1em;\n  height: 1em;\n  vertical-align: -0.125em;\n}\n";
 styleInject(css_248z$7);
 
-var DATE_FORMAT = 'yyyy.MM.dd';
+var SEP = '-'; // 구분자
+var DATE_FORMAT = 'yyyy-MM-dd';
 var LAST_DAYS = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 function DatePickerWrapper(_a) {
   var minStartDate = _a.minStartDate,
@@ -24528,23 +24558,23 @@ function DatePickerWrapper(_a) {
     var selectionStart = target.selectionStart,
       selectionEnd = target.selectionEnd;
     var value = target.value;
-    var valueExceptDot = value.replace(/\./g, '').slice(0, 8);
-    if (selectionStart && selectionEnd && value[selectionStart] === '.') {
+    var valueExceptSep = value.replace(/-/g, '').slice(0, 8);
+    if (selectionStart && selectionEnd && value[selectionStart] === SEP) {
       selectionStart += 1;
       selectionEnd += 1;
     }
-    var year = valueExceptDot.slice(0, 4);
-    var month = valueExceptDot.slice(4, 6);
-    var day = valueExceptDot.slice(6, 8);
+    var year = valueExceptSep.slice(0, 4);
+    var month = valueExceptSep.slice(4, 6);
+    var day = valueExceptSep.slice(6, 8);
     var newDateString = '';
     if (month) {
-      newDateString = "".concat(year, ".").concat(month);
+      newDateString = "".concat(year).concat(SEP).concat(month);
       if (selectionStart && selectionEnd && selectionStart === value.length) {
         selectionStart += 1;
         selectionEnd += 1;
       }
       if (day) {
-        newDateString += ".".concat(day);
+        newDateString += "".concat(SEP).concat(day);
         if (selectionStart && selectionEnd && selectionStart === value.length) {
           selectionStart += 1;
           selectionEnd += 1;
@@ -24556,7 +24586,7 @@ function DatePickerWrapper(_a) {
     }
   };
   var validatedDate = function validatedDate(date) {
-    var _a = date.split('.').map(function (el) {
+    var _a = date.split(SEP).map(function (el) {
         return +el.replace(/[^0-9]/g, '0');
       }),
       year = _a[0],
@@ -24583,7 +24613,7 @@ function DatePickerWrapper(_a) {
         year = _a.year,
         month = _a.month,
         day = _a.day;
-      var newDate = new Date("".concat(year, ".").concat(month, ".").concat(day));
+      var newDate = new Date("".concat(year).concat(SEP).concat(month).concat(SEP).concat(day));
       if (target === 'start' && endDate && newDate > endDate) {
         newDate = endDate;
       } else if (target === 'end' && startDate && newDate < startDate) {
@@ -24709,6 +24739,7 @@ function DatePickerWrapper(_a) {
           hiddenClearButton: true
         })]
       }), jsx(Button, __assign({
+        className: "maru-calendar-footer-okay-button",
         onClick: handleSaveClick
       }, {
         children: saveButtonContent
@@ -24717,7 +24748,7 @@ function DatePickerWrapper(_a) {
   }));
 }
 
-var css_248z$6 = ".maru-calendar .datepicker-wrapper {\n  width: 300px;\n  padding: 20px;\n  border-radius: 6px;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker {\n  border: unset;\n  border-radius: unset;\n  width: 100%;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__month-container {\n  width: 100%;\n  float: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__header {\n  background-color: transparent;\n  border: unset;\n  padding: unset;\n  border-radius: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__header .maru-calender-header {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 24px;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__header .maru-calender-header .maru-calender-header-month {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 18px;\n  letter-spacing: -0.72px;\n  font-weight: 700;\n  color: #5c5c5c;\n  display: block;\n  margin: 0 24px;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__month {\n  margin: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day-names {\n  margin: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day-name {\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: var(--p);\n  width: 36px;\n  height: 28px;\n  margin: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day {\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  width: 36px;\n  height: 28px;\n  padding: 2px;\n  margin: 2px 0;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--outside-month {\n  color: #8c8c8c;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--today, .maru-calendar .datepicker-wrapper .react-datepicker__day--keyboard-selected {\n  background-color: unset;\n  color: var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--in-selecting-range {\n  background-color: var(--p-20-per);\n  border-radius: unset;\n  border: 1px solid var(--p-20);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--selecting-range-start {\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n  border: 1px solid var(--p-20);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--selecting-range-end {\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n  border: 1px solid var(--p-20);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--in-range, .maru-calendar .datepicker-wrapper .react-datepicker__day--selected {\n  background-color: var(--p);\n  color: white;\n  border-radius: unset;\n  border: 1px solid var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--range-start {\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n  border: 1px solid var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--range-end {\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n  border: 1px solid var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--disabled {\n  color: #bdbdbd;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer {\n  margin-top: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div .maru-input {\n  padding: 8px;\n  width: 93px;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div .maru-input > input {\n  color: var(--p);\n  text-align: center;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div .maru-input > input[type=text i] {\n  padding-block: unset;\n  padding-inline: unset;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div > span {\n  margin: 0 2px;\n  color: #bdbdbd;\n}";
+var css_248z$6 = ".maru-calendar .datepicker-wrapper {\n  width: 300px;\n  padding: 20px;\n  border-radius: 6px;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker {\n  border: unset;\n  border-radius: unset;\n  width: 100%;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__month-container {\n  width: 100%;\n  float: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__header {\n  background-color: transparent;\n  border: unset;\n  padding: unset;\n  border-radius: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__header .maru-calender-header {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 24px;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__header .maru-calender-header .maru-calender-header-month {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 18px;\n  letter-spacing: -0.72px;\n  font-weight: 700;\n  color: #5c5c5c;\n  display: block;\n  margin: 0 24px;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__month {\n  margin: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day-names {\n  margin: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day-name {\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: var(--p);\n  width: 36px;\n  height: 28px;\n  margin: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day {\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  width: 36px;\n  height: 28px;\n  padding: 2px;\n  margin: 2px 0;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--outside-month {\n  color: #8c8c8c;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--today, .maru-calendar .datepicker-wrapper .react-datepicker__day--keyboard-selected {\n  background-color: unset;\n  color: var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--in-selecting-range {\n  background-color: var(--p-20-per);\n  border-radius: unset;\n  border: 1px solid var(--p-20);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--selecting-range-start {\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n  border: 1px solid var(--p-20);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--selecting-range-end {\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n  border: 1px solid var(--p-20);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--in-range, .maru-calendar .datepicker-wrapper .react-datepicker__day--selected {\n  background-color: var(--p);\n  color: white;\n  border-radius: unset;\n  border: 1px solid var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--range-start {\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n  border: 1px solid var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--range-end {\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n  border: 1px solid var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--disabled {\n  color: #bdbdbd;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer {\n  margin-top: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div .maru-input {\n  padding: 8px;\n  width: 93px;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div .maru-input > input {\n  color: var(--p);\n  text-align: center;\n  font-size: 13px;\n  letter-spacing: -0.52px;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div .maru-input > input[type=text i] {\n  padding-block: unset;\n  padding-inline: unset;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div > span {\n  margin: 0 2px;\n  color: #bdbdbd;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer .maru-calendar-footer-okay-button {\n  width: 56px;\n}";
 styleInject(css_248z$6);
 
 function Calendar(_a) {

package/package.json

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