@shopgate/engage 7.27.3-alpha.5 → 7.27.3-alpha.7

package/product/components/ProductGrid/spec.js

@@ -1 +0,0 @@
-import React from'react';import{mount}from'enzyme';import ProductGrid from'.';global.console.error=jest.fn();jest.mock('@shopgate/engage/core',function(){return{hasWebBridge:jest.fn(function(){return false;}),isIOSTheme:jest.fn(function(){return false;}),withForwardedRef:jest.fn(),withCurrentProduct:jest.fn(),useWidgetSettings:jest.fn().mockReturnValue({})};});jest.mock('@shopgate/engage/components',function(){var _jest$requireActual=jest.requireActual('@shopgate/engage/components/View/context'),ViewContext=_jest$requireActual.ViewContext;return{ViewContext:ViewContext,InfiniteContainer:function InfiniteContainer(){return null;},Grid:function Grid(){return null;}};});jest.mock("./components/Iterator",function(){return function Iterator(){return null;};});jest.mock('@shopgate/engage/product',function(){return{ProductListTypeProvider:function ProductListTypeProvider(_ref){var children=_ref.children;return children;},ProductListEntryProvider:function ProductListEntryProvider(_ref2){var children=_ref2.children;return children;}};});describe('<ProductGrid />',function(){it('should render with the InfiniteContainer',function(){var wrapper=mount(React.createElement(ProductGrid,{products:[]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('InfiniteContainer').exists()).toBe(true);expect(wrapper.find('Layout').exists()).toBe(false);});it('should render the original layout',function(){var wrapper=mount(React.createElement(ProductGrid,{infiniteLoad:false,products:[]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('InfiniteContainer').exists()).toBe(false);expect(wrapper.find('Layout').exists()).toBe(true);});});

package/styles/helpers/color.js

@@ -1,23 +0,0 @@
-// Import the Color constructor from the color.js package
-import Color from'color';/**
- * Converts any valid input color to an RGBA CSS string.
- * If the input color already contains an alpha channel (< 1), that alpha is preserved.
- * Otherwise, the provided `opacity` is applied.
- *
- * @param {string} inputColor any CSS‐valid color string (hex, rgb(), hsl(), etc.)
- * @param {number} [opacity=1] fallback alpha (0–1) to use if `inputColor` has no alpha
- * @returns {string} "rgba(r, g, b, a)" string
- *
- * @example
- * toRgba('#ff0000')            // → "rgba(255, 0, 0, 1)"
- * toRgba('#ff0000', 0.5)       // → "rgba(255, 0, 0, 0.5)"
- * toRgba('rgba(10,20,30,0.2)', 0.9) // → "rgba(10, 20, 30, 0.2)"
- * toRgba('hsl(120, 100%, 50%)') // → "rgba(0, 255, 0, 1)"
- * toRgba('blue', 0.3)          // → "rgba(0, 0, 255, 0.3)"
- */export function colorToRgba(inputColor){var opacity=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;// Parse the input into a Color instance
-var parsed=Color(inputColor);// Extract the alpha channel from the parsed color (default is 1 if none was provided)
-var inputAlpha=parsed.alpha();// Determine which alpha to use:
-// - If the parsed color already had alpha < 1, keep that.
-// - Otherwise, use the provided opacity value.
-var finalAlpha=inputAlpha<1?inputAlpha:opacity;// Set the computed alpha and return as "rgba(r, g, b, a)" string
-return parsed.alpha(finalAlpha).rgb().string();}

package/styles/index.d.ts

@@ -1,17 +0,0 @@
-export * from './helpers';
-export {
-  ThemeProvider,
-  createTheme,
-  useActiveBreakpoint,
-  useMediaQuery,
-  useResponsiveValue,
-  useTheme,
-  Theme,
-} from './theme';
-export {
-  makeStyles,
-  withStyles,
-  tss,
-  GlobalStyles,
-  keyframes,
-} from './tss';

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

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

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

@@ -1,23 +0,0 @@
-/* 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

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

@@ -1,19 +0,0 @@
-import { type Breakpoints } from './createBreakpoints';
-import { type Spacing } from './createSpacing';
-import { Transitions } from './transitions';
-import { type ZIndex } from './zIndex';
-
-export { type Breakpoint } from './createBreakpoints'
-
-export interface ThemeOptions {
-
-}
-
-export interface Theme {
-  breakpoints: Breakpoints;
-  spacing: Spacing;
-  transitions: Transitions;
-  zIndex: ZIndex;
-}
-
-export function createTheme(): Theme;

package/styles/theme/createTheme/index.js

@@ -1,5 +0,0 @@
-import createBreakpoints from"./createBreakpoints";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 breakpoints=createBreakpoints();var spacing=createSpacing();return{breakpoints:breakpoints,spacing:spacing,transitions:transitions,zIndex:zIndex};};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +0,0 @@
-import { type Theme } from '..';
-
-export type { Theme } from '..';
-
-/**
- * Returns the theme object.
- */
-export default function useTheme<T = Theme>(): T;

package/styles/theme/hooks/useTheme.js

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

package/styles/theme/index.d.ts

@@ -1,8 +0,0 @@
-export { default as ThemeProvider } from './providers/ThemeProvider';
-export { createTheme, Theme, Breakpoint } from './createTheme';
-export {
-  useActiveBreakpoint,
-  useMediaQuery,
-  useResponsiveValue,
-  useTheme,
-} from './hooks';

package/styles/theme/index.js

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

package/styles/theme/providers/ActiveBreakpointProvider.d.ts

@@ -1,21 +0,0 @@
-import { ReactNode, JSX, Context } from 'react';
-import { Breakpoint } from '..';
-
-/**
- * React Context for current active breakpoint.
- */
-export const ActiveBreakpointContext: Context<Breakpoint | undefined>;
-
-/**
- * Props for the ActiveBreakpointProvider.
- */
-export interface ActiveBreakpointProviderProps {
-  children: ReactNode;
-}
-
-/**
- * Provides the current active breakpoint to child components.
- */
-declare function ActiveBreakpointProvider(props: ActiveBreakpointProviderProps): JSX.Element;
-
-export default ActiveBreakpointProvider;

package/styles/theme/providers/ActiveBreakpointProvider.js

@@ -1,13 +0,0 @@
-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 React,{createContext,useEffect,useState}from'react';import PropTypes from'prop-types';import{useTheme}from'@shopgate/engage/styles';/**
- * @typedef {import('..').Breakpoint} Breakpoint
- */ /** @type {import('react').Context<Breakpoint>} */export var ActiveBreakpointContext=createContext(undefined);/**
- * @param {Object} props The component props
- * @param {React.ReactNode} props.children The children to render within the provider
- * @returns {JSX.Element} The ActiveBreakpointProvider component
- */var ActiveBreakpointProvider=function ActiveBreakpointProvider(_ref){var children=_ref.children;var theme=useTheme();// ['xl', 'lg', ..., 'xs']
-var breakpoints=[].concat(theme.breakpoints.keys).reverse();/**
-   * Retrieve the initial breakpoint based on the current window size.
-   * @returns {Breakpoint|undefined} The initial breakpoint based on the current window size.
-   */var getInitialBreakpoint=function getInitialBreakpoint(){if(typeof window==='undefined')return undefined;return breakpoints.find(function(bp){return window.matchMedia(theme.breakpoints.up(bp).replace(/^@media( ?)/m,'')).matches;});};/** @type {[Breakpoint, React.Dispatch<React.SetStateAction<Breakpoint>>]} */var _useState=useState(getInitialBreakpoint),_useState2=_slicedToArray(_useState,2),active=_useState2[0],setActive=_useState2[1];useEffect(function(){if(typeof window==='undefined')return undefined;var queries=breakpoints.map(function(bp){return{bp:bp,mql:window.matchMedia(theme.breakpoints.up(bp).replace(/^@media( ?)/m,''))};});/**
-     * Updates the active breakpoint based on the current media query matches.
-     */var update=function update(){var matched=queries.find(function(_ref2){var mql=_ref2.mql;return mql.matches;});setActive(matched===null||matched===void 0?void 0:matched.bp);};queries.forEach(function(_ref3){var mql=_ref3.mql;return mql.addEventListener('change',update);});return function(){return queries.forEach(function(_ref4){var mql=_ref4.mql;return mql.removeEventListener('change',update);});};},[breakpoints,theme]);return React.createElement(ActiveBreakpointContext.Provider,{value:active},children);};export default ActiveBreakpointProvider;

package/styles/theme/providers/ThemeProvider.d.ts

@@ -1,18 +0,0 @@
-import { Theme } from '..';
-
-export const ThemeContext: React.Context<Theme>;
-
-export interface ThemeProviderProps<Theme = Theme> {
-  children: React.ReactNode;
-  /**
-   * The theme object to provide to the context.
-   */
-  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
-}
-
-/**
- * The ThemeProvider component provides the theme context to its children.
- */
-export default function ThemeProvider<T = Theme>(
-  props: ThemeProviderProps<T>
-): React.ReactElement<ThemeProviderProps<T>>;