@shoplflow/base 0.32.8 → 0.32.10

package/dist/index.cjs

@@ -1852,7 +1852,7 @@ var Callout = (_a) => {
 };
 var CalloutText = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.Text, __spreadProps(__spreadValues({}, rest), { typography: "body3_400", children }));
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.Text, __spreadProps(__spreadValues({}, rest), { typography: "paragraph2", children }));
 };
 var CalloutIcon = ({ iconSource }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledCalloutIcon, { as: iconSource });
@@ -4805,6 +4805,7 @@ var OptionListItem = styled6__default.default.li`
   }
 `;
 var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeight, onClick }) => {
+  var _a;
   const optionListRef = React3.useRef([]);
   const parentRef = React3.useRef(null);
   const [isAllRefMounted, setIsAllRefMounted] = React3.useState(false);
@@ -4814,20 +4815,20 @@ var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeig
   React3.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")));
   React3.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__ */ jsxRuntime.jsx(Container5, { className: `${parentClassName} ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(OptionList, { ref: parentRef, maxHeight, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Container5, { className: `${parentClassName} ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(OptionList, { ref: parentRef, maxHeight, style: { height }, className, children: /* @__PURE__ */ jsxRuntime.jsx(
     SimpleBarReact__default.default,
     {
       style: {
@@ -4835,6 +4836,7 @@ var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeig
         height
       },
       placeholder: void 0,
+      className,
       children: optionList == null ? void 0 : optionList.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
         OptionListItem,
         {
@@ -4847,6 +4849,7 @@ var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeig
             optionListRef.current[index] = el;
             index + 1 === optionList.length && setIsAllRefMounted(true);
           },
+          className,
           children: option.label
         },
         option.value
@@ -4863,7 +4866,8 @@ var YearStepper = ({
   increaseYear,
   changeYear,
   minDate,
-  maxDate
+  maxDate,
+  className
 }) => {
   const [isOpen, setIsOpen] = utils.useOutsideClick({
     selector: ".react-datepicker-year-stepper"
@@ -4874,7 +4878,7 @@ var YearStepper = ({
     () => Array.from({ length: endYear - startYear + 1 }).fill(0).map((_, index) => ({ value: startYear + index, label: `${startYear + index}` })),
     [startYear, endYear]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { className: "calendarHeader", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { className: `calendarHeader ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       exports.IconButton,
       {
@@ -4889,7 +4893,7 @@ var YearStepper = ({
       /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Trigger, { isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(
         Month,
         {
-          className: "react-datepicker-year-stepper",
+          className: `react-datepicker-year-stepper ${className}`,
           onClick: (event) => {
             event.stopPropagation();
             setIsOpen((prev) => !prev);
@@ -4900,13 +4904,13 @@ var YearStepper = ({
       /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { children: /* @__PURE__ */ jsxRuntime.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()
         }
@@ -4937,27 +4941,28 @@ var MonthStepper = ({
   locale: locale$1,
   sizeVar,
   prevMonthButtonDisabled,
-  nextMonthButtonDisabled
+  nextMonthButtonDisabled,
+  className
 }) => {
   const [isOpen, setIsOpen] = utils.useOutsideClick({
     selector: ".react-datepicker__header"
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { className: "calendarHeader", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { className: `calendarHeader ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { styleVar: "GHOST", sizeVar: "S", onClick: decreaseMonth, disabled: prevMonthButtonDisabled, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.LeftArrowIcon, sizeVar: "XS", color: prevMonthButtonDisabled ? "neutral200" : "neutral700" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       Month,
       {
-        className: "react-datepicker__header",
+        className: `react-datepicker__header ${className}`,
         onClick: () => {
           setIsOpen((prev) => !prev);
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: sizeVar === "M" ? "title1_700" : "body1_700", children: `${date.getFullYear()}.${monthDate.getMonth() + 1}` })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(DatePickerWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "datepicker-header-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(DatePickerWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `datepicker-header-wrapper ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker2__default.default,
       {
-        className: "datepicker-custom-month",
+        className: `datepicker-custom-month ${className}`,
         onChange: (date2) => {
           if (!date2) {
             return;
@@ -4974,7 +4979,7 @@ var MonthStepper = ({
         maxDate,
         locale: locale$1 != null ? locale$1 : locale.ko,
         showMonthYearPicker: true,
-        renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(YearStepper_default, __spreadProps(__spreadValues({}, props), { minDate, maxDate })),
+        renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(YearStepper_default, __spreadProps(__spreadValues({}, props), { minDate, maxDate, className })),
         showFourColumnMonthYearPicker: true
       }
     ) }) }),
@@ -4990,7 +4995,8 @@ var DayDatepicker = (_a) => {
     maxDate,
     calendarType,
     locale,
-    fixedHeight = true
+    fixedHeight = true,
+    className
   } = _b, rest = __objRest(_b, [
     "sizeVar",
     "children",
@@ -4998,18 +5004,30 @@ var DayDatepicker = (_a) => {
     "maxDate",
     "calendarType",
     "locale",
-    "fixedHeight"
+    "fixedHeight",
+    "className"
   ]);
   const Wrapper2 = sizeVar === "S" ? SmallStyledDayDatepickerWrapper : StyledDayDatepicker;
   if (calendarType.type === "range") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dayDatepickerArea", children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${"dayDatepickerArea"}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker2__default.default,
       __spreadProps(__spreadValues({
         inline: true,
-        renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(MonthStepper_default, __spreadProps(__spreadValues({ sizeVar: sizeVar || "M" }, props), { minDate, maxDate, locale })),
+        renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+          MonthStepper_default,
+          __spreadProps(__spreadValues({
+            sizeVar: sizeVar || "M"
+          }, props), {
+            minDate,
+            maxDate,
+            locale,
+            className
+          })
+        ),
         renderDayContents: (dayOfMonth) => {
           return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "each-day", children: dayOfMonth });
-        }
+        },
+        className
       }, rest), {
         minDate,
         maxDate,
@@ -5023,11 +5041,21 @@ var DayDatepicker = (_a) => {
     ) }) });
   }
   if (calendarType.type === "multiple") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dayDatepickerArea", children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${"dayDatepickerArea"}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker2__default.default,
       __spreadProps(__spreadValues({
         inline: true,
-        renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(MonthStepper_default, __spreadProps(__spreadValues({ sizeVar: sizeVar || "M" }, props), { minDate, maxDate, locale })),
+        renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+          MonthStepper_default,
+          __spreadProps(__spreadValues({
+            sizeVar: sizeVar || "M"
+          }, props), {
+            minDate,
+            maxDate,
+            locale,
+            className
+          })
+        ),
         renderDayContents: (dayOfMonth) => {
           return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "each-day", children: dayOfMonth });
         }
@@ -5042,11 +5070,21 @@ var DayDatepicker = (_a) => {
       })
     ) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dayDatepickerArea", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${"dayDatepickerArea"}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
     DatePicker2__default.default,
     __spreadProps(__spreadValues({
       inline: true,
-      renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(MonthStepper_default, __spreadProps(__spreadValues({ sizeVar: sizeVar || "M" }, props), { minDate, maxDate, locale })),
+      renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        MonthStepper_default,
+        __spreadProps(__spreadValues({
+          sizeVar: sizeVar || "M"
+        }, props), {
+          minDate,
+          maxDate,
+          locale,
+          className
+        })
+      ),
       renderDayContents: (dayOfMonth) => {
         return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "each-day", children: dayOfMonth });
       }