fix: make Input variant and size responsive again

freenowtech · May 25, 2023 · 590ac14 · 590ac14
1 parent f48369a
commit 590ac14
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/components/Input/BoxedInput.ts b/src/components/Input/BoxedInput.ts
@@ -48,7 +48,7 @@ const BoxedInput: FC<InternalInputComponentProps> = styled(BaseInput)<InternalIn
         background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
         background: ${p =>
             `linear-gradient(0deg, ${p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE} calc(50% + ${
-                p.size === 'small' ? '0.0825rem' : '0.0625rem'
+                (p.size as Pick<InternalInputComponentProps, 'size'>['size']) === 'small' ? '0.0825rem' : '0.0625rem'
             }), transparent 50%)`};
     }
 
@@ -75,7 +75,9 @@ const BoxedInput: FC<InternalInputComponentProps> = styled(BaseInput)<InternalIn
             background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
             background: ${p =>
                 `linear-gradient(0deg, ${p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE} calc(50% + ${
-                    p.size === 'small' ? '0.0825rem' : '0.0625rem'
+                    (p.size as Pick<InternalInputComponentProps, 'size'>['size']) === 'small'
+                        ? '0.0825rem'
+                        : '0.0625rem'
                 }), transparent 50%)`};
         }
     }

diff --git a/src/components/Input/InputProps.ts b/src/components/Input/InputProps.ts
@@ -1,16 +1,17 @@
 import { ComponentPropsWithRef } from 'react';
+import { ResponsiveValue } from 'styled-system';
 
 interface InputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'width'> {
     /**
      * Sets the variant of the input
      * @default boxed
      */
-    variant?: 'boxed' | 'bottom-lined';
+    variant?: ResponsiveValue<'boxed' | 'bottom-lined'>;
     /**
      * Sets the size of the input
      * @default medium
      */
-    size?: 'small' | 'medium';
+    size?: ResponsiveValue<'small' | 'medium'>;
     /**
      * Inverts the colors of the input
      */