chore: use alternate syntax for styled

4 files changed, 16 insertions, 4 deletions

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 7077d0aa3..76b570de7 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/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')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index d4e14d979..5fa3fc95b 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/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};
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 9db7d1c4c..a884ff7cb 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/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;
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index d23b0034d..fd72f6cc8 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/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};