@shoplflow/base 0.20.0 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -1030,13 +1030,20 @@ declare const DropdownButtonIcon: _emotion_styled.StyledComponent<{
1030
1030
  theme?: _emotion_react.Theme | undefined;
1031
1031
  } & DropdownButtonProps, {}, {}>;
1032
1032
 
1033
+ declare const MenuSizeVariants: {
1034
+ readonly XS: "XS";
1035
+ readonly S: "S";
1036
+ readonly M: "M";
1037
+ };
1038
+ declare type MenuSizeVariantKey = $Values<typeof MenuSizeVariants>;
1033
1039
  interface MenuProps extends MenuOptionProps, HTMLAttributes<HTMLLIElement> {
1034
1040
  }
1035
- interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps {
1041
+ interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps, SizeVariantProps<MenuSizeVariantKey> {
1036
1042
  }
1037
1043
 
1038
- declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
1044
+ declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, sizeVar, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
1039
1045
 
1046
+ declare const getFontStylesBySizeVar: (sizeVar: MenuOptionProps['sizeVar']) => "body1_400" | "body2_400";
1040
1047
  declare const StyledMenu: _emotion_styled.StyledComponent<{
1041
1048
  theme?: _emotion_react.Theme | undefined;
1042
1049
  as?: React$1.ElementType<any> | undefined;
@@ -1044,7 +1051,7 @@ declare const StyledMenu: _emotion_styled.StyledComponent<{
1044
1051
 
1045
1052
  interface ListProps extends ListOptionProps {
1046
1053
  }
1047
- interface ListOptionProps extends ChildrenProps, DisableProps, SelectedProps, LeftNodeProps, RightNodeProps {
1054
+ interface ListOptionProps extends ChildrenProps, DisableProps, SelectedProps, LeftNodeProps, RightNodeProps, HTMLAttributes<HTMLLIElement> {
1048
1055
  }
1049
1056
  interface ListContent2ColumnsProps extends ChildrenProps {
1050
1057
  }
@@ -1062,7 +1069,7 @@ declare const Text2Rows: ({ title, subTitle }: ListText2RowsProps) => react_jsx_
1062
1069
  declare const StyledList: _emotion_styled.StyledComponent<{
1063
1070
  theme?: _emotion_react.Theme | undefined;
1064
1071
  as?: React$1.ElementType<any> | undefined;
1065
- } & ListOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
1072
+ } & ListOptionProps, React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
1066
1073
  declare const StyledText2Rows: _emotion_styled.StyledComponent<{
1067
1074
  theme?: _emotion_react.Theme | undefined;
1068
1075
  as?: React$1.ElementType<any> | undefined;
@@ -1209,4 +1216,4 @@ interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableP
1209
1216
 
1210
1217
  declare const Radio: ({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
1211
1218
 
1212
- 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 };
1219
+ 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, MenuSizeVariantKey, 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, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
package/dist/index.d.ts CHANGED
@@ -1030,13 +1030,20 @@ declare const DropdownButtonIcon: _emotion_styled.StyledComponent<{
1030
1030
  theme?: _emotion_react.Theme | undefined;
1031
1031
  } & DropdownButtonProps, {}, {}>;
1032
1032
 
1033
+ declare const MenuSizeVariants: {
1034
+ readonly XS: "XS";
1035
+ readonly S: "S";
1036
+ readonly M: "M";
1037
+ };
1038
+ declare type MenuSizeVariantKey = $Values<typeof MenuSizeVariants>;
1033
1039
  interface MenuProps extends MenuOptionProps, HTMLAttributes<HTMLLIElement> {
1034
1040
  }
1035
- interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps {
1041
+ interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps, SizeVariantProps<MenuSizeVariantKey> {
1036
1042
  }
1037
1043
 
1038
- declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
1044
+ declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, sizeVar, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
1039
1045
 
1046
+ declare const getFontStylesBySizeVar: (sizeVar: MenuOptionProps['sizeVar']) => "body1_400" | "body2_400";
1040
1047
  declare const StyledMenu: _emotion_styled.StyledComponent<{
1041
1048
  theme?: _emotion_react.Theme | undefined;
1042
1049
  as?: React$1.ElementType<any> | undefined;
@@ -1044,7 +1051,7 @@ declare const StyledMenu: _emotion_styled.StyledComponent<{
1044
1051
 
1045
1052
  interface ListProps extends ListOptionProps {
1046
1053
  }
1047
- interface ListOptionProps extends ChildrenProps, DisableProps, SelectedProps, LeftNodeProps, RightNodeProps {
1054
+ interface ListOptionProps extends ChildrenProps, DisableProps, SelectedProps, LeftNodeProps, RightNodeProps, HTMLAttributes<HTMLLIElement> {
1048
1055
  }
1049
1056
  interface ListContent2ColumnsProps extends ChildrenProps {
1050
1057
  }
@@ -1062,7 +1069,7 @@ declare const Text2Rows: ({ title, subTitle }: ListText2RowsProps) => react_jsx_
1062
1069
  declare const StyledList: _emotion_styled.StyledComponent<{
1063
1070
  theme?: _emotion_react.Theme | undefined;
1064
1071
  as?: React$1.ElementType<any> | undefined;
1065
- } & ListOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
1072
+ } & ListOptionProps, React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
1066
1073
  declare const StyledText2Rows: _emotion_styled.StyledComponent<{
1067
1074
  theme?: _emotion_react.Theme | undefined;
1068
1075
  as?: React$1.ElementType<any> | undefined;
@@ -1209,4 +1216,4 @@ interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableP
1209
1216
 
1210
1217
  declare const Radio: ({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
1211
1218
 
1212
- 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 };
1219
+ 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, MenuSizeVariantKey, 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, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
package/dist/index.js CHANGED
@@ -905,10 +905,10 @@ var useOnToggle = (selected, defaultSelected) => {
905
905
  }
906
906
  }, [isControlled, selected]);
907
907
  useEffect(() => {
908
- if (defaultSelected !== void 0) {
908
+ if (!isControlled && defaultSelected !== void 0) {
909
909
  setIsToggle(defaultSelected);
910
910
  }
911
- }, [defaultSelected]);
911
+ }, [defaultSelected, isControlled]);
912
912
  return [isToggle, handleToggle];
913
913
  };
914
914
  var Switch = (_a) => {
@@ -1895,21 +1895,54 @@ var Dropdown = ({
1895
1895
  Dropdown.Button = DropdownButton;
1896
1896
  Dropdown.Content = DropdownContent;
1897
1897
  var Dropdown_default = Dropdown;
1898
+ var getStylesBySizeVar = (sizeVar) => {
1899
+ switch (sizeVar) {
1900
+ case "XS":
1901
+ return css`
1902
+ min-height: 28px;
1903
+ `;
1904
+ case "S":
1905
+ return css`
1906
+ min-height: 36px;
1907
+ `;
1908
+ case "M":
1909
+ return css`
1910
+ height: 48px;
1911
+ `;
1912
+ default:
1913
+ return css`
1914
+ height: 48px;
1915
+ `;
1916
+ }
1917
+ };
1918
+ var getFontStylesBySizeVar = (sizeVar) => {
1919
+ switch (sizeVar) {
1920
+ case "XS":
1921
+ return "body2_400";
1922
+ case "S":
1923
+ return "body1_400";
1924
+ case "M":
1925
+ return "body1_400";
1926
+ default:
1927
+ return "body1_400";
1928
+ }
1929
+ };
1898
1930
  var StyledMenu = styled5.li`
1899
1931
  display: flex;
1900
- flex-direction: row;
1901
- padding: 6px;
1902
1932
  width: 100%;
1933
+ flex-direction: row;
1903
1934
  align-items: center;
1935
+ padding: 6px;
1904
1936
  gap: 4px;
1905
- cursor: pointer;
1906
1937
  border-radius: 4px;
1907
- background: ${colorTokens.neutral0};
1938
+ cursor: pointer;
1939
+ background: transparent;
1940
+ ${({ sizeVar }) => getStylesBySizeVar(sizeVar)};
1908
1941
  &:hover {
1909
- background: ${colorTokens.neutral100};
1942
+ background: ${colorTokens.neutral400_5};
1910
1943
  }
1911
1944
  ${({ disabled }) => disabled && getDisabledStyle(disabled)}
1912
- ${({ isSelected, leftSource }) => isSelected && !leftSource && css`
1945
+ ${({ isSelected, leftSource }) => isSelected === true && !leftSource && css`
1913
1946
  background: ${colorTokens.neutral200};
1914
1947
  &:hover {
1915
1948
  background: ${colorTokens.neutral200};
@@ -1924,6 +1957,7 @@ var Menu = (_a) => {
1924
1957
  isSelected,
1925
1958
  defaultSelected = false,
1926
1959
  onClick,
1960
+ sizeVar = "XS",
1927
1961
  disabled = false
1928
1962
  } = _b, rest = __objRest(_b, [
1929
1963
  "leftSource",
@@ -1932,6 +1966,7 @@ var Menu = (_a) => {
1932
1966
  "isSelected",
1933
1967
  "defaultSelected",
1934
1968
  "onClick",
1969
+ "sizeVar",
1935
1970
  "disabled"
1936
1971
  ]);
1937
1972
  const [selected, handleToggle] = useOnToggle(isSelected, defaultSelected);
@@ -1942,14 +1977,32 @@ var Menu = (_a) => {
1942
1977
  !disabled && handleToggle();
1943
1978
  !disabled && onClick && onClick(e);
1944
1979
  };
1945
- return /* @__PURE__ */ jsxs(StyledMenu, __spreadProps(__spreadValues({ isSelected: selected, leftSource, onClick: handleOnClick }, rest), { "data-shoplflow": "Menu", children: [
1946
- leftSource && LeftSourceClone,
1947
- /* @__PURE__ */ jsx(Stack_default.Horizontal, { width: "100%", align: "center", className: "body1_400", children }),
1948
- rightSource && rightSource
1949
- ] }));
1980
+ return /* @__PURE__ */ jsxs(
1981
+ StyledMenu,
1982
+ __spreadProps(__spreadValues({
1983
+ sizeVar,
1984
+ isSelected: selected,
1985
+ leftSource,
1986
+ onClick: handleOnClick
1987
+ }, rest), {
1988
+ "data-shoplflow": "Menu",
1989
+ children: [
1990
+ leftSource && LeftSourceClone,
1991
+ /* @__PURE__ */ jsx(Stack_default.Horizontal, { width: "100%", height: "100%", align: "center", className: getFontStylesBySizeVar(sizeVar), children }),
1992
+ rightSource && rightSource
1993
+ ]
1994
+ })
1995
+ );
1950
1996
  };
1951
1997
  var Menu_default = Menu;
1952
- var StyledList = styled5.div`
1998
+
1999
+ // src/components/Menu/Menu.types.ts
2000
+ var MenuSizeVariants = {
2001
+ XS: "XS",
2002
+ S: "S",
2003
+ M: "M"
2004
+ };
2005
+ var StyledList = styled5.li`
1953
2006
  display: flex;
1954
2007
  flex-direction: row;
1955
2008
  width: 100%;
@@ -2856,6 +2909,6 @@ classnames/index.js:
2856
2909
  *)
2857
2910
  */
2858
2911
 
2859
- 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 };
2912
+ 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, 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, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
2860
2913
  //# sourceMappingURL=out.js.map
2861
2914
  //# sourceMappingURL=index.js.map