@shoplflow/base 0.20.1 → 0.22.0

package/dist/index.d.cts

@@ -474,19 +474,19 @@ declare type PolymorphicComponentProps<T extends React__default.ElementType, Pro
     ref?: PolymorphicRef<T>;
 };
 
-declare const buttonSizeVar: {
+declare const ButtonSizeVariants: {
     readonly S: "S";
     readonly M: "M";
 };
-declare type ButtonSizeVar = $Values<typeof buttonSizeVar>;
-declare const buttonStyleVar: {
+declare type ButtonSizeVariantType = $Values<typeof ButtonSizeVariants>;
+declare const ButtonStyleVariants: {
     readonly PRIMARY: "PRIMARY";
     readonly SECONDARY: "SECONDARY";
     readonly SOLID: "SOLID";
     readonly GHOST: "GHOST";
 };
-declare type ButtonStyleVar = $Values<typeof buttonStyleVar>;
-declare type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVar> & StyleVariantProps<ButtonStyleVar> & ColorTokenProps & DisableProps & {
+declare type ButtonStyleVariantType = $Values<typeof ButtonStyleVariants>;
+declare type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVariantType> & StyleVariantProps<ButtonStyleVariantType> & ColorTokenProps & DisableProps & {
     typography?: TypographyTokens;
 };
 declare type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, ButtonOptionProps> & LeftAndRightNodeProps;
@@ -496,19 +496,19 @@ declare type ButtonComponent = <T extends ElementType = 'button'>(props: ButtonP
 
 declare const Button: ButtonComponent;
 
-declare const iconButtonSizeVar: {
+declare const IconButtonSizeVariants: {
     readonly S: "S";
     readonly M: "M";
 };
-declare type IconButtonSizeVar = $Values<typeof iconButtonSizeVar>;
-declare const iconButtonStyleVar: {
+declare type IconButtonSizeVariantType = $Values<typeof IconButtonSizeVariants>;
+declare const IconButtonStyleVariants: {
     readonly PRIMARY: "PRIMARY";
     readonly SECONDARY: "SECONDARY";
     readonly SOLID: "SOLID";
     readonly GHOST: "GHOST";
 };
-declare type IconButtonStyleVar = $Values<typeof iconButtonStyleVar>;
-declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVar> & StyleVariantProps<IconButtonStyleVar> & ChildrenProps & ColorTokenProps;
+declare type IconButtonStyleVariantType = $Values<typeof IconButtonStyleVariants>;
+declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVariantType> & StyleVariantProps<IconButtonStyleVariantType> & ChildrenProps & ColorTokenProps;
 declare type IconButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, IconButtonOptionProps>;
 declare type IconButtonComponent = <T extends ElementType = 'button'>(props: IconButtonProps<T> & {
     ref?: ComponentPropsWithRef<T>['ref'];
@@ -685,12 +685,12 @@ interface ScrollAreaOptionProps {
 
 declare const ScrollArea: ({ children, ...rest }: ScrollAreaProps) => react_jsx_runtime.JSX.Element;
 
-declare const dropdownOptionVar: {
+declare const DropdownOptionVariants: {
     readonly CLICK: "CLICK";
     readonly OUTSIDE_CLICK: "OUTSIDE_CLICK";
     readonly NONE: "NONE";
 };
-declare type DropdownOptionVar = $Values<typeof dropdownOptionVar>;
+declare type DropdownOptionVariantType = $Values<typeof DropdownOptionVariants>;
 interface DropdownProps extends DropdownOptionProps {
 }
 interface DropdownOptionProps {
@@ -708,7 +708,7 @@ interface DropdownOptionProps {
      * OUTSIDE_CLICK: 컨텐츠 영역 외부를 클릭하면 닫힙니다.
      * NONE: 클릭으로 닫히지 않습니다.
      */
-    option?: DropdownOptionVar;
+    option?: DropdownOptionVariantType;
     width?: CSSProperties['width'];
 }
 interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenProps {
@@ -1030,13 +1030,20 @@ declare const DropdownButtonIcon: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
 } & DropdownButtonProps, {}, {}>;
 
+declare const MenuSizeVariants: {
+    readonly XS: "XS";
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type MenuSizeVariantType = $Values<typeof MenuSizeVariants>;
 interface MenuProps extends MenuOptionProps, HTMLAttributes<HTMLLIElement> {
 }
-interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps {
+interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps, SizeVariantProps<MenuSizeVariantType> {
 }
 
-declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
+declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, sizeVar, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
 
+declare const getFontStylesBySizeVar: (sizeVar: MenuOptionProps['sizeVar']) => "body1_400" | "body2_400";
 declare const StyledMenu: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: React$1.ElementType<any> | undefined;
@@ -1209,4 +1216,4 @@ interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableP
 
 declare const Radio: ({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.d.ts

@@ -474,19 +474,19 @@ declare type PolymorphicComponentProps<T extends React__default.ElementType, Pro
     ref?: PolymorphicRef<T>;
 };
 
-declare const buttonSizeVar: {
+declare const ButtonSizeVariants: {
     readonly S: "S";
     readonly M: "M";
 };
-declare type ButtonSizeVar = $Values<typeof buttonSizeVar>;
-declare const buttonStyleVar: {
+declare type ButtonSizeVariantType = $Values<typeof ButtonSizeVariants>;
+declare const ButtonStyleVariants: {
     readonly PRIMARY: "PRIMARY";
     readonly SECONDARY: "SECONDARY";
     readonly SOLID: "SOLID";
     readonly GHOST: "GHOST";
 };
-declare type ButtonStyleVar = $Values<typeof buttonStyleVar>;
-declare type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVar> & StyleVariantProps<ButtonStyleVar> & ColorTokenProps & DisableProps & {
+declare type ButtonStyleVariantType = $Values<typeof ButtonStyleVariants>;
+declare type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVariantType> & StyleVariantProps<ButtonStyleVariantType> & ColorTokenProps & DisableProps & {
     typography?: TypographyTokens;
 };
 declare type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, ButtonOptionProps> & LeftAndRightNodeProps;
@@ -496,19 +496,19 @@ declare type ButtonComponent = <T extends ElementType = 'button'>(props: ButtonP
 
 declare const Button: ButtonComponent;
 
-declare const iconButtonSizeVar: {
+declare const IconButtonSizeVariants: {
     readonly S: "S";
     readonly M: "M";
 };
-declare type IconButtonSizeVar = $Values<typeof iconButtonSizeVar>;
-declare const iconButtonStyleVar: {
+declare type IconButtonSizeVariantType = $Values<typeof IconButtonSizeVariants>;
+declare const IconButtonStyleVariants: {
     readonly PRIMARY: "PRIMARY";
     readonly SECONDARY: "SECONDARY";
     readonly SOLID: "SOLID";
     readonly GHOST: "GHOST";
 };
-declare type IconButtonStyleVar = $Values<typeof iconButtonStyleVar>;
-declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVar> & StyleVariantProps<IconButtonStyleVar> & ChildrenProps & ColorTokenProps;
+declare type IconButtonStyleVariantType = $Values<typeof IconButtonStyleVariants>;
+declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVariantType> & StyleVariantProps<IconButtonStyleVariantType> & ChildrenProps & ColorTokenProps;
 declare type IconButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, IconButtonOptionProps>;
 declare type IconButtonComponent = <T extends ElementType = 'button'>(props: IconButtonProps<T> & {
     ref?: ComponentPropsWithRef<T>['ref'];
@@ -685,12 +685,12 @@ interface ScrollAreaOptionProps {
 
 declare const ScrollArea: ({ children, ...rest }: ScrollAreaProps) => react_jsx_runtime.JSX.Element;
 
-declare const dropdownOptionVar: {
+declare const DropdownOptionVariants: {
     readonly CLICK: "CLICK";
     readonly OUTSIDE_CLICK: "OUTSIDE_CLICK";
     readonly NONE: "NONE";
 };
-declare type DropdownOptionVar = $Values<typeof dropdownOptionVar>;
+declare type DropdownOptionVariantType = $Values<typeof DropdownOptionVariants>;
 interface DropdownProps extends DropdownOptionProps {
 }
 interface DropdownOptionProps {
@@ -708,7 +708,7 @@ interface DropdownOptionProps {
      * OUTSIDE_CLICK: 컨텐츠 영역 외부를 클릭하면 닫힙니다.
      * NONE: 클릭으로 닫히지 않습니다.
      */
-    option?: DropdownOptionVar;
+    option?: DropdownOptionVariantType;
     width?: CSSProperties['width'];
 }
 interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenProps {
@@ -1030,13 +1030,20 @@ declare const DropdownButtonIcon: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
 } & DropdownButtonProps, {}, {}>;
 
+declare const MenuSizeVariants: {
+    readonly XS: "XS";
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type MenuSizeVariantType = $Values<typeof MenuSizeVariants>;
 interface MenuProps extends MenuOptionProps, HTMLAttributes<HTMLLIElement> {
 }
-interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps {
+interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps, SizeVariantProps<MenuSizeVariantType> {
 }
 
-declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
+declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, sizeVar, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
 
+declare const getFontStylesBySizeVar: (sizeVar: MenuOptionProps['sizeVar']) => "body1_400" | "body2_400";
 declare const StyledMenu: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: React$1.ElementType<any> | undefined;
@@ -1209,4 +1216,4 @@ interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableP
 
 declare const Radio: ({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.js

@@ -1313,11 +1313,11 @@ var Button = forwardRef(
 var Button_default = Button;
 
 // src/components/Buttons/Button/Button.types.ts
-var buttonSizeVar = {
+var ButtonSizeVariants = {
   S: "S",
   M: "M"
 };
-var buttonStyleVar = {
+var ButtonStyleVariants = {
   PRIMARY: "PRIMARY",
   SECONDARY: "SECONDARY",
   SOLID: "SOLID",
@@ -1431,11 +1431,11 @@ var IconButton = forwardRef(
 var IconButton_default = IconButton;
 
 // src/components/Buttons/IconButton/IconButton.types.ts
-var iconButtonSizeVar = {
+var IconButtonSizeVariants = {
   S: "S",
   M: "M"
 };
-var iconButtonStyleVar = {
+var IconButtonStyleVariants = {
   PRIMARY: "PRIMARY",
   SECONDARY: "SECONDARY",
   SOLID: "SOLID",
@@ -1895,18 +1895,51 @@ var Dropdown = ({
 Dropdown.Button = DropdownButton;
 Dropdown.Content = DropdownContent;
 var Dropdown_default = Dropdown;
+var getStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "XS":
+      return css`
+        min-height: 28px;
+      `;
+    case "S":
+      return css`
+        min-height: 36px;
+      `;
+    case "M":
+      return css`
+        height: 48px;
+      `;
+    default:
+      return css`
+        height: 48px;
+      `;
+  }
+};
+var getFontStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "XS":
+      return "body2_400";
+    case "S":
+      return "body1_400";
+    case "M":
+      return "body1_400";
+    default:
+      return "body1_400";
+  }
+};
 var StyledMenu = styled5.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: ${colorTokens.neutral0};
+  cursor: pointer;
+  background: transparent;
+  ${({ sizeVar }) => getStylesBySizeVar(sizeVar)};
   &:hover {
-    background: ${colorTokens.neutral100};
+    background: ${colorTokens.neutral400_5};
   }
   ${({ disabled }) => disabled && getDisabledStyle(disabled)}
   ${({ isSelected, leftSource }) => isSelected === true && !leftSource && css`
@@ -1924,6 +1957,7 @@ var Menu = (_a) => {
     isSelected,
     defaultSelected = false,
     onClick,
+    sizeVar = "XS",
     disabled = false
   } = _b, rest = __objRest(_b, [
     "leftSource",
@@ -1932,6 +1966,7 @@ var Menu = (_a) => {
     "isSelected",
     "defaultSelected",
     "onClick",
+    "sizeVar",
     "disabled"
   ]);
   const [selected, handleToggle] = useOnToggle(isSelected, defaultSelected);
@@ -1942,13 +1977,31 @@ var Menu = (_a) => {
     !disabled && handleToggle();
     !disabled && onClick && onClick(e);
   };
-  return /* @__PURE__ */ jsxs(StyledMenu, __spreadProps(__spreadValues({ isSelected: selected, leftSource, onClick: handleOnClick }, rest), { "data-shoplflow": "Menu", children: [
-    leftSource && LeftSourceClone,
-    /* @__PURE__ */ jsx(Stack_default.Horizontal, { width: "100%", align: "center", className: "body1_400", children }),
-    rightSource && rightSource
-  ] }));
+  return /* @__PURE__ */ jsxs(
+    StyledMenu,
+    __spreadProps(__spreadValues({
+      sizeVar,
+      isSelected: selected,
+      leftSource,
+      onClick: handleOnClick
+    }, rest), {
+      "data-shoplflow": "Menu",
+      children: [
+        leftSource && LeftSourceClone,
+        /* @__PURE__ */ jsx(Stack_default.Horizontal, { width: "100%", height: "100%", align: "center", className: getFontStylesBySizeVar(sizeVar), children }),
+        rightSource && rightSource
+      ]
+    })
+  );
 };
 var Menu_default = Menu;
+
+// src/components/Menu/Menu.types.ts
+var MenuSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M"
+};
 var StyledList = styled5.li`
   display: flex;
   flex-direction: row;
@@ -2856,6 +2909,6 @@ classnames/index.js:
   *)
 */
 
-export { Button_default as Button, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, Radio_default as Radio, ScrollArea_default as ScrollArea, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch_default as Switch, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, Radio_default as Radio, ScrollArea_default as ScrollArea, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch_default as Switch, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map