@atlaskit/media-ui 22.2.4 → 22.3.1

package/dist/esm/MediaInlineCard/Frame/styled.js

@@ -1,24 +1,20 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
-import { token } from '@atlaskit/tokens';
 import styled from '@emotion/styled';
 import { B300, N30A, N40A, N900 } from '@atlaskit/theme/colors';
 import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
-var FONT_COLOR = token('color.text', N900);
-var BACKGROUND_COLOR = token('color.background.neutral', N30A);
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat(token('color.border.selected', B300), ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
-
+var FONT_COLOR = "var(--ds-text, ".concat(N900, ")");
+var BACKGROUND_COLOR = "var(--ds-background-neutral, ".concat(N30A, ")");
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat("var(--ds-border-selected, ".concat(B300, ")"), ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
 var isSelected = function isSelected(_ref) {
   var isSelected = _ref.isSelected;
-
   if (isSelected) {
     return selected;
   } else {
     return 'user-select: text';
   }
 };
+
 /*
   Media Inline cards should have the following layout:
   -----------------
@@ -31,8 +27,6 @@ var isSelected = function isSelected(_ref) {
 // NB: `padding` consistent with @mentions.
 // NB: `display: inline` required for `box-decoration-break` to work.
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
-
-
 export var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 16px;\n  padding: 2px 4px 2px 4px;\n  box-decoration-break: clone;\n  display: inline;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), akBorderRadius(), FONT_COLOR, BACKGROUND_COLOR, function (props) {
   return isSelected(props);
-}, token('color.background.neutral.hovered', N40A));
+}, "var(--ds-background-neutral-hovered, ".concat(N40A, ")"));

package/dist/esm/MediaInlineCard/Icon.js

@@ -1,15 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2;
+import styled from '@emotion/styled';
 
-import styled from '@emotion/styled'; // TODO: Figure out a more scalable/responsive solution
+// TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
+export var Icon = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
 
-export var Icon = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"]))); // Used for 'untrue' icons which claim to be 16x16 but
+// Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
-
 export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: -2px;\n"])));

package/dist/esm/MediaInlineCard/IconAndTitleLayout/index.js

@@ -3,55 +3,42 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React from 'react';
 import ImageLoader from 'react-render-image';
 import { Icon } from '../Icon';
 import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper } from './styled';
 import LinkIcon from '@atlaskit/icon/glyph/link';
-import { token } from '@atlaskit/tokens';
 import { N900 } from '@atlaskit/theme/colors';
 export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
   _inherits(IconAndTitleLayout, _React$Component);
-
   var _super = _createSuper(IconAndTitleLayout);
-
   function IconAndTitleLayout() {
     _classCallCheck(this, IconAndTitleLayout);
-
     return _super.apply(this, arguments);
   }
-
   _createClass(IconAndTitleLayout, [{
     key: "renderAtlaskitIcon",
     value: function renderAtlaskitIcon() {
       var _this$props = this.props,
-          icon = _this$props.icon,
-          emoji = _this$props.emoji;
-
+        icon = _this$props.icon,
+        emoji = _this$props.emoji;
       if (emoji) {
         return /*#__PURE__*/React.createElement(EmojiWrapper, null, emoji);
       }
-
       if (!icon || typeof icon === 'string') {
         return null;
       }
-
       return /*#__PURE__*/React.createElement(IconWrapper, null, icon);
     }
   }, {
     key: "renderImageIcon",
     value: function renderImageIcon(errored, testId) {
       var url = this.props.icon;
-
       if (!url || typeof url !== 'string') {
         return null;
       }
-
       return /*#__PURE__*/React.createElement(ImageLoader, {
         src: url,
         loaded: /*#__PURE__*/React.createElement(Icon, {
@@ -66,11 +53,9 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
     key: "renderIconPlaceholder",
     value: function renderIconPlaceholder(testId) {
       var defaultIcon = this.props.defaultIcon;
-
       if (defaultIcon) {
         return /*#__PURE__*/React.createElement(IconWrapper, null, defaultIcon);
       }
-
       return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(LinkIcon, {
         label: "link",
         size: "small",
@@ -85,11 +70,9 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
       // - Atlaskit Icon: an Atlaskit SVG;
       // Each of these are scaled down to 12x12.
       var icon = this.renderAtlaskitIcon();
-
       if (icon) {
         return icon;
       }
-
       var placeholder = this.renderIconPlaceholder(testId);
       var image = this.renderImageIcon(placeholder, testId);
       return image || placeholder;
@@ -98,18 +81,17 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-          children = _this$props2.children,
-          title = _this$props2.title,
-          titleColor = _this$props2.titleColor,
-          _this$props2$testId = _this$props2.testId,
-          testId = _this$props2$testId === void 0 ? 'media-inline-card-icon-and-title' : _this$props2$testId;
+        children = _this$props2.children,
+        title = _this$props2.title,
+        titleColor = _this$props2.titleColor,
+        _this$props2$testId = _this$props2.testId,
+        testId = _this$props2$testId === void 0 ? 'media-inline-card-icon-and-title' : _this$props2$testId;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
         style: {
-          color: titleColor || token('color.text', N900)
+          color: titleColor || "var(--ds-text, ".concat(N900, ")")
         }
       }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, null, title)));
     }
   }]);
-
   return IconAndTitleLayout;
 }(React.Component);

package/dist/esm/MediaInlineCard/IconAndTitleLayout/styled.js

@@ -1,33 +1,37 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+import styled from '@emotion/styled';
 
-import styled from '@emotion/styled'; // TODO: remove this override behaviour for @atlaskit/icon-object
-
-export var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    line-height: 14px;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n"; // TODO: remove this override behaviour for @atlaskit/icon
+// TODO: remove this override behaviour for @atlaskit/icon-object
+export var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    line-height: 14px;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+// TODO: remove this override behaviour for @atlaskit/icon
+export var IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
 
-export var IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n"; // Wraps all icons represented in Inline Links. Icons have three sources/types:
+// Wraps all icons represented in Inline Links. Icons have three sources/types:
 // - JSON-LD: from the generator.icon property coming back from ORS.
 // - @atlaskit/icon: for lock icons, unauthorized, etc.
 // - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
 // NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
 // NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
+export var IconWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
 
-export var IconWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides); // Wraps all emoji in Inline Links similar to icon
+// Wraps all emoji in Inline Links similar to icon
+export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
 
-export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides); // The main 'wrapping' element, title of the content.
+// The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
 // NB: `word-break` line breaks as soon as an overflow takes place.
+export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"])));
 
-export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
-
-export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
-
+// TODO: Replace overrides with proper AtlasKit solution.
+export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"])));
+// TODO: Replace overrides with proper AtlasKit solution.
 export var LozengeBlockWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"])));
-export var RightIconPositionWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"]))); // The following components are used to absolutely position icons in the vertical center.
+export var RightIconPositionWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+
+// The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
-
 export var IconPositionWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
 export var IconEmptyWrapper = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));
 export var TitleWrapper = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ::selection {\n    background: none;\n  }\n"])));

package/dist/esm/MediaInlineCard/LoadedView/index.js

@@ -3,37 +3,30 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React from 'react';
 import { Frame } from '../Frame';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 export var MediaInlineCardLoadedView = /*#__PURE__*/function (_React$Component) {
   _inherits(MediaInlineCardLoadedView, _React$Component);
-
   var _super = _createSuper(MediaInlineCardLoadedView);
-
   function MediaInlineCardLoadedView() {
     _classCallCheck(this, MediaInlineCardLoadedView);
-
     return _super.apply(this, arguments);
   }
-
   _createClass(MediaInlineCardLoadedView, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          _this$props$title = _this$props.title,
-          title = _this$props$title === void 0 ? '' : _this$props$title,
-          isSelected = _this$props.isSelected,
-          onClick = _this$props.onClick,
-          icon = _this$props.icon,
-          _this$props$testId = _this$props.testId,
-          testId = _this$props$testId === void 0 ? 'media-inline-card-loaded-view' : _this$props$testId,
-          titlePrefix = _this$props.titlePrefix;
+        _this$props$title = _this$props.title,
+        title = _this$props$title === void 0 ? '' : _this$props$title,
+        isSelected = _this$props.isSelected,
+        onClick = _this$props.onClick,
+        icon = _this$props.icon,
+        _this$props$testId = _this$props.testId,
+        testId = _this$props$testId === void 0 ? 'media-inline-card-loaded-view' : _this$props$testId,
+        titlePrefix = _this$props.titlePrefix;
       return /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         isSelected: isSelected,
@@ -45,6 +38,5 @@ export var MediaInlineCardLoadedView = /*#__PURE__*/function (_React$Component)
       }));
     }
   }]);
-
   return MediaInlineCardLoadedView;
 }(React.Component);

package/dist/esm/MediaInlineCard/LoadingView/index.js

@@ -3,11 +3,8 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React from 'react';
 import { Frame } from '../Frame';
 import Spinner from '@atlaskit/spinner';
@@ -16,26 +13,21 @@ import { SpinnerWrapper } from './styled';
 import { IconTitleWrapper, RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
 export var MediaInlineCardLoadingView = /*#__PURE__*/function (_React$Component) {
   _inherits(MediaInlineCardLoadingView, _React$Component);
-
   var _super = _createSuper(MediaInlineCardLoadingView);
-
   function MediaInlineCardLoadingView() {
     _classCallCheck(this, MediaInlineCardLoadingView);
-
     return _super.apply(this, arguments);
   }
-
   _createClass(MediaInlineCardLoadingView, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          message = _this$props.message,
-          onClick = _this$props.onClick,
-          isSelected = _this$props.isSelected,
-          inlinePreloaderStyle = _this$props.inlinePreloaderStyle,
-          _this$props$testId = _this$props.testId,
-          testId = _this$props$testId === void 0 ? 'media-inline-card-loading-view' : _this$props$testId;
-
+        message = _this$props.message,
+        onClick = _this$props.onClick,
+        isSelected = _this$props.isSelected,
+        inlinePreloaderStyle = _this$props.inlinePreloaderStyle,
+        _this$props$testId = _this$props.testId,
+        testId = _this$props$testId === void 0 ? 'media-inline-card-loading-view' : _this$props$testId;
       if (inlinePreloaderStyle === 'on-right-without-skeleton') {
         return /*#__PURE__*/React.createElement(Frame, {
           testId: testId,
@@ -61,6 +53,5 @@ export var MediaInlineCardLoadingView = /*#__PURE__*/function (_React$Component)
       }
     }
   }]);
-
   return MediaInlineCardLoadingView;
 }(React.Component);

package/dist/esm/MediaInlineCard/LoadingView/styled.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import styled from '@emotion/styled';
 import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
 export var SpinnerWrapper = styled(IconTitleWrapper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  vertical-align: baseline;\n  margin-left: 2px;\n"])));

package/dist/esm/MediaInlineCard/styled.js

@@ -1,8 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
-import { token } from '@atlaskit/tokens';
 import styled from '@emotion/styled';
 import { N200 } from '@atlaskit/theme/colors';
-export var NoLinkAppearance = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.text.subtlest', N200));
+export var NoLinkAppearance = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));

package/dist/esm/browser.js

@@ -1,16 +1,14 @@
 var webkitSupported;
+
 /*
  * Function to get the whether the browser is webkit supported. Mocked optional navigator purely for testing purposes
  * Memoization so that the browser is only calculated if it's not cached already
  */
-
 export function isWebkitSupported(mockedNavigator) {
   var navigatorUsed = mockedNavigator !== undefined ? mockedNavigator : navigator;
-
   if (mockedNavigator !== undefined) {
     webkitSupported = undefined;
   }
-
   if (webkitSupported === undefined) {
     if (typeof navigatorUsed !== 'undefined') {
       var ieEdge = /Edge\/(\d+)/.exec(navigatorUsed.userAgent);
@@ -22,9 +20,7 @@ export function isWebkitSupported(mockedNavigator) {
       var browser_supported = !ie && !opera && !firefox;
       return browser_supported;
     }
-
     return false;
   }
-
   return webkitSupported;
 }

package/dist/esm/camera.js

@@ -3,42 +3,37 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 export var Vector2 = /*#__PURE__*/function () {
   function Vector2(x, y) {
     _classCallCheck(this, Vector2);
-
     this.x = x;
     this.y = y;
   }
-
   _createClass(Vector2, [{
     key: "add",
     value: function add(_ref) {
       var thatX = _ref.x,
-          thatY = _ref.y;
+        thatY = _ref.y;
       var thisX = this.x,
-          thisY = this.y;
+        thisY = this.y;
       return new Vector2(thisX + thatX, thisY + thatY);
     }
   }, {
     key: "sub",
     value: function sub(_ref2) {
       var thatX = _ref2.x,
-          thatY = _ref2.y;
+        thatY = _ref2.y;
       var thisX = this.x,
-          thisY = this.y;
+        thisY = this.y;
       return new Vector2(thisX - thatX, thisY - thatY);
     }
   }, {
     key: "scaled",
     value: function scaled(scalar) {
       var x = this.x,
-          y = this.y;
+        y = this.y;
       return new Vector2(x * scalar, y * scalar);
     }
   }, {
@@ -62,17 +57,14 @@ export var Vector2 = /*#__PURE__*/function () {
       return "[".concat(this.x, ", ").concat(this.y, "]");
     }
   }]);
-
   return Vector2;
 }();
 export var Rectangle = /*#__PURE__*/function () {
   function Rectangle(width, height) {
     _classCallCheck(this, Rectangle);
-
     this.width = width;
     this.height = height;
   }
-
   _createClass(Rectangle, [{
     key: "aspectRatio",
     get: function get() {
@@ -97,18 +89,18 @@ export var Rectangle = /*#__PURE__*/function () {
     key: "flipped",
     value: function flipped() {
       return new Rectangle(this.height, this.width);
-    } // Computes the scaling factor that needs to be applied to this
+    }
+
+    // Computes the scaling factor that needs to be applied to this
     // Rectangle so that it
     // - is fully visible inside of the containing Rectangle
     // - is the LARGEST possible size
     // - maintains the original aspect ratio (no distortion)
-
   }, {
     key: "scaleToFit",
     value: function scaleToFit(containing) {
       var widthRatio = containing.width / this.width;
       var heightRatio = containing.height / this.height;
-
       if (widthRatio <= heightRatio) {
         return widthRatio;
       } else {
@@ -119,18 +111,18 @@ export var Rectangle = /*#__PURE__*/function () {
     key: "scaleToFitLargestSide",
     value: function scaleToFitLargestSide(containing) {
       return this.scaleToFit(containing);
-    } // Computes the scaling factor that needs to be applied to this
+    }
+
+    // Computes the scaling factor that needs to be applied to this
     // Rectangle so that it
     // - is fully visible inside of the containing Rectangle
     // - is the SMALLEST possible size
     // - maintains the original aspect ratio (no distortion)
-
   }, {
     key: "scaleToFitSmallestSide",
     value: function scaleToFitSmallestSide(containing) {
       var widthRatio = containing.width / this.width;
       var heightRatio = containing.height / this.height;
-
       if (widthRatio >= heightRatio) {
         return widthRatio;
       } else {
@@ -143,19 +135,14 @@ export var Rectangle = /*#__PURE__*/function () {
       return new Rectangle(this.width, this.height);
     }
   }]);
-
   return Rectangle;
 }();
 export var Bounds = /*#__PURE__*/function (_Rectangle) {
   _inherits(Bounds, _Rectangle);
-
   var _super = _createSuper(Bounds);
-
   function Bounds(x, y, width, height) {
     var _this;
-
     _classCallCheck(this, Bounds);
-
     _this = _super.call(this, width, height);
     _this.x = x;
     _this.y = y;
@@ -163,7 +150,6 @@ export var Bounds = /*#__PURE__*/function (_Rectangle) {
     _this.height = height;
     return _this;
   }
-
   _createClass(Bounds, [{
     key: "origin",
     get: function get() {
@@ -260,17 +246,14 @@ export var Bounds = /*#__PURE__*/function (_Rectangle) {
       return this.x === bounds.x && this.y === bounds.y && this.width === bounds.width && this.height === bounds.height;
     }
   }]);
-
   return Bounds;
 }(Rectangle);
 export var Camera = /*#__PURE__*/function () {
   function Camera(viewport, originalImg) {
     _classCallCheck(this, Camera);
-
     this.viewport = viewport;
     this.originalImg = originalImg;
   }
-
   _createClass(Camera, [{
     key: "resizedViewport",
     value: function resizedViewport(newViewport) {
@@ -280,9 +263,10 @@ export var Camera = /*#__PURE__*/function () {
     key: "scaleToFit",
     get: function get() {
       return this.originalImg.scaleToFitLargestSide(this.viewport);
-    } // If the image is smaller than or equal to the viewport, it won't be scaled.
-    // If the image is larger than the viewport, it will be scaled down to fit.
+    }
 
+    // If the image is smaller than or equal to the viewport, it won't be scaled.
+    // If the image is larger than the viewport, it will be scaled down to fit.
   }, {
     key: "scaleDownToFit",
     get: function get() {
@@ -305,6 +289,5 @@ export var Camera = /*#__PURE__*/function () {
       return prevOffset.add(viewport.center).scaled(newScale / prevScale).sub(viewport.center);
     }
   }]);
-
   return Camera;
 }();