@gem-sdk/components 3.0.0-pre-production.1 → 3.0.0-pre-production.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cjs/banner/components/hero-banner/index.js +14 -9
  2. package/dist/cjs/banner/components/hero-banner/index.liquid.js +18 -6
  3. package/dist/cjs/banner/helpers/common.js +3 -3
  4. package/dist/esm/banner/components/hero-banner/index.js +15 -10
  5. package/dist/esm/banner/components/hero-banner/index.liquid.js +20 -8
  6. package/dist/esm/banner/helpers/common.js +3 -3
  7. package/package.json +2 -2
package/dist/cjs/banner/components/hero-banner/index.js CHANGED
@@ -171,8 +171,15 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
171
171
  top: isScale ? '0px' : 'unset'
172
172
  };
173
173
  };
174
- const getBgImageByDeviceOnly = (device)=>{
174
+ const getBgImageByScreen = (device)=>{
175
175
  if (!background) return '';
176
+ const gradientColor = background?.[device]?.color ? `, ${background[device]?.color}` : '';
177
+ if (background?.[device]?.color?.includes(core.GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
178
+ return `${core.getBgImageByDevice(background, device) || ''}${gradientColor}`;
179
+ }
180
+ if (background?.[device]?.color?.includes(core.GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
181
+ return `${background?.[device]?.color}`;
182
+ }
176
183
  return core.getBgImageByDevice(background, device, {
177
184
  ignoreBgAttachment: true
178
185
  });
@@ -264,7 +271,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
264
271
  ...background ? {
265
272
  ...core.getStyleBgColor(background)
266
273
  } : {},
267
- ...core.getGradientBgrStyleByDevice(background, bgiEnableByDevice),
268
274
  ...core.getStyleShadow({
269
275
  value: shadowBg,
270
276
  styleAppliedFor: 'box-shadow',
@@ -288,15 +294,14 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
288
294
  }),
289
295
  style: {
290
296
  ...styleHeroBanner(),
297
+ ...core.makeStyleResponsive('bgi', {
298
+ desktop: getBgImageByScreen('desktop'),
299
+ tablet: getBgImageByScreen('tablet'),
300
+ mobile: getBgImageByScreen('mobile')
301
+ }),
291
302
  ...core.getStyleBackgroundByDevice(background, {
292
303
  ignoreBgAttachment: true,
293
- ignoreBackgroundImage: true,
294
- ignoreBackgroundColor: backgroundResponsive[currentDevice]?.type === 'video'
295
- }),
296
- ...core.makeStyleResponsive('bgi', {
297
- desktop: bgiEnableByDevice['desktop'] ? getBgImageByDeviceOnly('desktop') : 'url()',
298
- tablet: bgiEnableByDevice['tablet'] ? getBgImageByDeviceOnly('tablet') : 'url()',
299
- mobile: bgiEnableByDevice['mobile'] ? getBgImageByDeviceOnly('mobile') : 'url()'
304
+ ignoreBackgroundImage: true
300
305
  }),
301
306
  position: attachment === 'fixed' ? 'fixed' : 'absolute',
302
307
  '--duration': `${hoverEffectDuration ?? 0}s`,
package/dist/cjs/banner/components/hero-banner/index.liquid.js CHANGED
@@ -138,6 +138,19 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
138
138
  mobile: helpers$1.createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
139
139
  };
140
140
  const enableLazyLoad = !setting?.preload && pageContext?.enableLazyLoadImage;
141
+ const getBgImageByScreen = (device)=>{
142
+ if (!background) return '';
143
+ const imageUrl = enableLazyLoad ? `url(${imagePlaceholder[device]})` : `url(${getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, device), device)})`;
144
+ const gradientColor = background?.[device]?.color ? `, ${background?.[device]?.color}` : '';
145
+ if (background?.[device]?.color?.includes(core.GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
146
+ return `${imageUrl}${gradientColor}`;
147
+ }
148
+ if (background?.[device]?.color?.includes(core.GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
149
+ return `${background?.[device]?.color}`;
150
+ }
151
+ if (bgiEnableByDevice[device]) return imageUrl;
152
+ return 'url()';
153
+ };
141
154
  const renderInnerHeroBanner = ()=>{
142
155
  return core.template /* liquid */ `
143
156
  <div
@@ -162,7 +175,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
162
175
  ...background ? {
163
176
  ...core.getStyleBgColor(background)
164
177
  } : {},
165
- ...core.getGradientBgrStyleByDevice(background, bgiEnableByDevice),
166
178
  ...core.getStyleShadow({
167
179
  value: shadowBg,
168
180
  styleAppliedFor: 'box-shadow',
@@ -208,16 +220,16 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
208
220
  gp_lazybg: enableLazyLoad
209
221
  })}"
210
222
  style="${{
223
+ ...core.makeStyleResponsive('bgi', {
224
+ desktop: getBgImageByScreen('desktop'),
225
+ tablet: getBgImageByScreen('tablet'),
226
+ mobile: getBgImageByScreen('mobile')
227
+ }),
211
228
  ...core.getStyleBackgroundByDevice(background, {
212
229
  ignoreBgAttachment: true,
213
230
  ignoreBackgroundImage: true,
214
231
  liquid: true
215
232
  }),
216
- ...core.makeStyleResponsive('bgi', {
217
- desktop: `url('${bgiEnableByDevice['desktop'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
218
- tablet: `url('${bgiEnableByDevice['tablet'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
219
- mobile: `url('${bgiEnableByDevice['mobile'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
220
- }),
221
233
  '--duration': `${hoverEffectDuration ?? 0}s`,
222
234
  '--scale': hoverEffectScale ?? 1,
223
235
  ...core.makeStyleResponsive('pos', getAttachmentDevice()),
package/dist/cjs/banner/helpers/common.js CHANGED
@@ -268,13 +268,13 @@ const getClassSpaceBetween = (setting, contentPosition1Col, contentPosition2Col)
268
268
  const contentPositionTablet = (settingRes?.tablet?.cols?.length || 1) <= 1 ? contentPosition1ColRes.tablet : contentPosition2ColRes.tablet;
269
269
  const contentPositionMobile = (settingRes?.mobile?.cols?.length || 1) <= 1 ? contentPosition1ColRes.mobile : contentPosition2ColRes.mobile;
270
270
  return {
271
- 'gp-h-full !gp-content-stretch [&>*]:!gp-justify-between': settingRes.desktop?.cols?.length === 1 && contentPositionDesktop === 'space-between',
271
+ '!gp-h-full !gp-content-stretch [&>*]:!gp-justify-between': settingRes.desktop?.cols?.length === 1 && contentPositionDesktop === 'space-between',
272
272
  '!gp-content-stretch [&>*]:!gp-justify-start': settingRes.desktop?.cols?.length === 1 && contentPositionDesktop === 'top',
273
- 'tablet:gp-h-full tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-between': settingRes.tablet?.cols?.length === 1 && contentPositionTablet === 'space-between',
273
+ 'tablet:!gp-h-full tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-between': settingRes.tablet?.cols?.length === 1 && contentPositionTablet === 'space-between',
274
274
  'tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-start': settingRes.tablet?.cols?.length === 1 && contentPositionTablet === 'top',
275
275
  'tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-center': settingRes.tablet?.cols?.length === 1 && contentPositionTablet === 'center',
276
276
  'tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-end': settingRes.tablet?.cols?.length === 1 && contentPositionTablet === 'bottom',
277
- 'mobile:gp-h-full mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-between': settingRes.mobile?.cols?.length === 1 && contentPositionMobile === 'space-between',
277
+ 'mobile:!gp-h-full mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-between': settingRes.mobile?.cols?.length === 1 && contentPositionMobile === 'space-between',
278
278
  'mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-start': settingRes.mobile?.cols?.length === 1 && contentPositionMobile === 'top',
279
279
  'mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-center': settingRes.mobile?.cols?.length === 1 && contentPositionMobile === 'center',
280
280
  'mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-end': settingRes.mobile?.cols?.length === 1 && contentPositionMobile === 'bottom'
package/dist/esm/banner/components/hero-banner/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { useEditorMode, useCurrentDevice, makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, getResponsiveValueByScreen, cls, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getGradientBgrStyleByDevice, getStyleShadow, getStyleBackgroundByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, filterToolbarPreview, getAspectRatioGlobalSize, getBgImageByDevice } from '@gem-sdk/core';
2
+ import { useEditorMode, useCurrentDevice, makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, getResponsiveValueByScreen, cls, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getStyleShadow, getStyleBackgroundByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, filterToolbarPreview, getAspectRatioGlobalSize, GRADIENT_BGR_KEY, getBgImageByDevice } from '@gem-sdk/core';
3
3
  import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
4
4
  import Row from '../../../grid/components/Row.js';
5
5
  import Link from '../../../link/components/Link.js';
@@ -167,8 +167,15 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
167
167
  top: isScale ? '0px' : 'unset'
168
168
  };
169
169
  };
170
- const getBgImageByDeviceOnly = (device)=>{
170
+ const getBgImageByScreen = (device)=>{
171
171
  if (!background) return '';
172
+ const gradientColor = background?.[device]?.color ? `, ${background[device]?.color}` : '';
173
+ if (background?.[device]?.color?.includes(GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
174
+ return `${getBgImageByDevice(background, device) || ''}${gradientColor}`;
175
+ }
176
+ if (background?.[device]?.color?.includes(GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
177
+ return `${background?.[device]?.color}`;
178
+ }
172
179
  return getBgImageByDevice(background, device, {
173
180
  ignoreBgAttachment: true
174
181
  });
@@ -260,7 +267,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
260
267
  ...background ? {
261
268
  ...getStyleBgColor(background)
262
269
  } : {},
263
- ...getGradientBgrStyleByDevice(background, bgiEnableByDevice),
264
270
  ...getStyleShadow({
265
271
  value: shadowBg,
266
272
  styleAppliedFor: 'box-shadow',
@@ -284,15 +290,14 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
284
290
  }),
285
291
  style: {
286
292
  ...styleHeroBanner(),
293
+ ...makeStyleResponsive('bgi', {
294
+ desktop: getBgImageByScreen('desktop'),
295
+ tablet: getBgImageByScreen('tablet'),
296
+ mobile: getBgImageByScreen('mobile')
297
+ }),
287
298
  ...getStyleBackgroundByDevice(background, {
288
299
  ignoreBgAttachment: true,
289
- ignoreBackgroundImage: true,
290
- ignoreBackgroundColor: backgroundResponsive[currentDevice]?.type === 'video'
291
- }),
292
- ...makeStyleResponsive('bgi', {
293
- desktop: bgiEnableByDevice['desktop'] ? getBgImageByDeviceOnly('desktop') : 'url()',
294
- tablet: bgiEnableByDevice['tablet'] ? getBgImageByDeviceOnly('tablet') : 'url()',
295
- mobile: bgiEnableByDevice['mobile'] ? getBgImageByDeviceOnly('mobile') : 'url()'
300
+ ignoreBackgroundImage: true
296
301
  }),
297
302
  position: attachment === 'fixed' ? 'fixed' : 'absolute',
298
303
  '--duration': `${hoverEffectDuration ?? 0}s`,
package/dist/esm/banner/components/hero-banner/index.liquid.js CHANGED
@@ -1,4 +1,4 @@
1
- import { makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, removeUndefinedValuesFromObject, template, cls, dataStringify, RenderIf, isLocalEnv, baseAssetURL, getResponsiveValueByScreen, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getGradientBgrStyleByDevice, getStyleShadow, getAspectRatioGlobalSize, getStyleBackgroundByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState } from '@gem-sdk/core';
1
+ import { makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, removeUndefinedValuesFromObject, template, cls, dataStringify, RenderIf, isLocalEnv, baseAssetURL, getResponsiveValueByScreen, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getStyleShadow, getAspectRatioGlobalSize, getStyleBackgroundByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, GRADIENT_BGR_KEY } from '@gem-sdk/core';
2
2
  import Row from '../../../grid/components/Row.liquid.js';
3
3
  import AdaptiveImage from '../../../image/components/AdaptiveImage.liquid.js';
4
4
  import { getVisibilityStyle, getMarginStyle, getStyleAspectRatioHeroBannerCustom, removeMarginStyle, getContentPosition, mapContentPositionToHorizontal, getClassJustify, getResponsiveSetting, getClassContentPosition, getDisplayStyleByFitContent, fallBackImg, getClassForContentByFitContent, getClassForStretchContent, getClassSpaceBetween, getWidth, getBgImage } from '../../helpers/common.js';
@@ -7,7 +7,7 @@ import HTML5Embed from '../../../video/components/HTML5Embed.liquid.js';
7
7
  import { getClipPath, getStyleHeroBannerBg } from './utils/index.js';
8
8
  import useAspectRatioSettings from './hooks/useAspectRatioSettings.js';
9
9
  import NextImage from '../../../image/components/NextImage.liquid.js';
10
- import { getImageSrc, DEVICES } from '../../../image/helpers/getSrcSet.js';
10
+ import { DEVICES, getImageSrc } from '../../../image/helpers/getSrcSet.js';
11
11
  import { createBlurDataURL } from '../../../image/components/helpers.js';
12
12
 
13
13
  const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, pageContext })=>{
@@ -134,6 +134,19 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
134
134
  mobile: createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
135
135
  };
136
136
  const enableLazyLoad = !setting?.preload && pageContext?.enableLazyLoadImage;
137
+ const getBgImageByScreen = (device)=>{
138
+ if (!background) return '';
139
+ const imageUrl = enableLazyLoad ? `url(${imagePlaceholder[device]})` : `url(${getImageSrc(getResponsiveValueByScreen(srcSet, device), device)})`;
140
+ const gradientColor = background?.[device]?.color ? `, ${background?.[device]?.color}` : '';
141
+ if (background?.[device]?.color?.includes(GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
142
+ return `${imageUrl}${gradientColor}`;
143
+ }
144
+ if (background?.[device]?.color?.includes(GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
145
+ return `${background?.[device]?.color}`;
146
+ }
147
+ if (bgiEnableByDevice[device]) return imageUrl;
148
+ return 'url()';
149
+ };
137
150
  const renderInnerHeroBanner = ()=>{
138
151
  return template /* liquid */ `
139
152
  <div
@@ -158,7 +171,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
158
171
  ...background ? {
159
172
  ...getStyleBgColor(background)
160
173
  } : {},
161
- ...getGradientBgrStyleByDevice(background, bgiEnableByDevice),
162
174
  ...getStyleShadow({
163
175
  value: shadowBg,
164
176
  styleAppliedFor: 'box-shadow',
@@ -204,16 +216,16 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
204
216
  gp_lazybg: enableLazyLoad
205
217
  })}"
206
218
  style="${{
219
+ ...makeStyleResponsive('bgi', {
220
+ desktop: getBgImageByScreen('desktop'),
221
+ tablet: getBgImageByScreen('tablet'),
222
+ mobile: getBgImageByScreen('mobile')
223
+ }),
207
224
  ...getStyleBackgroundByDevice(background, {
208
225
  ignoreBgAttachment: true,
209
226
  ignoreBackgroundImage: true,
210
227
  liquid: true
211
228
  }),
212
- ...makeStyleResponsive('bgi', {
213
- desktop: `url('${bgiEnableByDevice['desktop'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
214
- tablet: `url('${bgiEnableByDevice['tablet'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
215
- mobile: `url('${bgiEnableByDevice['mobile'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
216
- }),
217
229
  '--duration': `${hoverEffectDuration ?? 0}s`,
218
230
  '--scale': hoverEffectScale ?? 1,
219
231
  ...makeStyleResponsive('pos', getAttachmentDevice()),
package/dist/esm/banner/helpers/common.js CHANGED
@@ -266,13 +266,13 @@ const getClassSpaceBetween = (setting, contentPosition1Col, contentPosition2Col)
266
266
  const contentPositionTablet = (settingRes?.tablet?.cols?.length || 1) <= 1 ? contentPosition1ColRes.tablet : contentPosition2ColRes.tablet;
267
267
  const contentPositionMobile = (settingRes?.mobile?.cols?.length || 1) <= 1 ? contentPosition1ColRes.mobile : contentPosition2ColRes.mobile;
268
268
  return {
269
- 'gp-h-full !gp-content-stretch [&>*]:!gp-justify-between': settingRes.desktop?.cols?.length === 1 && contentPositionDesktop === 'space-between',
269
+ '!gp-h-full !gp-content-stretch [&>*]:!gp-justify-between': settingRes.desktop?.cols?.length === 1 && contentPositionDesktop === 'space-between',
270
270
  '!gp-content-stretch [&>*]:!gp-justify-start': settingRes.desktop?.cols?.length === 1 && contentPositionDesktop === 'top',
271
- 'tablet:gp-h-full tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-between': settingRes.tablet?.cols?.length === 1 && contentPositionTablet === 'space-between',
271
+ 'tablet:!gp-h-full tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-between': settingRes.tablet?.cols?.length === 1 && contentPositionTablet === 'space-between',
272
272
  'tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-start': settingRes.tablet?.cols?.length === 1 && contentPositionTablet === 'top',
273
273
  'tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-center': settingRes.tablet?.cols?.length === 1 && contentPositionTablet === 'center',
274
274
  'tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-end': settingRes.tablet?.cols?.length === 1 && contentPositionTablet === 'bottom',
275
- 'mobile:gp-h-full mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-between': settingRes.mobile?.cols?.length === 1 && contentPositionMobile === 'space-between',
275
+ 'mobile:!gp-h-full mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-between': settingRes.mobile?.cols?.length === 1 && contentPositionMobile === 'space-between',
276
276
  'mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-start': settingRes.mobile?.cols?.length === 1 && contentPositionMobile === 'top',
277
277
  'mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-center': settingRes.mobile?.cols?.length === 1 && contentPositionMobile === 'center',
278
278
  'mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-end': settingRes.mobile?.cols?.length === 1 && contentPositionMobile === 'bottom'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "3.0.0-pre-production.1",
3
+ "version": "3.0.0-pre-production.5",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
21
21
  "format": "prettier --write \"./src/**/*.{ts,tsx}\""
22
22
  },
23
23
  "devDependencies": {
24
- "@gem-sdk/core": "3.0.0-pre-production.1",
24
+ "@gem-sdk/core": "3.0.0-pre-production.3",
25
25
  "@gem-sdk/styles": "3.0.0-pre-production.1",
26
26
  "@types/react-transition-group": "^4.4.5"
27
27
  },