@shoplflow/base 0.46.4 → 0.46.6

package/dist/index.cjs

@@ -3018,7 +3018,7 @@ var StyledCallout = styled6__default.default.div`
   justify-content: flex-start;
   align-items: start;
   padding: 12px;
-  gap: 4px;
+  gap: 6px;
   border-radius: ${exports.borderRadiusTokens.borderRadius08};
   ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
   ${({ styleVar }) => styleVar === "CAUTION" && cautionStyle}
@@ -3080,7 +3080,7 @@ exports.CalloutTypes = {
 };
 
 // src/components/Callout/version.ts
-exports.CALLOUT_VERSION = "2.1.2";
+exports.CALLOUT_VERSION = "2.1.3";
 var StyledDropdown = styled6__default.default.div`
   width: ${({ width }) => width};
 `;
@@ -6136,7 +6136,7 @@ var getEachMonthAreaStyle = (props) => {
         right: 0;
         top: 0;
         bottom: 0;
-        width: 48px;
+        width: 50%;
         background: ${exports.colorTokens.primary100};
       }
     `;
@@ -6149,7 +6149,7 @@ var getEachMonthAreaStyle = (props) => {
         left: 0;
         top: 0;
         bottom: 0;
-        width: 48px;
+        width: 50%;
         background: ${exports.colorTokens.primary100};
       }
     `;
@@ -6169,9 +6169,9 @@ var getEachMonthAreaStyle = (props) => {
 var MonthContainer = styled6__default.default.div`
   display: flex;
   flex-direction: column;
-  width: 400px;
-  max-width: 400px;
-  gap: 16px;
+  width: ${({ sizeVar }) => sizeVar === "S" ? "280px" : "400px"};
+  max-width: ${({ sizeVar }) => sizeVar === "S" ? "280px" : "400px"};
+  gap: ${({ sizeVar }) => sizeVar === "S" ? "8px" : "16px"};
   padding: 16px 24px 24px;
 `;
 var MonthArea = styled6__default.default.div`
@@ -6201,6 +6201,7 @@ var EachMonthDate = styled6__default.default.div`
   cursor: pointer;
   position: absolute;
   z-index: 10;
+  flex-shrink: 0;
 
   ${(props) => getEachDateStyle(props)}
 `;
@@ -6210,7 +6211,8 @@ var MonthDatepicker = ({
   initEndDate,
   minDate,
   maxDate,
-  onlySingleMonth
+  onlySingleMonth,
+  sizeVar = "M"
 }) => {
   const [currentDate, setCurrentDate] = React3.useState(initStartDate || /* @__PURE__ */ new Date());
   const [selectedStartMonthAndYear, setSelectedStartMonthAndYear] = React3.useState(
@@ -6274,7 +6276,7 @@ var MonthDatepicker = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(MonthContainer, { "data-shoplflow": "MonthDatepicker", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(MonthContainer, { "data-shoplflow": "MonthDatepicker", sizeVar, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       YearStepper_default,
       {
@@ -6769,7 +6771,7 @@ var WeekDatepicker = ({
 exports.WeekDatepicker = WeekDatepicker;
 
 // src/components/Datepickers/version.ts
-exports.DATEPICKERS_VERSION = "2.0.0";
+exports.DATEPICKERS_VERSION = "2.0.1";
 var StyledNumberCombobox = styled6__default.default.div``;
 var IconWrapper2 = styled6__default.default(framerMotion.motion.div)`
   display: flex;

package/dist/index.d.cts

@@ -792,7 +792,7 @@ declare const Callout: {
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const CALLOUT_VERSION = "2.1.2";
+declare const CALLOUT_VERSION = "2.1.3";
 
 interface PopperProps extends PopperOptionProps {
 }
@@ -1556,6 +1556,10 @@ type MonthDatepickerProps = {
      * 하나의 월만 선택 여부
      */
     onlySingleMonth?: boolean;
+    /**
+     * 사이즈 - 기본값: M
+     */
+    sizeVar?: 'S' | 'M';
 };
 type MonthDatepickerStyleType = {
     inRange: boolean;
@@ -1564,7 +1568,11 @@ type MonthDatepickerStyleType = {
     disabled: boolean;
 };
 
-declare const MonthDatepicker: ({ handleMonthClick, initStartDate, initEndDate, minDate, maxDate, onlySingleMonth, }: MonthDatepickerProps) => react_jsx_runtime.JSX.Element;
+/**
+ * MonthDatepicker 컴포넌트
+ * @version 2.1
+ */
+declare const MonthDatepicker: ({ handleMonthClick, initStartDate, initEndDate, minDate, maxDate, onlySingleMonth, sizeVar, }: MonthDatepickerProps) => react_jsx_runtime.JSX.Element;
 
 type AnnualDatepickerProps = {
     currentYear?: number;
@@ -1643,7 +1651,7 @@ type YearSelectProps = {
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const DATEPICKERS_VERSION = "2.0.0";
+declare const DATEPICKERS_VERSION = "2.0.1";
 
 declare const NumberComboboxSizeVariants: {
     readonly S: "S";

package/dist/index.d.ts

@@ -792,7 +792,7 @@ declare const Callout: {
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const CALLOUT_VERSION = "2.1.2";
+declare const CALLOUT_VERSION = "2.1.3";
 
 interface PopperProps extends PopperOptionProps {
 }
@@ -1556,6 +1556,10 @@ type MonthDatepickerProps = {
      * 하나의 월만 선택 여부
      */
     onlySingleMonth?: boolean;
+    /**
+     * 사이즈 - 기본값: M
+     */
+    sizeVar?: 'S' | 'M';
 };
 type MonthDatepickerStyleType = {
     inRange: boolean;
@@ -1564,7 +1568,11 @@ type MonthDatepickerStyleType = {
     disabled: boolean;
 };
 
-declare const MonthDatepicker: ({ handleMonthClick, initStartDate, initEndDate, minDate, maxDate, onlySingleMonth, }: MonthDatepickerProps) => react_jsx_runtime.JSX.Element;
+/**
+ * MonthDatepicker 컴포넌트
+ * @version 2.1
+ */
+declare const MonthDatepicker: ({ handleMonthClick, initStartDate, initEndDate, minDate, maxDate, onlySingleMonth, sizeVar, }: MonthDatepickerProps) => react_jsx_runtime.JSX.Element;
 
 type AnnualDatepickerProps = {
     currentYear?: number;
@@ -1643,7 +1651,7 @@ type YearSelectProps = {
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const DATEPICKERS_VERSION = "2.0.0";
+declare const DATEPICKERS_VERSION = "2.0.1";
 
 declare const NumberComboboxSizeVariants: {
     readonly S: "S";

package/dist/index.js

@@ -2991,7 +2991,7 @@ var StyledCallout = styled6.div`
   justify-content: flex-start;
   align-items: start;
   padding: 12px;
-  gap: 4px;
+  gap: 6px;
   border-radius: ${borderRadiusTokens.borderRadius08};
   ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
   ${({ styleVar }) => styleVar === "CAUTION" && cautionStyle}
@@ -3053,7 +3053,7 @@ var CalloutTypes = {
 };
 
 // src/components/Callout/version.ts
-var CALLOUT_VERSION = "2.1.2";
+var CALLOUT_VERSION = "2.1.3";
 var StyledDropdown = styled6.div`
   width: ${({ width }) => width};
 `;
@@ -6109,7 +6109,7 @@ var getEachMonthAreaStyle = (props) => {
         right: 0;
         top: 0;
         bottom: 0;
-        width: 48px;
+        width: 50%;
         background: ${colorTokens.primary100};
       }
     `;
@@ -6122,7 +6122,7 @@ var getEachMonthAreaStyle = (props) => {
         left: 0;
         top: 0;
         bottom: 0;
-        width: 48px;
+        width: 50%;
         background: ${colorTokens.primary100};
       }
     `;
@@ -6142,9 +6142,9 @@ var getEachMonthAreaStyle = (props) => {
 var MonthContainer = styled6.div`
   display: flex;
   flex-direction: column;
-  width: 400px;
-  max-width: 400px;
-  gap: 16px;
+  width: ${({ sizeVar }) => sizeVar === "S" ? "280px" : "400px"};
+  max-width: ${({ sizeVar }) => sizeVar === "S" ? "280px" : "400px"};
+  gap: ${({ sizeVar }) => sizeVar === "S" ? "8px" : "16px"};
   padding: 16px 24px 24px;
 `;
 var MonthArea = styled6.div`
@@ -6174,6 +6174,7 @@ var EachMonthDate = styled6.div`
   cursor: pointer;
   position: absolute;
   z-index: 10;
+  flex-shrink: 0;
 
   ${(props) => getEachDateStyle(props)}
 `;
@@ -6183,7 +6184,8 @@ var MonthDatepicker = ({
   initEndDate,
   minDate,
   maxDate,
-  onlySingleMonth
+  onlySingleMonth,
+  sizeVar = "M"
 }) => {
   const [currentDate, setCurrentDate] = useState(initStartDate || /* @__PURE__ */ new Date());
   const [selectedStartMonthAndYear, setSelectedStartMonthAndYear] = useState(
@@ -6247,7 +6249,7 @@ var MonthDatepicker = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs(MonthContainer, { "data-shoplflow": "MonthDatepicker", children: [
+  return /* @__PURE__ */ jsxs(MonthContainer, { "data-shoplflow": "MonthDatepicker", sizeVar, children: [
     /* @__PURE__ */ jsx(
       YearStepper_default,
       {
@@ -6742,7 +6744,7 @@ var WeekDatepicker = ({
 var WeekDatepicker_default = WeekDatepicker;
 
 // src/components/Datepickers/version.ts
-var DATEPICKERS_VERSION = "2.0.0";
+var DATEPICKERS_VERSION = "2.0.1";
 var StyledNumberCombobox = styled6.div``;
 var IconWrapper2 = styled6(motion.div)`
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.46.4",
+  "version": "0.46.6",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {