@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.9

package/styles/theme/createTheme/createBreakpoints.js

@@ -1,5 +1,12 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_extends=Object.assign||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);}/* eslint-disable valid-jsdoc */ // Possible breakpoints for responsive design
-/** @type {import('./createBreakpoints').Breakpoint[]} */export var breakpointKeys=['xs','sm','md','lg','xl'];/**
+import "core-js/modules/es.array.reduce.js";
+import "core-js/modules/es.string.replace.js";
+/* eslint-disable valid-jsdoc */
+
+// Possible breakpoints for responsive design
+/** @type {import('./createBreakpoints').Breakpoint[]} */
+export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+/**
  * Sorts an object of breakpoints by their numeric values in ascending order.
  *
  * This is useful in responsive design systems to ensure breakpoints
@@ -14,28 +21,106 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * const breakpoints = { md: 960, xs: 0, sm: 600 };
  * const sorted = sortBreakpointsValues(breakpoints);
  * console.log(sorted); // { xs: 0, sm: 600, md: 960 }
- */var sortBreakpointsValues=function sortBreakpointsValues(values){var breakpointsAsArray=Object.keys(values).map(function(key){return{key:key,val:values[key]};})||[];breakpointsAsArray.sort(function(breakpoint1,breakpoint2){return breakpoint1.val-breakpoint2.val;});return breakpointsAsArray.reduce(function(acc,obj){return _extends({},acc,_defineProperty({},obj.key,obj.val));},{});};var unit='px';var step=5;/**
+ */
+const sortBreakpointsValues = values => {
+  const breakpointsAsArray = Object.keys(values).map(key => ({
+    key,
+    val: values[key]
+  })) || [];
+  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
+  return breakpointsAsArray.reduce((acc, obj) => ({
+    ...acc,
+    [obj.key]: obj.val
+  }), {});
+};
+const unit = 'px';
+const step = 5;
+
+/**
  * Creates a set of media query functions based on the provided breakpoints.
- */var createBreakpoints=function createBreakpoints(){/** @type {import('./createBreakpoints').Breakpoints['values]} */var values={// Extra small – all mobile phones
-xs:0,// Small – large phones in landscape
-sm:480,// Medium – tablets
-md:768,// Large – small laptops
-lg:1024,// Extra large – desktops
-xl:1280};var sortedValues=sortBreakpointsValues(values);var keys=Object.keys(sortedValues);/**
+ */
+const createBreakpoints = () => {
+  /** @type {import('./createBreakpoints').Breakpoints['values]} */
+  const values = {
+    // Extra small – all mobile phones
+    xs: 0,
+    // Small – large phones in landscape
+    sm: 480,
+    // Medium – tablets
+    md: 768,
+    // Large – small laptops
+    lg: 1024,
+    // Extra large – desktops
+    xl: 1280
+  };
+  const sortedValues = sortBreakpointsValues(values);
+  const keys = Object.keys(sortedValues);
+
+  /**
    * @param {import('./createBreakpoints').Breakpoint | number} key Breakpoint key or pixel value
    * @returns {string} A media query string for the specified breakpoint
-   */function up(key){var value=typeof values[key]==='number'?values[key]:key;return"@media (min-width:".concat(value).concat(unit,")");}/**
+   */
+  function up(key) {
+    const value = typeof values[key] === 'number' ? values[key] : key;
+    return `@media (min-width:${value}${unit})`;
+  }
+
+  /**
    * @param {import('./createBreakpoints').Breakpoint | number} key Breakpoint key or pixel value
    * @returns {string} A media query string for the specified breakpoint
-   */function down(key){/** @type {number} */var value=typeof values[key]==='number'?values[key]:key;return"@media (max-width:".concat(value-step/100).concat(unit,")");}/**
+   */
+  function down(key) {
+    /** @type {number} */
+    const value = typeof values[key] === 'number' ? values[key] : key;
+    return `@media (max-width:${value - step / 100}${unit})`;
+  }
+
+  /**
    * @param {import('./createBreakpoints').Breakpoint | number} start Breakpoint key or pixel value
    * @param {import('./createBreakpoints').Breakpoint | number} end Breakpoint key or pixel value
    * @returns {string} A media query string for the specified breakpoint
-   */function between(start,end){var endIndex=keys.indexOf(end);return"@media (min-width:".concat(typeof values[start]==='number'?values[start]:start).concat(unit,") and ")+"(max-width:".concat((endIndex!==-1&&typeof values[keys[endIndex]]==='number'?values[keys[endIndex]]:end)-step/100).concat(unit,")");}/**
+   */
+  function between(start, end) {
+    const endIndex = keys.indexOf(end);
+    return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
+  }
+
+  /**
    * @param {import('./createBreakpoints').Breakpoint} key Breakpoint key or pixel value
    * @returns {string} A media query string for the specified breakpoint
-   */function only(key){if(keys.indexOf(key)+1<keys.length){return between(key,keys[keys.indexOf(key)+1]);}return up(key);}/**
+   */
+  function only(key) {
+    if (keys.indexOf(key) + 1 < keys.length) {
+      return between(key, keys[keys.indexOf(key) + 1]);
+    }
+    return up(key);
+  }
+
+  /**
    * @param {import('./createBreakpoints').Breakpoint} key Breakpoint key or pixel value
    * @returns {string} A media query string for the specified breakpoint
-   */function not(key){// handle first and last key separately, for better readability
-var keyIndex=keys.indexOf(key);if(keyIndex===0){return up(keys[1]);}if(keyIndex===keys.length-1){return down(keys[keyIndex]);}return between(key,keys[keys.indexOf(key)+1]).replace('@media','@media not all and');}return{keys:keys,values:sortedValues,up:up,down:down,between:between,only:only,not:not};};export default createBreakpoints;/* eslint-enable valid-jsdoc */
+   */
+  function not(key) {
+    // handle first and last key separately, for better readability
+    const keyIndex = keys.indexOf(key);
+    if (keyIndex === 0) {
+      return up(keys[1]);
+    }
+    if (keyIndex === keys.length - 1) {
+      return down(keys[keyIndex]);
+    }
+    return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
+  }
+  return {
+    keys,
+    values: sortedValues,
+    up,
+    down,
+    between,
+    only,
+    not
+  };
+};
+export default createBreakpoints;
+
+/* eslint-enable valid-jsdoc */

package/styles/theme/createTheme/createPalette.js

@@ -1,4 +1,56 @@
-function _extends(){_extends=Object.assign||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 grey={50:'#fafafa',100:'#f5f5f5',200:'#eeeeee',300:'#e0e0e0',400:'#bdbdbd',500:'#9e9e9e',600:'#757575',700:'#616161',800:'#424242',900:'#212121',A100:'#f5f5f5',A200:'#eeeeee',A400:'#bdbdbd',A700:'#616161'};/**
+const grey = {
+  50: '#fafafa',
+  100: '#f5f5f5',
+  200: '#eeeeee',
+  300: '#e0e0e0',
+  400: '#bdbdbd',
+  500: '#9e9e9e',
+  600: '#757575',
+  700: '#616161',
+  800: '#424242',
+  900: '#212121',
+  A100: '#f5f5f5',
+  A200: '#eeeeee',
+  A400: '#bdbdbd',
+  A700: '#616161'
+};
+
+/**
  * Creates a palette object for the theme.
  * @returns {Object} The palette object.
- */var createPalette=function createPalette(){var palette={primary:{main:'var(--color-primary)',contrast:'var(--color-primary-contrast)'},secondary:{main:'var(--color-secondary)',contrast:'var(--color-secondary-contrast)'},error:{main:'var(--color-state-alert)'},warning:{main:'var(--color-state-warning)'},success:{main:'var(--color-state-ok)'},cta:{main:'var(--color-button-cta)',contrast:'var(--color-button-cta-contrast)'},text:{primary:'var(--color-text-high-emphasis)',secondary:'var(--color-text-medium-emphasis)',tertiary:'var(--color-text-low-emphasis)'}};return _extends({},palette,{grey:grey});};export default createPalette;
+ */
+const createPalette = () => {
+  const palette = {
+    primary: {
+      main: 'var(--color-primary)',
+      contrast: 'var(--color-primary-contrast)'
+    },
+    secondary: {
+      main: 'var(--color-secondary)',
+      contrast: 'var(--color-secondary-contrast)'
+    },
+    error: {
+      main: 'var(--color-state-alert)'
+    },
+    warning: {
+      main: 'var(--color-state-warning)'
+    },
+    success: {
+      main: 'var(--color-state-ok)'
+    },
+    cta: {
+      main: 'var(--color-button-cta)',
+      contrast: 'var(--color-button-cta-contrast)'
+    },
+    text: {
+      primary: 'var(--color-text-high-emphasis)',
+      secondary: 'var(--color-text-medium-emphasis)',
+      tertiary: 'var(--color-text-low-emphasis)'
+    }
+  };
+  return {
+    ...palette,
+    grey
+  };
+};
+export default createPalette;

package/styles/theme/createTheme/createSpacing.js

@@ -1,14 +1,47 @@
-import{isDev}from'@shopgate/engage/core/helpers';var spacingUnit=8;/**
+import { isDev } from '@shopgate/engage/core/helpers';
+const spacingUnit = 8;
+
+/**
  * Create the spacing function of the theme
  * @returns {function(...(number | string)): string} A function that takes one or more spacing
  * arguments
- */var createSpacing=function createSpacing(){/**
+ */
+const createSpacing = () => {
+  /**
    *
    * @param {number|string} input The input
    * @returns {string|number} The result
-   */var transform=function transform(input){if(typeof input==='number'){return input*spacingUnit;}return input;};/**
+   */
+  const transform = input => {
+    if (typeof input === 'number') {
+      return input * spacingUnit;
+    }
+    return input;
+  };
+
+  /**
    * @param {...(number | string)} args - 0 to 4 spacing arguments, which can be numbers
    * or strings like 'auto',
    * @returns {string} A space-separated string of pixel values or other transformed values
-   */var spacing=function spacing(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}if(isDev){if(!(args.length<=4)){// eslint-disable-next-line no-console
-console.error("Too many arguments passed. Expected between 0 and 4 arguments, got ".concat(args.length,"."));}}if(args.length===0){return transform(1);}if(args.length===1){return transform(args[0]);}return args.slice(0,4).map(function(argument){var output=transform(argument);return typeof output==='number'?"".concat(output,"px"):output;}).join(' ');};return spacing;};export default createSpacing;
+   */
+  const spacing = (...args) => {
+    if (isDev) {
+      if (!(args.length <= 4)) {
+        // eslint-disable-next-line no-console
+        console.error(`Too many arguments passed. Expected between 0 and 4 arguments, got ${args.length}.`);
+      }
+    }
+    if (args.length === 0) {
+      return transform(1);
+    }
+    if (args.length === 1) {
+      return transform(args[0]);
+    }
+    return args.slice(0, 4).map(argument => {
+      const output = transform(argument);
+      return typeof output === 'number' ? `${output}px` : output;
+    }).join(' ');
+  };
+  return spacing;
+};
+export default createSpacing;

package/styles/theme/createTheme/createTypography.js

@@ -1,23 +1,92 @@
-import _merge from"lodash/merge";var _excluded=["fontFamily","fontSize","fontWeightLight","fontWeightRegular","fontWeightMedium","fontWeightBold","allVariants","pxToRem"];function _extends(){_extends=Object.assign||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 _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;}import{isDev}from'@shopgate/engage/core/helpers';/**
+import _merge from "lodash/merge";
+import { isDev } from '@shopgate/engage/core/helpers';
+
+/**
  * Round a number to a fixed precision of five decimal places.
  * @param {number} value The value to round.
  * @returns {number} The rounded value.
- */function round(value){return Math.round(value*1e5)/1e5;}var caseAllCaps={textTransform:'uppercase'};var defaultFontFamily='"Roboto", "Helvetica", "Arial", sans-serif';/**
+ */
+function round(value) {
+  return Math.round(value * 1e5) / 1e5;
+}
+const caseAllCaps = {
+  textTransform: 'uppercase'
+};
+const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
+
+/**
  * Creates the typography object for the theme.
  * @param {Object} palette The theme palette.
  * @param {Object|Function} typography The typography options or a function that returns them.
  * @returns {Object} The typography object.
  * @see @link{https://material.io/design/typography/the-type-system.html}
  * @see @link{https://material.io/design/typography/understanding-typography.html}
- */export default function createTypography(palette,typography){var _ref=typeof typography==='function'?typography(palette):typography,_ref$fontFamily=_ref.fontFamily,fontFamily=_ref$fontFamily===void 0?defaultFontFamily:_ref$fontFamily,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?16:_ref$fontSize,_ref$fontWeightLight=_ref.fontWeightLight,fontWeightLight=_ref$fontWeightLight===void 0?300:_ref$fontWeightLight,_ref$fontWeightRegula=_ref.fontWeightRegular,fontWeightRegular=_ref$fontWeightRegula===void 0?400:_ref$fontWeightRegula,_ref$fontWeightMedium=_ref.fontWeightMedium,fontWeightMedium=_ref$fontWeightMedium===void 0?500:_ref$fontWeightMedium,_ref$fontWeightBold=_ref.fontWeightBold,fontWeightBold=_ref$fontWeightBold===void 0?700:_ref$fontWeightBold,allVariants=_ref.allVariants,pxToRem2=_ref.pxToRem,other=_objectWithoutProperties(_ref,_excluded);if(isDev){if(typeof fontSize!=='number'){console.error('Shopgate Theme: `fontSize` is required to be a number.');}}/**
+ */
+export default function createTypography(palette, typography) {
+  const {
+    fontFamily = defaultFontFamily,
+    fontSize = 16,
+    fontWeightLight = 300,
+    fontWeightRegular = 400,
+    fontWeightMedium = 500,
+    fontWeightBold = 700,
+    // Apply the CSS properties to all the variants.
+    allVariants,
+    pxToRem: pxToRem2,
+    ...other
+  } = typeof typography === 'function' ? typography(palette) : typography;
+  if (isDev) {
+    if (typeof fontSize !== 'number') {
+      console.error('Shopgate Theme: `fontSize` is required to be a number.');
+    }
+  }
+
+  /**
    * Calculates a rem value for a passed pixel value.
    * @param {number} size The source value in pixels.
    * @returns {string} The result value in rem.
-   */var pxToRem=function pxToRem(size){return"".concat(round(size/fontSize),"rem");};/**
+   */
+  const pxToRem = size => `${round(size / fontSize)}rem`;
+
+  /**
    * Creates a typography variant object.
    * @param {number} fontWeight The font weight to use for the variant.
    * @param {number} size Font size in pixels.
    * @param {number} lineHeight Line height as a unitless number.
    * @param {Object} casing Casing styles to apply, e.g. textTransform.
    * @returns {Object} The typography variant object.
-   */var buildVariant=function buildVariant(fontWeight,size,lineHeight,casing){return _extends({fontFamily:fontFamily,fontWeight:fontWeight,fontSize:pxToRem(size),lineHeight:lineHeight},casing,{},allVariants);};var variants={h1:buildVariant(fontWeightBold,34,1.15),h2:buildVariant(fontWeightBold,22,1.3),h3:buildVariant(fontWeightMedium,20,1.35),h4:buildVariant(fontWeightMedium,18,1.4),h5:buildVariant(fontWeightMedium,16,1.5),h6:buildVariant(fontWeightMedium,14,1.5),subtitle1:buildVariant(fontWeightRegular,16,1.75),subtitle2:buildVariant(fontWeightMedium,14,1.57),body1:buildVariant(fontWeightRegular,16,1.5),body2:buildVariant(fontWeightRegular,14,1.43),button:buildVariant(fontWeightMedium,14,1.75,caseAllCaps),caption:buildVariant(fontWeightRegular,12,1.66),overline:buildVariant(fontWeightRegular,12,2.66,caseAllCaps)};return _merge(_extends({pxToRem:pxToRem,fontFamily:fontFamily,fontSize:fontSize,fontWeightLight:fontWeightLight,fontWeightRegular:fontWeightRegular,fontWeightMedium:fontWeightMedium,fontWeightBold:fontWeightBold},variants),other);}
+   */
+  const buildVariant = (fontWeight, size, lineHeight, casing) => ({
+    fontFamily,
+    fontWeight,
+    fontSize: pxToRem(size),
+    lineHeight,
+    ...casing,
+    ...allVariants
+  });
+  const variants = {
+    h1: buildVariant(fontWeightBold, 34, 1.15),
+    h2: buildVariant(fontWeightBold, 22, 1.3),
+    h3: buildVariant(fontWeightMedium, 20, 1.35),
+    h4: buildVariant(fontWeightMedium, 18, 1.4),
+    h5: buildVariant(fontWeightMedium, 16, 1.5),
+    h6: buildVariant(fontWeightMedium, 14, 1.5),
+    subtitle1: buildVariant(fontWeightRegular, 16, 1.75),
+    subtitle2: buildVariant(fontWeightMedium, 14, 1.57),
+    body1: buildVariant(fontWeightRegular, 16, 1.5),
+    body2: buildVariant(fontWeightRegular, 14, 1.43),
+    button: buildVariant(fontWeightMedium, 14, 1.75, caseAllCaps),
+    caption: buildVariant(fontWeightRegular, 12, 1.66),
+    overline: buildVariant(fontWeightRegular, 12, 2.66, caseAllCaps)
+  };
+  return _merge({
+    pxToRem,
+    fontFamily,
+    fontSize,
+    fontWeightLight,
+    fontWeightRegular,
+    fontWeightMedium,
+    fontWeightBold,
+    ...variants
+  }, other);
+}

package/styles/theme/createTheme/index.js

@@ -1,5 +1,29 @@
-import createPalette from"./createPalette";import createBreakpoints from"./createBreakpoints";import createTypography from"./createTypography";import createSpacing from"./createSpacing";import transitions from"./transitions";import zIndex from"./zIndex";// eslint-disable-next-line valid-jsdoc
+import createPalette from "./createPalette";
+import createBreakpoints from "./createBreakpoints";
+import createTypography from "./createTypography";
+import createSpacing from "./createSpacing";
+import transitions from "./transitions";
+import zIndex from "./zIndex";
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Creates a theme object for the ThemeProvider.
  * @returns The theme object
- */export var createTheme=function createTheme(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var _options$typography=options.typography,typographyInput=_options$typography===void 0?{}:_options$typography;var palette=createPalette();var breakpoints=createBreakpoints();var spacing=createSpacing();var typography=createTypography(palette,typographyInput);return{palette:palette,typography:typography,breakpoints:breakpoints,spacing:spacing,transitions:transitions,zIndex:zIndex};};
+ */
+export const createTheme = (options = {}) => {
+  const {
+    typography: typographyInput = {}
+  } = options;
+  const palette = createPalette();
+  const breakpoints = createBreakpoints();
+  const spacing = createSpacing();
+  const typography = createTypography(palette, typographyInput);
+  return {
+    palette,
+    typography,
+    breakpoints,
+    spacing,
+    transitions,
+    zIndex
+  };
+};

package/styles/theme/createTheme/transitions.js

@@ -1,26 +1,92 @@
-var _excluded=["duration","easing","delay"];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;}import{isDev}from'@shopgate/engage/core/helpers';// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
+import { isDev } from '@shopgate/engage/core/helpers';
+
+// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
-export var easing={// This is the most common easing curve.
-easeInOut:'cubic-bezier(0.4, 0, 0.2, 1)',// Objects enter the screen at full velocity from off-screen and
-// slowly decelerate to a resting point.
-easeOut:'cubic-bezier(0.0, 0, 0.2, 1)',// Objects leave the screen at full velocity. They do not decelerate when off-screen.
-easeIn:'cubic-bezier(0.4, 0, 1, 1)',// The sharp curve is used by objects that may return to the screen at any time.
-sharp:'cubic-bezier(0.4, 0, 0.6, 1)'};// Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
+export const easing = {
+  // This is the most common easing curve.
+  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  // Objects enter the screen at full velocity from off-screen and
+  // slowly decelerate to a resting point.
+  easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
+  // Objects leave the screen at full velocity. They do not decelerate when off-screen.
+  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+  // The sharp curve is used by objects that may return to the screen at any time.
+  sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
+};
+
+// Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
 // to learn when use what timing
-export var duration={shortest:150,shorter:200,"short":250,// most basic recommended timing
-standard:300,// this is to be used in complex animations
-complex:375,// recommended when something is entering screen
-enteringScreen:225,// recommended when something is leaving screen
-leavingScreen:195};/**
+export const duration = {
+  shortest: 150,
+  shorter: 200,
+  short: 250,
+  // most basic recommended timing
+  standard: 300,
+  // this is to be used in complex animations
+  complex: 375,
+  // recommended when something is entering screen
+  enteringScreen: 225,
+  // recommended when something is leaving screen
+  leavingScreen: 195
+};
+
+/**
  * Converts milliseconds to a string representation.
  * @param {number} milliseconds Input in milliseconds.
  * @returns {string}
- */function formatMs(milliseconds){return"".concat(Math.round(milliseconds),"ms");}/**
+ */
+function formatMs(milliseconds) {
+  return `${Math.round(milliseconds)}ms`;
+}
+
+/**
  * @param {string|Array} props
  * @param {object} param
  * @param {string} param.prop
  * @param {number} param.duration
  * @param {string} param.easing
  * @param {number} param.delay
- */export default{easing:easing,duration:duration,create:function create(){var props=arguments.length>0&&arguments[0]!==undefined?arguments[0]:['all'];var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var _options$duration=options.duration,durationOption=_options$duration===void 0?duration.standard:_options$duration,_options$easing=options.easing,easingOption=_options$easing===void 0?easing.easeInOut:_options$easing,_options$delay=options.delay,delay=_options$delay===void 0?0:_options$delay,other=_objectWithoutProperties(options,_excluded);if(isDev){/* eslint-disable require-jsdoc */var isString=function isString(value){return typeof value==='string';};var isNumber=function isNumber(value){return!Number.isNaN(parseFloat(value));};/* eslint-enable require-jsdoc */if(!isString(props)&&!Array.isArray(props)){console.error('Shopgate Theme: Argument "props" must be a string or Array.');}if(!isNumber(durationOption)&&!isString(durationOption)){console.error("Shopgate Theme: Argument \"duration\" must be a number or a string but found ".concat(durationOption,"."));}if(!isString(easingOption)){console.error('Shopgate Theme: Argument "easing" must be a string.');}if(!isNumber(delay)&&!isString(delay)){console.error('Shopgate Theme: Argument "delay" must be a number or a string.');}if(Object.keys(other).length!==0){console.error("Shopgate Theme: Unrecognized argument(s) [".concat(Object.keys(other).join(','),"]."));}}return(Array.isArray(props)?props:[props]).map(function(animatedProp){return"".concat(animatedProp," ").concat(typeof durationOption==='string'?durationOption:formatMs(durationOption)," ").concat(easingOption," ").concat(typeof delay==='string'?delay:formatMs(delay));}).join(',');},getAutoHeightDuration:function getAutoHeightDuration(height){if(!height){return 0;}var constant=height/36;// https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
-return Math.round((4+15*Math.pow(constant,0.25)+constant/5)*10);}};
+ */
+export default {
+  easing,
+  duration,
+  create: (props = ['all'], options = {}) => {
+    const {
+      duration: durationOption = duration.standard,
+      easing: easingOption = easing.easeInOut,
+      delay = 0,
+      ...other
+    } = options;
+    if (isDev) {
+      /* eslint-disable require-jsdoc */
+      const isString = value => typeof value === 'string';
+      const isNumber = value => !Number.isNaN(parseFloat(value));
+      /* eslint-enable require-jsdoc */
+      if (!isString(props) && !Array.isArray(props)) {
+        console.error('Shopgate Theme: Argument "props" must be a string or Array.');
+      }
+      if (!isNumber(durationOption) && !isString(durationOption)) {
+        console.error(`Shopgate Theme: Argument "duration" must be a number or a string but found ${durationOption}.`);
+      }
+      if (!isString(easingOption)) {
+        console.error('Shopgate Theme: Argument "easing" must be a string.');
+      }
+      if (!isNumber(delay) && !isString(delay)) {
+        console.error('Shopgate Theme: Argument "delay" must be a number or a string.');
+      }
+      if (Object.keys(other).length !== 0) {
+        console.error(`Shopgate Theme: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
+      }
+    }
+    return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
+  },
+  getAutoHeightDuration(height) {
+    if (!height) {
+      return 0;
+    }
+    const constant = height / 36;
+
+    // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
+    return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+  }
+};

package/styles/theme/createTheme/zIndex.js

@@ -1,3 +1,9 @@
 // We need to centralize the zIndex definitions as they work
 // like global values in the browser.
-var zIndex={tabBar:10,drawer:1200,snackbar:1400,modal:2000};export default zIndex;
+const zIndex = {
+  tabBar: 10,
+  drawer: 1200,
+  snackbar: 1400,
+  modal: 2000
+};
+export default zIndex;

package/styles/theme/hooks/index.js

@@ -1 +1,4 @@
-export{default as useActiveBreakpoint}from"./useActiveBreakpoint";export{default as useMediaQuery}from"./useMediaQuery";export{default as useResponsiveValue}from"./useResponsiveValue";export{default as useTheme}from"./useTheme";
+export { default as useActiveBreakpoint } from "./useActiveBreakpoint";
+export { default as useMediaQuery } from "./useMediaQuery";
+export { default as useResponsiveValue } from "./useResponsiveValue";
+export { default as useTheme } from "./useTheme";

package/styles/theme/hooks/useActiveBreakpoint.js

@@ -1,4 +1,9 @@
-import{useContext}from'react';import{ActiveBreakpointContext}from"../providers/ActiveBreakpointProvider";// eslint-disable-next-line valid-jsdoc
+import { useContext } from 'react';
+import { ActiveBreakpointContext } from "../providers/ActiveBreakpointProvider";
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Returns the active breakpoint for the current window size.
- */var useActiveBreakpoint=function useActiveBreakpoint(){return useContext(ActiveBreakpointContext);};export default useActiveBreakpoint;
+ */
+const useActiveBreakpoint = () => useContext(ActiveBreakpointContext);
+export default useActiveBreakpoint;

package/styles/theme/hooks/useMediaQuery.js

@@ -1,20 +1,53 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import{useState,useEffect}from'react';import useTheme from"./useTheme";/**
+import "core-js/modules/es.string.replace.js";
+import { useState, useEffect } from 'react';
+import useTheme from "./useTheme";
+
+/**
  * React hook to check if a media query matches the current viewport.
  * Doesn't accept media query strings that start with '@media'.
  * @param {string} query A media query string, e.g. '(min-width: 600px)'
  * @returns {boolean} Returns true if the media query matches, false otherwise.
- */var useMediaQueryInternal=function useMediaQueryInternal(query){var _useState=useState(function(){return window.matchMedia(query).matches;}),_useState2=_slicedToArray(_useState,2),match=_useState2[0],setMatch=_useState2[1];useEffect(function(){var queryList=window.matchMedia(query);/**
+ */
+const useMediaQueryInternal = query => {
+  const [match, setMatch] = useState(() => window.matchMedia(query).matches);
+  useEffect(() => {
+    const queryList = window.matchMedia(query);
+    /**
      * Update the match state when the media query changes.
-     */var updateMatch=function updateMatch(){setMatch(queryList.matches);};queryList.addEventListener('change',updateMatch);return function(){queryList.removeEventListener('change',updateMatch);};},[query]);return match;};/**
+     */
+    const updateMatch = () => {
+      setMatch(queryList.matches);
+    };
+    queryList.addEventListener('change', updateMatch);
+    return () => {
+      queryList.removeEventListener('change', updateMatch);
+    };
+  }, [query]);
+  return match;
+};
+
+/**
  * @typedef {import('./useTheme').Theme} Theme
- */ /**
+ */
+
+/**
  * @callback ThemeFn
  * @param {Theme} theme The current theme object.
- */ /**
+ */
+
+/**
  * Creates a media query hook that can be used to check if a media query matches the current
  * viewport.
  * @param {string|ThemeFn} queryInput The media query string or a function that receives the theme
  * and returns a media query string.
  * @returns {boolean} Returns true if the media query matches, false otherwise.
- */var useMediaQuery=function useMediaQuery(queryInput){var theme=useTheme();var query=typeof queryInput==='function'?queryInput(theme):queryInput;// Remove the '@media' prefix if it exists, as useMediaQueryInternal expects a plain media query.
-query=query.replace(/^@media( ?)/m,'');var match=useMediaQueryInternal(query);return match;};export default useMediaQuery;
+ */
+const useMediaQuery = queryInput => {
+  const theme = useTheme();
+  let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+  // Remove the '@media' prefix if it exists, as useMediaQueryInternal expects a plain media query.
+  query = query.replace(/^@media( ?)/m, '');
+  const match = useMediaQueryInternal(query);
+  return match;
+};
+export default useMediaQuery;

package/styles/theme/hooks/useResponsiveValue.js

@@ -1,4 +1,23 @@
-import useTheme from"./useTheme";import useActiveBreakpoint from"./useActiveBreakpoint";// eslint-disable-next-line require-jsdoc
-var useResponsiveValue=function useResponsiveValue(values){var theme=useTheme();var active=useActiveBreakpoint();if(!active)return undefined;// Get the keys of the breakpoints in the theme
-var breakpoints=[].concat(theme.breakpoints.keys);var activeIndex=breakpoints.indexOf(active);// Walk from the active breakpoint down to smallest
-for(var i=activeIndex;i>=0;i-=1){var bp=breakpoints[i];if(values[bp]!==undefined){return values[bp];}}return undefined;};export default useResponsiveValue;
+import useTheme from "./useTheme";
+import useActiveBreakpoint from "./useActiveBreakpoint";
+
+// eslint-disable-next-line require-jsdoc
+const useResponsiveValue = values => {
+  const theme = useTheme();
+  const active = useActiveBreakpoint();
+  if (!active) return undefined;
+
+  // Get the keys of the breakpoints in the theme
+  const breakpoints = [...theme.breakpoints.keys];
+  const activeIndex = breakpoints.indexOf(active);
+
+  // Walk from the active breakpoint down to smallest
+  for (let i = activeIndex; i >= 0; i -= 1) {
+    const bp = breakpoints[i];
+    if (values[bp] !== undefined) {
+      return values[bp];
+    }
+  }
+  return undefined;
+};
+export default useResponsiveValue;

package/styles/theme/hooks/useTheme.js

@@ -1,4 +1,9 @@
-import{useContext}from'react';import{ThemeContext}from"../providers/ThemeProvider";// eslint-disable-next-line valid-jsdoc
+import { useContext } from 'react';
+import { ThemeContext } from "../providers/ThemeProvider";
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Returns the theme object.
- */var useTheme=function useTheme(){return useContext(ThemeContext);};export default useTheme;
+ */
+const useTheme = () => useContext(ThemeContext);
+export default useTheme;

package/styles/theme/index.js

@@ -1 +1,3 @@
-export{default as ThemeProvider}from"./providers/ThemeProvider";export{createTheme}from"./createTheme";export{useActiveBreakpoint,useMediaQuery,useResponsiveValue,useTheme}from"./hooks";
+export { default as ThemeProvider } from "./providers/ThemeProvider";
+export { createTheme } from "./createTheme";
+export { useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme } from "./hooks";