creevey 0.9.0-beta.13 → 0.9.0-beta.14

package/lib/cjs/client/shared/components/ImagesView/BlendView.js

@@ -4,53 +4,42 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BlendView = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _ImagesView = require("./ImagesView");
-
 var _theming = require("@storybook/theming");
-
 var _helpers = require("../../helpers");
-
 var _readyForCapture = require("../../../addon/readyForCapture");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Container = _theming.styled.div({
   position: 'relative',
   display: 'flex',
   filter: 'invert(100%)'
 });
-
 const ImageContainer = _theming.styled.div({
   position: 'absolute',
   width: '100%',
   height: '100%',
   display: 'flex'
 });
-
 const Image = _theming.styled.img(_ref => {
   let {
     borderColor
   } = _ref;
   return {
     boxSizing: 'border-box',
-    border: "1px solid ".concat(borderColor),
+    border: `1px solid ${borderColor}`,
     maxWidth: '100%',
     filter: 'invert(100%)'
   };
 });
-
 const ActualImage = (0, _theming.styled)(Image)({
   mixBlendMode: 'difference'
 });
 const DiffImage = (0, _theming.styled)(Image)({
   opacity: '0'
 });
-const BlendView = (0, _theming.withTheme)(_ref2 => {
+const BlendView = exports.BlendView = (0, _theming.withTheme)(_ref2 => {
   let {
     actual,
     diff,
@@ -83,5 +72,4 @@ const BlendView = (0, _theming.withTheme)(_ref2 => {
     alt: "actual",
     src: actual
   })));
-});
-exports.BlendView = BlendView;
+});

package/lib/cjs/client/shared/components/ImagesView/ImagesView.js

@@ -6,41 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.ImagesView = ImagesView;
 exports.getBorderColor = getBorderColor;
 exports.themeBorderColors = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _SideBySideView = require("./SideBySideView");
-
 var _SwapView = require("./SwapView");
-
 var _SlideView = require("./SlideView");
-
 var _BlendView = require("./BlendView");
-
 var _theming = require("@storybook/theming");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const themeBorderColors = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const themeBorderColors = exports.themeBorderColors = {
   actual: 'negative',
   expect: 'positive',
   diff: 'secondary'
 };
-exports.themeBorderColors = themeBorderColors;
-
 const isColor = (theme, color) => color in theme.color;
-
 function getBorderColor(theme, color) {
   return isColor(theme, color) ? theme.color[color] : color;
 }
-
 const views = {
   'side-by-side': _SideBySideView.SideBySideView,
   swap: _SwapView.SwapView,
   slide: _SlideView.SlideView,
   blend: _BlendView.BlendView
 };
-
 const Container = _theming.styled.div({
   height: '100%',
   display: 'flex',
@@ -49,21 +36,18 @@ const Container = _theming.styled.div({
   justifyContent: 'center',
   padding: '0 20px'
 });
-
 const ImageLink = _theming.styled.a({
   lineHeight: 0
 });
-
 const ActualImage = (0, _theming.withTheme)(_theming.styled.img(_ref => {
   let {
     theme
   } = _ref;
   return {
-    border: "1px solid ".concat(getBorderColor(theme, themeBorderColors.expect)),
+    border: `1px solid ${getBorderColor(theme, themeBorderColors.expect)}`,
     maxWidth: '100%'
   };
 }));
-
 function ImagesView(_ref2) {
   let {
     url,
@@ -78,15 +62,15 @@ function ImagesView(_ref2) {
     expect
   } = image;
   return /*#__PURE__*/_react.default.createElement(Container, null, canApprove && diff && expect ? /*#__PURE__*/_react.default.createElement(ViewComponent, {
-    actual: "".concat(url, "/").concat(actual),
-    diff: "".concat(url, "/").concat(diff),
-    expect: "".concat(url, "/").concat(expect)
+    actual: `${url}/${actual}`,
+    diff: `${url}/${diff}`,
+    expect: `${url}/${expect}`
   }) : /*#__PURE__*/_react.default.createElement(ImageLink, {
-    href: "".concat(url, "/").concat(actual),
+    href: `${url}/${actual}`,
     target: "_blank",
     rel: "noopener noreferrer"
   }, /*#__PURE__*/_react.default.createElement(ActualImage, {
     alt: "actual",
-    src: "".concat(url, "/").concat(actual)
+    src: `${url}/${actual}`
   })));
 }

package/lib/cjs/client/shared/components/ImagesView/SideBySideView.js

@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SideBySideView = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _ImagesView = require("./ImagesView");
-
 var _theming = require("@storybook/theming");
-
 var _helpers = require("../../helpers");
-
 var _components = require("@storybook/components");
-
 var _readyForCapture = require("../../../addon/readyForCapture");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Container = _theming.styled.div({
   display: 'flex',
   flexWrap: 'nowrap',
@@ -29,7 +20,6 @@ const Container = _theming.styled.div({
   height: '100%',
   width: '100%'
 });
-
 const ImagesLayout = _theming.styled.div(_ref => {
   let {
     layout
@@ -45,32 +35,28 @@ const ImagesLayout = _theming.styled.div(_ref => {
     }
   };
 });
-
 const ImageLink = _theming.styled.a({
   lineHeight: 0,
   flexShrink: 0
 });
-
 const ImageDiffLink = _theming.styled.a({
   lineHeight: 0
 });
-
 const Image = _theming.styled.img(_ref2 => {
   let {
     borderColor
   } = _ref2;
   return {
     boxSizing: 'border-box',
-    border: "1px solid ".concat(borderColor),
+    border: `1px solid ${borderColor}`,
     maxWidth: '100%',
     flexShrink: 0
   };
 });
-
 const DiffImage = (0, _theming.styled)(Image)({
   flexShrink: 1
 });
-const SideBySideView = (0, _theming.withTheme)(_ref3 => {
+const SideBySideView = exports.SideBySideView = (0, _theming.withTheme)(_ref3 => {
   let {
     actual,
     diff,
@@ -91,14 +77,13 @@ const SideBySideView = (0, _theming.withTheme)(_ref3 => {
     const actualImage = actualImageRef.current;
     if (!containerElement || !expectImage || !actualImage || !diffImage || !loaded) return setScale(1);
     const borderSize = (0, _helpers.getBorderSize)(diffImage);
-
     if (layout == 'vertical') {
       const ratio = (diffImage.getBoundingClientRect().width - borderSize * 2) / diffImage.naturalWidth;
       setScale(Math.min(1, ratio));
     }
-
     if (layout == 'horizontal') {
-      const ratio = // NOTE: 40px because we have two margins by 20px and 6px for borders
+      const ratio =
+      // NOTE: 40px because we have two margins by 20px and 6px for borders
       (containerElement.getBoundingClientRect().width - 40 - borderSize * 6) / [expectImage, diffImage, actualImage].map(image => image.naturalWidth).reduce((a, b) => a + b, 0);
       setScale(Math.min(1, ratio));
     }
@@ -150,5 +135,4 @@ const SideBySideView = (0, _theming.withTheme)(_ref3 => {
   }))) : /*#__PURE__*/_react.default.createElement(_components.Loader, {
     size: 64
   }));
-});
-exports.SideBySideView = SideBySideView;
+});

package/lib/cjs/client/shared/components/ImagesView/SlideView.js

@@ -4,28 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SlideView = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _theming = require("@storybook/theming");
-
 var _ImagesView = require("./ImagesView");
-
 var _helpers = require("../../helpers");
-
 var _components = require("@storybook/components");
-
 var _readyForCapture = require("../../../addon/readyForCapture");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Container = _theming.styled.div({
   position: 'relative',
   display: 'flex'
 });
-
 const Input = _theming.styled.input({
   position: 'absolute',
   cursor: 'ew-resize',
@@ -59,14 +49,12 @@ const Input = _theming.styled.input({
     width: '0px'
   }
 });
-
 const ImageContainer = _theming.styled.div({
   position: 'absolute',
   width: '100%',
   height: '100%',
   overflow: 'hidden'
 });
-
 const ImageWrapper = (0, _theming.withTheme)(_theming.styled.div(_ref => {
   let {
     theme
@@ -79,25 +67,23 @@ const ImageWrapper = (0, _theming.withTheme)(_theming.styled.div(_ref => {
     display: 'flex'
   };
 }));
-
 const BaseImage = _theming.styled.img(_ref2 => {
   let {
     borderColor
   } = _ref2;
   return {
     boxSizing: 'border-box',
-    border: "1px solid ".concat(borderColor),
+    border: `1px solid ${borderColor}`,
     maxWidth: '100%'
   };
 });
-
 const Image = (0, _theming.styled)(BaseImage)({
   position: 'absolute'
 });
 const DiffImage = (0, _theming.styled)(BaseImage)({
   opacity: '0'
 });
-const SlideView = (0, _theming.withTheme)(_ref3 => {
+const SlideView = exports.SlideView = (0, _theming.withTheme)(_ref3 => {
   let {
     actual,
     diff,
@@ -117,8 +103,8 @@ const SlideView = (0, _theming.withTheme)(_ref3 => {
   const handleSlide = (0, _react.useCallback)(event => {
     if (!expectedImageContainerRef.current || !expectedImageWrapperRef.current) return;
     const offset = Number(event.target.value);
-    expectedImageContainerRef.current.style.right = "".concat(100 - offset, "%");
-    expectedImageWrapperRef.current.style.left = "".concat(100 - offset, "%");
+    expectedImageContainerRef.current.style.right = `${100 - offset}%`;
+    expectedImageWrapperRef.current.style.left = `${100 - offset}%`;
   }, []);
   (0, _react.useLayoutEffect)(() => {
     if (loaded && diffImageRef.current) setStep(100 / diffImageRef.current.getBoundingClientRect().width);
@@ -162,5 +148,4 @@ const SlideView = (0, _theming.withTheme)(_ref3 => {
   })) : /*#__PURE__*/_react.default.createElement(_components.Loader, {
     size: 64
   });
-});
-exports.SlideView = SlideView;
+});

package/lib/cjs/client/shared/components/ImagesView/SwapView.js

@@ -4,39 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SwapView = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _ImagesView = require("./ImagesView");
-
 var _theming = require("@storybook/theming");
-
 var _helpers = require("../../helpers");
-
 var _components = require("@storybook/components");
-
 var _readyForCapture = require("../../../addon/readyForCapture");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Container = _theming.styled.div({
   position: 'relative',
   display: 'flex'
 });
-
 const BaseImage = _theming.styled.img(_ref => {
   let {
     borderColor
   } = _ref;
   return {
     boxSizing: 'border-box',
-    border: "1px solid ".concat(borderColor),
+    border: `1px solid ${borderColor}`,
     maxWidth: '100%'
   };
 });
-
 const Image = (0, _theming.styled)(BaseImage)({
   position: 'absolute'
 });
@@ -46,7 +35,7 @@ const DiffImage = (0, _theming.styled)(BaseImage)({
   opacity: 0,
   zIndex: 1
 });
-const SwapView = (0, _theming.withTheme)(_ref2 => {
+const SwapView = exports.SwapView = (0, _theming.withTheme)(_ref2 => {
   let {
     theme,
     expect,
@@ -87,5 +76,4 @@ const SwapView = (0, _theming.withTheme)(_ref2 => {
   })) : /*#__PURE__*/_react.default.createElement(_components.Loader, {
     size: 64
   });
-});
-exports.SwapView = SwapView;
+});

package/lib/cjs/client/shared/components/ImagesView/index.js

@@ -33,13 +33,8 @@ Object.defineProperty(exports, "SwapView", {
     return _SwapView.SwapView;
   }
 });
-
 var _ImagesView = require("./ImagesView");
-
 var _BlendView = require("./BlendView");
-
 var _SideBySideView = require("./SideBySideView");
-
 var _SlideView = require("./SlideView");
-
 var _SwapView = require("./SwapView");

package/lib/cjs/client/shared/components/PageFooter/PageFooter.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PageFooter = PageFooter;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Paging = require("./Paging");
-
 var _theming = require("@storybook/theming");
-
 var _components = require("@storybook/components");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Container = (0, _theming.withTheme)(_theming.styled.div(_ref => {
   let {
     theme
@@ -29,7 +23,6 @@ const Container = (0, _theming.withTheme)(_theming.styled.div(_ref => {
 const StyledButton = (0, _theming.styled)(_components.Button)({
   transform: 'none'
 });
-
 function PageFooter(_ref2) {
   let {
     canApprove,

package/lib/cjs/client/shared/components/PageFooter/Paging.js

@@ -4,22 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Paging = Paging;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _components = require("@storybook/components");
-
 var _types = require("../../../../types");
-
 var _theming = require("@storybook/theming");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledButton = (0, _theming.styled)(_components.Button)({
   transform: 'none',
   marginLeft: '8px'
 });
-
 function Paging(props) {
   const renderItem = (item, index) => {
     switch (item) {
@@ -27,10 +20,9 @@ function Paging(props) {
         {
           return /*#__PURE__*/_react.default.createElement(StyledButton, {
             disabled: true,
-            key: "dots".concat(index < 5 ? 'Left' : 'Right')
+            key: `dots${index < 5 ? 'Left' : 'Right'}`
           }, '...');
         }
-
       case 'forward':
         {
           const disabled = props.activePage === props.pagesCount;
@@ -43,7 +35,6 @@ function Paging(props) {
             icon: "arrowright"
           })));
         }
-
       default:
         {
           return /*#__PURE__*/_react.default.createElement(StyledButton, {
@@ -55,16 +46,13 @@ function Paging(props) {
         }
     }
   };
-
   const goToPage = pageNumber => {
     if (1 <= pageNumber && pageNumber !== props.activePage && pageNumber <= props.pagesCount) {
       props.onPageChange(pageNumber);
     }
   };
-
   return /*#__PURE__*/_react.default.createElement("div", null, getItems(props.activePage, props.pagesCount).map(renderItem));
 }
-
 function getItems(active, total) {
   const result = [];
   const left = Math.max(Math.min(active - 2, total - 4), 1);
@@ -73,22 +61,17 @@ function getItems(active, total) {
   const from = hasLeftDots ? left : 1;
   const hasRightDots = right < total - 2;
   const to = hasRightDots ? right : total;
-
   if (hasLeftDots) {
     result.push(1, '.');
   }
-
   for (let i = from; i <= to; ++i) {
     result.push(i);
   }
-
   if (hasRightDots) {
     result.push('.');
   }
-
   if (hasRightDots && isFinite(total)) {
     result.push(total);
   }
-
   return result.concat('forward');
 }

package/lib/cjs/client/shared/components/PageHeader/ImagePreview.js

@@ -4,16 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImagePreview = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _theming = require("@storybook/theming");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const IMG_SIZE = 64;
 const DIAG_LENGTH = (2 * (IMG_SIZE - 8) ** 2) ** (1 / 2);
-
 const Button = _theming.styled.button(_ref => {
   let {
     borderColor
@@ -34,7 +29,6 @@ const Button = _theming.styled.button(_ref => {
     }
   };
 });
-
 const Image = (0, _theming.withTheme)(_theming.styled.img(_ref2 => {
   let {
     hasBorder,
@@ -42,22 +36,35 @@ const Image = (0, _theming.withTheme)(_theming.styled.img(_ref2 => {
     theme
   } = _ref2;
   return {
-    maxHeight: "".concat(IMG_SIZE, "px"),
-    width: "".concat(IMG_SIZE, "px"),
+    maxHeight: `${IMG_SIZE}px`,
+    width: `${IMG_SIZE}px`,
     overflow: 'hidden',
     transform: hasBorder ? 'translateY(2px)' : undefined,
     '&::before': {
       content: "' '",
       display: 'block',
-      height: "".concat(IMG_SIZE - 8, "px"),
-      width: "".concat(IMG_SIZE - 8, "px"),
+      height: `${IMG_SIZE - 8}px`,
+      width: `${IMG_SIZE - 8}px`,
       margin: '4px',
       backgroundColor: backgroundColor,
-      backgroundImage: "linear-gradient(\n      45deg,\n      rgba(0, 0, 0, 0) ".concat(DIAG_LENGTH / 2 - 0.5, "px,\n      ").concat(theme.color.medium, " ").concat(DIAG_LENGTH / 2 - 0.5, "px,\n      ").concat(theme.color.medium, " ").concat(DIAG_LENGTH / 2 + 0.5, "px,\n      rgba(0, 0, 0, 0) ").concat(DIAG_LENGTH / 2 + 0.5, "px\n    ),\n    linear-gradient(\n      315deg,\n      rgba(0, 0, 0, 0) ").concat(DIAG_LENGTH / 2 + 0.2, "px,\n      ").concat(theme.color.medium, " ").concat(DIAG_LENGTH / 2 + 0.2, "px,\n      ").concat(theme.color.medium, " ").concat(DIAG_LENGTH / 2 + 1.2, "px,\n      rgba(0, 0, 0, 0) ").concat(DIAG_LENGTH / 2 + 1.2, "px\n    )")
+      backgroundImage: `linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0) ${DIAG_LENGTH / 2 - 0.5}px,
+      ${theme.color.medium} ${DIAG_LENGTH / 2 - 0.5}px,
+      ${theme.color.medium} ${DIAG_LENGTH / 2 + 0.5}px,
+      rgba(0, 0, 0, 0) ${DIAG_LENGTH / 2 + 0.5}px
+    ),
+    linear-gradient(
+      315deg,
+      rgba(0, 0, 0, 0) ${DIAG_LENGTH / 2 + 0.2}px,
+      ${theme.color.medium} ${DIAG_LENGTH / 2 + 0.2}px,
+      ${theme.color.medium} ${DIAG_LENGTH / 2 + 1.2}px,
+      rgba(0, 0, 0, 0) ${DIAG_LENGTH / 2 + 1.2}px
+    )`
     }
   };
 }));
-const ImagePreview = (0, _theming.withTheme)(_ref3 => {
+const ImagePreview = exports.ImagePreview = (0, _theming.withTheme)(_ref3 => {
   let {
     isActive,
     onClick,
@@ -66,9 +73,7 @@ const ImagePreview = (0, _theming.withTheme)(_ref3 => {
     theme,
     error
   } = _ref3;
-
   const handleClick = () => onClick(imageName);
-
   return /*#__PURE__*/_react.default.createElement(Button, {
     onClick: handleClick,
     borderColor: isActive ? theme.barSelectedColor : error ? theme.color.negative : undefined
@@ -78,5 +83,4 @@ const ImagePreview = (0, _theming.withTheme)(_ref3 => {
     alt: imageName,
     backgroundColor: theme.background.content
   }));
-});
-exports.ImagePreview = ImagePreview;
+});