@shoplflow/base 0.46.7 → 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};
 `;

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 {
 }

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 {
 }

package/dist/index.js

@@ -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};
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.46.7",
+  "version": "0.46.8",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -87,8 +87,8 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.10",
-    "@shoplflow/utils": "^0.8.0",
-    "@shoplflow/shopl-assets": "^0.12.37"
+    "@shoplflow/shopl-assets": "^0.12.37",
+    "@shoplflow/utils": "^0.8.0"
   },
   "homepage": "https://github.com/shopl/shoplflow#readme",
   "scripts": {