@shoplflow/base 0.32.8 → 0.32.10

package/dist/index.d.cts

@@ -1291,7 +1291,7 @@ declare type DayCalendarType = {
     handleDayRangeChange: (dates: [Date | null, Date | null]) => void;
 };
 declare type DayDatepickerSizeVariantType = $Values<typeof DayDatepickerSizeVariants>;
-declare type DayDatepickerProps = Pick<DatePickerProps, 'highlightDates' | 'startDate' | 'endDate' | 'locale' | 'selectedDates' | 'selected' | 'children' | 'excludeDates' | 'calendarStartDay' | 'fixedHeight'> & DayDatepickerOptionProps;
+declare type DayDatepickerProps = Pick<DatePickerProps, 'highlightDates' | 'startDate' | 'endDate' | 'locale' | 'selectedDates' | 'selected' | 'children' | 'excludeDates' | 'calendarStartDay' | 'fixedHeight' | 'className'> & DayDatepickerOptionProps;
 declare type DayDatepickerOptionProps = {
     /**
      * 캘린더 타입
@@ -1305,9 +1305,10 @@ declare type DayDatepickerHeaderCustomProps = ReactDatePickerCustomHeaderProps &
     minDate?: Date;
     maxDate?: Date;
     locale?: Locale;
+    className?: string;
 };
 
-declare const DayDatepicker: ({ sizeVar, children, minDate, maxDate, calendarType, locale, fixedHeight, ...rest }: DayDatepickerProps) => react_jsx_runtime.JSX.Element;
+declare const DayDatepicker: ({ sizeVar, children, minDate, maxDate, calendarType, locale, fixedHeight, className, ...rest }: DayDatepickerProps) => react_jsx_runtime.JSX.Element;
 
 declare type MonthClickDateInfo = {
     startDate?: Date;

package/dist/index.d.ts

@@ -1291,7 +1291,7 @@ declare type DayCalendarType = {
     handleDayRangeChange: (dates: [Date | null, Date | null]) => void;
 };
 declare type DayDatepickerSizeVariantType = $Values<typeof DayDatepickerSizeVariants>;
-declare type DayDatepickerProps = Pick<DatePickerProps, 'highlightDates' | 'startDate' | 'endDate' | 'locale' | 'selectedDates' | 'selected' | 'children' | 'excludeDates' | 'calendarStartDay' | 'fixedHeight'> & DayDatepickerOptionProps;
+declare type DayDatepickerProps = Pick<DatePickerProps, 'highlightDates' | 'startDate' | 'endDate' | 'locale' | 'selectedDates' | 'selected' | 'children' | 'excludeDates' | 'calendarStartDay' | 'fixedHeight' | 'className'> & DayDatepickerOptionProps;
 declare type DayDatepickerOptionProps = {
     /**
      * 캘린더 타입
@@ -1305,9 +1305,10 @@ declare type DayDatepickerHeaderCustomProps = ReactDatePickerCustomHeaderProps &
     minDate?: Date;
     maxDate?: Date;
     locale?: Locale;
+    className?: string;
 };
 
-declare const DayDatepicker: ({ sizeVar, children, minDate, maxDate, calendarType, locale, fixedHeight, ...rest }: DayDatepickerProps) => react_jsx_runtime.JSX.Element;
+declare const DayDatepicker: ({ sizeVar, children, minDate, maxDate, calendarType, locale, fixedHeight, className, ...rest }: DayDatepickerProps) => react_jsx_runtime.JSX.Element;
 
 declare type MonthClickDateInfo = {
     startDate?: Date;

package/dist/index.js

@@ -1825,7 +1825,7 @@ var Callout = (_a) => {
 };
 var CalloutText = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx(Text_default, __spreadProps(__spreadValues({}, rest), { typography: "body3_400", children }));
+  return /* @__PURE__ */ jsx(Text_default, __spreadProps(__spreadValues({}, rest), { typography: "paragraph2", children }));
 };
 var CalloutIcon = ({ iconSource }) => {
   return /* @__PURE__ */ jsx(StyledCalloutIcon, { as: iconSource });
@@ -4778,6 +4778,7 @@ var OptionListItem = styled6.li`
   }
 `;
 var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeight, onClick }) => {
+  var _a;
   const optionListRef = useRef([]);
   const parentRef = useRef(null);
   const [isAllRefMounted, setIsAllRefMounted] = useState(false);
@@ -4787,20 +4788,20 @@ var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeig
   useEffect(() => {
     setIsOpened(isOpened);
   }, []);
-  const height = Math.min(optionList.length * 32, Number(parseInt(maxHeight || "0")));
+  const height = Math.min(((_a = optionList == null ? void 0 : optionList.length) != null ? _a : 0) * 32, Number(parseInt(maxHeight || "0")));
   useEffect(() => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a2, _b, _c, _d, _e, _f;
     if (!isAllRefMounted || !activeValue || !maxHeight) {
       return;
     }
     const selectedOptionIndex = optionList.findIndex((option) => (option == null ? void 0 : option.value) === activeValue);
-    const heightPerOption = (_b = (_a = optionListRef.current[selectedOptionIndex]) == null ? void 0 : _a.offsetHeight) != null ? _b : 0;
+    const heightPerOption = (_b = (_a2 = optionListRef.current[selectedOptionIndex]) == null ? void 0 : _a2.offsetHeight) != null ? _b : 0;
     const parentHeight = (_e = (_d = (_c = optionListRef.current[selectedOptionIndex]) == null ? void 0 : _c.closest("ul")) == null ? void 0 : _d.clientHeight) != null ? _e : 0;
     if (heightPerOption * (selectedOptionIndex + 1) >= parentHeight) {
       (_f = parentRef.current) == null ? void 0 : _f.scrollTo({ top: heightPerOption * selectedOptionIndex });
     }
   }, [isAllRefMounted, activeValue, maxHeight]);
-  return /* @__PURE__ */ jsx(Container5, { className: `${parentClassName} ${className}`, children: /* @__PURE__ */ jsx(OptionList, { ref: parentRef, maxHeight, style: { height }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Container5, { className: `${parentClassName} ${className}`, children: /* @__PURE__ */ jsx(OptionList, { ref: parentRef, maxHeight, style: { height }, className, children: /* @__PURE__ */ jsx(
     SimpleBarReact,
     {
       style: {
@@ -4808,6 +4809,7 @@ var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeig
         height
       },
       placeholder: void 0,
+      className,
       children: optionList == null ? void 0 : optionList.map((option, index) => /* @__PURE__ */ jsx(
         OptionListItem,
         {
@@ -4820,6 +4822,7 @@ var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeig
             optionListRef.current[index] = el;
             index + 1 === optionList.length && setIsAllRefMounted(true);
           },
+          className,
           children: option.label
         },
         option.value
@@ -4836,7 +4839,8 @@ var YearStepper = ({
   increaseYear,
   changeYear,
   minDate,
-  maxDate
+  maxDate,
+  className
 }) => {
   const [isOpen, setIsOpen] = useOutsideClick({
     selector: ".react-datepicker-year-stepper"
@@ -4847,7 +4851,7 @@ var YearStepper = ({
     () => Array.from({ length: endYear - startYear + 1 }).fill(0).map((_, index) => ({ value: startYear + index, label: `${startYear + index}` })),
     [startYear, endYear]
   );
-  return /* @__PURE__ */ jsxs(Header, { className: "calendarHeader", children: [
+  return /* @__PURE__ */ jsxs(Header, { className: `calendarHeader ${className}`, children: [
     /* @__PURE__ */ jsx(
       IconButton_default,
       {
@@ -4862,7 +4866,7 @@ var YearStepper = ({
       /* @__PURE__ */ jsx(Popper_default.Trigger, { isOpen, children: /* @__PURE__ */ jsx(
         Month,
         {
-          className: "react-datepicker-year-stepper",
+          className: `react-datepicker-year-stepper ${className}`,
           onClick: (event) => {
             event.stopPropagation();
             setIsOpen((prev) => !prev);
@@ -4873,13 +4877,13 @@ var YearStepper = ({
       /* @__PURE__ */ jsx(Popper_default.Portal, { children: /* @__PURE__ */ jsx(
         YearSelect_default,
         {
-          className: "react-datepicker-year-stepper",
+          className: `react-datepicker-year-stepper ${className}`,
           optionList: OptionList2,
           onClick: ({ value }) => {
             changeYear(value);
             setIsOpen(false);
           },
-          parentClassName: "react-datepicker-year-stepper",
+          parentClassName: `react-datepicker-year-stepper ${className}`,
           maxHeight: `200px`,
           activeValue: date.getFullYear()
         }
@@ -4910,27 +4914,28 @@ var MonthStepper = ({
   locale,
   sizeVar,
   prevMonthButtonDisabled,
-  nextMonthButtonDisabled
+  nextMonthButtonDisabled,
+  className
 }) => {
   const [isOpen, setIsOpen] = useOutsideClick({
     selector: ".react-datepicker__header"
   });
-  return /* @__PURE__ */ jsxs(Header, { className: "calendarHeader", children: [
+  return /* @__PURE__ */ jsxs(Header, { className: `calendarHeader ${className}`, children: [
     /* @__PURE__ */ jsx(IconButton_default, { styleVar: "GHOST", sizeVar: "S", onClick: decreaseMonth, disabled: prevMonthButtonDisabled, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: LeftArrowIcon, sizeVar: "XS", color: prevMonthButtonDisabled ? "neutral200" : "neutral700" }) }),
     /* @__PURE__ */ jsx(
       Month,
       {
-        className: "react-datepicker__header",
+        className: `react-datepicker__header ${className}`,
         onClick: () => {
           setIsOpen((prev) => !prev);
         },
         children: /* @__PURE__ */ jsx(Text_default, { typography: sizeVar === "M" ? "title1_700" : "body1_700", children: `${date.getFullYear()}.${monthDate.getMonth() + 1}` })
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(DatePickerWrapper, { children: /* @__PURE__ */ jsx("div", { className: "datepicker-header-wrapper", children: /* @__PURE__ */ jsx(
+    isOpen && /* @__PURE__ */ jsx(DatePickerWrapper, { children: /* @__PURE__ */ jsx("div", { className: `datepicker-header-wrapper ${className}`, children: /* @__PURE__ */ jsx(
       DatePicker2,
       {
-        className: "datepicker-custom-month",
+        className: `datepicker-custom-month ${className}`,
         onChange: (date2) => {
           if (!date2) {
             return;
@@ -4947,7 +4952,7 @@ var MonthStepper = ({
         maxDate,
         locale: locale != null ? locale : ko,
         showMonthYearPicker: true,
-        renderCustomHeader: (props) => /* @__PURE__ */ jsx(YearStepper_default, __spreadProps(__spreadValues({}, props), { minDate, maxDate })),
+        renderCustomHeader: (props) => /* @__PURE__ */ jsx(YearStepper_default, __spreadProps(__spreadValues({}, props), { minDate, maxDate, className })),
         showFourColumnMonthYearPicker: true
       }
     ) }) }),
@@ -4963,7 +4968,8 @@ var DayDatepicker = (_a) => {
     maxDate,
     calendarType,
     locale,
-    fixedHeight = true
+    fixedHeight = true,
+    className
   } = _b, rest = __objRest(_b, [
     "sizeVar",
     "children",
@@ -4971,18 +4977,30 @@ var DayDatepicker = (_a) => {
     "maxDate",
     "calendarType",
     "locale",
-    "fixedHeight"
+    "fixedHeight",
+    "className"
   ]);
   const Wrapper2 = sizeVar === "S" ? SmallStyledDayDatepickerWrapper : StyledDayDatepicker;
   if (calendarType.type === "range") {
-    return /* @__PURE__ */ jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", children: /* @__PURE__ */ jsx("div", { className: "dayDatepickerArea", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", className, children: /* @__PURE__ */ jsx("div", { className: `${"dayDatepickerArea"}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsx(
       DatePicker2,
       __spreadProps(__spreadValues({
         inline: true,
-        renderCustomHeader: (props) => /* @__PURE__ */ jsx(MonthStepper_default, __spreadProps(__spreadValues({ sizeVar: sizeVar || "M" }, props), { minDate, maxDate, locale })),
+        renderCustomHeader: (props) => /* @__PURE__ */ jsx(
+          MonthStepper_default,
+          __spreadProps(__spreadValues({
+            sizeVar: sizeVar || "M"
+          }, props), {
+            minDate,
+            maxDate,
+            locale,
+            className
+          })
+        ),
         renderDayContents: (dayOfMonth) => {
           return /* @__PURE__ */ jsx("div", { className: "each-day", children: dayOfMonth });
-        }
+        },
+        className
       }, rest), {
         minDate,
         maxDate,
@@ -4996,11 +5014,21 @@ var DayDatepicker = (_a) => {
     ) }) });
   }
   if (calendarType.type === "multiple") {
-    return /* @__PURE__ */ jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", children: /* @__PURE__ */ jsx("div", { className: "dayDatepickerArea", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", className, children: /* @__PURE__ */ jsx("div", { className: `${"dayDatepickerArea"}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsx(
       DatePicker2,
       __spreadProps(__spreadValues({
         inline: true,
-        renderCustomHeader: (props) => /* @__PURE__ */ jsx(MonthStepper_default, __spreadProps(__spreadValues({ sizeVar: sizeVar || "M" }, props), { minDate, maxDate, locale })),
+        renderCustomHeader: (props) => /* @__PURE__ */ jsx(
+          MonthStepper_default,
+          __spreadProps(__spreadValues({
+            sizeVar: sizeVar || "M"
+          }, props), {
+            minDate,
+            maxDate,
+            locale,
+            className
+          })
+        ),
         renderDayContents: (dayOfMonth) => {
           return /* @__PURE__ */ jsx("div", { className: "each-day", children: dayOfMonth });
         }
@@ -5015,11 +5043,21 @@ var DayDatepicker = (_a) => {
       })
     ) }) });
   }
-  return /* @__PURE__ */ jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", children: /* @__PURE__ */ jsx("div", { className: "dayDatepickerArea", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", children: /* @__PURE__ */ jsx("div", { className: `${"dayDatepickerArea"}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsx(
     DatePicker2,
     __spreadProps(__spreadValues({
       inline: true,
-      renderCustomHeader: (props) => /* @__PURE__ */ jsx(MonthStepper_default, __spreadProps(__spreadValues({ sizeVar: sizeVar || "M" }, props), { minDate, maxDate, locale })),
+      renderCustomHeader: (props) => /* @__PURE__ */ jsx(
+        MonthStepper_default,
+        __spreadProps(__spreadValues({
+          sizeVar: sizeVar || "M"
+        }, props), {
+          minDate,
+          maxDate,
+          locale,
+          className
+        })
+      ),
       renderDayContents: (dayOfMonth) => {
         return /* @__PURE__ */ jsx("div", { className: "each-day", children: dayOfMonth });
       }