@shoplflow/base 0.20.1 → 0.21.0

package/dist/index.cjs

@@ -1920,18 +1920,51 @@ var Dropdown = ({
 Dropdown.Button = DropdownButton;
 Dropdown.Content = DropdownContent;
 exports.Dropdown = Dropdown;
+var getStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "XS":
+      return react$1.css`
+        min-height: 28px;
+      `;
+    case "S":
+      return react$1.css`
+        min-height: 36px;
+      `;
+    case "M":
+      return react$1.css`
+        height: 48px;
+      `;
+    default:
+      return react$1.css`
+        height: 48px;
+      `;
+  }
+};
+exports.getFontStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "XS":
+      return "body2_400";
+    case "S":
+      return "body1_400";
+    case "M":
+      return "body1_400";
+    default:
+      return "body1_400";
+  }
+};
 exports.StyledMenu = styled5__default.default.li`
   display: flex;
-  flex-direction: row;
-  padding: 6px;
   width: 100%;
+  flex-direction: row;
   align-items: center;
+  padding: 6px;
   gap: 4px;
-  cursor: pointer;
   border-radius: 4px;
-  background: ${exports.colorTokens.neutral0};
+  cursor: pointer;
+  background: transparent;
+  ${({ sizeVar }) => getStylesBySizeVar(sizeVar)};
   &:hover {
-    background: ${exports.colorTokens.neutral100};
+    background: ${exports.colorTokens.neutral400_5};
   }
   ${({ disabled }) => disabled && getDisabledStyle(disabled)}
   ${({ isSelected, leftSource }) => isSelected === true && !leftSource && react$1.css`
@@ -1949,6 +1982,7 @@ var Menu = (_a) => {
     isSelected,
     defaultSelected = false,
     onClick,
+    sizeVar = "XS",
     disabled = false
   } = _b, rest = __objRest(_b, [
     "leftSource",
@@ -1957,6 +1991,7 @@ var Menu = (_a) => {
     "isSelected",
     "defaultSelected",
     "onClick",
+    "sizeVar",
     "disabled"
   ]);
   const [selected, handleToggle] = useOnToggle(isSelected, defaultSelected);
@@ -1967,13 +2002,31 @@ var Menu = (_a) => {
     !disabled && handleToggle();
     !disabled && onClick && onClick(e);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledMenu, __spreadProps(__spreadValues({ isSelected: selected, leftSource, onClick: handleOnClick }, rest), { "data-shoplflow": "Menu", children: [
-    leftSource && LeftSourceClone,
-    /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { width: "100%", align: "center", className: "body1_400", children }),
-    rightSource && rightSource
-  ] }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    exports.StyledMenu,
+    __spreadProps(__spreadValues({
+      sizeVar,
+      isSelected: selected,
+      leftSource,
+      onClick: handleOnClick
+    }, rest), {
+      "data-shoplflow": "Menu",
+      children: [
+        leftSource && LeftSourceClone,
+        /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { width: "100%", height: "100%", align: "center", className: exports.getFontStylesBySizeVar(sizeVar), children }),
+        rightSource && rightSource
+      ]
+    })
+  );
 };
 exports.Menu = Menu;
+
+// src/components/Menu/Menu.types.ts
+exports.MenuSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M"
+};
 exports.StyledList = styled5__default.default.li`
   display: flex;
   flex-direction: row;