Merge branch 'feature/tabs' into main

package.json

@@ -61,14 +61,14 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/plugin-typescript": "^8.3.4",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/blocks": "^7.4.6",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-webpack5": "^7.4.6",
-    "@storybook/test-runner": "^0.13.0",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/test-runner": "^0.14.1",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/rollup": "^6.3.1",
     "@types/draftjs-to-html": "^0.8.1",
@@ -94,7 +94,7 @@
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "storybook": "^7.4.6",
+    "storybook": "^7.5.3",
     "typescript": "^5.1.6"
   },
   "resolutions": {

src/components/Tabs/Tabs.tsx

@@ -1,5 +1,6 @@
 import { CSSProperties, useEffect, useState } from 'react';
 import styled from 'styled-components';
+import media from 'styled-media-query';
 
 import Color from '../../constants/Color';
 import Text from '../Text/Text';
@@ -38,6 +39,11 @@ const Cell2 = styled.div<{selected: boolean, color?: string}>`
     &:hover{
         background-color: ${props => props.selected ? Color.background.primaryLow : Color.status.neutral.hover};
     }
+    ${(props) => media.lessThan("medium")`
+        &:hover{
+            background-color: ${props.color ? props.color : Color.status.neutral.hover};
+        }
+    `}
 `
 const Label2 = styled(Text)<{selected: boolean, textColor?: string}>`
     font-size: 14px;

src/components/TextArea/TextArea.stories.tsx

@@ -26,7 +26,10 @@ export const Default = {
 
 export const Editor = {
     args: {
-        type: 'edit'
+        type: 'edit',
+        style: {
+            height: 300
+        }
     },
 	play: async ({canvasElement}: any) =>{
 		const canvas = within(canvasElement);