Repository: streamlit/streamlit
File: frontend/app/src/components/StreamlitDialog/styled-components.ts (TypeScript)

Code before:
  marginBottom: 0,
  marginTop: 0,
  lineHeight: theme.lineHeights.tight,
  fontSize: theme.fontSizes.sm,
}))

export const StyledHr = styled.hr(({ theme }) => ({
  padding: 0,
  marginBottom: 0,
  marginLeft: `-${theme.spacing.xl}`,
  marginRight: `-${theme.spacing.xl}`,
  marginTop: 0,
}))

export const StyledButtonContainer = styled.div(({ theme }) => ({
  marginTop: theme.spacing.md,
}))

export const StyledCheckbox = styled.input(({ theme }) => ({
  marginRight: theme.spacing.xs,
  appearance: "none",
  border: `${theme.sizes.borderWidth} solid ${theme.colors.borderColor}`,
  width: theme.fontSizes.md,
  height: theme.fontSizes.md,
  borderRadius: `min(${theme.radii.md}, ${theme.radii.maxCheckbox})`,
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  padding: 0,
  verticalAlign: "middle",
  overflow: "hidden",

  "&:focus-visible": {
    outline: `2px solid ${theme.colors.primary}`,
  },

  "&:checked": {
    backgroundColor: theme.colors.primary,

    "&:after": {
      content: '"✓"',
      fontFamily: theme.fonts.monospace,
      fontSize: theme.fontSizes.md,
      color: theme.colors.white,
      lineHeight: theme.lineHeights.none,
    },
  },

  "&:disabled": {
    backgroundColor: theme.colors.darkenedBgMix15,
  },

Review comment (performance):
**nitpick:** instead of using the CopyButton from CodeBlock, its also quite simple to just implement this from scratch via the `useCopyToClipboard` and `DynamicIcon`. This way we can created a styled copy button here thats optimized for this component instead of having this class based sub-component styling. Examples:

https://github.com/streamlit/streamlit/blob/d387516acb6409e84c4ac569d537ca9ff08bab28/frontend/lib/src/components/widgets/DataFrame/menus/ColumnMenu.tsx#L127-L137

https://github.com/streamlit/streamlit/blob/d387516acb6409e84c4ac569d537ca9ff08bab28/frontend/lib/src/components/elements/Json/JsonPathTooltip.tsx#L72-L83

Code after:
  marginBottom: 0,
  marginTop: 0,
  lineHeight: theme.lineHeights.tight,
  fontSize: theme.fontSizes.sm,
}))

export const StyledVersionRow = styled.div(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  gap: theme.spacing.sm,
  color: "inherit",
  fontSize: theme.fontSizes.sm,
  lineHeight: theme.lineHeights.base,

  ".stVersionCopyButton": {
    opacity: 0,
    pointerEvents: "none",
    transform: "scale(0.9)",
    transition: "opacity 120ms ease, transform 120ms ease",
  },

  "&:hover .stVersionCopyButton, &:focus-within .stVersionCopyButton": {
    opacity: 1,
    pointerEvents: "auto",
    transform: "scale(1)",
  },
}))

export const StyledVersionText = styled.span({
  display: "inline-flex",
  alignItems: "center",
  opacity: 0.6,
})

export const StyledHr = styled.hr(({ theme }) => ({
  padding: 0,
  marginBottom: 0,
  marginLeft: `-${theme.spacing.xl}`,
  marginRight: `-${theme.spacing.xl}`,
  marginTop: 0,
}))

export const StyledButtonContainer = styled.div(({ theme }) => ({
  marginTop: theme.spacing.md,
}))

export const StyledCheckbox = styled.input(({ theme }) => ({
  marginRight: theme.spacing.xs,
  appearance: "none",
  border: `${theme.sizes.borderWidth} solid ${theme.colors.borderColor}`,
  width: theme.fontSizes.md,