@shoplflow/base 0.24.28 → 0.24.30

package/dist/index.cjs

@@ -12,6 +12,7 @@ var react = require('@floating-ui/react');
 var reactDom = require('@floating-ui/react-dom');
 var ShoplAssets = require('@shoplflow/shopl-assets');
 var HadaAssets = require('@shoplflow/hada-assets');
+var core = require('@floating-ui/core');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1644,7 +1645,7 @@ exports.CalloutTypes = {
   INFORMATION: "INFORMATION",
   ALERT: "ALERT"
 };
-exports.StyledPopper = styled5__default.default.div`
+var StyledPopper = styled5__default.default.div`
   width: ${({ width }) => width != null ? width : "fit-content"};
   height: ${({ height }) => height && height};
 `;
@@ -1717,7 +1718,7 @@ exports.PopperTrigger = React2.forwardRef(
     React2.useEffect(() => {
       setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
-    return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledPopper, __spreadProps(__spreadValues({ ref: refs, "data-shoplflow": "Popper" }, rest), { children }));
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledPopper, __spreadProps(__spreadValues({ ref: refs, "data-shoplflow": "Popper" }, rest), { children }));
   }
 );
 exports.PopperPortal = React2.forwardRef(
@@ -1741,7 +1742,7 @@ exports.PopperPortal = React2.forwardRef(
 Popper.Trigger = exports.PopperTrigger;
 Popper.Portal = exports.PopperPortal;
 exports.Popper = Popper;
-exports.getDropdownHeightBySizeVar = (size2) => {
+var getDropdownHeightBySizeVar = (size2) => {
   switch (size2) {
     case "M":
       return "40px";
@@ -1751,7 +1752,7 @@ exports.getDropdownHeightBySizeVar = (size2) => {
       return "40px";
   }
 };
-exports.getDropdownFontSizeBySizeVar = (size2) => {
+var getDropdownFontSizeBySizeVar = (size2) => {
   switch (size2) {
     case "M":
       return "body1_400";
@@ -1761,7 +1762,7 @@ exports.getDropdownFontSizeBySizeVar = (size2) => {
       return "body1_400";
   }
 };
-exports.getDropdownStyleBySizeVar = (size2) => {
+var getDropdownStyleBySizeVar = (size2) => {
   switch (size2) {
     case "M":
       return react$1.css`
@@ -1778,7 +1779,7 @@ exports.getDropdownStyleBySizeVar = (size2) => {
       `;
   }
 };
-exports.getDropdownIconSizeBySizeVar = (size2) => {
+var getDropdownIconSizeBySizeVar = (size2) => {
   switch (size2) {
     case "S":
       return react$1.css`
@@ -1803,10 +1804,10 @@ exports.getDropdownIconSizeBySizeVar = (size2) => {
       `;
   }
 };
-exports.StyledDropdown = styled5__default.default.div`
+var StyledDropdown = styled5__default.default.div`
   width: ${({ width }) => width};
 `;
-exports.StyledDropdownContent = styled5__default.default.div`
+var StyledDropdownContent = styled5__default.default.div`
   display: flex;
   flex-direction: column;
   background: ${exports.colorTokens.neutral0};
@@ -1815,7 +1816,7 @@ exports.StyledDropdownContent = styled5__default.default.div`
   border-radius: 6px;
   box-shadow: ${exports.boxShadowTokens.dropShadow};
 `;
-exports.StyledDropdownButton = styled5__default.default.button`
+var StyledDropdownButton = styled5__default.default.button`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1825,17 +1826,17 @@ exports.StyledDropdownButton = styled5__default.default.button`
   gap: 8px;
   cursor: pointer;
   background-color: ${exports.colorTokens.neutral0};
-  ${({ sizeVar }) => sizeVar && exports.getDropdownStyleBySizeVar(sizeVar)};
+  ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
   ${({ disabled }) => disabled && react$1.css`
       cursor: not-allowed;
     `}
 `;
-exports.DropdownButtonIcon = styled5__default.default(framerMotion.motion.div)`
+var DropdownButtonIcon = styled5__default.default(framerMotion.motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
 
-  ${({ sizeVar }) => sizeVar && exports.getDropdownIconSizeBySizeVar(sizeVar)};
+  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
 `;
 var DropdownContext = React2.createContext(null);
 var useDropdown = () => {
@@ -1874,19 +1875,13 @@ var getStyleByType = ({
       height: 32px;
     `;
   }
-  if (type === "text" || type === "password") {
-    return react$1.css`
-      width: ${width != null ? width : "100%"};
-      min-width: ${minWidth != null ? minWidth : "initial"};
-      max-width: ${maxWidth != null ? maxWidth : "initial"};
-      height: ${height != null ? height : "initial"};
-      min-height: ${minHeight != null ? minHeight : "initial"};
-      max-height: ${maxHeight != null ? maxHeight : "initial"};
-    `;
-  }
   return react$1.css`
-    width: 64px;
-    height: 32px;
+    width: ${width != null ? width : "100%"};
+    min-width: ${minWidth != null ? minWidth : "initial"};
+    max-width: ${maxWidth != null ? maxWidth : "initial"};
+    height: ${height != null ? height : "initial"};
+    min-height: ${minHeight != null ? minHeight : "initial"};
+    max-height: ${maxHeight != null ? maxHeight : "initial"};
   `;
 };
 var InputWrapper = styled5__default.default.label`
@@ -1974,13 +1969,13 @@ var DropdownButton = React2.forwardRef(
         disabled,
         width,
         isError,
-        height: exports.getDropdownHeightBySizeVar(sizeVar),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
+        height: getDropdownHeightBySizeVar(sizeVar),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
           leftSource && leftSource,
           value || /* @__PURE__ */ jsxRuntime.jsx(
             exports.Text,
             {
-              typography: exports.getDropdownFontSizeBySizeVar(sizeVar),
+              typography: getDropdownFontSizeBySizeVar(sizeVar),
               color: "neutral400",
               textOverflow: "ellipsis",
               lineClamp: 1,
@@ -1988,7 +1983,7 @@ var DropdownButton = React2.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            exports.DropdownButtonIcon,
+            DropdownButtonIcon,
             {
               sizeVar,
               animate: {
@@ -2025,7 +2020,7 @@ var DropdownContent = (_a) => {
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(utils.OutSideClick, { outsideClick: returnCallbackByOption(), children: /* @__PURE__ */ jsxRuntime.jsx(exports.StyledDropdownContent, __spreadProps(__spreadValues({ width: contentWidth, onClick: handleClick }, rest), { children })) });
+  return /* @__PURE__ */ jsxRuntime.jsx(utils.OutSideClick, { outsideClick: returnCallbackByOption(), children: /* @__PURE__ */ jsxRuntime.jsx(StyledDropdownContent, __spreadProps(__spreadValues({ width: contentWidth, onClick: handleClick }, rest), { children })) });
 };
 var Dropdown = ({
   isOpen: initialIsOpen = false,
@@ -2051,7 +2046,7 @@ var Dropdown = ({
     }
     setIsOpen(initialIsOpen);
   }, [initialIsOpen]);
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxRuntime.jsxs(
     exports.Popper,
     {
       offset: 4,
@@ -2371,7 +2366,7 @@ var getStylesBySizeVar = (sizeVar) => {
       `;
   }
 };
-exports.getFontStylesBySizeVar = (sizeVar) => {
+var getFontStylesBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "XS":
       return "body2_400";
@@ -2383,7 +2378,7 @@ exports.getFontStylesBySizeVar = (sizeVar) => {
       return "body1_400";
   }
 };
-exports.StyledMenu = styled5__default.default.li`
+var StyledMenu = styled5__default.default.li`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -2434,7 +2429,7 @@ var Menu = (_a) => {
     !disabled && onClick && onClick(e);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    exports.StyledMenu,
+    StyledMenu,
     __spreadProps(__spreadValues({
       sizeVar,
       isSelected: selected,
@@ -2444,7 +2439,7 @@ var Menu = (_a) => {
       "data-shoplflow": "Menu",
       children: [
         leftSource && LeftSourceClone,
-        /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { width: "100%", height: "100%", align: "center", className: exports.getFontStylesBySizeVar(sizeVar), children }),
+        /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { width: "100%", height: "100%", align: "center", className: getFontStylesBySizeVar(sizeVar), children }),
         rightSource && rightSource
       ]
     })
@@ -2458,7 +2453,7 @@ exports.MenuSizeVariants = {
   S: "S",
   M: "M"
 };
-exports.StyledList = styled5__default.default.li`
+var StyledList = styled5__default.default.li`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -2473,7 +2468,7 @@ exports.StyledList = styled5__default.default.li`
     background: ${exports.colorTokens.neutral100};
   }
 `;
-exports.StyledText2Rows = styled5__default.default.div`
+var StyledText2Rows = styled5__default.default.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2485,14 +2480,14 @@ var List = (_a) => {
   if (!children && rightSource) {
     throw new Error("RightSource\uB294 children\uC774 \uD544\uC218\uB85C \uD3EC\uD568\uB418\uC5B4\uC57C\uD569\uB2C8\uB2E4.");
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledList, __spreadProps(__spreadValues({ "data-shoplflow": "List" }, rest), { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledList, __spreadProps(__spreadValues({ "data-shoplflow": "List" }, rest), { children: [
     LeftSourceClone && LeftSourceClone,
     /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { height: "36px", width: "100%", spacing: "spacing08", align: "center", children }),
     rightSource && rightSource
   ] }));
 };
 exports.Text2Rows = ({ title, subTitle }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledText2Rows, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledText2Rows, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_500", color: "neutral700", lineClamp: 1, wordBreak: "break-all", children: title }),
     subTitle && /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_400", color: "neutral400", lineClamp: 1, wordBreak: "break-all", children: subTitle })
   ] });
@@ -2866,7 +2861,7 @@ var Input = React2.forwardRef(
   }
 );
 exports.Input = Input;
-exports.StyledInputButton = styled5__default.default.div`
+var StyledInputButton = styled5__default.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2881,7 +2876,7 @@ exports.StyledInputButton = styled5__default.default.div`
       cursor: not-allowed;
     `}
 `;
-exports.StyledInputButtonContent = styled5__default.default.input`
+var StyledInputButtonContent = styled5__default.default.input`
   display: flex;
   width: 100%;
   border: none;
@@ -2973,8 +2968,8 @@ var InputButton = React2.forwardRef(
         minHeight: "40px",
         maxHeight: "40px",
         width,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledInputButton, { onClick: handleOnClick, disabled, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(exports.StyledInputButtonContent, __spreadValues({ className: "body1_400", defaultValue: text, ref }, rest)),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(StyledInputButton, { onClick: handleOnClick, disabled, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StyledInputButtonContent, __spreadValues({ className: "body1_400", defaultValue: text, ref }, rest)),
           /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", children: [
             text && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) }),
             rightSource
@@ -3218,6 +3213,57 @@ var SelectInputButton = (_a) => {
   );
 };
 exports.SelectInputButton = SelectInputButton;
+var StyledTooltipContent = styled5__default.default.div`
+  background-color: ${exports.colorTokens.neutral700};
+  padding: 4px 8px;
+  max-width: 240px;
+  border-radius: 4px;
+`;
+var TooltipContent = (_a) => {
+  var _b = _a, { content } = _b, args = __objRest(_b, ["content"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledTooltipContent, __spreadProps(__spreadValues({}, args), { children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "caption_400", color: "neutral0", wordBreak: "break-all", children: content }) }));
+};
+var Tooltip = (_a) => {
+  var _b = _a, {
+    trigger,
+    popper,
+    placement = "bottom-start",
+    offset: offset3 = 4,
+    triggerRef,
+    portalRef
+  } = _b, popperProps = __objRest(_b, [
+    "trigger",
+    "popper",
+    "placement",
+    "offset",
+    "triggerRef",
+    "portalRef"
+  ]);
+  const [isOpen, setIsOpen] = React2.useState(false);
+  const showHandler = React2.useCallback(() => {
+    setIsOpen(true);
+  }, []);
+  const hideHandler = React2.useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, __spreadProps(__spreadValues({ offset: offset3, placement, middlewares: [core.flip(), core.shift({ padding: 5 })] }, popperProps), { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      exports.Popper.Trigger,
+      {
+        ref: triggerRef,
+        isOpen,
+        onMouseOver: showHandler,
+        onMouseLeave: hideHandler,
+        onFocus: showHandler,
+        onBlur: hideHandler,
+        children: trigger
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { ref: portalRef, children: popper })
+  ] }));
+};
+Tooltip.Content = TooltipContent;
+exports.Tooltip = Tooltip;
 var SpaceMarginWrapper = styled5__default.default(framerMotion.motion.div)`
   position: relative;
   display: flex;