theme: remove chonkstyled

static/app/components/actions/resolve.tsx

@@ -19,7 +19,6 @@ import type {GroupStatusResolution, ResolvedStatusDetails} from 'sentry/types/gr
 import {GroupStatus, GroupSubstatus} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {chonkStyled} from 'sentry/utils/theme/theme';
 import {withChonk} from 'sentry/utils/theme/withChonk';
 import useOrganization from 'sentry/utils/useOrganization';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
@@ -399,9 +398,9 @@ const ResolveButton = withChonk(
         }
       `}
   `,
-  chonkStyled(Button)`
+  styled(Button)`
     box-shadow: none;
-`
+  `
 );
 
 const DropdownTrigger = styled(Button)`

static/app/components/core/alert/alert.chonk.tsx

@@ -1,8 +1,9 @@
 import type {SerializedStyles} from '@emotion/react';
 import {css} from '@emotion/react';
+import styled from '@emotion/styled';
 
 import type {AlertProps} from 'sentry/components/core/alert';
-import {chonkStyled, type useChonkTheme} from 'sentry/utils/theme/theme';
+import {type useChonkTheme} from 'sentry/utils/theme/theme';
 import type {ChonkPropMapping} from 'sentry/utils/theme/withChonk';
 import {unreachable} from 'sentry/utils/unreachable';
 
@@ -22,7 +23,7 @@ interface ChonkAlertProps extends Omit<AlertProps, 'type'> {
   theme?: ReturnType<typeof useChonkTheme>;
 }
 
-export const AlertPanel = chonkStyled('div')<ChonkAlertProps>`
+export const AlertPanel = styled('div')<ChonkAlertProps>`
   position: relative;
   display: grid;
   grid-template-columns: ${p => getAlertGridLayout(p)};
@@ -131,7 +132,7 @@ function generateAlertBackground(
   `;
 }
 
-export const TrailingItems = chonkStyled('div')<ChonkAlertProps>`
+export const TrailingItems = styled('div')<ChonkAlertProps>`
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: max-content;
@@ -158,13 +159,13 @@ export const TrailingItems = chonkStyled('div')<ChonkAlertProps>`
   }
 `;
 
-export const Message = chonkStyled('div')`
+export const Message = styled('div')`
   line-height: ${p => p.theme.font.lineHeight.comfortable};
   place-content: center;
   padding-block: ${p => p.theme.space.xs};
 `;
 
-export const IconWrapper = chonkStyled('div')<{type: AlertProps['type']}>`
+export const IconWrapper = styled('div')<{type: AlertProps['type']}>`
   position: absolute;
   top: ${p => p.theme.space.lg};
   left: ${p => p.theme.space.lg};
@@ -173,16 +174,21 @@ export const IconWrapper = chonkStyled('div')<{type: AlertProps['type']}>`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${p => (['info', 'error'].includes(p.type) ? p.theme.colors.white : p.type === 'muted' ? p.theme.tokens.content.primary : p.theme.colors.black)};
+  color: ${p =>
+    ['info', 'error'].includes(p.type)
+      ? p.theme.colors.white
+      : p.type === 'muted'
+        ? p.theme.tokens.content.primary
+        : p.theme.colors.black};
 `;
 
-export const ExpandIconWrap = chonkStyled('div')`
+export const ExpandIconWrap = styled('div')`
   display: flex;
   align-items: center;
   align-self: flex-start;
 `;
 
-export const ExpandContainer = chonkStyled('div')<{
+export const ExpandContainer = styled('div')<{
   showIcon: boolean;
   showTrailingItems: boolean;
 }>`

static/app/components/core/badge/alertBadge.chonk.tsx

@@ -1,6 +1,7 @@
+import styled from '@emotion/styled';
+
 import type {AlertBadgeProps} from 'sentry/components/core/badge/alertBadge';
 import type {Theme} from 'sentry/utils/theme';
-import {chonkStyled} from 'sentry/utils/theme/theme';
 import {IncidentStatus} from 'sentry/views/alerts/types';
 
 function makeChonkAlertBadgeDiamondBackgroundTheme(
@@ -44,7 +45,7 @@ function makeChonkAlertBadgeDiamondBackgroundTheme(
   };
 }
 
-export const ChonkAlertBadgeDiamondBackground = chonkStyled('div')<AlertBadgeProps>`
+export const ChonkAlertBadgeDiamondBackground = styled('div')<AlertBadgeProps>`
   ${p => ({
     ...makeChonkAlertBadgeDiamondBackgroundTheme(
       p.status,

static/app/components/core/badge/badge.chonk.tsx

@@ -1,4 +1,6 @@
-import {chonkStyled, type useChonkTheme} from 'sentry/utils/theme/theme';
+import styled from '@emotion/styled';
+
+import {type useChonkTheme} from 'sentry/utils/theme/theme';
 import type {ChonkPropMapping} from 'sentry/utils/theme/withChonk';
 import {unreachable} from 'sentry/utils/unreachable';
 
@@ -31,7 +33,7 @@ export function ChonkBadge(props: ChonkBadgeProps) {
   return <StyledChonkBadge {...props} />;
 }
 
-const StyledChonkBadge = chonkStyled('span')<ChonkBadgeProps>`
+const StyledChonkBadge = styled('span')<ChonkBadgeProps>`
   ${p => ({...makeChonkBadgeTheme(p, p.theme)})};
   border-radius: ${p => p.theme.radius.sm};
   font-size: ${p => p.theme.font.size.sm};

static/app/components/core/badge/featureBadge.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import {Tooltip, type TooltipProps} from 'sentry/components/core/tooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {chonkStyled} from 'sentry/utils/theme/theme';
 import {withChonk} from 'sentry/utils/theme/withChonk';
 
 import {Badge, type BadgeProps} from './badge';
@@ -47,7 +46,7 @@ function InnerFeatureBadge({type, tooltipProps, ...props}: FeatureBadgeProps) {
  */
 export const FeatureBadge = styled(InnerFeatureBadge)``;
 
-const ChonkStyledBadge = chonkStyled(Badge)`
+const ChonkStyledBadge = styled(Badge)`
   text-transform: capitalize;
 `;
 

static/app/components/core/badge/tag.chonk.tsx

@@ -1,7 +1,8 @@
+import styled from '@emotion/styled';
+
 import type {TagProps} from 'sentry/components/core/badge/tag';
 import {space} from 'sentry/styles/space';
 import type {Theme} from 'sentry/utils/theme';
-import {chonkStyled} from 'sentry/utils/theme/theme';
 import {unreachable} from 'sentry/utils/unreachable';
 
 type TagType = 'default' | 'info' | 'success' | 'warning' | 'danger' | 'promotion';
@@ -24,7 +25,7 @@ export function chonkTagPropMapping(props: TagProps): ChonkTagProps {
   };
 }
 
-export const TagPill = chonkStyled('div')<{
+export const TagPill = styled('div')<{
   type?: TagType;
 }>`
   ${p => ({...makeTagPillTheme(p.type, p.theme)})};

static/app/components/core/checkbox/checkbox.chonk.tsx

@@ -1,6 +1,6 @@
-import {chonkStyled} from 'sentry/utils/theme/theme';
+import styled from '@emotion/styled';
 
-export const ChonkNativeHiddenCheckbox = chonkStyled('input')`
+export const ChonkNativeHiddenCheckbox = styled('input')`
   position: absolute;
   opacity: 0;
   top: 0;

static/app/components/core/input/inputGroup.chonk.tsx

@@ -5,7 +5,6 @@ import {Input} from 'sentry/components/core/input/index';
 import {TextArea} from 'sentry/components/core/textarea';
 import {space} from 'sentry/styles/space';
 import type {FormSize, StrictCSSObject, Theme} from 'sentry/utils/theme';
-import {chonkStyled} from 'sentry/utils/theme/theme';
 
 export interface InputStyleProps {
   leadingWidth?: number;
@@ -52,26 +51,26 @@ const chonkInputStyles = ({
   `}
 `;
 
-export const ChonkStyledInput = chonkStyled(Input)<InputStyleProps>`
+export const ChonkStyledInput = styled(Input)<InputStyleProps>`
   ${chonkInputStyles}
 `;
 
-export const ChonkStyledTextArea = chonkStyled(TextArea)<InputStyleProps>`
+export const ChonkStyledTextArea = styled(TextArea)<InputStyleProps>`
   ${chonkInputStyles}
 `;
 
-export const ChonkStyledLeadingItemsWrap = chonkStyled(InputItemsWrap)<{
+export const ChonkStyledLeadingItemsWrap = styled(InputItemsWrap)<{
   size: NonNullable<InputStyleProps['size']>;
   disablePointerEvents?: boolean;
 }>`
-    left: ${p => p.theme.form[p.size].paddingLeft + 1}px;
-    ${p => p.disablePointerEvents && `pointer-events: none;`}
-  `;
+  left: ${p => p.theme.form[p.size].paddingLeft + 1}px;
+  ${p => p.disablePointerEvents && `pointer-events: none;`}
+`;
 
-export const ChonkStyledTrailingItemsWrap = chonkStyled(InputItemsWrap)<{
+export const ChonkStyledTrailingItemsWrap = styled(InputItemsWrap)<{
   size: NonNullable<InputStyleProps['size']>;
   disablePointerEvents?: boolean;
 }>`
-    right: ${p => p.theme.form[p.size].paddingRight + 1}px;
-    ${p => p.disablePointerEvents && `pointer-events: none;`}
-  `;
+  right: ${p => p.theme.form[p.size].paddingRight + 1}px;
+  ${p => p.disablePointerEvents && `pointer-events: none;`}
+`;

static/app/components/core/menuListItem/menuListItem.chonk.tsx

@@ -1,9 +1,9 @@
 import isPropValid from '@emotion/is-prop-valid';
 import {css} from '@emotion/react';
+import styled from '@emotion/styled';
 
 import {space} from 'sentry/styles/space';
 import type {FormSize, Theme} from 'sentry/utils/theme';
-import {chonkStyled} from 'sentry/utils/theme/theme';
 
 /**
  * Menu item priority. Determines the text and background color.
@@ -49,7 +49,7 @@ const getVerticalPadding = (size: FormSize) => {
   }
 };
 
-export const ChonkInnerWrap = chonkStyled('div', {
+export const ChonkInnerWrap = styled('div', {
   shouldForwardProp: prop =>
     typeof prop === 'string' &&
     isPropValid(prop) &&
@@ -60,61 +60,61 @@ export const ChonkInnerWrap = chonkStyled('div', {
   priority: Priority;
   size: FormSize;
 }>`
-    display: flex;
-    position: relative;
-    padding: 0 ${space(1)} 0 ${space(1.5)};
-    padding-top: ${p => getVerticalPadding(p.size)};
-    padding-bottom: ${p => getVerticalPadding(p.size)};
-    border-radius: ${p => p.theme.radius.md};
-    box-sizing: border-box;
-
-    font-size: ${p => p.theme.form[p.size ?? 'md'].fontSize};
-
-    &,
-    &:hover,
-    &:focus,
-    &:focus-visible {
-      color: ${getTextColor};
-      box-shadow: none;
-      outline: none;
-    }
-    ${p => p.disabled && `cursor: default;`}
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: -1;
-    }
-
-    ${p =>
-      p.isFocused &&
-      css`
-        z-index: 1;
-        /* Background to hide the previous item's divider */
-        ::before {
-          background: ${p.theme.backgroundElevated};
-        }
-      `}
-  `;
-
-export const ChonkContentWrap = chonkStyled('div')<{
+  display: flex;
+  position: relative;
+  padding: 0 ${space(1)} 0 ${space(1.5)};
+  padding-top: ${p => getVerticalPadding(p.size)};
+  padding-bottom: ${p => getVerticalPadding(p.size)};
+  border-radius: ${p => p.theme.radius.md};
+  box-sizing: border-box;
+
+  font-size: ${p => p.theme.form[p.size ?? 'md'].fontSize};
+
+  &,
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    color: ${getTextColor};
+    box-shadow: none;
+    outline: none;
+  }
+  ${p => p.disabled && `cursor: default;`}
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
+
+  ${p =>
+    p.isFocused &&
+    css`
+      z-index: 1;
+      /* Background to hide the previous item's divider */
+      ::before {
+        background: ${p.theme.backgroundElevated};
+      }
+    `}
+`;
+
+export const ChonkContentWrap = styled('div')<{
   isFocused: boolean;
   size: FormSize;
 }>`
-    position: relative;
-    width: 100%;
-    min-width: 0;
-    display: flex;
-    gap: ${space(1)};
-    justify-content: space-between;
-    padding: 0;
-  `;
-
-export const ChonkLeadingItems = chonkStyled('div')<{
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  gap: ${space(1)};
+  justify-content: space-between;
+  padding: 0;
+`;
+
+export const ChonkLeadingItems = styled('div')<{
   disabled: boolean;
   size: FormSize;
 }>`
@@ -127,21 +127,21 @@ export const ChonkLeadingItems = chonkStyled('div')<{
   ${p => p.disabled && `opacity: 0.5;`}
 `;
 
-export const ChonkLabel = chonkStyled('div')`
+export const ChonkLabel = styled('div')`
   margin-bottom: 0;
   line-height: 1.4;
   white-space: nowrap;
 
   ${p => p.theme.overflowEllipsis}
 `;
 
-export const ChonkLabelWrap = chonkStyled('div')`
+export const ChonkLabelWrap = styled('div')`
   padding-right: ${space(1)};
   width: 100%;
   min-width: 0;
 `;
 
-export const ChonkDetails = chonkStyled('div')<{disabled: boolean; priority: Priority}>`
+export const ChonkDetails = styled('div')<{disabled: boolean; priority: Priority}>`
   font-size: ${p => p.theme.font.size.sm};
   color: ${p => p.theme.subText};
   line-height: 1.4;