orcs-design-system 3.2.4 → 3.2.6

package/es/hooks/keepInView.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useState, useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 
@@ -9,7 +8,7 @@ import { useInView } from "react-intersection-observer";
  * It may be better to allow these values to be set by the target - in that case state a nd prop changes and their effect
  *    on rendering needs to be taken into account.
  */
-var ROOT_BOUNDS = {
+const ROOT_BOUNDS = {
   top: 55,
   bottom: 100
 };
@@ -18,7 +17,7 @@ var ROOT_BOUNDS = {
  * An explicit mapping of directions to their opposites
  * This is used in oppositeDirection() to move the Popover when it leaves the viewPort
  */
-export var directions = {
+export const directions = {
   top: "bottom",
   topRight: "bottomLeft",
   right: "left",
@@ -28,16 +27,16 @@ export var directions = {
   left: "right",
   topLeft: "bottomRight"
 };
-export var oppositeDirection = function oppositeDirection(direction) {
+export const oppositeDirection = direction => {
   if (!direction || !directions[direction]) return "left";
   return directions[direction];
 };
-var isWithinRootBounds = function isWithinRootBounds(intersectionObserverEntry) {
-  var rootBounds = intersectionObserverEntry.rootBounds;
-  var intersectionRect = intersectionObserverEntry.intersectionRect;
+const isWithinRootBounds = intersectionObserverEntry => {
+  const rootBounds = intersectionObserverEntry.rootBounds;
+  const intersectionRect = intersectionObserverEntry.intersectionRect;
   if (rootBounds && intersectionRect) {
-    var topDiff = intersectionRect.top - rootBounds.top;
-    var bottomDiff = rootBounds.bottom - intersectionRect.bottom;
+    const topDiff = intersectionRect.top - rootBounds.top;
+    const bottomDiff = rootBounds.bottom - intersectionRect.bottom;
     return topDiff > ROOT_BOUNDS.top && bottomDiff > ROOT_BOUNDS.bottom;
   }
   return true;
@@ -61,34 +60,30 @@ var isWithinRootBounds = function isWithinRootBounds(intersectionObserverEntry)
  * - a callback to change the direction of the component when it leaves the view port
  *
  */
-export var useKeepInView = function useKeepInView(_ref) {
-  var direction = _ref.direction,
-    _ref$shown = _ref.shown,
-    shown = _ref$shown === void 0 ? false : _ref$shown,
-    _ref$inViewOptions = _ref.inViewOptions,
-    inViewOptions = _ref$inViewOptions === void 0 ? {
+export const useKeepInView = _ref => {
+  let {
+    direction,
+    shown = false,
+    inViewOptions = {
       threshold: 1,
       initialInView: true,
       fallbackInView: true
-    } : _ref$inViewOptions,
-    callback = _ref.callback;
-  var _useState = useState({
-      direction: direction
-    }),
-    _useState2 = _slicedToArray(_useState, 1),
-    lastDirection = _useState2[0];
-  var _useState3 = useState(shown),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isShown = _useState4[0],
-    setIsShown = _useState4[1];
-  var _useInView = useInView(inViewOptions),
-    ref = _useInView.ref,
-    inView = _useInView.inView,
-    entry = _useInView.entry;
-  useEffect(function () {
+    },
+    callback
+  } = _ref;
+  const [lastDirection] = useState({
+    direction
+  });
+  const [isShown, setIsShown] = useState(shown);
+  const {
+    ref,
+    inView,
+    entry
+  } = useInView(inViewOptions);
+  useEffect(() => {
     if (!inView && isShown) {
       if (isWithinRootBounds(entry)) {
-        var newDirection = oppositeDirection(lastDirection.direction);
+        const newDirection = oppositeDirection(lastDirection.direction);
         callback(newDirection);
         lastDirection.direction = newDirection;
       }

package/es/hooks/keypress.js

@@ -1,6 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useState } from "react";
-export var commonKeys = {
+export const commonKeys = {
   DOWN: "Down",
   ARROW_DOWN: "ArrowDown",
   UP: "Up",
@@ -14,17 +13,16 @@ export var commonKeys = {
   ESCAPE: "Escape",
   TAB: "Tab"
 };
-export var useKeyPress = function useKeyPress(targetKey, callback) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+export const useKeyPress = function (targetKey, callback) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   // State for keeping track of whether key is pressed
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    keyPressed = _useState2[0],
-    setKeyPressed = _useState2[1];
+  const [keyPressed, setKeyPressed] = useState(false);
 
   // If pressed key is our target key then set to true
-  var downHandler = function downHandler(_ref) {
-    var key = _ref.key;
+  const downHandler = _ref => {
+    let {
+      key
+    } = _ref;
     if (key === targetKey) {
       setKeyPressed(true);
       callback();
@@ -32,8 +30,10 @@ export var useKeyPress = function useKeyPress(targetKey, callback) {
   };
 
   // If released key is our target key then set to false
-  var upHandler = function upHandler(_ref2) {
-    var key = _ref2.key;
+  const upHandler = _ref2 => {
+    let {
+      key
+    } = _ref2;
     if (key === targetKey) {
       setKeyPressed(false);
       callback();
@@ -41,8 +41,8 @@ export var useKeyPress = function useKeyPress(targetKey, callback) {
   };
 
   // Add event listeners
-  useEffect(function () {
-    var removeEventListeners = function removeEventListeners() {
+  useEffect(() => {
+    const removeEventListeners = () => {
       window.removeEventListener("keydown", downHandler);
       window.removeEventListener("keyup", upHandler);
     };

package/es/hooks/useInputFocus.js

@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
-var useInputFocus = function useInputFocus() {
-  var ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var focus = arguments.length > 1 ? arguments[1] : undefined;
-  var inputRef = ref || /*#__PURE__*/React.createRef();
-  useEffect(function () {
+const useInputFocus = function () {
+  let ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  let focus = arguments.length > 1 ? arguments[1] : undefined;
+  const inputRef = ref || /*#__PURE__*/React.createRef();
+  useEffect(() => {
     if (focus && inputRef && inputRef.current && inputRef.current.focus) {
       inputRef.current.focus();
     }

package/es/hooks/usePrevious.js

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from "react";
-var usePrevious = function usePrevious(value) {
-  var ref = useRef();
-  useEffect(function () {
+const usePrevious = value => {
+  const ref = useRef();
+  useEffect(() => {
     ref.current = value;
   });
   return ref.current;

package/es/systemThemeCollapsed.js

@@ -1,20 +1,20 @@
 import { rgba, lighten, darken, desaturate, saturate } from "polished";
 
 // FONTS
-export var fonts = {
+export const fonts = {
   main: '"Open Sans", -apple-system, BlinkMacSystemFont, Roboto, sans-serif'
 };
-export var font = fonts.main;
-export var fontFamilies = fonts;
-export var fontSizes = ["1.1rem", "1.2rem", "1.4rem", "1.6rem", "1.8rem", "2.2rem", "2.6rem", "3.0rem", "3.4rem", "4.4rem", "6rem"];
-export var fontWeights = [300, 400, 600];
-export var lineHeights = [1, 1.5, 2];
+export const font = fonts.main;
+export const fontFamilies = fonts;
+export const fontSizes = ["1.1rem", "1.2rem", "1.4rem", "1.6rem", "1.8rem", "2.2rem", "2.6rem", "3.0rem", "3.4rem", "4.4rem", "6rem"];
+export const fontWeights = [300, 400, 600];
+export const lineHeights = [1, 1.5, 2];
 
 // Z-AXIS spec
-export var zIndices = [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 50];
+export const zIndices = [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 50];
 
 // SPACING
-export var space = [0, "1px", "2px", "6px", "12px", "16px", "24px", "40px", "100px", "150px", "300px"];
+export const space = [0, "1px", "2px", "6px", "12px", "16px", "24px", "40px", "100px", "150px", "300px"];
 space.xxs = space[1];
 space.xs = space[2];
 space.s = space[3];
@@ -27,7 +27,7 @@ space.between = "8px";
 
 // SIZES (for LAYOUT properties)
 // Half these values - Done
-export var sizes = [0, "1px", "2px", "4px", "8px", "12px", "16px", "32px", "64px", "128px", "256px"];
+export const sizes = [0, "1px", "2px", "4px", "8px", "12px", "16px", "32px", "64px", "128px", "256px"];
 sizes.xxs = sizes[1];
 sizes.xs = sizes[2];
 sizes.s = sizes[3];
@@ -38,21 +38,21 @@ sizes.xxl = sizes[7];
 sizes.xxxl = sizes[8];
 
 // NEW ACCESSIBLE COLOUR PALETTE
-var black = "#000";
-var white = "#fff";
-var grey = "#90979A"; // Base grey - Mainly used for UI elements like backgrounds, muted text, icons, dividers or borders
-var primary = "#007ac4"; // Potential new colour: #2a5ec1. Base primary brand colour (blue) - Mainly used for buttons, links and selected states
-var secondary = "#8714f2"; // Change to #7211ED with new colour palette. Potential new purple colour. Introduce new secondary colour maybe purple when we re-design our colour palette
+const black = "#000";
+const white = "#fff";
+const grey = "#90979A"; // Base grey - Mainly used for UI elements like backgrounds, muted text, icons, dividers or borders
+const primary = "#007ac4"; // Potential new colour: #2a5ec1. Base primary brand colour (blue) - Mainly used for buttons, links and selected states
+const secondary = "#8714f2"; // Change to #7211ED with new colour palette. Potential new purple colour. Introduce new secondary colour maybe purple when we re-design our colour palette
 //const tertiary = "#FF9E44"; // A tertiary colour for limited use. Not sure if needed.
-var success = "#00883b"; // Base brand success colour (green) - Mainly used to indicate success, status=good, valid, add, or save states
-var successDesaturated = desaturate(0.3, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
-var warning = "#ffb71c"; // Base brand warning colour - Mainly used to indicate warnings, slipping or near due states
-var warningSaturated = saturate(1, warning); // This is because the darker versions of warning were too under saturated and mustard looking.
-var danger = "#d90f27"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
+const success = "#00883b"; // Base brand success colour (green) - Mainly used to indicate success, status=good, valid, add, or save states
+const successDesaturated = desaturate(0.3, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
+const warning = "#ffb71c"; // Base brand warning colour - Mainly used to indicate warnings, slipping or near due states
+const warningSaturated = saturate(1, warning); // This is because the darker versions of warning were too under saturated and mustard looking.
+const danger = "#d90f27"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
 
-export var colors = {
+export const colors = {
   /* Greyscale */
-  black: black,
+  black,
   black90: rgba(black, 0.9),
   black80: rgba(black, 0.8),
   black70: rgba(black, 0.7),
@@ -62,7 +62,7 @@ export var colors = {
   black30: rgba(black, 0.3),
   black20: rgba(black, 0.2),
   black10: rgba(black, 0.1),
-  white: white,
+  white,
   white90: rgba(white, 0.9),
   white80: rgba(white, 0.8),
   white70: rgba(white, 0.7),
@@ -72,7 +72,7 @@ export var colors = {
   white30: rgba(white, 0.3),
   white20: rgba(white, 0.2),
   white10: rgba(white, 0.1),
-  grey: grey,
+  grey,
   greyLight: lighten(0.2, grey),
   greyLighter: lighten(0.3, grey),
   greyLightest: lighten(0.35, grey),
@@ -80,7 +80,7 @@ export var colors = {
   greyDarker: darken(0.3, grey),
   greyDarkest: darken(0.4, grey),
   /* Colours */
-  primary: primary,
+  primary,
   primaryLight: lighten(0.2, primary),
   primaryLighter: lighten(0.35, primary),
   primaryLightest: lighten(0.55, primary),
@@ -96,7 +96,7 @@ export var colors = {
   primary70: rgba(primary, 0.7),
   primary80: rgba(primary, 0.8),
   primary90: rgba(primary, 0.9),
-  secondary: secondary,
+  secondary,
   secondaryLight: lighten(0.1, secondary),
   secondaryLighter: lighten(0.2, secondary),
   secondaryLightest: lighten(0.35, secondary),
@@ -129,7 +129,7 @@ export var colors = {
   // tertiary70: rgba(tertiary, 0.7),
   // tertiary80: rgba(tertiary, 0.8),
   // tertiary90: rgba(tertiary, 0.9),
-  success: success,
+  success,
   // successLight: lighten(0.11, success),
   // successLighter: lighten(0.25, success),
   // successLightest: lighten(0.35, success),
@@ -149,7 +149,7 @@ export var colors = {
   success70: rgba(success, 0.7),
   success80: rgba(success, 0.8),
   success90: rgba(success, 0.9),
-  warning: warning,
+  warning,
   warningLight: lighten(0.15, warning),
   warningLighter: lighten(0.25, warning),
   warningLightest: lighten(0.4, warning),
@@ -165,7 +165,7 @@ export var colors = {
   warning70: rgba(warning, 0.7),
   warning80: rgba(warning, 0.8),
   warning90: rgba(warning, 0.9),
-  danger: danger,
+  danger,
   dangerLight: lighten(0.1, danger),
   dangerLighter: lighten(0.2, danger),
   dangerLightest: lighten(0.35, danger),
@@ -184,24 +184,24 @@ export var colors = {
 };
 
 // BORDERS
-export var radii = [0, "3px", "6px"];
-export var borderWidths = [0, "1px", "2px", "3px"];
+export const radii = [0, "3px", "6px"];
+export const borderWidths = [0, "1px", "2px", "3px"];
 
 // SHADOWS
-export var shadows = {
+export const shadows = {
   boxDefault: "0 2px 5px 0 ".concat(colors.black10),
   thinOutline: "0 0 0 1px",
   thickOutline: "0 0 0 3px"
 };
 
 // ANIMATION
-export var transition = {
+export const transition = {
   transitionDefault: "all 200ms ease-in-out"
 };
 
 // RESPONSIVE MEDIA BREAKPOINTS
-export var breakpoints = ["450px", "675px", "900px", "1100px", "1400px", "1900px"];
-export var mediaQueries = {
+export const breakpoints = ["450px", "675px", "900px", "1100px", "1400px", "1900px"];
+export const mediaQueries = {
   screenXS: "@media screen and (min-width: ".concat(breakpoints[0], ")"),
   screenS: "@media screen and (min-width: ".concat(breakpoints[1], ")"),
   screenM: "@media screen and (min-width: ".concat(breakpoints[2], ")"),
@@ -212,7 +212,7 @@ export var mediaQueries = {
 
 // APP-SPECIFIC DIMENSIONS
 
-export var appScale = {
+export const appScale = {
   navBarSize: "50px",
   sidebarMaxWidth: "360px",
   sidebarMaxWidthLarge: "450px",
@@ -224,7 +224,7 @@ export var appScale = {
   inputHeightDefault: "32px",
   inputHeightLarge: "52px"
 };
-export var tagScale = {
+export const tagScale = {
   tagHeightDefault: "22px",
   tagHeightSmall: "18px",
   tagPaddingDefault: "0 8px",
@@ -237,21 +237,21 @@ export var tagScale = {
   tagAvatarFontSizeSmall: "0.7rem"
 };
 export default {
-  fonts: fonts,
-  font: font,
-  fontFamilies: fontFamilies,
-  fontSizes: fontSizes,
-  fontWeights: fontWeights,
-  lineHeights: lineHeights,
-  radii: radii,
-  borderWidths: borderWidths,
-  space: space,
-  sizes: sizes,
-  shadows: shadows,
-  colors: colors,
-  breakpoints: breakpoints,
-  transition: transition,
-  zIndices: zIndices,
-  appScale: appScale,
-  tagScale: tagScale
+  fonts,
+  font,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  radii,
+  borderWidths,
+  space,
+  sizes,
+  shadows,
+  colors,
+  breakpoints,
+  transition,
+  zIndices,
+  appScale,
+  tagScale
 };

package/es/systemtheme.js

@@ -1,20 +1,20 @@
 import { rgba, lighten, darken, desaturate, saturate } from "polished";
 
 // FONTS
-export var fonts = {
+export const fonts = {
   main: '"Open Sans", -apple-system, BlinkMacSystemFont, Roboto, sans-serif'
 };
-export var font = fonts.main;
-export var fontFamilies = fonts;
-export var fontSizes = ["1.2rem", "1.4rem", "1.6rem", "1.8rem", "2.0rem", "2.4rem", "2.8rem", "3.2rem", "3.6rem", "4.8rem", "6.4rem"];
-export var fontWeights = [300, 400, 600];
-export var lineHeights = [1, 1.5, 2];
+export const font = fonts.main;
+export const fontFamilies = fonts;
+export const fontSizes = ["1.2rem", "1.4rem", "1.6rem", "1.8rem", "2.0rem", "2.4rem", "2.8rem", "3.2rem", "3.6rem", "4.8rem", "6.4rem"];
+export const fontWeights = [300, 400, 600];
+export const lineHeights = [1, 1.5, 2];
 
 // Z-AXIS spec
-export var zIndices = [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 50];
+export const zIndices = [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 50];
 
 // SPACING
-export var space = [0, "2px", "4px", "8px", "16px", "24px", "32px", "64px", "128px", "256px", "512px"];
+export const space = [0, "2px", "4px", "8px", "16px", "24px", "32px", "64px", "128px", "256px", "512px"];
 space.xxs = space[1];
 space.xs = space[2];
 space.s = space[3];
@@ -26,7 +26,7 @@ space.xxxl = space[8];
 space.between = "10px";
 
 // SIZES (for LAYOUT properties)
-export var sizes = [0, "2px", "4px", "8px", "16px", "24px", "32px", "64px", "128px", "256px", "512px"];
+export const sizes = [0, "2px", "4px", "8px", "16px", "24px", "32px", "64px", "128px", "256px", "512px"];
 sizes.xxs = sizes[1];
 sizes.xs = sizes[2];
 sizes.s = sizes[3];
@@ -37,21 +37,21 @@ sizes.xxl = sizes[7];
 sizes.xxxl = sizes[8];
 
 // NEW ACCESSIBLE COLOUR PALETTE
-var black = "#000";
-var white = "#fff";
-var grey = "#90979A"; // Base grey - Mainly used for UI elements like backgrounds, muted text, icons, dividers or borders
-var primary = "#007BC7"; // Potential new colour: #2a5ec1. Base primary brand colour (blue) - Mainly used for buttons, links and selected states
-var secondary = "#8714f2"; // Change to #7211ED with new colour palette. Potential new purple colour. Introduce new secondary colour maybe purple when we re-design our colour palette
+const black = "#000";
+const white = "#fff";
+const grey = "#90979A"; // Base grey - Mainly used for UI elements like backgrounds, muted text, icons, dividers or borders
+const primary = "#007BC7"; // Potential new colour: #2a5ec1. Base primary brand colour (blue) - Mainly used for buttons, links and selected states
+const secondary = "#8714f2"; // Change to #7211ED with new colour palette. Potential new purple colour. Introduce new secondary colour maybe purple when we re-design our colour palette
 //const tertiary = "#FF9E44"; // A tertiary colour for limited use. Not sure if needed.
-var success = "#00883b"; // Base brand success colour (green) - Mainly used to indicate success, status=good, valid, add, or save states
-var successDesaturated = desaturate(0.3, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
-var warning = "#ffb71c"; // Base brand warning colour - Mainly used to indicate warnings, slipping or near due states
-var warningSaturated = saturate(1, warning); // This is because the darker versions of warning were too under saturated and mustard looking.
-var danger = "#d90f27"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
+const success = "#00883b"; // Base brand success colour (green) - Mainly used to indicate success, status=good, valid, add, or save states
+const successDesaturated = desaturate(0.3, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
+const warning = "#ffb71c"; // Base brand warning colour - Mainly used to indicate warnings, slipping or near due states
+const warningSaturated = saturate(1, warning); // This is because the darker versions of warning were too under saturated and mustard looking.
+const danger = "#d90f27"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
 
-export var colors = {
+export const colors = {
   /* Greyscale */
-  black: black,
+  black,
   black90: rgba(black, 0.9),
   black80: rgba(black, 0.8),
   black70: rgba(black, 0.7),
@@ -61,7 +61,7 @@ export var colors = {
   black30: rgba(black, 0.3),
   black20: rgba(black, 0.2),
   black10: rgba(black, 0.1),
-  white: white,
+  white,
   white90: rgba(white, 0.9),
   white80: rgba(white, 0.8),
   white70: rgba(white, 0.7),
@@ -71,7 +71,7 @@ export var colors = {
   white30: rgba(white, 0.3),
   white20: rgba(white, 0.2),
   white10: rgba(white, 0.1),
-  grey: grey,
+  grey,
   greyLight: lighten(0.2, grey),
   greyLighter: lighten(0.3, grey),
   greyLightest: lighten(0.35, grey),
@@ -79,7 +79,7 @@ export var colors = {
   greyDarker: darken(0.3, grey),
   greyDarkest: darken(0.4, grey),
   /* Colours */
-  primary: primary,
+  primary,
   primaryLight: lighten(0.2, primary),
   primaryLighter: lighten(0.45, primary),
   primaryLightest: lighten(0.55, primary),
@@ -95,7 +95,7 @@ export var colors = {
   primary70: rgba(primary, 0.7),
   primary80: rgba(primary, 0.8),
   primary90: rgba(primary, 0.9),
-  secondary: secondary,
+  secondary,
   secondaryLight: lighten(0.1, secondary),
   secondaryLighter: lighten(0.2, secondary),
   secondaryLightest: lighten(0.35, secondary),
@@ -128,7 +128,7 @@ export var colors = {
   // tertiary70: rgba(tertiary, 0.7),
   // tertiary80: rgba(tertiary, 0.8),
   // tertiary90: rgba(tertiary, 0.9),
-  success: success,
+  success,
   // successLight: lighten(0.11, success),
   // successLighter: lighten(0.25, success),
   // successLightest: lighten(0.35, success),
@@ -148,7 +148,7 @@ export var colors = {
   success70: rgba(success, 0.7),
   success80: rgba(success, 0.8),
   success90: rgba(success, 0.9),
-  warning: warning,
+  warning,
   warningLight: lighten(0.15, warningSaturated),
   warningLighter: lighten(0.25, warningSaturated),
   warningLightest: lighten(0.4, warningSaturated),
@@ -164,7 +164,7 @@ export var colors = {
   warning70: rgba(warning, 0.7),
   warning80: rgba(warning, 0.8),
   warning90: rgba(warning, 0.9),
-  danger: danger,
+  danger,
   dangerLight: lighten(0.1, danger),
   dangerLighter: lighten(0.2, danger),
   dangerLightest: lighten(0.35, danger),
@@ -183,24 +183,24 @@ export var colors = {
 };
 
 // BORDERS
-export var radii = [0, "3px", "6px"];
-export var borderWidths = [0, "1px", "2px", "3px"];
+export const radii = [0, "3px", "6px"];
+export const borderWidths = [0, "1px", "2px", "3px"];
 
 // SHADOWS
-export var shadows = {
+export const shadows = {
   boxDefault: "0 2px 5px 0 ".concat(colors.black10),
   thinOutline: "0 0 0 1px",
   thickOutline: "0 0 0 3px"
 };
 
 // ANIMATION
-export var transition = {
+export const transition = {
   transitionDefault: "all 200ms ease-in-out"
 };
 
 // RESPONSIVE MEDIA BREAKPOINTS
-export var breakpoints = ["450px", "675px", "900px", "1100px", "1400px", "1900px"];
-export var mediaQueries = {
+export const breakpoints = ["450px", "675px", "900px", "1100px", "1400px", "1900px"];
+export const mediaQueries = {
   screenXS: "@media screen and (min-width: ".concat(breakpoints[0], ")"),
   screenS: "@media screen and (min-width: ".concat(breakpoints[1], ")"),
   screenM: "@media screen and (min-width: ".concat(breakpoints[2], ")"),
@@ -211,7 +211,7 @@ export var mediaQueries = {
 
 // APP-SPECIFIC DIMENSIONS
 
-export var appScale = {
+export const appScale = {
   navBarSize: "54px",
   sidebarMaxWidth: "360px",
   sidebarMaxWidthLarge: "550px",
@@ -223,7 +223,7 @@ export var appScale = {
   inputHeightDefault: "38px",
   inputHeightLarge: "58px"
 };
-export var tagScale = {
+export const tagScale = {
   tagHeightDefault: "28px",
   tagHeightSmall: "24px",
   tagPaddingDefault: "0 10px",
@@ -236,21 +236,21 @@ export var tagScale = {
   tagAvatarFontSizeSmall: "0.8rem"
 };
 export default {
-  fonts: fonts,
-  font: font,
-  fontFamilies: fontFamilies,
-  fontSizes: fontSizes,
-  fontWeights: fontWeights,
-  lineHeights: lineHeights,
-  radii: radii,
-  borderWidths: borderWidths,
-  space: space,
-  sizes: sizes,
-  shadows: shadows,
-  colors: colors,
-  breakpoints: breakpoints,
-  transition: transition,
-  zIndices: zIndices,
-  appScale: appScale,
-  tagScale: tagScale
+  fonts,
+  font,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  radii,
+  borderWidths,
+  space,
+  sizes,
+  shadows,
+  colors,
+  breakpoints,
+  transition,
+  zIndices,
+  appScale,
+  tagScale
 };

package/es/utils/selectUtil.js

@@ -1,5 +1,5 @@
 import { find } from "lodash";
-export var getOptionByValue = function getOptionByValue(options, value) {
+export const getOptionByValue = (options, value) => {
   return find(options, ["value", value]);
 };
 export default getOptionByValue;

package/es/utils/selectUtil.test.js

@@ -1,18 +1,18 @@
 import { getOptionByValue } from "./selectUtil";
-describe("get option by value", function () {
-  var options = [{
+describe("get option by value", () => {
+  const options = [{
     label: "1",
     value: "abc"
   }, {
     label: "2",
     value: "def"
   }];
-  test("return option from value", function () {
-    var option = getOptionByValue(options, "def");
+  test("return option from value", () => {
+    const option = getOptionByValue(options, "def");
     expect(option).toBe(options[1]);
   });
-  test("return nothing if value not found", function () {
-    var option = getOptionByValue(options, "xyz");
+  test("return nothing if value not found", () => {
+    const option = getOptionByValue(options, "xyz");
     expect(option).toBe(undefined);
   });
 });