@shopgate/engage 7.27.4 → 7.27.5-alpha.2

package/styles/theme/createTheme/createBreakpoints.d.ts

@@ -0,0 +1,114 @@
+export type Breakpoint =  'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export const keys: Breakpoint[];
+
+export interface Breakpoints {
+  keys: Breakpoint[];
+  /**
+   * Each breakpoint (a key) matches with a fixed screen width (a value).
+   * @default
+   * {
+   *    // extra-small
+   *    xs: 0,
+   *    // small
+   *    sm: 600,
+   *    // medium
+   *    md: 900,
+   *    // large
+   *    lg: 1200,
+   *    // extra-large
+   *    xl: 1536,
+   * }
+   */
+  values: { [key in Breakpoint]: number };
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @returns A media query string which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
+   * @example
+   * ```js
+   * const styles = (theme) => ({
+   *   root: {
+   *     backgroundColor: 'blue',
+   *     // Matches "md" and above
+   *     [theme.breakpoints.up('md')]: {
+   *         backgroundColor: 'red',
+   *     }
+   *   }
+   * })
+   * ```
+   */
+  up: (key: Breakpoint | number) => string;
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @returns A media query string which matches screen widths less than the screen size given by the breakpoint key (exclusive).
+   * @example
+   * ```js
+   * const styles = (theme) => ({
+   *   root: {
+   *     backgroundColor: 'blue',
+   *     // Matches "xs" and "sm"
+   *     [theme.breakpoints.down('md')]: {
+   *         backgroundColor: 'red',
+   *     }
+   *   }
+   * })
+   * ```
+   */
+  down: (key: Breakpoint | number) => string;
+  /**
+   * @param start - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @returns A media query string which matches screen widths greater than
+   *          the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
+   * @example
+   * ```js
+   * const styles = (theme) => ({
+   *   root: {
+   *     backgroundColor: 'blue',
+   *     // Matches "sm" and "md"
+   *     [theme.breakpoints.between('sm', 'lg')]: {
+   *         backgroundColor: 'red',
+   *     }
+   *   }
+   * })
+   * ```
+   */
+  between: (start: Breakpoint | number, end: Breakpoint | number) => string;
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @returns A media query string which matches screen widths starting from
+   *          the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
+   * @example
+   * ```js
+   * const styles = (theme) => ({
+   *   root: {
+   *     backgroundColor: 'blue',
+   *     // Matches "sm"
+   *     [theme.breakpoints.only('sm')]: {
+   *         backgroundColor: 'red',
+   *     }
+   *   }
+   * })
+   * ```
+   */
+  only: (key: Breakpoint) => string;
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc.).
+   * @returns A media query string which matches screen widths stopping at
+   *          the screen size given by the breakpoint key (exclusive) and starting at the screen size given by the next breakpoint key (inclusive).
+   * @example
+   * ```js
+   * const styles = (theme) => ({
+   *   root: {
+   *     backgroundColor: 'blue',
+   *     // Matches "xs", "md", "lg", and "xl"
+   *     [theme.breakpoints.not('sm')]: {
+   *         backgroundColor: 'red',
+   *     }
+   *   }
+   * })
+   * ```
+   */
+  not: (key: Breakpoint) => string;
+}
+
+export default function createBreakpoints(): Breakpoints;

package/styles/theme/createTheme/createBreakpoints.js

@@ -0,0 +1,41 @@
+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'];/**
+ * Sorts an object of breakpoints by their numeric values in ascending order.
+ *
+ * This is useful in responsive design systems to ensure breakpoints
+ * are applied in the correct order.
+ *
+ * @param {Object.<string, number>} values - An object where keys are breakpoint names
+ * (e.g., 'xs', 'sm', 'md') and values are numeric pixel values.
+ * @returns {Object.<string, number>} A new object with the same key-value pairs, sorted by
+ * ascending numeric values.
+ *
+ * @example
+ * 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;/**
+ * 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);/**
+   * @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,")");}/**
+   * @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,")");}/**
+   * @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,")");}/**
+   * @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);}/**
+   * @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 */

package/styles/theme/createTheme/createPalette.d.ts

@@ -0,0 +1,36 @@
+type ColorPartialKeys =
+  | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+  | 'A100' | 'A200' | 'A400' | 'A700';
+
+type ColorPartial = Record<ColorPartialKeys, string>;
+
+
+interface TypeText {
+  primary: string;
+  secondary: string;
+  tertiary: string;
+}
+
+interface BasePaletteColor {
+  main: string;
+}
+
+interface PaletteColorWithContrast extends PaletteColor {
+  contrast: string;
+}
+
+type PaletteColor<WithContrast extends boolean = false> =
+  BasePaletteColor & (WithContrast extends true ? { contrast: string } : {});
+
+export interface Palette {
+  primary: PaletteColor<true>;
+  secondary: PaletteColor<true>;
+  error: PaletteColor;
+  warning: PaletteColor;
+  success: PaletteColor;
+  cta: PaletteColor<true>;
+  text: TypeText;
+  grey: ColorPartial;
+}
+
+export default function createPalette(): Palette;

package/styles/theme/createTheme/createPalette.js

@@ -0,0 +1,4 @@
+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'};/**
+ * 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;

package/styles/theme/createTheme/createSpacing.d.ts

@@ -0,0 +1,23 @@
+/* tslint:disable:unified-signatures */
+
+export type SpacingArgument = number | string;
+
+export interface Spacing {
+  /**
+   * The spacing helper can be used to create consistent spacing between UI element.
+   *
+   * It accepts 0 to 4 spacing arguments, which can be numbers or strings like `auto`,
+   */
+  (): number;
+  (value: number): number;
+  (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
+  (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
+  (
+    top: SpacingArgument,
+    right: SpacingArgument,
+    bottom: SpacingArgument,
+    left: SpacingArgument
+  ): string;
+}
+
+export default function createSpacing(): Spacing;

package/styles/theme/createTheme/createSpacing.js

@@ -0,0 +1,14 @@
+import{isDev}from'@shopgate/engage/core/helpers';var 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(){/**
+   *
+   * @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;};/**
+   * @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;

package/styles/theme/createTheme/createTypography.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { type CSSObject } from 'tss-react';
+import { type Palette } from './createPalette';
+
+
+export type Variant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'subtitle1'
+  | 'subtitle2'
+  | 'body1'
+  | 'body2'
+  | 'caption'
+  | 'button'
+  | 'overline';
+
+export interface FontStyle
+  extends Required<{
+    fontFamily: React.CSSProperties['fontFamily'];
+    fontSize: number;
+    fontWeightLight: React.CSSProperties['fontWeight'];
+    fontWeightRegular: React.CSSProperties['fontWeight'];
+    fontWeightMedium: React.CSSProperties['fontWeight'];
+    fontWeightBold: React.CSSProperties['fontWeight'];
+  }> {}
+
+export interface FontStyleOptions extends Partial<FontStyle> {
+  allVariants?: React.CSSProperties;
+}
+
+export type TypographyStyle = CSSObject;
+export interface TypographyStyleOptions extends TypographyStyle {}
+
+export interface TypographyUtils {
+  /**
+   * Calculates a rem value for a passed pixel value.
+   * @param size The source value in pixels.
+   * @returns The result value in rem.
+   */
+  pxToRem: (px: number) => string;
+}
+
+export interface Typography extends Record<Variant, TypographyStyle>, FontStyle, TypographyUtils {}
+
+export interface TypographyOptions
+  extends Partial<Record<Variant, TypographyStyleOptions> & FontStyleOptions> {}
+
+export default function createTypography(
+  palette: Palette,
+  typography: TypographyOptions | ((palette: Palette) => TypographyOptions)
+): Typography;

package/styles/theme/createTheme/createTypography.js

@@ -0,0 +1,23 @@
+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';/**
+ * 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';/**
+ * 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.');}}/**
+   * 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");};/**
+   * 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);}

package/styles/theme/createTheme/index.d.ts

@@ -0,0 +1,41 @@
+import { type Palette } from './createPalette'
+import { type Typography, type TypographyOptions } from './createTypography';
+import { type Breakpoints } from './createBreakpoints';
+import { type Spacing } from './createSpacing';
+import { type Transitions } from './transitions';
+import { type ZIndex } from './zIndex';
+
+export { type Breakpoint } from './createBreakpoints'
+
+export interface ThemeOptions {
+  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
+}
+
+export interface Theme {
+  /**
+   * The palette defines the theme colors.
+   */
+  palette: Palette;
+  /**
+   * API to simplify the use of media queries.
+   */
+  breakpoints: Breakpoints;
+  /**
+   * Use the spacing function to create consistent spacing.
+   */
+  spacing: Spacing;
+  /**
+   * API to simplify the creation of transitions
+   */
+  transitions: Transitions;
+  /**
+   * Font styles for multiple typography variants.
+   */
+  typography: Typography;
+  /**
+   * Reference to z-index values for multiple components.
+   */
+  zIndex: ZIndex;
+}
+
+export function createTheme(options?: ThemeOptions): Theme;

package/styles/theme/createTheme/index.js

@@ -0,0 +1,5 @@
+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};};

package/styles/theme/createTheme/transitions.d.ts

@@ -0,0 +1,100 @@
+export interface Easing {
+  /**
+   * This is the most common easing curve.
+   */
+  easeInOut: string;
+  /**
+   * Objects enter the screen at full velocity from off-screen and slowly decelerate to a resting
+   * point.
+   */
+  easeOut: string;
+  /**
+   * Objects leave the screen at full velocity. They do not decelerate when off-screen.
+   */
+  easeIn: string;
+  /**
+   * The sharp curve is used by objects that may return to the screen at any time.
+   */
+  sharp: string;
+}
+export const easing: Easing;
+
+export interface Duration {
+  shortest: number;
+  shorter: number;
+  short: number;
+  /**
+   * Most basic recommended timing
+   */
+  standard: number;
+  /**
+   * This is to be used in complex animations
+   */
+  complex: number;
+  /**
+   * Recommended when something is entering screen
+   */
+  enteringScreen: number;
+  /**
+   * Recommended when something is leaving screen
+   */
+  leavingScreen: number;
+}
+
+export const duration: Duration;
+
+export function formatMs(milliseconds: number): string;
+
+export interface Transitions {
+  /**
+   * Easing functions for transitions.
+   */
+  easing: Easing;
+  /**
+   * Presets for transition durations.
+   */
+  duration: Duration;
+  /**
+   * Creates a CSS transition string based on the provided properties and options.
+   */
+  create(
+    /**
+     * The CSS properties to apply the transition to.
+     * Can be a single property or an array of properties.
+     */
+    props: string | string[],
+    options?: Partial<{
+      /**
+       * Duration of the transition as a number in milliseconds or a string with a
+       * CSS time unit (e.g., '500ms', '0.5s').
+       */
+      duration: number | string;
+      /**
+       * Easing function to use for the transition.
+       */
+      easing: string;
+      /**
+       * Delay before the transition starts, as a number in milliseconds or a string with a
+       * CSS time unit (e.g., '500ms', '0.5s').
+       */
+      delay: number | string
+    }>
+  ): string;
+  /**
+   * Calculates an appropriate animation duration (in milliseconds) for a height-based
+   * transition effect. The duration increases with height but in a sub-linear fashion,
+   * providing a smooth and visually pleasing animation speed for expanding/collapsing UI elements.
+   *
+   * @param {number} height - The height (in pixels) of the element being animated.
+   * @returns {number} The calculated duration in milliseconds. Returns 0 if height is 0 or falsy.
+   *
+   * @example
+   * getAutoHeightDuration(72); // returns ~222
+   */
+  getAutoHeightDuration(height: number): number;
+}
+
+// export type TransitionsOptions = DeepPartial<Transitions>;
+
+declare const transitions: Transitions;
+export default transitions;

package/styles/theme/createTheme/transitions.js

@@ -0,0 +1,26 @@
+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
+// 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
+// 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};/**
+ * Converts milliseconds to a string representation.
+ * @param {number} milliseconds Input in milliseconds.
+ * @returns {string}
+ */function formatMs(milliseconds){return"".concat(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);}};

package/styles/theme/createTheme/zIndex.d.ts

@@ -0,0 +1,12 @@
+export interface ZIndex {
+  tabBar: number;
+  drawer: number;
+  snackbar: number;
+  modal: number;
+}
+
+export type ZIndexOptions = Partial<ZIndex>;
+
+declare const zIndex: ZIndex;
+
+export default zIndex;

package/styles/theme/createTheme/zIndex.js

@@ -0,0 +1,3 @@
+// 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;

package/styles/theme/hooks/index.d.ts

@@ -0,0 +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';

package/styles/theme/hooks/index.js

@@ -0,0 +1 @@
+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.d.ts

@@ -0,0 +1,18 @@
+import { Breakpoint } from '..';
+
+/**
+ * Returns the active breakpoint for the current window size.
+ *
+ * @example
+ * ```js
+ * import React from 'react';
+ * import { useActiveBreakpoint } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const activeBreakpoint = useActiveBreakpoint();
+ *
+ *   return (<span>{`active breakpoint: ${activeBreakpoint}`}</span>)
+ * }
+ * ```
+ */
+export default function useActiveBreakpoint(): Breakpoint;

package/styles/theme/hooks/useActiveBreakpoint.js

@@ -0,0 +1,4 @@
+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;

package/styles/theme/hooks/useMediaQuery.d.ts

@@ -0,0 +1,33 @@
+import { Theme } from '..';
+
+/**
+ * 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.
+ *
+ * @example Use the useTheme hook to get access to the breakpoint helper functions:
+ * ```js
+ * import React from 'react';
+ * import { useTheme, useMediaQuery } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const theme = useTheme();
+ *   const matches = useMediaQuery(theme.breakpoints.up('sm'));
+ *
+ *   return (<span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>)
+ * }
+ *```
+ * @example Alternatively, you can use a callback function, accepting the theme as a first argument:
+ * ```js
+ * import React from 'react';
+ * import { useMediaQuery } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));
+ *
+ *   return (<span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>)
+ * }
+ */
+export default function useMediaQuery(queryInput: string | ((theme: Theme) => string)): boolean;

package/styles/theme/hooks/useMediaQuery.js

@@ -0,0 +1,20 @@
+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";/**
+ * 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);/**
+     * 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;};/**
+ * @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;

package/styles/theme/hooks/useResponsiveValue.d.ts

@@ -0,0 +1,27 @@
+import { Breakpoint } from '..';
+
+type BreakpointValueMap<T> = Partial<Record<Breakpoint, T>>;
+
+/**
+ * Returns the value for the current breakpoint based on the provided responsive values object.
+ * It is also responsive to window resizing and returning the appropriate value according to the
+ * new window size.
+ * @param values The responsive values object
+ * @example
+ * ```js
+ * import React from 'react';
+ * import { useResponsiveValue } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const flexDir = useResponsiveValue({
+ *     xs: "column",
+ *     lg: "row"
+ *   });
+ *
+ *   return (<span style={{ display: 'flex', flexDirection: flexDir }} />)
+ * }
+ * ```
+ */
+export default function useResponsiveValue<const T extends BreakpointValueMap<any>>(
+  values: T
+): T[keyof T];

package/styles/theme/hooks/useResponsiveValue.js

@@ -0,0 +1,4 @@
+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;