update storybook

Author: SaraVieira

packages/components/package.json

@@ -45,12 +45,12 @@
     "yarn": "^1.21.1"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^5.2.8",
-    "@storybook/addon-actions": "^5.2.8",
-    "@storybook/addon-knobs": "^5.2.8",
-    "@storybook/addon-storysource": "^5.2.8",
-    "@storybook/addon-viewport": "^5.2.8",
-    "@storybook/react": "^5.2.8",
+    "@storybook/addon-a11y": "^5.3.2",
+    "@storybook/addon-actions": "^5.3.2",
+    "@storybook/addon-knobs": "^5.3.2",
+    "@storybook/addon-storysource": "^5.3.2",
+    "@storybook/addon-viewport": "^5.3.2",
+    "@storybook/react": "^5.3.2",
     "@types/color": "3.0.1",
     "@types/lodash": "^4.14.149",
     "@types/styled-components": "^4.4.1",

packages/components/src/components/Select/index.tsx

@@ -7,37 +7,36 @@ import { Text } from '../Text';
 import { Element } from '../Element';
 
 // Svg used for the icon
-const svg = color =>
+const svg = (color: string) =>
   `"data:image/svg+xml,%3Csvg width='8' height='24' viewBox='0 0 8 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00006 17L1 13L7 13L4.00006 17Z' fill='%23${
     color.split('#')[1]
   }'/%3E%3Cpath d='M3.99994 7L7 11H1L3.99994 7Z' fill='%23${
     color.split('#')[1]
   }'/%3E%3C/svg%3E%0A"`;
 
-export const SelectComponent = styled.select<{ icon?: boolean }>(props =>
-  css({
-    width: '100%',
-    height: 6,
-    paddingX: 2,
-    paddingLeft: props.icon ? 6 : 2,
-    fontSize: 3,
-    borderRadius: 'small',
-    backgroundColor: 'input.background',
-    border: '1px solid',
-    borderColor: 'input.border',
-    color: 'input.placeholderForeground',
-    appearance: 'none',
-    backgroundImage: `url(${svg(
-      props.theme.colors.input.placeholderForeground
-    )})`,
-    backgroundPosition: 'calc(100% - 8px) center',
-    backgroundRepeat: 'no-repeat',
+export const SelectComponent = styled.select<{ icon?: boolean }>(
+  ({ icon, theme }) =>
+    css({
+      width: '100%',
+      height: 6,
+      paddingX: 2,
+      paddingLeft: icon ? 6 : 2,
+      fontSize: 3,
+      borderRadius: 'small',
+      backgroundColor: 'input.background',
+      border: '1px solid',
+      borderColor: 'input.border',
+      color: 'input.placeholderForeground',
+      appearance: 'none',
+      backgroundImage: `url(${svg(theme.colors.input.placeholderForeground)})`,
+      backgroundPosition: 'calc(100% - 8px) center',
+      backgroundRepeat: 'no-repeat',
 
-    ':hover': {
-      color: 'input.foreground',
-      backgroundImage: `url(${svg(props.theme.colors.input.foreground)})`,
-    },
-  })
+      ':hover': {
+        color: 'input.foreground',
+        backgroundImage: `url(${svg(theme.colors.input.foreground)})`,
+      },
+    })
 );
 
 const IconWrapper = styled(Element)(