@uncinc/uncinc-react-kitchen-sink 2.4.0 → 2.4.2

package/dist/components/Lottie/LottieAnimation/index.js

@@ -1,47 +1,53 @@
-import React, { useEffect, useCallback, useRef } from 'react';
-import c from 'classnames';
-import lottie from 'lottie-web';
-import './style.scss';
-const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    id,
-    className,
-    ariaLabel,
-    data
-  } = props;
-  const DIRECTION_FORWARD = 1;
-  const DIRECTION_BACKWARDS = -1;
-  const lottieClasses = c('Lottie', className);
-  const refInternal = useRef(null);
-  const lottieAnimation = ref || refInternal;
-  const lottieId = id || (data ? data.nm : null);
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lottieWeb = _interopRequireDefault(require("lottie-web"));
+require("./style.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+var LottieAnimation = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var id = props.id,
+    className = props.className,
+    ariaLabel = props.ariaLabel,
+    data = props.data;
+  var DIRECTION_FORWARD = 1;
+  var DIRECTION_BACKWARDS = -1;
+  var lottieClasses = (0, _classnames.default)('Lottie', className);
+  var refInternal = (0, _react.useRef)(null);
+  var lottieAnimation = ref || refInternal;
+  var lottieId = id || (data ? data.nm : null);
 
   /*
   * Initial load of the Lottie animation
   */
-  const loadAnimation = useCallback(() => {
-    const {
-      renderer,
-      rendererSettings,
-      direction,
-      loop,
-      autoPlay,
-      path,
-      speed,
-      segments,
-      activateOnHover,
-      startPosition,
-      onInit
-    } = props;
-    lottieAnimation.current = lottie.loadAnimation({
+  var loadAnimation = (0, _react.useCallback)(function () {
+    var renderer = props.renderer,
+      rendererSettings = props.rendererSettings,
+      direction = props.direction,
+      loop = props.loop,
+      autoPlay = props.autoPlay,
+      path = props.path,
+      speed = props.speed,
+      segments = props.segments,
+      activateOnHover = props.activateOnHover,
+      startPosition = props.startPosition,
+      onInit = props.onInit;
+    lottieAnimation.current = _lottieWeb.default.loadAnimation({
       animationData: data,
-      container: document.getElementById(`lottie--${lottieId}`),
+      container: document.getElementById("lottie--".concat(lottieId)),
       renderer: renderer,
-      rendererSettings,
+      rendererSettings: rendererSettings,
       direction: direction,
       loop: activateOnHover ? false : loop,
       autoplay: activateOnHover ? false : autoPlay,
-      path
+      path: path
     });
     onInit(lottieAnimation.current);
 
@@ -53,7 +59,7 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     // If startPosition is defined use it as a starting frame, startPosition should be between 0 and 1.
     if (startPosition) {
-      const startingFrame = Math.round(lottieAnimation.current.totalFrames * startPosition);
+      var startingFrame = Math.round(lottieAnimation.current.totalFrames * startPosition);
       lottieAnimation.current.goToAndStop(startingFrame, true);
     }
   }, [data, lottieAnimation, lottieId, props]);
@@ -61,10 +67,8 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
   /*
   * Reverse direction on Mouse enter.
   */
-  const onMouseEnter = e => {
-    const {
-      activateOnHover
-    } = props;
+  var onMouseEnter = function onMouseEnter(e) {
+    var activateOnHover = props.activateOnHover;
     if (activateOnHover) {
       lottieAnimation.current.setDirection(DIRECTION_FORWARD);
       lottieAnimation.current.play();
@@ -74,10 +78,8 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
   /*
   * Reverse direction on Mouse leave
   */
-  const onMouseLeave = () => {
-    const {
-      activateOnHover
-    } = props;
+  var onMouseLeave = function onMouseLeave() {
+    var activateOnHover = props.activateOnHover;
     if (activateOnHover) {
       lottieAnimation.current.setDirection(DIRECTION_BACKWARDS);
       lottieAnimation.current.play();
@@ -87,10 +89,8 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
   /*
   * Toggle the animation on click
   */
-  const onClick = () => {
-    const {
-      pauseOnClick
-    } = props;
+  var onClick = function onClick() {
+    var pauseOnClick = props.pauseOnClick;
     if (pauseOnClick) {
       if (lottieAnimation.current.isPaused) {
         lottieAnimation.current.play();
@@ -101,12 +101,10 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
 
   // Init the Lottie animation.
-  useEffect(() => {
-    const {
-      onDestroy
-    } = props;
+  (0, _react.useEffect)(function () {
+    var onDestroy = props.onDestroy;
     loadAnimation();
-    return () => {
+    return function () {
       onDestroy(lottieAnimation.current);
       lottieAnimation.current.destroy();
     };
@@ -114,15 +112,16 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    React.createElement("div", {
+    _react.default.createElement("div", {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       onClick: onClick,
       className: lottieClasses,
-      id: `lottie--${lottieId}`,
+      id: "lottie--".concat(lottieId),
       "aria-label": ariaLabel,
       role: "button"
     })
   );
 });
-export default LottieAnimation;
+var _default = LottieAnimation;
+exports.default = _default;

package/dist/components/Lottie/LottieAnimationWithMousePosition.js

@@ -1,41 +1,54 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ola = _interopRequireDefault(require("ola"));
+var _ = _interopRequireDefault(require("."));
+var _excluded = ["olaTime"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useRef } from 'react';
-import Ola from 'ola';
-import Lottie from '.';
-const LottieAnimationWithMousePosition = ({
-  olaTime,
-  ...props
-}) => {
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var LottieAnimationWithMousePosition = function LottieAnimationWithMousePosition(_ref) {
+  var olaTime = _ref.olaTime,
+    props = _objectWithoutProperties(_ref, _excluded);
   // Create our own ref that we pass to the component so that we can use lottie functions.
-  const ref = useRef(null);
+  var ref = (0, _react.useRef)(null);
 
   // Create an Ola instance for frame interpolation.
-  const interpolatedFrame = Ola(0, olaTime);
+  var interpolatedFrame = (0, _ola.default)(0, olaTime);
 
   /*
   * Follow mouse position for animation on Mouse move.
   */
-  const onMouseMove = e => {
+  var onMouseMove = function onMouseMove(e) {
     if (ref && ref.current) {
       // Determine the mouse position relative to the current Lottie.
-      const clientRect = ref.current.wrapper.getBoundingClientRect();
-      const mousePositionRelative = e.type === 'touchmove' ? (e.touches[0].clientX - clientRect.left) / clientRect.width : (e.clientX - clientRect.left) / clientRect.width;
-      const lottiePosition = Math.max(0, Math.min(1, mousePositionRelative));
+      var clientRect = ref.current.wrapper.getBoundingClientRect();
+      var mousePositionRelative = e.type === 'touchmove' ? (e.touches[0].clientX - clientRect.left) / clientRect.width : (e.clientX - clientRect.left) / clientRect.width;
+      var lottiePosition = Math.max(0, Math.min(1, mousePositionRelative));
 
       // Round the frame, clamp it, and pass it to Ola for frame interpolation.
-      const rawFrame = Math.round(ref.current.totalFrames * lottiePosition);
-      const frame = Math.min(ref.current.totalFrames - 1, Math.max(1, rawFrame));
+      var rawFrame = Math.round(ref.current.totalFrames * lottiePosition);
+      var frame = Math.min(ref.current.totalFrames - 1, Math.max(1, rawFrame));
       interpolatedFrame.set(frame);
 
       // Go to the frame we just calculated using the Ola value.
       ref.current.goToAndStop(interpolatedFrame.value, true);
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     onMouseMove: onMouseMove,
     onTouchMove: onMouseMove
-  }, /*#__PURE__*/React.createElement(Lottie, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_.default, _extends({
     ref: ref
   }, props)));
 };
-export default LottieAnimationWithMousePosition;
+var _default = LottieAnimationWithMousePosition;
+exports.default = _default;

package/dist/components/Lottie/index.js

@@ -1,46 +1,57 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from 'react';
-import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _component = _interopRequireDefault(require("@loadable/component"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 // Lazy-load Lottie animations with a delay.
-const Lottie = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    delay
-  } = props;
-  const LottieAnimation = loadable(() => {
-    return new Promise(resolve => {
-      setTimeout(() => resolve(import('./LottieAnimation')), delay);
+var Lottie = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var delay = props.delay;
+  var LottieAnimation = (0, _component.default)(function () {
+    return new Promise(function (resolve) {
+      setTimeout(function () {
+        return resolve(Promise.resolve().then(function () {
+          return _interopRequireWildcard(require('./LottieAnimation'));
+        }));
+      }, delay);
     });
   });
-  return /*#__PURE__*/React.createElement(LottieAnimation, _extends({
+  return /*#__PURE__*/_react.default.createElement(LottieAnimation, _extends({
     ref: ref
   }, props));
 });
 Lottie.propTypes = {
-  id: PropTypes.string,
-  className: PropTypes.string,
-  renderer: PropTypes.string,
-  rendererSettings: PropTypes.shape({
-    preserveAspectRatio: PropTypes.string
+  id: _propTypes.default.string,
+  className: _propTypes.default.string,
+  renderer: _propTypes.default.string,
+  rendererSettings: _propTypes.default.shape({
+    preserveAspectRatio: _propTypes.default.string
   }),
-  data: PropTypes.object,
-  path: PropTypes.string,
-  segments: PropTypes.array,
+  data: _propTypes.default.object,
+  path: _propTypes.default.string,
+  segments: _propTypes.default.array,
   // Events
-  onInit: PropTypes.func,
-  onDestroy: PropTypes.func,
+  onInit: _propTypes.default.func,
+  onDestroy: _propTypes.default.func,
   // Options
-  delay: PropTypes.number,
-  autoPlay: PropTypes.bool,
-  loop: PropTypes.bool,
-  speed: PropTypes.number,
-  direction: PropTypes.number,
-  activateOnHover: PropTypes.bool,
-  pauseOnClick: PropTypes.bool,
-  olaTime: PropTypes.number,
-  startPosition: PropTypes.number,
-  ariaLabel: PropTypes.string
+  delay: _propTypes.default.number,
+  autoPlay: _propTypes.default.bool,
+  loop: _propTypes.default.bool,
+  speed: _propTypes.default.number,
+  direction: _propTypes.default.number,
+  activateOnHover: _propTypes.default.bool,
+  pauseOnClick: _propTypes.default.bool,
+  olaTime: _propTypes.default.number,
+  startPosition: _propTypes.default.number,
+  ariaLabel: _propTypes.default.string
 };
 Lottie.defaultProps = {
   id: null,
@@ -53,8 +64,8 @@ Lottie.defaultProps = {
   path: null,
   segments: null,
   // Events
-  onInit: () => {},
-  onDestroy: () => {},
+  onInit: function onInit() {},
+  onDestroy: function onDestroy() {},
   // Options
   delay: null,
   autoPlay: true,
@@ -67,4 +78,5 @@ Lottie.defaultProps = {
   olaTime: 300,
   startPosition: null
 };
-export default Lottie;
+var _default = Lottie;
+exports.default = _default;

package/dist/components/Lottie/stories.js

@@ -1,41 +1,66 @@
-import React from 'react';
-import Lottie from '.';
-import LottieAnimationWithMousePosition from './LottieAnimationWithMousePosition';
-import exampleLottie from '../../assets/lottie/example.json';
-import exampleLottieEspero from '../../assets/lottie/data.json';
-export default {
-  title: 'Atoms/Lottie'
-};
+"use strict";
 
-// Default animation
-export const DefaultAnimation = () => /*#__PURE__*/React.createElement(Lottie, {
-  id: "example",
-  data: exampleLottie,
-  onInit: lottie => console.log(lottie)
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+exports.playAnimationOnMousePosition = exports.pauseOnClickAnimation = exports.default = exports.activateOnHoverAnimation = exports.PathLoad = exports.DefaultAnimation = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("."));
+var _LottieAnimationWithMousePosition = _interopRequireDefault(require("./LottieAnimationWithMousePosition"));
+var _example = _interopRequireDefault(require("../../assets/lottie/example.json"));
+var _data = _interopRequireDefault(require("../../assets/lottie/data.json"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _default = {
+  title: 'Atoms/Lottie',
+  component: _.default
+}; // Default animation
+exports.default = _default;
+var DefaultAnimation = function DefaultAnimation(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    id: "example",
+    data: _example.default,
+    onInit: function onInit(lottie) {
+      return console.log(lottie);
+    }
+  }, args));
+};
 
 // Animation active on hover
-export const activateOnHoverAnimation = () => /*#__PURE__*/React.createElement(Lottie, {
-  data: exampleLottie,
-  activateOnHover: true
-});
+exports.DefaultAnimation = DefaultAnimation;
+var activateOnHoverAnimation = function activateOnHoverAnimation(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    data: _example.default,
+    activateOnHover: true
+  }, args));
+};
 
 // Animation plays on mouse position
-export const playAnimationOnMousePosition = () => /*#__PURE__*/React.createElement(LottieAnimationWithMousePosition, {
-  loop: false,
-  autoplay: false,
-  data: exampleLottieEspero,
-  olaTime: 100,
-  startPosition: 0.5
-});
+exports.activateOnHoverAnimation = activateOnHoverAnimation;
+var playAnimationOnMousePosition = function playAnimationOnMousePosition(args) {
+  return /*#__PURE__*/_react.default.createElement(_LottieAnimationWithMousePosition.default, _extends({
+    loop: false,
+    autoplay: false,
+    data: _data.default,
+    olaTime: 100,
+    startPosition: 0.5
+  }, args));
+};
 
 // Pause animation on click
-export const pauseOnClickAnimation = () => /*#__PURE__*/React.createElement(Lottie, {
-  data: exampleLottie,
-  pauseOnClick: true
-});
+exports.playAnimationOnMousePosition = playAnimationOnMousePosition;
+var pauseOnClickAnimation = function pauseOnClickAnimation(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    data: _example.default,
+    pauseOnClick: true
+  }, args));
+};
 
 // Via path load
-export const PathLoad = () => /*#__PURE__*/React.createElement(Lottie, {
-  path: "https://maxst.icons8.com/vue-static/landings/animated-icons/icons/checkmark-ok/checkmark-ok.json"
-});
+exports.pauseOnClickAnimation = pauseOnClickAnimation;
+var PathLoad = function PathLoad(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    path: "https://maxst.icons8.com/vue-static/landings/animated-icons/icons/checkmark-ok/checkmark-ok.json"
+  }, args));
+};
+exports.PathLoad = PathLoad;

package/dist/components/MagicLine/index.js

@@ -1,64 +1,87 @@
-import React, { useRef, useState, useEffect } from 'react';
-import c from 'classnames';
-const MagicLine = ({
-  activeClassName = 'Menu__item--active',
-  children
-}) => {
-  const magicLineParentRef = useRef(null);
-  const magicLineRef = useRef(null);
-  const currentActiveItem = useRef(null);
-  const [loaded, setLoaded] = useState(false);
-  const [activeItemInNavigation, _setActiveItemInNavigation] = useState(false);
-  const setActiveItemInNavigation = value => {
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var MagicLine = function MagicLine(_ref) {
+  var _ref$activeClassName = _ref.activeClassName,
+    activeClassName = _ref$activeClassName === void 0 ? 'Menu__item--active' : _ref$activeClassName,
+    children = _ref.children;
+  var magicLineParentRef = (0, _react.useRef)(null);
+  var magicLineRef = (0, _react.useRef)(null);
+  var currentActiveItem = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loaded = _useState2[0],
+    setLoaded = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeItemInNavigation = _useState4[0],
+    _setActiveItemInNavigation = _useState4[1];
+  var setActiveItemInNavigation = function setActiveItemInNavigation(value) {
     if (value !== activeItemInNavigation) {
       _setActiveItemInNavigation(value);
     }
   };
-  const MagicLineRefClasses = c('MagicLine__magic_line', {
+  var MagicLineRefClasses = (0, _classnames.default)('MagicLine__magic_line', {
     'MagicLine__magic_line--visible': activeItemInNavigation && loaded
   });
-  const alignMagicLine = () => {
+  var alignMagicLine = function alignMagicLine() {
     if (magicLineRef.current && currentActiveItem.current) {
-      const left = currentActiveItem.current.getBoundingClientRect().left - magicLineParentRef.current.getBoundingClientRect().left;
-      const right = magicLineParentRef.current.getBoundingClientRect().width - left - currentActiveItem.current.getBoundingClientRect().width;
-      magicLineRef.current.style.left = `${left}px`;
-      magicLineRef.current.style.right = `${right}px`;
+      var left = currentActiveItem.current.getBoundingClientRect().left - magicLineParentRef.current.getBoundingClientRect().left;
+      var right = magicLineParentRef.current.getBoundingClientRect().width - left - currentActiveItem.current.getBoundingClientRect().width;
+      magicLineRef.current.style.left = "".concat(left, "px");
+      magicLineRef.current.style.right = "".concat(right, "px");
       setLoaded(true);
     }
   };
-  const hoverMagicLine = e => {
+  var hoverMagicLine = function hoverMagicLine(e) {
     currentActiveItem.current = e.target;
     _setActiveItemInNavigation(true);
     alignMagicLine();
   };
-  const setInitialMagicLine = () => {
+  var setInitialMagicLine = function setInitialMagicLine() {
     currentActiveItem.current = document.getElementsByClassName(activeClassName)[0];
     if (!currentActiveItem.current) {
       _setActiveItemInNavigation(false);
     }
     alignMagicLine();
   };
-  useEffect(() => {
-    const initialize = () => {
+  (0, _react.useEffect)(function () {
+    var initialize = function initialize() {
       setInitialMagicLine();
     };
-    const handleResize = () => {
+    var handleResize = function handleResize() {
       alignMagicLine();
     };
     document.fonts.ready.then(initialize);
     window.addEventListener('load', initialize);
     window.addEventListener('resize', handleResize);
-    return () => {
+    return function () {
       window.removeEventListener('load', initialize);
       window.removeEventListener('resize', handleResize);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     ref: magicLineParentRef,
     className: "MagicLine"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     ref: magicLineRef,
     className: MagicLineRefClasses
   }), children(setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation));
 };
-export default MagicLine;
+var _default = MagicLine;
+exports.default = _default;