@storybook/components - npm Package Compare versions

Comparing version 4.0.0-alpha.18 to 4.0.0-alpha.20

dist/form/field.js

@@ -14,7 +14,7 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var Wrapper =
 /*#__PURE__*/
-(0, _reactEmotion.default)('label', {
+(0, _styled.default)("label", {
   target: "emawvna0"
@@ -38,3 +38,3 @@ })(function (_ref) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('span', {
+(0, _styled.default)("span", {
   target: "emawvna1"
@@ -41,0 +41,0 @@ })({

dist/form/input.js

@@ -10,3 +10,3 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
@@ -128,3 +128,3 @@ var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));
 /*#__PURE__*/
-(0, _reactEmotion.default)('input', {
+(0, _styled.default)("input", {
   target: "e1lk8yn70"
@@ -141,3 +141,3 @@ })(styles, sizes, alignment, validation, {
 /*#__PURE__*/
-(0, _reactEmotion.default)('select', {
+(0, _styled.default)("select", {
   target: "e1lk8yn71"
@@ -153,3 +153,3 @@ })(styles, sizes, alignment, validation, {
 /*#__PURE__*/
-(0, _reactEmotion.default)(_reactTextareaAutosize.default, {
+(0, _styled.default)(_reactTextareaAutosize.default, {
   target: "e1lk8yn72"
@@ -166,3 +166,3 @@ })(styles, sizes, alignment, validation, {
 /*#__PURE__*/
-(0, _reactEmotion.default)('button', {
+(0, _styled.default)("button", {
   target: "e1lk8yn73"
@@ -169,0 +169,0 @@ })(styles, sizes, alignment, validation, {

dist/header/header.js

@@ -16,7 +16,7 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var Wrapper =
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "ez1mtsr0"
@@ -32,3 +32,3 @@ })(function (_ref) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('a', {
+(0, _styled.default)("a", {
   target: "ez1mtsr1"
@@ -56,3 +56,3 @@ })({
 /*#__PURE__*/
-(0, _reactEmotion.default)('button', {
+(0, _styled.default)("button", {
   target: "ez1mtsr2"
@@ -59,0 +59,0 @@ })({

dist/header/header.test.js

@@ -14,8 +14,8 @@ "use strict";
     var openShortcutsHelp = jest.fn();
-    var wrap = (0, _enzyme.shallow)(_react.default.createElement(_header.default, {
+    var wrap = (0, _enzyme.mount)(_react.default.createElement(_header.default, {
       openShortcutsHelp: openShortcutsHelp
     }));
-    wrap.find('Styled(button)').simulate('click');
+    wrap.find('button').simulate('click');
     expect(openShortcutsHelp).toHaveBeenCalled();
   });
 });

dist/highlight_button.js

@@ -10,7 +10,7 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _default =
 /*#__PURE__*/
-(0, _reactEmotion.default)('button', {
+(0, _styled.default)("button", {
   target: "e1i4ski80"
@@ -17,0 +17,0 @@ })({

dist/layout/desktop.js

@@ -30,5 +30,5 @@ "use strict";
 
-var _emotion = require("emotion");
+var _core = require("@emotion/core");
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
@@ -41,7 +41,15 @@ var _lodash = _interopRequireDefault(require("lodash.throttle"));
 
-// eslint-disable-next-line no-unused-expressions
-(0, _emotion.injectGlobal)(".Resizer{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;}.Resizer.horizontal{height:10px;margin:-5px 0;border-top:5px solid transparent;border-bottom:5px solid transparent;cursor:row-resize;width:100%;}.Resizer.horizontal::after{content:'';display:block;height:2px;width:20px;border-top:1px solid rgba(0,0,0,0.2);border-bottom:1px solid rgba(0,0,0,0.2);}.Resizer.vertical{width:10px;margin:0 -5px;border-left:5px solid transparent;border-right:5px solid transparent;cursor:col-resize;}.Resizer.vertical::after{content:'';display:block;width:2px;height:20px;border-left:1px solid rgba(0,0,0,0.2);border-right:1px solid rgba(0,0,0,0.2);}.Resizer.disabled{visibility:hidden;}");
+var GlobalStyles = function GlobalStyles() {
+  return _react.default.createElement(_core.Global, {
+    styles:
+    /*#__PURE__*/
+
+    /*#__PURE__*/
+    (0, _core.css)(".Resizer{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;}.Resizer.horizontal{height:10px;margin:-5px 0;border-top:5px solid transparent;border-bottom:5px solid transparent;cursor:row-resize;width:100%;}.Resizer.horizontal::after{content:'';display:block;height:2px;width:20px;border-top:1px solid rgba(0,0,0,0.2);border-bottom:1px solid rgba(0,0,0,0.2);}.Resizer.vertical{width:10px;margin:0 -5px;border-left:5px solid transparent;border-right:5px solid transparent;cursor:col-resize;}.Resizer.vertical::after{content:'';display:block;width:2px;height:20px;border-left:1px solid rgba(0,0,0,0.2);border-right:1px solid rgba(0,0,0,0.2);}.Resizer.disabled{visibility:hidden;}")
+  });
+};
+
 var StoriesPanelWrapper =
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e97yylu0"
@@ -63,3 +71,3 @@ })(function (_ref) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e97yylu1"
@@ -75,3 +83,3 @@ })({
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e97yylu2"
@@ -95,3 +103,3 @@ })(function (_ref2) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e97yylu3"
@@ -113,3 +121,3 @@ })(function (_ref3) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e97yylu4"
@@ -152,3 +160,3 @@ })(function (_ref4) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e97yylu5"
@@ -318,3 +326,3 @@ })(function (_ref6) {
         storiesPanelOnTop: storiesPanelOnTop
-      }, _react.default.createElement(StoriesPanelInner, null, _react.default.createElement(StoriesPanel, null))), _react.default.createElement(_reactSplitPane.default, {
+      }, _react.default.createElement(GlobalStyles, null), _react.default.createElement(StoriesPanelInner, null, _react.default.createElement(StoriesPanel, null))), _react.default.createElement(_reactSplitPane.default, {
         split: addonSplit,
@@ -321,0 +329,0 @@ allowResize: showAddonPanel,

dist/layout/dimensions.js

@@ -28,3 +28,3 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
@@ -34,3 +34,3 @@ var DISPLAY_TIMEOUT = 1000;
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "eiokus70"
@@ -47,3 +47,3 @@ })({
 /*#__PURE__*/
-(0, _reactEmotion.default)('span', {
+(0, _styled.default)("span", {
   target: "eiokus71"
@@ -55,3 +55,3 @@ })({
 /*#__PURE__*/
-(0, _reactEmotion.default)('span', {
+(0, _styled.default)("span", {
   target: "eiokus72"
@@ -58,0 +58,0 @@ })({

dist/layout/index.js

@@ -14,5 +14,5 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _emotionTheming = require("emotion-theming");
+var _provider = _interopRequireDefault(require("@emotion/provider"));
 
@@ -27,3 +27,3 @@ var _theme = require("../theme");
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e7rfqu0"
@@ -60,3 +60,3 @@ })(function (_ref) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e7rfqu1"
@@ -79,3 +79,3 @@ })({
       SearchBox = props.searchBox;
-  return _react.default.createElement(_emotionTheming.ThemeProvider, {
+  return _react.default.createElement(_provider.default, {
     theme: theme || _theme.normal
@@ -82,0 +82,0 @@ }, _react.default.createElement("div", null, _react.default.createElement(Root, {

dist/layout/mobile.js

@@ -30,3 +30,3 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
@@ -37,3 +37,3 @@ var _tabs = require("../tabs/tabs");
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e16i77hj0"
@@ -57,3 +57,3 @@ })(function (_ref) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e16i77hj1"
@@ -60,0 +60,0 @@ })({

dist/navigation/MenuLink.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
@@ -19,3 +19,3 @@ var _RoutedLink = _interopRequireDefault(require("./RoutedLink"));
 /*#__PURE__*/
-(0, _reactEmotion.default)(_RoutedLink.default, {
+(0, _styled.default)(_RoutedLink.default, {
   rootEl: 'a',
@@ -22,0 +22,0 @@ target: "e1s7lmdh0"

dist/panel_actionbar/panel_actionbar.js

@@ -16,7 +16,7 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var Container =
 /*#__PURE__*/
-(0, _reactEmotion.default)('ul', {
+(0, _styled.default)("ul", {
   target: "egs2kzf0"
@@ -42,3 +42,3 @@ })(function (_ref) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('button', {
+(0, _styled.default)("button", {
   target: "egs2kzf1"
@@ -68,3 +68,3 @@ })(function (_ref2) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('li', {
+(0, _styled.default)("li", {
   target: "egs2kzf2"
@@ -71,0 +71,0 @@ })(function (_ref3) {

dist/placeholder/placeholder.js

@@ -10,7 +10,7 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _default =
 /*#__PURE__*/
-(0, _reactEmotion.default)('p', {
+(0, _styled.default)("p", {
   target: "ejh6i270"
@@ -17,0 +17,0 @@ })({

dist/table/cell.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
@@ -31,3 +31,3 @@ var dynamicStyles = function dynamicStyles(_ref) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('td', {
+(0, _styled.default)("td", {
   target: "e6fp4ir0"
@@ -38,3 +38,3 @@ })(styles, dynamicStyles);
 /*#__PURE__*/
-(0, _reactEmotion.default)('th', {
+(0, _styled.default)("th", {
   target: "e6fp4ir1"
@@ -41,0 +41,0 @@ })(styles, dynamicStyles);

dist/table/table.js

@@ -10,7 +10,7 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var Table =
 /*#__PURE__*/
-(0, _reactEmotion.default)('table', {
+(0, _styled.default)("table", {
   target: "e1vdo5380"
@@ -17,0 +17,0 @@ })({

dist/tabs/tabs.js

@@ -30,3 +30,3 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
@@ -37,3 +37,3 @@ var _placeholder = _interopRequireDefault(require("../placeholder/placeholder"));
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e1lzzkxx0"
@@ -63,3 +63,3 @@ })(function (_ref) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e1lzzkxx1"
@@ -80,3 +80,3 @@ })(function (_ref3) {
 /*#__PURE__*/
-(0, _reactEmotion.default)('button', {
+(0, _styled.default)("button", {
   target: "e1lzzkxx2"
@@ -128,3 +128,3 @@ })({
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e1lzzkxx3"
@@ -173,3 +173,3 @@ })({
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _styled.default)("div", {
   target: "e1lzzkxx4"
@@ -176,0 +176,0 @@ })(function (_ref8) {

package.json

 {
   "name": "@storybook/components",
-  "version": "4.0.0-alpha.18",
+  "version": "4.0.0-alpha.20",
   "description": "Core Storybook Components",
@@ -18,4 +18,5 @@ "repository": {
   "dependencies": {
-    "emotion": "^9.2.6",
-    "emotion-theming": "^9.2.6",
+    "@emotion/core": "0.13.0",
+    "@emotion/provider": "0.11.1",
+    "@emotion/styled": "0.10.5",
     "global": "^4.3.2",
@@ -25,3 +26,2 @@ "lodash.pick": "^4.4.0",
     "prop-types": "^15.6.2",
-    "react-emotion": "^9.2.6",
     "react-inspector": "^2.3.0",
@@ -33,5 +33,5 @@ "react-split-pane": "^0.1.82",
   "devDependencies": {
-    "@storybook/addon-actions": "4.0.0-alpha.18",
-    "@storybook/addon-knobs": "4.0.0-alpha.18",
-    "@storybook/react": "4.0.0-alpha.18"
+    "@storybook/addon-actions": "4.0.0-alpha.20",
+    "@storybook/addon-knobs": "4.0.0-alpha.20",
+    "@storybook/react": "4.0.0-alpha.20"
   },
@@ -38,0 +38,0 @@ "peerDependencies": {

src/form/field.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const Wrapper = styled('label')(({ theme }) => ({
+const Wrapper = styled.label(({ theme }) => ({
   width: '100%',
@@ -19,3 +19,3 @@ boxSizing: 'border-box',
 
-const Label = styled('span')({
+const Label = styled.span({
   minWidth: 100,
@@ -22,0 +22,0 @@ minHeight: 32,

src/form/input.js

@@ -1,2 +0,2 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
@@ -70,3 +70,3 @@ import TextareaAutoResize from 'react-textarea-autosize';
 
-export const Input = styled('input')(styles, sizes, alignment, validation, { minHeight: 32 });
+export const Input = styled.input(styles, sizes, alignment, validation, { minHeight: 32 });
 Input.styles = styles;
@@ -76,3 +76,3 @@ Input.sizes = sizes;
 Input.displayName = 'Input';
-export const Select = styled('select')(styles, sizes, alignment, validation, {
+export const Select = styled.select(styles, sizes, alignment, validation, {
   height: 32,
@@ -91,3 +91,3 @@ userSelect: 'none',
 
-export const Button = styled('button')(styles, sizes, alignment, validation, {
+export const Button = styled.button(styles, sizes, alignment, validation, {
   cursor: 'pointer',
@@ -94,0 +94,0 @@ userSelect: 'none',

src/header/header.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const Wrapper = styled('div')(({ theme }) => ({
+const Wrapper = styled.div(({ theme }) => ({
   margin: '0 0 10px',
@@ -11,3 +11,3 @@ display: 'flex',
 
-const HeadingLink = styled('a')({
+const HeadingLink = styled.a({
   textDecoration: 'none',
@@ -32,3 +32,3 @@ flexGrow: 1,
 
-const ShortHelpButton = styled('button')({
+const ShortHelpButton = styled.button({
   textTransform: 'uppercase',
@@ -35,0 +35,0 @@ fontSize: 12,

src/header/header.test.js

 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import Header from './header';
@@ -8,5 +8,5 @@
     const openShortcutsHelp = jest.fn();
-    const wrap = shallow(<Header openShortcutsHelp={openShortcutsHelp} />);
+    const wrap = mount(<Header openShortcutsHelp={openShortcutsHelp} />);
 
-    wrap.find('Styled(button)').simulate('click');
+    wrap.find('button').simulate('click');
 
@@ -13,0 +13,0 @@ expect(openShortcutsHelp).toHaveBeenCalled();

src/highlight_button.js

@@ -1,4 +0,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-export default styled('button')(
+export default styled.button(
   {
@@ -5,0 +5,0 @@ border: '1px solid rgba(0, 0, 0, 0)',

src/layout/desktop.js

@@ -5,4 +5,4 @@ import React, { Component } from 'react';
 
-import { injectGlobal } from 'emotion';
-import styled from 'react-emotion';
+import { Global, css } from '@emotion/core';
+import styled from '@emotion/styled';
 import throttle from 'lodash.throttle';
@@ -14,51 +14,54 @@
 
-// eslint-disable-next-line no-unused-expressions
-injectGlobal`
-.Resizer {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+const GlobalStyles = () => (
+  <Global
+    styles={css`
+      .Resizer {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
 
-.Resizer.horizontal {
-  height: 10px;
-  margin: -5px 0;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  cursor: row-resize;
-  width: 100%;
-}
-.Resizer.horizontal::after {
-  content: '';
-  display: block;
-  height: 2px;
-  width: 20px;
-  border-top: 1px solid rgba(0,0,0, 0.2);
-  border-bottom: 1px solid rgba(0,0,0, 0.2);
-}
+      .Resizer.horizontal {
+        height: 10px;
+        margin: -5px 0;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        cursor: row-resize;
+        width: 100%;
+      }
+      .Resizer.horizontal::after {
+        content: '';
+        display: block;
+        height: 2px;
+        width: 20px;
+        border-top: 1px solid rgba(0, 0, 0, 0.2);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      }
 
-.Resizer.vertical {
-  width: 10px;
-  margin: 0 -5px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  cursor: col-resize;
-}
-.Resizer.vertical::after {
-  content: '';
-  display: block;
-  width: 2px;
-  height: 20px;
-  border-left: 1px solid rgba(0,0,0, 0.2);
-  border-right: 1px solid rgba(0,0,0, 0.2);
-}
+      .Resizer.vertical {
+        width: 10px;
+        margin: 0 -5px;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        cursor: col-resize;
+      }
+      .Resizer.vertical::after {
+        content: '';
+        display: block;
+        width: 2px;
+        height: 20px;
+        border-left: 1px solid rgba(0, 0, 0, 0.2);
+        border-right: 1px solid rgba(0, 0, 0, 0.2);
+      }
 
-.Resizer.disabled {
-  visibility: hidden;
-}
-`;
+      .Resizer.disabled {
+        visibility: hidden;
+      }
+    `}
+  />
+);
 
-const StoriesPanelWrapper = styled('div')(({ showStoriesPanel, storiesPanelOnTop }) => ({
+const StoriesPanelWrapper = styled.div(({ showStoriesPanel, storiesPanelOnTop }) => ({
   boxSizing: 'border-box',
@@ -73,3 +76,3 @@ width: '100%',
 
-const StoriesPanelInner = styled('div')({
+const StoriesPanelInner = styled.div({
   flexGrow: 1,
@@ -82,3 +85,3 @@ position: 'relative',
 
-const AddonPanelWrapper = styled('div')(
+const AddonPanelWrapper = styled.div(
   ({ showAddonPanel, addonPanelInRight, theme: { layoutMargin } }) => ({
@@ -98,3 +101,3 @@ display: showAddonPanel ? 'flex' : 'none',
 
-const ContentPanel = styled('div')(
+const ContentPanel = styled.div(
   ({ addonPanelInRight, storiesPanelOnTop, theme: { layoutMargin } }) => ({
@@ -112,3 +115,3 @@ position: 'absolute',
 
-const PreviewWrapper = styled('div')(
+const PreviewWrapper = styled.div(
   ({ theme }) => ({
@@ -148,3 +151,3 @@ width: '100%',
 
-const DragBlockOverlay = styled('div')(({ isDragging }) => ({
+const DragBlockOverlay = styled.div(({ isDragging }) => ({
   zIndex: isDragging ? 2 : 0,
@@ -287,2 +290,3 @@ display: isDragging ? 'block' : 'none',
         <StoriesPanelWrapper {...{ showStoriesPanel, storiesPanelOnTop }}>
+          <GlobalStyles />
           <StoriesPanelInner>
@@ -289,0 +293,0 @@ <StoriesPanel />

src/layout/dimensions.js

 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const DISPLAY_TIMEOUT = 1000;
 
-const Container = styled('div')({
+const Container = styled.div({
   position: 'absolute',
@@ -17,5 +17,5 @@ padding: '5px 8px',
 
-const Section = styled('span')({ fontSize: 12 });
+const Section = styled.span({ fontSize: 12 });
 
-const Delimiter = styled('span')({
+const Delimiter = styled.span({
   margin: '0px 5px',
@@ -22,0 +22,0 @@ fontSize: 12,

src/layout/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
-import { ThemeProvider } from 'emotion-theming';
-
+import styled from '@emotion/styled';
+import ThemeProvider from '@emotion/provider';
 import { normal as defaultTheme } from '../theme';
@@ -11,3 +10,3 @@
 
-export const Root = styled('div')(
+export const Root = styled.div(
   ({ theme }) => ({
@@ -40,3 +39,3 @@ background: theme.mainBackground,
 
-const StoriesPanelInner = styled('div')({
+const StoriesPanelInner = styled.div({
   flexGrow: 1,
@@ -43,0 +42,0 @@ position: 'relative',

src/layout/mobile.js

 import React, { Component, Children } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { Tab, TabBar } from '../tabs/tabs';
 
-const MobilePanel = styled('div')(
+const MobilePanel = styled.div(
   ({ selected }) =>
@@ -24,3 +24,3 @@ selected
 );
-const TabsWrapper = styled('div')({
+const TabsWrapper = styled.div({
   position: 'fixed',
@@ -27,0 +27,0 @@ bottom: 0,

src/navigation/MenuLink.js

 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import RoutedLink from './RoutedLink';
@@ -4,0 +4,0 @@

src/panel_actionbar/panel_actionbar.js

 import React, { Children } from 'react';
 import PropTypes from 'prop-types';
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const Container = styled('ul')(({ theme }) => ({
+const Container = styled.ul(({ theme }) => ({
   position: 'absolute',
@@ -22,3 +22,3 @@ bottom: 0,
 
-export const ActionButton = styled('button')(({ theme }) => ({
+export const ActionButton = styled.button(({ theme }) => ({
   border: '0 none',
@@ -44,3 +44,3 @@ display: 'block',
 
-export const ActionItem = styled('li')(({ first, theme }) => ({
+export const ActionItem = styled.li(({ first, theme }) => ({
   display: 'flex',
@@ -47,0 +47,0 @@ position: 'relative',

src/placeholder/placeholder.js

@@ -1,4 +0,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-export default styled('p')({
+export default styled.p({
   fontSize: '11px',
@@ -5,0 +5,0 @@ display: 'block',

src/table/cell.js

@@ -1,2 +0,2 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
@@ -17,6 +17,6 @@ const dynamicStyles = ({ bordered, code }) => ({
 
-export const Td = styled('td')(styles, dynamicStyles);
-export const Th = styled('th')(styles, dynamicStyles);
+export const Td = styled.td(styles, dynamicStyles);
+export const Th = styled.th(styles, dynamicStyles);
 
 Td.displayName = 'Td';
 Th.displayName = 'Th';

src/table/table.js

@@ -1,4 +0,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const Table = styled('table')({
+const Table = styled.table({
   borderCollapse: 'collapse',
@@ -5,0 +5,0 @@ });

src/tabs/tabs.js

@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import Placeholder from '../placeholder/placeholder';
 
-const Wrapper = styled('div')(
+const Wrapper = styled.div(
   ({ theme, bordered }) =>
@@ -34,3 +34,3 @@ bordered
 
-export const TabBar = styled('div')(({ theme }) => ({
+export const TabBar = styled.div(({ theme }) => ({
   background: theme.barFill,
@@ -44,3 +44,3 @@ borderBottom: theme.mainBorder,
 
-const TabButton = styled('button')(
+const TabButton = styled.button(
   {
@@ -91,3 +91,3 @@ whiteSpace: 'normal',
 
-const Content = styled('div')(
+const Content = styled.div(
   {
@@ -128,3 +128,3 @@ display: 'block',
 
-const VisuallyHidden = styled('div')(
+const VisuallyHidden = styled.div(
   ({ active }) => (active ? { display: 'block' } : { display: 'none' })
@@ -131,0 +131,0 @@ );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

213832

increased by0.04%

Lines of code

4644

increased by0.22%

Dependency changes

• + Added@emotion/core@0.13.0

• + Added@emotion/provider@0.11.1

• + Added@emotion/styled@0.10.5

• + Added@emotion/cache@0.8.8(transitive)

• + Added@emotion/core@0.13.0(transitive)

• + Added@emotion/css@0.9.8(transitive)

• + Added@emotion/provider@0.11.1(transitive)

• + Added@emotion/sheet@0.8.1(transitive)

• + Added@emotion/styled@0.10.5(transitive)

• + Added@emotion/styled-base@0.10.6(transitive)

• + Added@emotion/weak-memoize@0.1.3(transitive)

• - Removedemotion@^9.2.6

• - Removedemotion-theming@^9.2.6

• - Removedreact-emotion@^9.2.6

• - Removed@babel/code-frame@7.25.7(transitive)

• - Removed@babel/generator@7.25.7(transitive)

• - Removed@babel/helper-module-imports@7.25.7(transitive)

• - Removed@babel/helper-string-parser@7.25.7(transitive)

• - Removed@babel/helper-validator-identifier@7.25.7(transitive)

• - Removed@babel/highlight@7.25.7(transitive)

• - Removed@babel/parser@7.25.8(transitive)

• - Removed@babel/template@7.25.7(transitive)

• - Removed@babel/traverse@7.25.7(transitive)

• - Removed@babel/types@7.25.8(transitive)

• - Removed@emotion/babel-utils@0.6.10(transitive)

• - Removed@jridgewell/gen-mapping@0.3.5(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@jridgewell/trace-mapping@0.3.25(transitive)

• - Removed@types/parse-json@4.0.2(transitive)

• - Removedabbrev@1.1.1(transitive)

• - Removedansi-styles@3.2.1(transitive)

• - Removedbabel-plugin-emotion@9.2.11(transitive)

• - Removedbabel-plugin-macros@2.8.0(transitive)

• - Removedbabel-plugin-syntax-jsx@6.18.0(transitive)

• - Removedcallsites@3.1.0(transitive)

• - Removedchalk@2.4.2(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedconvert-source-map@1.9.0(transitive)

• - Removedcosmiconfig@6.0.0(transitive)

• - Removedcreate-emotion@9.2.12(transitive)

• - Removedcreate-emotion-styled@9.2.8(transitive)

• - Removedcsstype@2.6.21(transitive)

• - Removeddebug@4.3.7(transitive)

• - Removedemotion@9.2.12(transitive)

• - Removedemotion-theming@9.2.9(transitive)

• - Removederror-ex@1.3.2(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedfind-root@1.1.0(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedglobals@11.12.0(transitive)

• - Removedhas-flag@3.0.0(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedhoist-non-react-statics@2.5.5(transitive)

• - Removedimport-fresh@3.3.0(transitive)

• - Removedis-arrayish@0.2.1(transitive)

• - Removedis-core-module@2.15.1(transitive)

• - Removedjsesc@3.0.2(transitive)

• - Removedjson-parse-even-better-errors@2.3.1(transitive)

• - Removedlines-and-columns@1.2.4(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedms@2.1.3(transitive)

• - Removednopt@1.0.10(transitive)

• - Removedparent-module@1.0.1(transitive)

• - Removedparse-json@5.2.0(transitive)

• - Removedpath-parse@1.0.7(transitive)

• - Removedpath-type@4.0.0(transitive)

• - Removedpicocolors@1.1.0(transitive)

• - Removedreact-emotion@9.2.12(transitive)

• - Removedresolve@1.22.8(transitive)

• - Removedresolve-from@4.0.0(transitive)

• - Removedsource-map@0.5.70.7.4(transitive)

• - Removedstylis@3.5.4(transitive)

• - Removedstylis-rule-sheet@0.0.10(transitive)

• - Removedsupports-color@5.5.0(transitive)

• - Removedsupports-preserve-symlinks-flag@1.0.0(transitive)

• - Removedto-fast-properties@2.0.0(transitive)

• - Removedtouch@2.0.2(transitive)

• - Removedyaml@1.10.2(transitive)