@shopgate/engage 7.6.1-beta.1 → 7.6.1-beta.4

package/components/QuantityInput/QuantityInput.js

@@ -1,8 +1,8 @@
-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 _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;}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 React,{useRef,useState,useCallback,useLayoutEffect,useEffect,forwardRef}from'react';import PropTypes from'prop-types';import MobileDetect from'mobile-detect';import{parseFloatString,formatFloat}from"./helper";var md=new MobileDetect(navigator.userAgent);/**
+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 _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;}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 React,{useRef,useState,useCallback,useLayoutEffect,useEffect,forwardRef}from'react';import PropTypes from'prop-types';import{isIOs}from'@shopgate/pwa-core';import{parseFloatString,formatFloat}from"./helper";/**
  * A Quantity Input with unit support.
  * @returns {JSX}
  */var QuantityInput=forwardRef(function(_ref,outerInputRef){var className=_ref.className,onChange=_ref.onChange,customOnFocus=_ref.onFocus,customOnBlur=_ref.onBlur,value=_ref.value,maxDecimals=_ref.maxDecimals,unit=_ref.unit,minValue=_ref.minValue,maxValue=_ref.maxValue,inputProps=_objectWithoutProperties(_ref,["className","onChange","onFocus","onBlur","value","maxDecimals","unit","minValue","maxValue"]);var inputRef=outerInputRef||useRef();var _useState=useState(formatFloat(value,maxDecimals)),_useState2=_slicedToArray(_useState,2),inputValue=_useState2[0],setInputValue=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isFocused=_useState4[0],setIsFocused=_useState4[1];var onFocus=useCallback(function(event){customOnFocus(event);setIsFocused(true);},[customOnFocus]);var onBlur=useCallback(function(event){var newValue=parseFloatString(inputValue,maxDecimals);setIsFocused(false);// If invalid switch to old value.
 if(Number.isNaN(parseFloat(inputValue))){setInputValue(formatFloat(value,maxDecimals));return;}onChange(newValue);customOnBlur(event,newValue);},[customOnBlur,inputValue,maxDecimals,onChange,value]);var handleChange=useCallback(function(event){var newValue=event.target.value;if(newValue!==''){if(minValue&&newValue<minValue){newValue="".concat(minValue);}if(maxValue&&newValue>maxValue){newValue="".concat(maxValue);}}setInputValue(newValue);},[maxValue,minValue]);// Select the current input value after focus.
-useLayoutEffect(function(){if(isFocused&&md.os()!=='iOS'){inputRef.current.select();}},[inputRef,isFocused]);// Sync actual float value with displayed content.
+useLayoutEffect(function(){if(isFocused&&isIOs){inputRef.current.select();}},[inputRef,isFocused]);// Sync actual float value with displayed content.
 useEffect(function(){setInputValue(formatFloat(value,maxDecimals));},[maxDecimals,value]);// Stop the context menu from opening.
 useLayoutEffect(function(){inputRef.current.addEventListener('contextmenu',function(event){event.preventDefault();event.stopPropagation();return false;});},[inputRef]);var displayedValue=!isFocused&&unit?"".concat(inputValue," ").concat(unit):inputValue;return React.createElement("input",_extends({ref:inputRef},inputProps,{inputMode:"decimal"/* Pattern signals some browsers to use specialized keyboard (if inputmode not supported */,pattern:"[0-9.,]*",onFocus:onFocus,onBlur:onBlur,className:className,value:displayedValue,onChange:handleChange}));});QuantityInput.defaultProps={className:'',maxDecimals:2,unit:null,minValue:null,maxValue:null,onFocus:function onFocus(){},onChange:function onChange(){},onBlur:function onBlur(){}};export default QuantityInput;

package/components/ResponsiveContainer/breakpoints.js

@@ -1,4 +1,4 @@
-import{hasWebBridge}from'@shopgate/engage/core';/* eslint-disable extra-rules/no-single-line-objects */var breakpoints=[{name:'xs',from:0,to:600},{name:'sm',from:600,to:960},{name:'md',from:960,to:1280},{name:'lg',from:1280,to:1920},{name:'xl',from:1920,to:Number.MAX_VALUE}];/* eslint-enable extra-rules/no-single-line-objects */ /**
+import{hasWebBridge,isIOSTheme}from'@shopgate/engage/core';var iosThemeActive=isIOSTheme();/* eslint-disable extra-rules/no-single-line-objects */var breakpoints=[{name:'xs',from:0,to:600},{name:'sm',from:600,to:960},{name:'md',from:960,to:1280},{name:'lg',from:1280,to:1920},{name:'xl',from:1920,to:Number.MAX_VALUE}];/* eslint-enable extra-rules/no-single-line-objects */ /**
  * Generates a media query for different breakpoints and platform.
  * @param {Object} comparators Comparators.
  * @param {string} breakpoint Breakpoint rule.
@@ -7,6 +7,7 @@ import{hasWebBridge}from'@shopgate/engage/core';/* eslint-disable extra-rules/no
  */export var parser=function parser(comparators,breakpoint){var _ref=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{},_ref$appAlways=_ref.appAlways,appAlways=_ref$appAlways===void 0?false:_ref$appAlways,_ref$appOnly=_ref.appOnly,appOnly=_ref$appOnly===void 0?false:_ref$appOnly,_ref$webOnly=_ref.webOnly,webOnly=_ref$webOnly===void 0?false:_ref$webOnly,_ref$webAlways=_ref.webAlways,webAlways=_ref$webAlways===void 0?false:_ref$webAlways;// Parse breakpoint prop into the comparator and the breakpoint name.
 var breakpointStart=breakpoint.search(/[a-zA-Z]/);var comparatorString=breakpoint.substring(0,breakpointStart===-1?0:breakpointStart);var breakpointString=breakpoint.substring(breakpointStart===-1?0:breakpointStart);// Get configuration.
 var comparator=comparators[comparatorString];var config=breakpoints.find(function(b){return b.name===breakpointString;});// Web / App config.
-var isWeb=hasWebBridge();// Always mode.
+// Handle iOS theme as app for now so that media queries in shared components only work for app
+var isWeb=hasWebBridge()&&!iosThemeActive;// Always mode.
 if(webAlways&&isWeb||appAlways&&!isWeb){return true;}// Return media query that never evaluates for now.
 if(appOnly&&isWeb||webOnly&&!isWeb){return false;}return comparator(config.from,config.to,window.innerWidth);};export default breakpoints;

package/components/View/components/Content/style.js

@@ -1 +1 @@
-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);}import{css}from'glamor';import{useScrollContainer}from'@shopgate/engage/core';import{responsiveMediaQuery}from'@shopgate/engage/styles';export default css(_extends({display:'flex',flexDirection:'column',width:'100vw'},useScrollContainer()?{bottom:0,top:0,overflowScrolling:'touch',position:'absolute',WebkitOverflowScrolling:'touch'}:{backgroundColor:'var(--page-background-color)'},_defineProperty({},responsiveMediaQuery('>xs',{webOnly:true}),{width:'var(--page-content-width)'})));
+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);}import{css}from'glamor';import{useScrollContainer}from'@shopgate/engage/core';import{responsiveMediaQuery}from'@shopgate/engage/styles';export default css(_extends({display:'flex',flexDirection:'column',width:'100vw'},useScrollContainer()?{bottom:0,top:0,overflowScrolling:'touch',position:'absolute',WebkitOverflowScrolling:'touch'}:{height:'100%',backgroundColor:'var(--page-background-color)'},_defineProperty({},responsiveMediaQuery('>xs',{webOnly:true}),{width:'var(--page-content-width)'})));

package/components/View/index.js

@@ -3,7 +3,7 @@ export{ViewContext};/**
  * The View container component.
  * @param {Object} props The component props.
  * @return {JSX}
- */function ViewContainer(_ref){var background=_ref.background,children=_ref.children,noScrollOnKeyboard=_ref.noScrollOnKeyboard,visible=_ref.visible,ariaHidden=_ref['aria-hidden'],noContentPortal=_ref.noContentPortal;if(visible){setPageBackgroundColor(background);}var style={display:visible?'block':'none'};return React.createElement(ViewProvider,null,React.createElement(ViewContext.Consumer,null,function(_ref2){var setContentRef=_ref2.setContentRef,ariaHiddenContext=_ref2.ariaHidden;return React.createElement("section",{className:styles,style:style,"aria-hidden":ariaHidden||ariaHiddenContext},React.createElement(Content,{noScrollOnKeyboard:noScrollOnKeyboard,setContentRef:setContentRef,noContentPortal:noContentPortal},children));}));}ViewContainer.defaultProps={'aria-hidden':false,background:colors.light,children:null,noScrollOnKeyboard:false,noContentPortal:false};/**
+ */function ViewContainer(_ref){var background=_ref.background,children=_ref.children,noScrollOnKeyboard=_ref.noScrollOnKeyboard,visible=_ref.visible,ariaHidden=_ref['aria-hidden'],noContentPortal=_ref.noContentPortal;if(visible){setPageBackgroundColor(background);}var style={display:visible?'flex':'none'};return React.createElement(ViewProvider,null,React.createElement(ViewContext.Consumer,null,function(_ref2){var setContentRef=_ref2.setContentRef,ariaHiddenContext=_ref2.ariaHidden;return React.createElement("section",{className:styles,style:style,"aria-hidden":ariaHidden||ariaHiddenContext},React.createElement(Content,{noScrollOnKeyboard:noScrollOnKeyboard,setContentRef:setContentRef,noContentPortal:noContentPortal},children));}));}ViewContainer.defaultProps={'aria-hidden':false,background:colors.light,children:null,noScrollOnKeyboard:false,noContentPortal:false};/**
  * @param {Object} props The component props.
  * @returns {JSX}
  */export default function View(props){return React.createElement(RouteContext.Consumer,null,function(_ref3){var visible=_ref3.visible;return React.createElement(ViewContainer,_extends({},props,{visible:visible}));});}

package/core/helpers/getFullImageSource.js

@@ -1,8 +1,8 @@
-import{isAndroidOs}from'@shopgate/pwa-core';import{getProductImageSettings}from"../../product/helpers";/**
+import{getProductImageSettings}from"../../product/helpers";import{getImageFormat}from"./getImageFormat";/**
  * Returns the actual url to the image, by adding url parameters with the dimensions for img-cdn
  * @param {string} src Source to the image.
  * @param {Object} dimension Dimension of the requested image.
  * @param {number} dimension.width Width in pixels.
  * @param {number} dimension.height Height in pixels.
  * @returns {string}
- */export var getFullImageSource=function getFullImageSource(src,_ref){var width=_ref.width,height=_ref.height;if(src&&src.includes('images.shopgate.services/v2/images')){var _getProductImageSetti=getProductImageSettings(),fillColor=_getProductImageSetti.fillColor,quality=_getProductImageSetti.quality;var format=isAndroidOs?'webp':'jpeg';return"".concat(src,"&format=").concat(format,"&width=").concat(width,"&height=").concat(height,"&quality=").concat(quality,"&fill=").concat(fillColor.replace('#',''));}if(src&&src.startsWith('https://img-cdn.shopgate.com')&&!src.includes('?')){return"".concat(src,"?w=").concat(width,"&h=").concat(height,"&q=70&zc=resize&fillc=FFFFFF");}return src;};
+ */export var getFullImageSource=function getFullImageSource(src,_ref){var width=_ref.width,height=_ref.height;if(src&&src.includes('images.shopgate.services/v2/images')){var _getProductImageSetti=getProductImageSettings(),fillColor=_getProductImageSetti.fillColor,quality=_getProductImageSetti.quality;var format=getImageFormat();return"".concat(src,"&format=").concat(format,"&width=").concat(width,"&height=").concat(height,"&quality=").concat(quality,"&fill=").concat(fillColor.replace('#',''));}if(src&&src.startsWith('https://img-cdn.shopgate.com')&&!src.includes('?')){return"".concat(src,"?w=").concat(width,"&h=").concat(height,"&q=70&zc=resize&fillc=FFFFFF");}return src;};

package/core/helpers/getImageFormat.js

@@ -0,0 +1,4 @@
+import{isAndroidOs,isIOs}from'@shopgate/pwa-core';import detector from'detector';/**
+ * Gets the image format, which should be used
+ * @returns {string} webp OR jpeg
+ */export var getImageFormat=function getImageFormat(){var format=isAndroidOs||isIOs&&detector.os.version>=14?'webp':'jpeg';return format;};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.6.1-beta.1",
+  "version": "7.6.1-beta.4",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -16,12 +16,12 @@
   ],
   "dependencies": {
     "@shopgate/native-modules": "1.0.0-beta.18",
-    "@shopgate/pwa-common": "7.6.1-beta.1",
-    "@shopgate/pwa-common-commerce": "7.6.1-beta.1",
-    "@shopgate/pwa-core": "7.6.1-beta.1",
-    "@shopgate/pwa-ui-ios": "7.6.1-beta.1",
-    "@shopgate/pwa-ui-material": "7.6.1-beta.1",
-    "@shopgate/pwa-ui-shared": "7.6.1-beta.1",
+    "@shopgate/pwa-common": "7.6.1-beta.4",
+    "@shopgate/pwa-common-commerce": "7.6.1-beta.4",
+    "@shopgate/pwa-core": "7.6.1-beta.4",
+    "@shopgate/pwa-ui-ios": "7.6.1-beta.4",
+    "@shopgate/pwa-ui-material": "7.6.1-beta.4",
+    "@shopgate/pwa-ui-shared": "7.6.1-beta.4",
     "@stripe/react-stripe-js": "^1.1.2",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",

package/product/components/Media/helpers.js

@@ -1,6 +1,6 @@
-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);}import{APP_PLATFORM}from'@shopgate/pwa-common/constants/Configuration';import{OS_ANDROID}from'@shopgate/pwa-common/constants/Device';import configuration from'@shopgate/pwa-common/collections/Configuration';var qualities={jpeg:75,png:100,webp:70};var defaultParams={width:440,height:440,quality:qualities.jpeg,fill:'fff',format:'jpeg'};/**
+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);}import{getImageFormat}from"../../../core/helpers/getImageFormat";var qualities={jpeg:75,png:100,webp:70};var defaultParams={width:440,height:440,quality:qualities.jpeg,fill:'fff',format:'jpeg'};/**
  * Append platform dimensions and quality to image url.
  * @param {string} url image url
  * @param {Object} [params=undefined] params
  * @returns {string}
- */export var buildMediaImageUrl=function buildMediaImageUrl(url,params){var parsedUrl=new URL(url);var isAndroid=configuration.get(APP_PLATFORM)===OS_ANDROID;var format=isAndroid?'webp':defaultParams.format;var merged=_extends({},defaultParams,{format:format,quality:qualities[format]},params);Object.keys(merged).forEach(function(k){return parsedUrl.searchParams.set(k,merged[k]);});return parsedUrl.toString();};
+ */export var buildMediaImageUrl=function buildMediaImageUrl(url,params){var parsedUrl=new URL(url);var format=getImageFormat();var merged=_extends({},defaultParams,{format:format,quality:qualities[format]},params);Object.keys(merged).forEach(function(k){return parsedUrl.searchParams.set(k,merged[k]);});return parsedUrl.toString();};

package/product/components/ProductBadges/index.js

@@ -1,4 +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);}import React,{useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import kebabCase from'lodash/kebabCase';import{SurroundPortals}from"../../../components";import{PORTAL_PRODUCT_BADGES}from"../../../components/constants";var styles={root:css({position:'absolute',left:10,top:10,zIndex:5,transform:'translate3d(0, 0, 0)',display:'flex',pointerEvents:'none',' > *:empty':{display:'none'}}).toString()};/**
+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);}import React,{useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import kebabCase from'lodash/kebabCase';import{SurroundPortals}from"../../../components";import{PORTAL_PRODUCT_BADGES}from"../../../components/constants";var styles={root:css({position:'absolute',paddingLeft:10,left:0,top:10,zIndex:5,transform:'translate3d(0, 0, 0)',display:'flex',pointerEvents:'none',width:'100%',' > *:empty':{display:'none'}}).toString()};/**
  * The ProductBadges component
  * @param {Object} props The component props
  * @returns {JSX}

package/styles/reset/root.js

@@ -1 +1 @@
-import{css}from'glamor';import{useScrollContainer,hasWebBridge}from'@shopgate/engage/core';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var typography=themeConfig.typography;css.global('*, *:before, *:after',{boxSizing:'border-box'});css.global('*',{touchAction:'manipulation'});css.global('::-moz-focus-inner',{border:0});css.global('html, body',{WebkitTapHighlightColor:'transparent',width:'100%',height:'100%'});css.global('html',{overflow:useScrollContainer()?'hidden':'inherit',MozOsxFontSmoothing:'grayscale',WebkitFontSmoothing:'antialiased',MsTextSizeAdjust:'100%',WebkitTextSizeAdjust:'100%',minHeight:'100%'});css.global('body',{font:"".concat(typography.rootSize,"px/").concat(typography.lineHeight," ").concat(typography.family),overflow:'auto',margin:0,WebkitOverflowScrolling:'touch',WebkitUserSelect:hasWebBridge()?'inherit':'none',userSelect:hasWebBridge()?'inherit':'none',color:'var(--color-text-high-emphasis)'});css.global('[data-pattern]',{height:'100% !important'});css.global('html, body',{backgroundColor:'var(--page-background-color)'});if(hasWebBridge()){css.insert("@media(min-width: 600px) {\n    html, body {\n      background-color: var(--color-background-gutter-body, var(--page-background-color))\n    }\n  }");}
+import{css}from'glamor';import{useScrollContainer,hasWebBridge,isIOSTheme}from'@shopgate/engage/core';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var typography=themeConfig.typography;var iosThemeActive=isIOSTheme();css.global('*, *:before, *:after',{boxSizing:'border-box'});css.global('*',{touchAction:'manipulation'});css.global('::-moz-focus-inner',{border:0});css.global('html, body',{WebkitTapHighlightColor:'transparent',width:'100%',height:'100%'});css.global('html',{overflow:useScrollContainer()?'hidden':'inherit',MozOsxFontSmoothing:'grayscale',WebkitFontSmoothing:'antialiased',MsTextSizeAdjust:'100%',WebkitTextSizeAdjust:'100%',minHeight:'100%'});css.global('body',{font:"".concat(typography.rootSize,"px/").concat(typography.lineHeight," ").concat(typography.family),overflow:'auto',margin:0,WebkitOverflowScrolling:'touch',WebkitUserSelect:hasWebBridge()?'inherit':'none',userSelect:hasWebBridge()?'inherit':'none',color:'var(--color-text-high-emphasis)'});css.global('[data-pattern]',{height:'100% !important'});css.global('html, body',{backgroundColor:'var(--page-background-color)'});if(hasWebBridge()&&!iosThemeActive){css.insert("@media(min-width: 600px) {\n    html, body {\n      background-color: var(--color-background-gutter-body, var(--page-background-color))\n    }\n  }");}