fix(ts): resolves some withStyle errors

documentation-site/examples/spinner/next-custom.js

@@ -3,14 +3,17 @@
 import {withStyle} from 'baseui';
 import {StyledSpinnerNext} from 'baseui/spinner';
 
-const ExtraLargeSpinner = withStyle(StyledSpinnerNext, {
-  width: '96px',
-  height: '96px',
-  borderLeftWidth: '12px',
-  borderRightWidth: '12px',
-  borderTopWidth: '12px',
-  borderBottomWidth: '12px',
-  borderTopColor: 'pink',
-});
+const ExtraLargeSpinner = withStyle<typeof StyledSpinnerNext>(
+  StyledSpinnerNext,
+  {
+    width: '96px',
+    height: '96px',
+    borderLeftWidth: '12px',
+    borderRightWidth: '12px',
+    borderTopWidth: '12px',
+    borderBottomWidth: '12px',
+    borderTopColor: 'pink',
+  },
+);
 
 export default ExtraLargeSpinner;

src/app-nav-bar/styled-components.js

@@ -161,11 +161,14 @@ export const StyledSecondaryMenuContainer = styled<{}>('div', ({$theme}) => {
 
 export const StyledUserMenuButton = StyledButton;
 
-export const StyledUserMenuListItem = withStyle(StyledListItem, {
-  paddingTop: '0',
-  paddingBottom: '0',
-  paddingRight: '0',
-});
+export const StyledUserMenuListItem = withStyle<typeof StyledListItem>(
+  StyledListItem,
+  {
+    paddingTop: '0',
+    paddingBottom: '0',
+    paddingRight: '0',
+  },
+);
 
 export const StyledUserProfileTileContainer = styled<{}>('div', ({$theme}) => {
   return {

src/avatar/styled-components.js

@@ -50,7 +50,7 @@ export const Root = styled<RootStylePropsT>('div', props => {
   const {$didImageFailToLoad} = props;
   const themedSize = getSize(props);
 
-  return ({
+  return {
     backgroundColor: $didImageFailToLoad ? props.$theme.colors.primary : null,
     borderTopLeftRadius: '50%',
     borderTopRightRadius: '50%',
@@ -63,5 +63,5 @@ export const Root = styled<RootStylePropsT>('div', props => {
     // since image is not rendered, set the height/width
     height: $didImageFailToLoad ? themedSize : null,
     width: $didImageFailToLoad ? themedSize : null,
-  }: {});
+  };
 });

src/checkbox/styled-components.js

@@ -233,14 +233,14 @@ export const Checkmark = styled<SharedStylePropsT>('span', props => {
 export const Label = styled<SharedStylePropsT>('div', props => {
   const {$theme, $checkmarkType} = props;
   const {typography} = $theme;
-  return ({
+  return {
     flex: $checkmarkType === STYLE_TYPE.toggle ? 'auto' : null,
     verticalAlign: 'middle',
     ...getLabelPadding(props),
     color: getLabelColor(props),
     ...typography.LabelMedium,
     lineHeight: '24px',
-  }: {});
+  };
 });
 
 // tricky style for focus event cause display: none doesn't work
@@ -259,7 +259,7 @@ export const Toggle = styled<SharedStylePropsT>('div', props => {
     const borderRadius = props.$theme.borders.useRoundedCorners
       ? props.$theme.borders.radius200
       : null;
-    return ({
+    return {
       ...expandBorderStyles(props.$theme.borders.border300),
       alignItems: 'center',
       backgroundColor: props.$theme.colors.mono100,
@@ -275,7 +275,7 @@ export const Toggle = styled<SharedStylePropsT>('div', props => {
       justifyContent: 'center',
       height: props.$theme.sizing.scale800,
       width: props.$theme.sizing.scale800,
-    }: {});
+    };
   }
 
   if (props.$checkmarkType === STYLE_TYPE.toggle_round) {
@@ -352,7 +352,7 @@ export const ToggleTrack = styled<SharedStylePropsT>('div', props => {
     const borderRadius = props.$theme.borders.useRoundedCorners
       ? props.$theme.borders.radius200
       : null;
-    return ({
+    return {
       alignItems: 'center',
       backgroundColor: getBackgroundColor(props),
       borderTopLeftRadius: borderRadius,
@@ -367,7 +367,7 @@ export const ToggleTrack = styled<SharedStylePropsT>('div', props => {
       marginLeft: props.$theme.sizing.scale100,
       marginRight: props.$theme.sizing.scale100,
       width: props.$theme.sizing.scale1000,
-    }: {});
+    };
   }
 
   if (props.$checkmarkType === STYLE_TYPE.toggle_round) {

src/pin-code/styled-components.js

@@ -35,8 +35,11 @@ export const StyledInputOverrideRoot = withStyle<
   };
 });
 
-export const StyledInputOverrideInput = withStyle(StyledInputInput, {
-  textAlign: 'center',
-  paddingLeft: '0',
-  paddingRight: '0',
-});
+export const StyledInputOverrideInput = withStyle<typeof StyledInputInput>(
+  StyledInputInput,
+  {
+    textAlign: 'center',
+    paddingLeft: '0',
+    paddingRight: '0',
+  },
+);

src/styles/styled.js

@@ -44,12 +44,7 @@ type StyleFn<Theme> = {
     ({$theme: Theme} & Props) => StyleObject,
   ): StyletronComponent<Props>,
 
-  <Base: React.ComponentType<any>>(
-    Base,
-    StyleObject,
-  ): StyletronComponent<$Diff<React.ElementConfig<Base>, {className: any}>>,
-
-  <Base: React.ComponentType<any>, Props>(
+  <Base: React.ComponentType<any>, Props: {}>(
     Base,
     ({$theme: Theme} & Props) => StyleObject,
   ): StyletronComponent<
@@ -59,15 +54,10 @@ type StyleFn<Theme> = {
 
 type ExtractPropTypes = <T>(StyletronComponent<T>) => T;
 type WithStyleFn<Theme> = {
-  <Base: StyletronComponent<any>, Props>(
+  <Base: StyletronComponent<any>, Props: {}>(
     Base,
-    (Props & {$theme: Theme}) => StyleObject,
+    StyleObject | ((Props & {$theme: Theme}) => StyleObject),
   ): StyletronComponent<$Call<ExtractPropTypes, Base> & Props>,
-
-  <Base: StyletronComponent<any>>(
-    Base,
-    StyleObject,
-  ): StyletronComponent<$Call<ExtractPropTypes, Base>>,
 };
 /* eslint-enable flowtype/generic-spacing */
 /* eslint-enable flowtype/no-weak-types */

src/table/__tests__/table-cells.scenario.js

@@ -37,7 +37,7 @@ const StyledHeadingCell = withStyle(StyledCell, {
 const StyledDeltaCell = withStyle<typeof StyledCell, any>(
   StyledCell,
   props => ({
-    ...props.$theme.typography.font500,
+    ...props.$theme.typography.font400,
     alignItems: 'center',
     backgroundColor: props.$isNegative
       ? props.$theme.colors.negative50