@ornikar/kitt-universal 21.0.2 → 22.0.0

package/dist/{linaria-themes.es.android.js → linaria-themes-metro.es.ios.js}

@@ -1,14 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 
-var hex2rgba = function (hex) {
-  var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  var r = parseInt(hex.slice(1, 3), 16);
-  var g = parseInt(hex.slice(3, 5), 16);
-  var b = parseInt(hex.slice(5, 7), 16);
-  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+const hex2rgba = (hex, alpha = 1) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
 
-var lateOceanColorPalette = {
+const lateOceanColorPalette = {
   lateOcean: '#4C34E0',
   lateOceanLight1: '#705DE6',
   lateOceanLight2: '#9485EC',
@@ -35,7 +34,7 @@ var lateOceanColorPalette = {
   moonPurpleLight1: '#EDEBFC'
 };
 
-var colors = {
+const colors = {
   primary: lateOceanColorPalette.lateOcean,
   primaryLight: lateOceanColorPalette.lateOceanLight1,
   accent: lateOceanColorPalette.warmEmbrace,
@@ -62,10 +61,10 @@ var colors = {
   }
 };
 
-var actionCard = {
+const actionCard = {
   borderRadius: 20,
   primary: {
-    "default": {
+    default: {
       backgroundColor: colors.uiBackgroundLight,
       borderColor: lateOceanColorPalette.black100,
       borderWidth: 1,
@@ -132,7 +131,7 @@ var actionCard = {
     }
   },
   'primary-border-soft': {
-    "default": {
+    default: {
       backgroundColor: colors.uiBackgroundLight,
       borderColor: lateOceanColorPalette.moonPurple,
       borderWidth: 1,
@@ -199,7 +198,7 @@ var actionCard = {
     }
   },
   'primary-border-hard': {
-    "default": {
+    default: {
       backgroundColor: colors.uiBackgroundLight,
       borderColor: lateOceanColorPalette.lateOcean,
       borderWidth: 1,
@@ -266,7 +265,7 @@ var actionCard = {
     }
   },
   secondary: {
-    "default": {
+    default: {
       backgroundColor: lateOceanColorPalette.black50,
       borderColor: lateOceanColorPalette.transparent,
       borderWidth: 0,
@@ -333,7 +332,7 @@ var actionCard = {
     }
   },
   highlight: {
-    "default": {
+    default: {
       backgroundColor: lateOceanColorPalette.moonPurpleLight1,
       borderColor: lateOceanColorPalette.moonPurple,
       borderWidth: 1,
@@ -401,15 +400,15 @@ var actionCard = {
   }
 };
 
-var defaultAvatarSize = 40;
-var defaultAvatarIconSize = 20;
-var largeAvatarSize = 120;
-var largeAvatarIconSize = 30;
-var avatar = {
+const defaultAvatarSize = 40;
+const defaultAvatarIconSize = 20;
+const largeAvatarSize = 120;
+const largeAvatarIconSize = 30;
+const avatar = {
   borderRadius: 10,
   size: defaultAvatarSize,
   iconSize: defaultAvatarIconSize,
-  "default": {
+  default: {
     backgroundColor: colors.primary
   },
   light: {
@@ -422,9 +421,9 @@ var avatar = {
   }
 };
 
-var spacing = 4;
+const spacing = 4;
 
-var bottomSheet = {
+const bottomSheet = {
   container: {
     padding: spacing * 4
   },
@@ -433,7 +432,7 @@ var bottomSheet = {
   }
 };
 
-var button = {
+const button = {
   borderRadius: 30,
   borderWidth: {
     disabled: 2,
@@ -444,7 +443,7 @@ var button = {
   maxWidth: 335,
   scale: {
     base: {
-      "default": 1,
+      default: 1,
       hover: 0.95,
       active: 0.95
     },
@@ -453,13 +452,13 @@ var button = {
     }
   },
   contentPadding: {
-    "default": '7px 16px 7px',
+    default: '7px 16px 7px',
     large: '11px 24px 11px',
     xLarge: '15px 24px 15px',
     disabled: '5px 14px 5px'
   },
   padding: {
-    "default": {
+    default: {
       horizontal: 16,
       vertical: 7
     },
@@ -480,8 +479,8 @@ var button = {
     duration: '200ms',
     timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
   },
-  "default": {
-    "default": {
+  default: {
+    default: {
       backgroundColor: 'rgba(0, 0, 0, 0.05)',
       pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
       hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
@@ -498,7 +497,7 @@ var button = {
     }
   },
   primary: {
-    "default": {
+    default: {
       backgroundColor: colors.primary,
       pressedBackgroundColor: colors.primaryLight,
       hoverBackgroundColor: colors.primaryLight,
@@ -515,7 +514,7 @@ var button = {
     }
   },
   danger: {
-    "default": {
+    default: {
       backgroundColor: lateOceanColorPalette.warmEmbraceLight1,
       pressedBackgroundColor: lateOceanColorPalette.warmEmbrace,
       hoverBackgroundColor: lateOceanColorPalette.warmEmbrace,
@@ -532,7 +531,7 @@ var button = {
     }
   },
   subtle: {
-    "default": {
+    default: {
       backgroundColor: colors.transparent,
       pressedBackgroundColor: colors.transparent,
       hoverBackgroundColor: colors.transparent,
@@ -543,7 +542,7 @@ var button = {
     }
   },
   'subtle-dark': {
-    "default": {
+    default: {
       backgroundColor: colors.transparent,
       pressedBackgroundColor: colors.transparent,
       hoverBackgroundColor: colors.transparent,
@@ -554,7 +553,7 @@ var button = {
     }
   },
   disabled: {
-    "default": {
+    default: {
       backgroundColor: colors.disabled,
       pressedBackgroundColor: colors.disabled,
       hoverBackgroundColor: colors.disabled,
@@ -564,7 +563,7 @@ var button = {
   }
 };
 
-var card = {
+const card = {
   borderRadius: 20,
   borderWidth: 2,
   primary: {
@@ -581,15 +580,15 @@ var card = {
   }
 };
 
-var webAnimationContentDuration$2 = 400;
-var webAnimationContentEasing$2 = [0.77, 0, 0.175, 1];
-var webAnimationOverlayDuration$2 = 250;
-var webAnimationOverlayEasing$2 = [0.42, 0, 1, 1];
-var maxWidth = 540;
-var overlayHorizontalPadding = 24;
-var cardModal = {
+const webAnimationContentDuration$2 = 400;
+const webAnimationContentEasing$2 = [0.77, 0, 0.175, 1];
+const webAnimationOverlayDuration$2 = 250;
+const webAnimationOverlayEasing$2 = [0.42, 0, 1, 1];
+const maxWidth = 540;
+const overlayHorizontalPadding = 24;
+const cardModal = {
   borderRadius: 20,
-  maxWidth: maxWidth,
+  maxWidth,
   maxWidthWithPadding: maxWidth + overlayHorizontalPadding * 2,
   shadow: {
     color: colors.black,
@@ -623,7 +622,7 @@ var cardModal = {
   }
 };
 
-var choices = {
+const choices = {
   spacing: {
     row: 12,
     column: 12
@@ -635,7 +634,7 @@ var choices = {
       small: 24
     },
     backgroundColor: {
-      "default": lateOceanColorPalette.black50,
+      default: lateOceanColorPalette.black50,
       disabled: colors.disabled,
       selected: colors.primary,
       pressed: lateOceanColorPalette.lateOceanLight1,
@@ -656,11 +655,11 @@ var choices = {
   }
 };
 
-var webAnimationContentDuration$1 = 400;
-var webAnimationContentEasing$1 = [0.77, 0, 0.175, 1];
-var webAnimationOverlayDuration$1 = 250;
-var webAnimationOverlayEasing$1 = [0.42, 0, 1, 1];
-var dialogModal = {
+const webAnimationContentDuration$1 = 400;
+const webAnimationContentEasing$1 = [0.77, 0, 0.175, 1];
+const webAnimationOverlayDuration$1 = 250;
+const webAnimationOverlayEasing$1 = [0.42, 0, 1, 1];
+const dialogModal = {
   borderRadius: 20,
   maxWidth: 540,
   overlayPadding: {
@@ -686,7 +685,7 @@ var dialogModal = {
   }
 };
 
-var feedbackMessage = {
+const feedbackMessage = {
   minHeight: 60,
   danger: {
     backgroundColor: colors.danger
@@ -702,11 +701,11 @@ var feedbackMessage = {
   }
 };
 
-var autocomplete = {
+const autocomplete = {
   option: {
     verticalPadding: 2,
     minHeight: 40,
-    "default": {
+    default: {
       backgroundColor: colors.white
     },
     hovered: {
@@ -738,7 +737,7 @@ var autocomplete = {
   }
 };
 
-var checkbox = {
+const checkbox = {
   borderWidth: 2,
   borderRadius: 5,
   height: 20,
@@ -746,7 +745,7 @@ var checkbox = {
   iconSize: 14,
   markColor: colors.uiBackgroundLight,
   textSpacing: 10,
-  "default": {
+  default: {
     borderColor: colors.separator,
     backgroundColor: colors.uiBackgroundLight
   },
@@ -776,7 +775,7 @@ var checkbox = {
   }
 };
 
-var datePicker = {
+const datePicker = {
   day: {
     minWidth: 64
   },
@@ -788,27 +787,21 @@ var datePicker = {
   }
 };
 
-var calcLineHeight = function (fontSize, lineHeightMultiplier) {
-  return Math.round(fontSize * lineHeightMultiplier);
-};
+const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
 /** @deprecated legacy typography type config is deprecated. */
-var createLegacyTypographyTypeConfig = function (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize) {
-  var mediumAndWideFontSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : baseAndSmallFontSize;
-  var lineHeightMultiplierMediumAndWide = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : lineHeightMultiplierBaseAndSmall;
-  return {
-    baseAndSmall: {
-      fontSize: baseAndSmallFontSize,
-      lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplierBaseAndSmall)
-    },
-    mediumAndWide: {
-      fontSize: mediumAndWideFontSize,
-      lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplierMediumAndWide)
-    }
-  };
-};
-var createTypographyConfig = function (fontSize, lineHeightMultiplier) {
-  var config = {
-    fontSize: fontSize,
+const createLegacyTypographyTypeConfig = (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize, mediumAndWideFontSize = baseAndSmallFontSize, lineHeightMultiplierMediumAndWide = lineHeightMultiplierBaseAndSmall) => ({
+  baseAndSmall: {
+    fontSize: baseAndSmallFontSize,
+    lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplierBaseAndSmall)
+  },
+  mediumAndWide: {
+    fontSize: mediumAndWideFontSize,
+    lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplierMediumAndWide)
+  }
+});
+const createTypographyConfig = (fontSize, lineHeightMultiplier) => {
+  const config = {
+    fontSize,
     lineHeight: calcLineHeight(fontSize, lineHeightMultiplier)
   };
   return {
@@ -816,7 +809,7 @@ var createTypographyConfig = function (fontSize, lineHeightMultiplier) {
     mediumAndWide: config
   };
 };
-var typography = {
+const typography = {
   colors: {
     black: colors.black,
     'black-anthracite': colors.blackAnthracite,
@@ -832,12 +825,9 @@ var typography = {
     warning: colors.warning
   },
   types: {
-    get header() {
-      throw new Error('typography.types.header is deprecated, use typography.type.headings instead');
-    },
     headings: {
       fontFamily: {
-        "native": {
+        native: {
           regular: 'Moderat-Black',
           bold: 'Moderat-Black'
         },
@@ -868,12 +858,9 @@ var typography = {
         'heading-xxs': createTypographyConfig(16, 1.3)
       }
     },
-    get 'headers-impact'() {
-      throw new Error('typography.types.headers-impact is deprecated, use typography.type.headings-impact instead');
-    },
     'headings-impact': {
       fontFamily: {
-        "native": {
+        native: {
           regular: 'Transducer-Black',
           bold: 'Transducer-Black'
         },
@@ -911,7 +898,7 @@ var typography = {
           regular: 'Moderat',
           bold: 'Moderat'
         },
-        "native": {
+        native: {
           regular: 'Moderat-Regular',
           bold: 'Moderat-Black'
         }
@@ -946,8 +933,8 @@ var typography = {
   }
 };
 
-var inputStatesStyle = {
-  "default": {
+const inputStatesStyle = {
+  default: {
     backgroundColor: colors.uiBackgroundLight,
     borderColor: colors.separator,
     color: colors.black
@@ -980,10 +967,10 @@ var inputStatesStyle = {
     color: colors.black
   }
 };
-var webAnimationDuration = '200ms';
-var webAnimationTimingFunction = 'ease-in-out';
-var webAnimationProperty = 'border-color';
-var input = {
+const webAnimationDuration = '200ms';
+const webAnimationTimingFunction = 'ease-in-out';
+const webAnimationProperty = 'border-color';
+const input = {
   minHeight: 40,
   color: {
     selection: colors.primary,
@@ -1009,7 +996,7 @@ var input = {
   states: inputStatesStyle
 };
 
-var inputField = {
+const inputField = {
   containerPaddingTop: 5,
   containerPaddingBottom: 10,
   feedbackPaddingTop: {
@@ -1020,7 +1007,7 @@ var inputField = {
   labelFeedbackMarginLeft: 6
 };
 
-var inputTag = {
+const inputTag = {
   success: {
     backgroundColor: colors.success,
     labelColor: colors.uiBackgroundLight
@@ -1029,7 +1016,7 @@ var inputTag = {
     backgroundColor: colors.danger,
     labelColor: colors.uiBackgroundLight
   },
-  "default": {
+  default: {
     backgroundColor: lateOceanColorPalette.black50,
     labelColor: colors.black
   },
@@ -1037,7 +1024,7 @@ var inputTag = {
   iconSize: 13.5
 };
 
-var radio = {
+const radio = {
   size: 18,
   unchecked: {
     borderWidth: 2,
@@ -1068,20 +1055,20 @@ var radio = {
   }
 };
 
-var radioButtonGroup = {
+const radioButtonGroup = {
   item: {
     minHeight: 40,
     borderWidth: 2,
     borderRadius: 20,
     borderColor: {
-      "default": colors.separator,
+      default: colors.separator,
       hover: colors.primary,
       pressed: colors.primary,
       active: colors.primary,
       disabled: colors.separator
     },
     backgroundColor: {
-      "default": colors.uiBackgroundLight,
+      default: colors.uiBackgroundLight,
       hover: colors.white,
       pressed: colors.primary,
       active: colors.primary,
@@ -1099,32 +1086,32 @@ var radioButtonGroup = {
   }
 };
 
-var textArea = {
+const textArea = {
   minHeight: 120
 };
 
-var timePicker = {
+const timePicker = {
   minWidth: 100
 };
 
-var forms = {
-  autocomplete: autocomplete,
-  datePicker: datePicker,
-  input: input,
-  radio: radio,
-  inputField: inputField,
-  textArea: textArea,
-  checkbox: checkbox,
-  inputTag: inputTag,
-  radioButtonGroup: radioButtonGroup,
-  timePicker: timePicker
+const forms = {
+  autocomplete,
+  datePicker,
+  input,
+  radio,
+  inputField,
+  textArea,
+  checkbox,
+  inputTag,
+  radioButtonGroup,
+  timePicker
 };
 
-var webAnimationContentDuration = 600;
-var webAnimationContentEasing = [0.77, 0, 0.175, 1];
-var webAnimationOverlayDuration = 250;
-var webAnimationOverlayEasing = [0.42, 0, 1, 1];
-var fullscreenModal = {
+const webAnimationContentDuration = 600;
+const webAnimationContentEasing = [0.77, 0, 0.175, 1];
+const webAnimationOverlayDuration = 250;
+const webAnimationOverlayEasing = [0.42, 0, 1, 1];
+const fullscreenModal = {
   header: {
     height: 56
   },
@@ -1147,7 +1134,7 @@ var fullscreenModal = {
   }
 };
 
-var highlight = {
+const highlight = {
   borderRadius: spacing * 5,
   /** @deprecated use primary instead */
   regular: {
@@ -1165,14 +1152,14 @@ var highlight = {
   padding: spacing * 5
 };
 
-var getIconSizeFromFontSize = function (fontSize) {
+const getIconSizeFromFontSize = fontSize => {
   if (fontSize <= 14) return 16;
   if (fontSize <= 16) return 20;
   return 24;
 };
-var createTypographyIconSizeConfig = function (baseAndSmallFontSize, mediumAndWideFontSize) {
-  var baseAndSmallIconSize = getIconSizeFromFontSize(baseAndSmallFontSize);
-  var mediumAndWideIconSize = getIconSizeFromFontSize(mediumAndWideFontSize);
+const createTypographyIconSizeConfig = (baseAndSmallFontSize, mediumAndWideFontSize) => {
+  const baseAndSmallIconSize = getIconSizeFromFontSize(baseAndSmallFontSize);
+  const mediumAndWideIconSize = getIconSizeFromFontSize(mediumAndWideFontSize);
   return {
     baseAndSmall: {
       iconSize: baseAndSmallIconSize
@@ -1182,7 +1169,7 @@ var createTypographyIconSizeConfig = function (baseAndSmallFontSize, mediumAndWi
     }
   };
 };
-var icon = {
+const icon = {
   defaultSize: 20,
   // Note: this is based on typography updated sizes, not current https://github.com/ornikar/kitt/pull/2130
   typographySize: {
@@ -1212,7 +1199,7 @@ var icon = {
   }
 };
 
-var iconButton = {
+const iconButton = {
   backgroundColor: 'transparent',
   width: 40,
   height: 40,
@@ -1226,33 +1213,33 @@ var iconButton = {
   },
   scale: {
     base: {
-      "default": 1,
+      default: 1,
       hover: 0.95,
       active: 0.95
     },
     medium: {
-      "default": 1,
+      default: 1,
       hover: 1.05,
       active: 0.95
     }
   },
   disabled: {
     scale: 1,
-    backgroundColor: button.disabled["default"].backgroundColor,
-    borderColor: button.disabled["default"].borderColor
+    backgroundColor: button.disabled.default.backgroundColor,
+    borderColor: button.disabled.default.borderColor
   },
-  "default": {
-    pressedBackgroundColor: button["default"]["default"].pressedBackgroundColor
+  default: {
+    pressedBackgroundColor: button.default.default.pressedBackgroundColor
   },
   ghost: {
-    pressedBackgroundColor: button["default"].ghost.pressedBackgroundColor
+    pressedBackgroundColor: button.default.ghost.pressedBackgroundColor
   },
   primary: {
     pressedBackgroundColor: lateOceanColorPalette.moonPurpleLight1
   }
 };
 
-var listItem = {
+const listItem = {
   padding: '12px 16px',
   verticalPadding: 12,
   horizontalPadding: 16,
@@ -1261,14 +1248,14 @@ var listItem = {
   innerMargin: 8
 };
 
-var pageLoaderSize = 60;
-var pageLoaderStrokeWidth = 3;
-var webAnimationDelay = 500;
-var webAnimationCircleBackgroundFillDuration = 1000;
-var webAnimationFilledCircleFillDuration = 1800;
-var webAnimationFilledCircleRotationDuration = 2160;
-var fillEasingFunction = [0.39, 0.575, 0.565, 1];
-var pageLoader = {
+const pageLoaderSize = 60;
+const pageLoaderStrokeWidth = 3;
+const webAnimationDelay = 500;
+const webAnimationCircleBackgroundFillDuration = 1000;
+const webAnimationFilledCircleFillDuration = 1800;
+const webAnimationFilledCircleRotationDuration = 2160;
+const fillEasingFunction = [0.39, 0.575, 0.565, 1];
+const pageLoader = {
   size: pageLoaderSize,
   strokeWidth: pageLoaderStrokeWidth,
   colors: {
@@ -1281,14 +1268,14 @@ var pageLoader = {
     filledCircleFillDuration: webAnimationFilledCircleFillDuration,
     groupFilledCircleRotationDuration: 1800,
     filledCircleRotationDuration: webAnimationFilledCircleRotationDuration,
-    fillEasingFunction: fillEasingFunction
+    fillEasingFunction
   }
 };
 
-var picker = {
+const picker = {
   ios: {
-    "default": _objectSpread(_objectSpread({
-      fontFamily: typography.types.bodies.fontFamily["native"].regular
+    default: _objectSpread(_objectSpread({
+      fontFamily: typography.types.bodies.fontFamily.native.regular
     }, typography.types.bodies.configs.body.baseAndSmall), {}, {
       fontSize: 16,
       color: typography.colors['black-light'],
@@ -1317,7 +1304,7 @@ var picker = {
     option: {
       verticalPadding: 3,
       horizontalPadding: 16,
-      "default": {
+      default: {
         backgroundColor: colors.transparent
       },
       hovered: {
@@ -1341,7 +1328,7 @@ var picker = {
     option: {
       verticalPadding: 12,
       horizontalPadding: 24,
-      "default": {
+      default: {
         backgroundColor: colors.transparent
       },
       selected: {
@@ -1352,7 +1339,7 @@ var picker = {
   }
 };
 
-var shadows = {
+const shadows = {
   /** @deprecated: use cards.medium instead - shorthand shadow doesnt work with Native Base */
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)',
   cards: {
@@ -1417,9 +1404,9 @@ var shadows = {
   }
 };
 
-var skeletonBackgroundColor = lateOceanColorPalette.black100;
-var skeletonFlareColor = lateOceanColorPalette.black200;
-var skeleton = {
+const skeletonBackgroundColor = lateOceanColorPalette.black100;
+const skeletonFlareColor = lateOceanColorPalette.black200;
+const skeleton = {
   backgroundColor: skeletonBackgroundColor,
   flareColor: skeletonFlareColor,
   animationDuration: 1000,
@@ -1439,7 +1426,7 @@ var skeleton = {
   }
 };
 
-var tag = {
+const tag = {
   borderRadius: 10,
   padding: '2px 12px',
   verticalPadding: 2,
@@ -1456,7 +1443,7 @@ var tag = {
       borderColor: colors.primary
     }
   },
-  "default": {
+  default: {
     fill: {
       backgroundColor: lateOceanColorPalette.black50,
       borderWidth: 0,
@@ -1494,7 +1481,7 @@ var tag = {
   }
 };
 
-var tooltip = {
+const tooltip = {
   backgroundColor: hex2rgba(colors.black, 0.95),
   borderRadius: 10,
   opacity: 0.95,
@@ -1503,7 +1490,7 @@ var tooltip = {
   floatingPadding: 8,
   maxWidth: 328,
   transition: {
-    "in": {
+    in: {
       duration: '150ms',
       timingFunction: 'ease-out',
       property: 'opacity'
@@ -1520,7 +1507,7 @@ var tooltip = {
   }
 };
 
-var verticalSteps = {
+const verticalSteps = {
   active: {
     icon: {
       backgroundColor: colors.primary,
@@ -1533,7 +1520,7 @@ var verticalSteps = {
       textColor: colors.primary
     }
   },
-  "default": {
+  default: {
     icon: {
       backgroundColor: colors.disabled,
       textColor: colors.blackDisabled
@@ -1541,7 +1528,7 @@ var verticalSteps = {
   }
 };
 
-var breakpoints = {
+const breakpoints = {
   values: {
     base: 0,
     small: 480,
@@ -1565,40 +1552,38 @@ var breakpoints = {
 
 // eslint-disable-next-line unicorn/expiring-todo-comments
 // TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
-var theme = {
-  spacing: spacing,
-  getSpacing: function getSpacing(multiplier) {
-    return spacing * multiplier;
-  },
-  colors: colors,
+const theme = {
+  spacing,
+  getSpacing: multiplier => spacing * multiplier,
+  colors,
   palettes: {
     lateOcean: lateOceanColorPalette
   },
-  avatar: avatar,
-  breakpoints: breakpoints,
-  button: button,
-  bottomSheet: bottomSheet,
-  card: card,
-  cardModal: cardModal,
-  choices: choices,
-  dialogModal: dialogModal,
-  feedbackMessage: feedbackMessage,
-  forms: forms,
-  highlight: highlight,
-  icon: icon,
-  iconButton: iconButton,
-  listItem: listItem,
-  pageLoader: pageLoader,
-  picker: picker,
-  shadows: shadows,
-  skeleton: skeleton,
-  tag: tag,
-  tooltip: tooltip,
-  typography: typography,
-  fullscreenModal: fullscreenModal,
-  actionCard: actionCard,
-  verticalSteps: verticalSteps
+  avatar,
+  breakpoints,
+  button,
+  bottomSheet,
+  card,
+  cardModal,
+  choices,
+  dialogModal,
+  feedbackMessage,
+  forms,
+  highlight,
+  icon,
+  iconButton,
+  listItem,
+  pageLoader,
+  picker,
+  shadows,
+  skeleton,
+  tag,
+  tooltip,
+  typography,
+  fullscreenModal,
+  actionCard,
+  verticalSteps
 };
 
 export { theme as defaultThemeLinaria };
-//# sourceMappingURL=linaria-themes.es.android.js.map
+//# sourceMappingURL=linaria-themes-metro.es.ios.js.map