<commit_before>import * as React from "react";
import {
  useMenuState,
  Menu as AriakitMenu,
  MenuItem as AriakitMenuItem,
  MenuButton as AriakitMenuButton,
  MenuSeparator as AriakitMenuSeparator,
  MenuButtonArrow as AriakitMenuButtonArrow,
} from "ariakit/menu";
import styled, { x } from "@xstyled/styled-components";
import { Icon } from "./Icon";

export { useMenuState };

const InnerMenuButton = styled.box`
  display: flex;
  align-items: center;
  border-radius: md;
  padding: 1 2;

  &:focus {
    background-color: background-focus;
  }

  &:hover {
    background-color: background-hover;
  }

  &[aria-expanded="true"] {
    background-color: background-active;
  }
`;

export const MenuButton = React.forwardRef(({ children, ...props }, ref) => {
  return (
    <AriakitMenuButton ref={ref} {...props}>
      {(menuProps) => (
        <InnerMenuButton {...menuProps}>{children}</InnerMenuButton>
      )}
    </AriakitMenuButton>
  );
});

export const MenuButtonArrow = (props) => (
  <x.div as={AriakitMenuButtonArrow} {...props} />
);

export const Menu = (props) => (
  <x.menu
    as={AriakitMenu}
    backgroundColor="background"
    border={1}
    borderColor="border"
    borderRadius="md"
    p={1}
    minWidth="110"
    zIndex="1000"
    {...props}
  />
);

export const MenuItem = ({ as, children, ...props }) => {
  return (
    <AriakitMenuItem {...props}>
      {(menuItemProps) => (
        <x.div
          as={as}
          appearance="none"
          backgroundColor={{
            _: "transparent",
            hover: "background-hover",
            focus: "background-focus",
          }}
          border={0}
          borderRadius="md"
          color="primary-text"
          fontSize="sm"
          w={1}
          transition="md"
          transitionProperty="background-color"
          textDecoration="none"
          display="flex"
          alignItems="center"
          gap="8px"
          p={2}
          fontWeight={600}
          pr={4}
          {...menuItemProps}
        >
          {children}
        </x.div>
      )}
    </AriakitMenuItem>
  );
};

export const MenuSeparator = (props) => (
  <x.div
    as={AriakitMenuSeparator}
    borderColor="border"
    my={0.5}
    height={0}
    borderTopWidth="1px"
    {...props}
  />
);

export const MenuText = (props) => (
  <x.div fontSize="sm" my={2} mx={2} fontWeight={600} pr={3} {...props} />
);

export const MenuTitle = (props) => (
  <x.div
    fontSize="sm"
    fontWeight={600}
    color="secondary-text"
    mx={2}
    pr={4}
    {...props}
  />
);

export const MenuIcon = (props) => <Icon size={24} w={5} h={5} {...props} />;
<commit_msg>fix(menu): fix separator padding<commit_after>import * as React from "react";
import {
  useMenuState,
  Menu as AriakitMenu,
  MenuItem as AriakitMenuItem,
  MenuButton as AriakitMenuButton,
  MenuSeparator as AriakitMenuSeparator,
  MenuButtonArrow as AriakitMenuButtonArrow,
} from "ariakit/menu";
import styled, { x } from "@xstyled/styled-components";
import { Icon } from "./Icon";

export { useMenuState };

const InnerMenuButton = styled.box`
  display: flex;
  align-items: center;
  border-radius: md;
  padding: 1 2;

  &:focus {
    background-color: background-focus;
  }

  &:hover {
    background-color: background-hover;
  }

  &[aria-expanded="true"] {
    background-color: background-active;
  }
`;

export const MenuButton = React.forwardRef(({ children, ...props }, ref) => {
  return (
    <AriakitMenuButton ref={ref} {...props}>
      {(menuProps) => (
        <InnerMenuButton {...menuProps}>{children}</InnerMenuButton>
      )}
    </AriakitMenuButton>
  );
});

export const MenuButtonArrow = (props) => (
  <x.div as={AriakitMenuButtonArrow} {...props} />
);

export const Menu = (props) => (
  <x.menu
    as={AriakitMenu}
    backgroundColor="background"
    border={1}
    borderColor="border"
    borderRadius="md"
    p={1}
    minWidth="110"
    zIndex="1000"
    {...props}
  />
);

export const MenuItem = ({ as, children, ...props }) => {
  return (
    <AriakitMenuItem {...props}>
      {(menuItemProps) => (
        <x.div
          as={as}
          appearance="none"
          backgroundColor={{
            _: "transparent",
            hover: "background-hover",
            focus: "background-focus",
          }}
          border={0}
          borderRadius="md"
          color="primary-text"
          fontSize="sm"
          w={1}
          transition="md"
          transitionProperty="background-color"
          textDecoration="none"
          display="flex"
          alignItems="center"
          gap="8px"
          p={2}
          fontWeight={600}
          pr={4}
          {...menuItemProps}
        >
          {children}
        </x.div>
      )}
    </AriakitMenuItem>
  );
};

export const MenuSeparator = (props) => (
  <x.div
    as={AriakitMenuSeparator}
    borderColor="border"
    my={1}
    height={0}
    borderTopWidth="1px"
    {...props}
  />
);

export const MenuText = (props) => (
  <x.div fontSize="sm" my={2} mx={2} fontWeight={600} pr={3} {...props} />
);

export const MenuTitle = (props) => (
  <x.div
    fontSize="sm"
    fontWeight={600}
    color="secondary-text"
    mx={2}
    pr={4}
    {...props}
  />
);

export const MenuIcon = (props) => <Icon size={24} w={5} h={5} {...props} />;

{'fraction_non_alphanumeric': 0.16432189082723692, 'fraction_numerical': 0.014068655036578503, 'mean_word_length': 2.376820772640912, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4602371', 'n_tokens_mistral': 1810, 'n_tokens_neox': 1768, 'n_words': 345}