chore: use alternate syntax for styled

packages/instant/src/components/ui/container.tsx

@@ -30,7 +30,10 @@ export interface ContainerProps {
     opacity?: number;
 }
 
-export const Container = styled<ContainerProps, 'div'>('div')`
+export const Container =
+    styled.div <
+    ContainerProps >
+    `
     box-sizing: border-box;
     ${props => cssRuleIfExists(props, 'display')}
     ${props => cssRuleIfExists(props, 'position')}

packages/instant/src/components/ui/flex.tsx

@@ -12,7 +12,10 @@ export interface FlexProps {
     className?: string;
 }
 
-export const Flex = styled<FlexProps, 'div'>('div')`
+export const Flex =
+    styled.div <
+    FlexProps >
+    `
     display: flex;
     flex-direction: ${props => props.direction};
     flex-wrap: ${props => props.flexWrap};

packages/instant/src/components/ui/input.tsx

@@ -12,7 +12,10 @@ export interface InputProps {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Input = styled<InputProps, 'input'>('input')`
+export const Input =
+    styled.input <
+    InputProps >
+    `
     font-size: ${props => props.fontSize};
     width: ${props => props.width};
     padding: 0.1em 0em;

packages/instant/src/components/ui/text.tsx

@@ -24,7 +24,10 @@ export interface TextProps {
 }
 
 const darkenOnHoverAmount = 0.3;
-export const Text = styled<TextProps, 'div'>('div')`
+export const Text =
+    styled.div <
+    TextProps >
+    `
     font-family: ${props => props.fontFamily};
     font-style: ${props => props.fontStyle};
     font-weight: ${props => props.fontWeight};