@shoplflow/base 0.46.6 → 0.46.8

package/dist/index.cjs

@@ -3038,6 +3038,60 @@ var StyledCalloutIcon = styled6__default.default.svg`
 styled6__default.default.div`
   padding: 2px 0;
 `;
+styled6__default.default.div``;
+var BulletDot = styled6__default.default.span`
+  margin-top: 8px;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background-color: ${({ color = "neutral700" }) => exports.colorTokens[color]};
+`;
+var BulletHelperText = (_a) => {
+  var _b = _a, { color = "neutral700", children } = _b, rest = __objRest(_b, ["color", "children"]);
+  const getChildren = () => {
+    if (typeof children === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx(exports.Text, __spreadProps(__spreadValues({ typography: "paragraph2", color }, rest), { children }));
+    }
+    return children;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.StackContainer.Horizontal, { spacing: "spacing06", width: "100%", justify: "flex-start", minHeight: "20px", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(BulletDot, { color }),
+    getChildren()
+  ] });
+};
+var NormalHelperText = (_a) => {
+  var _b = _a, { color, position, children } = _b, rest = __objRest(_b, ["color", "position", "children"]);
+  const getPositionStyle = React3.useCallback(() => {
+    switch (position) {
+      case "PRESET-TOP":
+        return {
+          marginTop: "8px"
+        };
+      case "PRESET-BOTTOM":
+        return {
+          marginBottom: "8px"
+        };
+      default:
+        return;
+    }
+  }, [position]);
+  const getChildren = () => {
+    if (typeof children === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx(exports.Text, __spreadProps(__spreadValues({ color, typography: "caption_400" }, rest), { children }));
+    }
+    return children;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer.Vertical, { width: "100%", spacing: "spacing04", style: getPositionStyle(), children: getChildren() });
+};
+var HelperText = (_a) => {
+  var _b = _a, { type = "NORMAL", position = "PRESET-TOP", color = "neutral700" } = _b, rest = __objRest(_b, ["type", "position", "color"]);
+  if (type === "BULLET") {
+    return /* @__PURE__ */ jsxRuntime.jsx(BulletHelperText, __spreadValues({ color }, rest));
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(NormalHelperText, __spreadValues({ color, position }, rest));
+};
+var HelperText_default = HelperText;
 var Callout = (_a) => {
   var _b = _a, { children, styleVar = "INFORMATION", fillWidth } = _b, rest = __objRest(_b, ["children", "styleVar", "fillWidth"]);
   return /* @__PURE__ */ jsxRuntime.jsx(StyledCallout, __spreadProps(__spreadValues({}, rest), { styleVar, "data-shoplflow": "Callout", fillWidth, children }));
@@ -3046,23 +3100,8 @@ var CalloutText = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(exports.Text, __spreadProps(__spreadValues({}, rest), { typography: "paragraph2", children }));
 };
-var CalloutBulletList = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.StackContainer.Horizontal, { spacing: "spacing06", width: "100%", justify: "flex-start", minHeight: "20px", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: {
-          marginTop: "8px",
-          backgroundColor: exports.colorTokens.neutral700,
-          width: "3px",
-          height: "3px",
-          borderRadius: "50%",
-          flexShrink: 0
-        }
-      }
-    ),
-    children
-  ] });
+var CalloutBulletList = ({ children, color = "neutral700" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(HelperText_default, { type: "BULLET", color, children });
 };
 var CalloutIcon = ({ iconSource, color }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledCalloutIcon, { as: iconSource, color });
@@ -3080,7 +3119,7 @@ exports.CalloutTypes = {
 };
 
 // src/components/Callout/version.ts
-exports.CALLOUT_VERSION = "2.1.3";
+exports.CALLOUT_VERSION = "2.1.4";
 var StyledDropdown = styled6__default.default.div`
   width: ${({ width }) => width};
 `;
@@ -6605,7 +6644,7 @@ var WeekDatepicker = ({
   maxDate,
   onlySingleWeek
 }) => {
-  const year = (initStartDate == null ? void 0 : initStartDate.getFullYear()) || (/* @__PURE__ */ new Date()).getFullYear();
+  const year = initStartDate ? dateFns.getISOWeekYear(initStartDate) : dateFns.getISOWeekYear(/* @__PURE__ */ new Date());
   const [currentDate, setCurrentDate] = React3.useState(new Date(year, 5, 5));
   const [selectedStartWeekAndYear, setSelectedStartWeekAndYear] = React3.useState(
     initStartDate ? [dateFns.getISOWeek(initStartDate || /* @__PURE__ */ new Date()), dateFns.getISOWeekYear(initStartDate || /* @__PURE__ */ new Date())] : null
@@ -6771,7 +6810,7 @@ var WeekDatepicker = ({
 exports.WeekDatepicker = WeekDatepicker;
 
 // src/components/Datepickers/version.ts
-exports.DATEPICKERS_VERSION = "2.0.1";
+exports.DATEPICKERS_VERSION = "2.0.2";
 var StyledNumberCombobox = styled6__default.default.div``;
 var IconWrapper2 = styled6__default.default(framerMotion.motion.div)`
   display: flex;

package/dist/index.d.cts

@@ -788,11 +788,13 @@ declare const Callout: {
     ({ children, styleVar, fillWidth, ...rest }: CalloutProps): react_jsx_runtime.JSX.Element;
     Text: ({ children, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
     Icon: ({ iconSource, color }: CalloutIconProps) => react_jsx_runtime.JSX.Element;
-    BulletList: ({ children }: ChildrenProps) => react_jsx_runtime.JSX.Element;
+    BulletList: ({ children, color }: ChildrenProps & {
+        color?: ColorTokens;
+    }) => react_jsx_runtime.JSX.Element;
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const CALLOUT_VERSION = "2.1.3";
+declare const CALLOUT_VERSION = "2.1.4";
 
 interface PopperProps extends PopperOptionProps {
 }
@@ -1651,7 +1653,7 @@ type YearSelectProps = {
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const DATEPICKERS_VERSION = "2.0.1";
+declare const DATEPICKERS_VERSION = "2.0.2";
 
 declare const NumberComboboxSizeVariants: {
     readonly S: "S";

package/dist/index.d.ts

@@ -788,11 +788,13 @@ declare const Callout: {
     ({ children, styleVar, fillWidth, ...rest }: CalloutProps): react_jsx_runtime.JSX.Element;
     Text: ({ children, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
     Icon: ({ iconSource, color }: CalloutIconProps) => react_jsx_runtime.JSX.Element;
-    BulletList: ({ children }: ChildrenProps) => react_jsx_runtime.JSX.Element;
+    BulletList: ({ children, color }: ChildrenProps & {
+        color?: ColorTokens;
+    }) => react_jsx_runtime.JSX.Element;
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const CALLOUT_VERSION = "2.1.3";
+declare const CALLOUT_VERSION = "2.1.4";
 
 interface PopperProps extends PopperOptionProps {
 }
@@ -1651,7 +1653,7 @@ type YearSelectProps = {
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const DATEPICKERS_VERSION = "2.0.1";
+declare const DATEPICKERS_VERSION = "2.0.2";
 
 declare const NumberComboboxSizeVariants: {
     readonly S: "S";

package/dist/index.js

@@ -18,7 +18,7 @@ import DatePicker2 from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import SimpleBarReact from 'simplebar-react';
 import { ko } from 'date-fns/locale';
-import { getISOWeek, getISOWeekYear, startOfMonth, endOfMonth, differenceInCalendarMonths, getISOWeeksInYear, differenceInCalendarISOWeeks, startOfISOWeek, addWeeks, endOfISOWeek } from 'date-fns';
+import { getISOWeekYear, getISOWeek, startOfMonth, endOfMonth, differenceInCalendarMonths, getISOWeeksInYear, differenceInCalendarISOWeeks, startOfISOWeek, addWeeks, endOfISOWeek } from 'date-fns';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -3011,6 +3011,60 @@ var StyledCalloutIcon = styled6.svg`
 styled6.div`
   padding: 2px 0;
 `;
+styled6.div``;
+var BulletDot = styled6.span`
+  margin-top: 8px;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background-color: ${({ color = "neutral700" }) => colorTokens[color]};
+`;
+var BulletHelperText = (_a) => {
+  var _b = _a, { color = "neutral700", children } = _b, rest = __objRest(_b, ["color", "children"]);
+  const getChildren = () => {
+    if (typeof children === "string") {
+      return /* @__PURE__ */ jsx(Text_default, __spreadProps(__spreadValues({ typography: "paragraph2", color }, rest), { children }));
+    }
+    return children;
+  };
+  return /* @__PURE__ */ jsxs(StackContainer_default.Horizontal, { spacing: "spacing06", width: "100%", justify: "flex-start", minHeight: "20px", children: [
+    /* @__PURE__ */ jsx(BulletDot, { color }),
+    getChildren()
+  ] });
+};
+var NormalHelperText = (_a) => {
+  var _b = _a, { color, position, children } = _b, rest = __objRest(_b, ["color", "position", "children"]);
+  const getPositionStyle = useCallback(() => {
+    switch (position) {
+      case "PRESET-TOP":
+        return {
+          marginTop: "8px"
+        };
+      case "PRESET-BOTTOM":
+        return {
+          marginBottom: "8px"
+        };
+      default:
+        return;
+    }
+  }, [position]);
+  const getChildren = () => {
+    if (typeof children === "string") {
+      return /* @__PURE__ */ jsx(Text_default, __spreadProps(__spreadValues({ color, typography: "caption_400" }, rest), { children }));
+    }
+    return children;
+  };
+  return /* @__PURE__ */ jsx(StackContainer_default.Vertical, { width: "100%", spacing: "spacing04", style: getPositionStyle(), children: getChildren() });
+};
+var HelperText = (_a) => {
+  var _b = _a, { type = "NORMAL", position = "PRESET-TOP", color = "neutral700" } = _b, rest = __objRest(_b, ["type", "position", "color"]);
+  if (type === "BULLET") {
+    return /* @__PURE__ */ jsx(BulletHelperText, __spreadValues({ color }, rest));
+  }
+  return /* @__PURE__ */ jsx(NormalHelperText, __spreadValues({ color, position }, rest));
+};
+var HelperText_default = HelperText;
 var Callout = (_a) => {
   var _b = _a, { children, styleVar = "INFORMATION", fillWidth } = _b, rest = __objRest(_b, ["children", "styleVar", "fillWidth"]);
   return /* @__PURE__ */ jsx(StyledCallout, __spreadProps(__spreadValues({}, rest), { styleVar, "data-shoplflow": "Callout", fillWidth, children }));
@@ -3019,23 +3073,8 @@ var CalloutText = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ jsx(Text_default, __spreadProps(__spreadValues({}, rest), { typography: "paragraph2", children }));
 };
-var CalloutBulletList = ({ children }) => {
-  return /* @__PURE__ */ jsxs(StackContainer_default.Horizontal, { spacing: "spacing06", width: "100%", justify: "flex-start", minHeight: "20px", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          marginTop: "8px",
-          backgroundColor: colorTokens.neutral700,
-          width: "3px",
-          height: "3px",
-          borderRadius: "50%",
-          flexShrink: 0
-        }
-      }
-    ),
-    children
-  ] });
+var CalloutBulletList = ({ children, color = "neutral700" }) => {
+  return /* @__PURE__ */ jsx(HelperText_default, { type: "BULLET", color, children });
 };
 var CalloutIcon = ({ iconSource, color }) => {
   return /* @__PURE__ */ jsx(StyledCalloutIcon, { as: iconSource, color });
@@ -3053,7 +3092,7 @@ var CalloutTypes = {
 };
 
 // src/components/Callout/version.ts
-var CALLOUT_VERSION = "2.1.3";
+var CALLOUT_VERSION = "2.1.4";
 var StyledDropdown = styled6.div`
   width: ${({ width }) => width};
 `;
@@ -6578,7 +6617,7 @@ var WeekDatepicker = ({
   maxDate,
   onlySingleWeek
 }) => {
-  const year = (initStartDate == null ? void 0 : initStartDate.getFullYear()) || (/* @__PURE__ */ new Date()).getFullYear();
+  const year = initStartDate ? getISOWeekYear(initStartDate) : getISOWeekYear(/* @__PURE__ */ new Date());
   const [currentDate, setCurrentDate] = useState(new Date(year, 5, 5));
   const [selectedStartWeekAndYear, setSelectedStartWeekAndYear] = useState(
     initStartDate ? [getISOWeek(initStartDate || /* @__PURE__ */ new Date()), getISOWeekYear(initStartDate || /* @__PURE__ */ new Date())] : null
@@ -6744,7 +6783,7 @@ var WeekDatepicker = ({
 var WeekDatepicker_default = WeekDatepicker;
 
 // src/components/Datepickers/version.ts
-var DATEPICKERS_VERSION = "2.0.1";
+var DATEPICKERS_VERSION = "2.0.2";
 var StyledNumberCombobox = styled6.div``;
 var IconWrapper2 = styled6(motion.div)`
   display: flex;

package/package.json

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