@gem-sdk/components 2.5.3-staging.3 → 2.5.3-staging.6

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.
@@ -13,6 +13,7 @@ var ChildrenDroppable = require('./ChildrenDroppable.js');
13
13
  const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, advanced, maxWidthWithEmptyChildren, isNotFullWidth, ...props })=>{
14
14
  const { isSection, as: Element = 'div', lazy, layout, horizontalAlign, verticalAlign, responsive, inlineAlignment, blockAlignment } = setting ?? {};
15
15
  const mode = core.useEditorMode();
16
+ const pageType = core.usePageType();
16
17
  //=== START lazyload section ====
17
18
  const [cacheHeightOutViewport, setCacheHeightOutViewport] = React.useState(500);
18
19
  const [ref, inView] = useInView.useInView({
@@ -29,6 +30,13 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
29
30
  }
30
31
  }
31
32
  });
33
+ const isDisplaySection = React.useMemo(()=>{
34
+ return inView || mode !== 'edit' || pageType === 'POST_PURCHASE';
35
+ }, [
36
+ inView,
37
+ mode,
38
+ pageType
39
+ ]);
32
40
  //=== END lazyload section ====
33
41
  const childHasChildren = React.useMemo(()=>{
34
42
  return builderProps?.builderData?.childrens?.length;
@@ -43,7 +51,6 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
43
51
  children
44
52
  ]);
45
53
  const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
46
- const pageType = core.usePageType();
47
54
  const styleObject = helpers.createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
48
55
  desktop: false,
49
56
  tablet: false,
@@ -119,7 +126,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
119
126
  className: core.cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
120
127
  'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
121
128
  }),
122
- children: inView || mode !== 'edit' ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
129
+ children: isDisplaySection ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
123
130
  children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : React.Children.map(children, (el)=>{
124
131
  if (/*#__PURE__*/ React.isValidElement(el)) return /*#__PURE__*/ React.createElement(el.type, {
125
132
  ...el.props,
@@ -8,13 +8,17 @@ var thirdParty = require('../helpers/thirdParty.js');
8
8
 
9
9
  const Trustoo = ({ setting, advanced })=>{
10
10
  const { widgetType, align, version, appBlockId } = setting ?? {};
11
- return version === 'v2' ? thirdParty.getLiquidForAppBlock(appBlockId, align, advanced?.cssClass) : core.template`
12
- <div
13
- class="${advanced?.cssClass}"
14
- style="${{
15
- ...core.makeStyleResponsive('ta', align)
16
- }}"
17
- >
11
+ const widgetTypeMap = {
12
+ 'review-widget': '<div class="custom-vstar-review-widget" style="width:100%"></div>',
13
+ 'star-rating-widget': '<div class="custom-vstar-rating-widget" data-product-id="{{product.id}}"></div>',
14
+ 'text-carousel': '<div id="trustoo-text-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>',
15
+ 'barrage-carousel': '<div id="trustoo-barrage-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>',
16
+ 'card-carousel': '<div id="trustoo-card-carousel-widget" style="display:block;max-width:1200px;margin:0 auto"></div>',
17
+ 'photo-carousel': '<div id="trustoo-photo-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>'
18
+ };
19
+ const renderOldVersionTrustoo = ()=>{
20
+ return version === 'v2' ? thirdParty.getLiquidForAppBlock(appBlockId, align, advanced?.cssClass) : core.template`
21
+ <div>
18
22
  {% if '${widgetType}' == 'starRatingInList' %}
19
23
  {% if request.page_type != 'product' %}
20
24
  <div class="custom-vstar-rating-widget" product-id="{{ product.id }}"></div>
@@ -37,6 +41,19 @@ const Trustoo = ({ setting, advanced })=>{
37
41
  {% endif %}
38
42
  </div>
39
43
  `;
44
+ };
45
+ return !!version ? renderOldVersionTrustoo() : core.template`
46
+ <div
47
+ class="${advanced?.cssClass}"
48
+ style="${{
49
+ ...core.makeStyleResponsive('ta', align)
50
+ }}"
51
+ >
52
+ ${widgetType && widgetTypeMap?.[widgetType]}
53
+ <script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="https://cdn.vstar.app/static/dist/js/swiper-reviews.min.js" defer="defer"></script>
54
+ <link ${helpers.getSettingPreloadData('class="gps-link" delay', 'href')}="https://cdn.vstar.app/static/css/swiper-reviews.min.css" rel="stylesheet" type="text/css" media="all">
55
+ </div>
56
+ `;
40
57
  };
41
58
 
42
59
  exports.default = Trustoo;
@@ -65,76 +65,11 @@ const config = {
65
65
  href: 'https://admin.shopify.com/?redirect=/apps/sealapps-product-review',
66
66
  appName: Trustoo.default.label
67
67
  },
68
- {
69
- id: 'version',
70
- label: 'Choose version',
71
- type: 'select',
72
- default: 'v1',
73
- options: [
74
- {
75
- label: 'V1',
76
- value: 'v1'
77
- },
78
- {
79
- label: 'V2',
80
- value: 'v2'
81
- }
82
- ]
83
- },
84
68
  {
85
69
  id: 'widgetType',
86
70
  label: 'Choose widget',
87
71
  type: 'select',
88
- default: 'starRating',
89
- options: [
90
- {
91
- label: 'Star Rating',
92
- value: 'starRating',
93
- hideOnPage: [
94
- 'GP_ARTICLE',
95
- 'GP_BLOG',
96
- 'GP_COLLECTION',
97
- 'GP_INDEX',
98
- 'GP_STATIC'
99
- ],
100
- flowTag: [
101
- 'Product'
102
- ],
103
- condition: 'or'
104
- },
105
- {
106
- label: 'Star Rating List',
107
- value: 'starRatingInList',
108
- hideOnPage: [
109
- 'GP_ARTICLE',
110
- 'GP_BLOG',
111
- 'GP_COLLECTION',
112
- 'GP_INDEX',
113
- 'GP_STATIC'
114
- ],
115
- flowTag: [
116
- 'ProductList'
117
- ],
118
- condition: 'or'
119
- },
120
- {
121
- label: 'Reviews',
122
- value: 'reviews',
123
- hideOnPage: [
124
- 'GP_ARTICLE',
125
- 'GP_BLOG',
126
- 'GP_COLLECTION',
127
- 'GP_INDEX',
128
- 'GP_STATIC'
129
- ]
130
- }
131
- ]
132
- },
133
- {
134
- id: 'widgetTypeV2',
135
- label: 'Choose widget',
136
- type: 'select',
137
- default: 'barrage-carousel',
72
+ default: 'star-rating-widget',
138
73
  options: [
139
74
  {
140
75
  label: 'Testimonials',
@@ -150,33 +85,11 @@ const config = {
150
85
  },
151
86
  {
152
87
  label: 'Review Widget',
153
- value: 'review-widget',
154
- hideOnPage: [
155
- 'ARTICLE',
156
- 'BLOG',
157
- 'COLLECTION',
158
- 'GP_ARTICLE',
159
- 'GP_BLOG',
160
- 'GP_COLLECTION',
161
- 'GP_INDEX',
162
- 'GP_STATIC',
163
- 'STATIC'
164
- ]
88
+ value: 'review-widget'
165
89
  },
166
90
  {
167
91
  label: 'Star Rating Widget',
168
- value: 'star-rating-widget',
169
- hideOnPage: [
170
- 'ARTICLE',
171
- 'BLOG',
172
- 'COLLECTION',
173
- 'GP_ARTICLE',
174
- 'GP_BLOG',
175
- 'GP_COLLECTION',
176
- 'GP_INDEX',
177
- 'GP_STATIC',
178
- 'STATIC'
179
- ]
92
+ value: 'star-rating-widget'
180
93
  },
181
94
  {
182
95
  label: 'Text Carousel',
@@ -226,15 +139,6 @@ const config = {
226
139
  id: 'install'
227
140
  }
228
141
  },
229
- {
230
- type: 'control',
231
- label: {
232
- en: 'Choose version'
233
- },
234
- setting: {
235
- id: 'version'
236
- }
237
- },
238
142
  {
239
143
  type: 'control',
240
144
  label: {
@@ -242,18 +146,7 @@ const config = {
242
146
  },
243
147
  setting: {
244
148
  id: 'widgetType'
245
- },
246
- condition: 'version === "v1"'
247
- },
248
- {
249
- type: 'control',
250
- label: {
251
- en: 'Choose widget'
252
- },
253
- setting: {
254
- id: 'widgetTypeV2'
255
- },
256
- condition: 'version === "v2"'
149
+ }
257
150
  },
258
151
  {
259
152
  type: 'control',
@@ -1,6 +1,6 @@
1
1
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import { useState, useMemo, Children, isValidElement, createElement } from 'react';
3
- import { useEditorMode, useCurrentDevice, isEmptyChildren, usePageType, splitStyle, cls, makeStyleResponsive, composeGridLayout, makeStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getResponsiveValue } from '@gem-sdk/core';
3
+ import { useEditorMode, usePageType, useCurrentDevice, isEmptyChildren, splitStyle, cls, makeStyleResponsive, composeGridLayout, makeStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getResponsiveValue } from '@gem-sdk/core';
4
4
  import Head from 'next/head';
5
5
  import { useInView } from '../../intersection-observer/useInView.js';
6
6
  import { createStyleObject } from './helpers.js';
@@ -9,6 +9,7 @@ import ChildrenDroppable from './ChildrenDroppable.js';
9
9
  const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, advanced, maxWidthWithEmptyChildren, isNotFullWidth, ...props })=>{
10
10
  const { isSection, as: Element = 'div', lazy, layout, horizontalAlign, verticalAlign, responsive, inlineAlignment, blockAlignment } = setting ?? {};
11
11
  const mode = useEditorMode();
12
+ const pageType = usePageType();
12
13
  //=== START lazyload section ====
13
14
  const [cacheHeightOutViewport, setCacheHeightOutViewport] = useState(500);
14
15
  const [ref, inView] = useInView({
@@ -25,6 +26,13 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
25
26
  }
26
27
  }
27
28
  });
29
+ const isDisplaySection = useMemo(()=>{
30
+ return inView || mode !== 'edit' || pageType === 'POST_PURCHASE';
31
+ }, [
32
+ inView,
33
+ mode,
34
+ pageType
35
+ ]);
28
36
  //=== END lazyload section ====
29
37
  const childHasChildren = useMemo(()=>{
30
38
  return builderProps?.builderData?.childrens?.length;
@@ -39,7 +47,6 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
39
47
  children
40
48
  ]);
41
49
  const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
42
- const pageType = usePageType();
43
50
  const styleObject = createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
44
51
  desktop: false,
45
52
  tablet: false,
@@ -115,7 +122,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
115
122
  className: cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
116
123
  'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
117
124
  }),
118
- children: inView || mode !== 'edit' ? /*#__PURE__*/ jsx(Fragment, {
125
+ children: isDisplaySection ? /*#__PURE__*/ jsx(Fragment, {
119
126
  children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : Children.map(children, (el)=>{
120
127
  if (/*#__PURE__*/ isValidElement(el)) return /*#__PURE__*/ createElement(el.type, {
121
128
  ...el.props,
@@ -4,13 +4,17 @@ import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
4
4
 
5
5
  const Trustoo = ({ setting, advanced })=>{
6
6
  const { widgetType, align, version, appBlockId } = setting ?? {};
7
- return version === 'v2' ? getLiquidForAppBlock(appBlockId, align, advanced?.cssClass) : template`
8
- <div
9
- class="${advanced?.cssClass}"
10
- style="${{
11
- ...makeStyleResponsive('ta', align)
12
- }}"
13
- >
7
+ const widgetTypeMap = {
8
+ 'review-widget': '<div class="custom-vstar-review-widget" style="width:100%"></div>',
9
+ 'star-rating-widget': '<div class="custom-vstar-rating-widget" data-product-id="{{product.id}}"></div>',
10
+ 'text-carousel': '<div id="trustoo-text-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>',
11
+ 'barrage-carousel': '<div id="trustoo-barrage-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>',
12
+ 'card-carousel': '<div id="trustoo-card-carousel-widget" style="display:block;max-width:1200px;margin:0 auto"></div>',
13
+ 'photo-carousel': '<div id="trustoo-photo-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>'
14
+ };
15
+ const renderOldVersionTrustoo = ()=>{
16
+ return version === 'v2' ? getLiquidForAppBlock(appBlockId, align, advanced?.cssClass) : template`
17
+ <div>
14
18
  {% if '${widgetType}' == 'starRatingInList' %}
15
19
  {% if request.page_type != 'product' %}
16
20
  <div class="custom-vstar-rating-widget" product-id="{{ product.id }}"></div>
@@ -33,6 +37,19 @@ const Trustoo = ({ setting, advanced })=>{
33
37
  {% endif %}
34
38
  </div>
35
39
  `;
40
+ };
41
+ return !!version ? renderOldVersionTrustoo() : template`
42
+ <div
43
+ class="${advanced?.cssClass}"
44
+ style="${{
45
+ ...makeStyleResponsive('ta', align)
46
+ }}"
47
+ >
48
+ ${widgetType && widgetTypeMap?.[widgetType]}
49
+ <script ${getSettingPreloadData('class="gps-link" delay', 'src')}="https://cdn.vstar.app/static/dist/js/swiper-reviews.min.js" defer="defer"></script>
50
+ <link ${getSettingPreloadData('class="gps-link" delay', 'href')}="https://cdn.vstar.app/static/css/swiper-reviews.min.css" rel="stylesheet" type="text/css" media="all">
51
+ </div>
52
+ `;
36
53
  };
37
54
 
38
55
  export { Trustoo as default };
@@ -61,76 +61,11 @@ const config = {
61
61
  href: 'https://admin.shopify.com/?redirect=/apps/sealapps-product-review',
62
62
  appName: TrustooConfig.label
63
63
  },
64
- {
65
- id: 'version',
66
- label: 'Choose version',
67
- type: 'select',
68
- default: 'v1',
69
- options: [
70
- {
71
- label: 'V1',
72
- value: 'v1'
73
- },
74
- {
75
- label: 'V2',
76
- value: 'v2'
77
- }
78
- ]
79
- },
80
64
  {
81
65
  id: 'widgetType',
82
66
  label: 'Choose widget',
83
67
  type: 'select',
84
- default: 'starRating',
85
- options: [
86
- {
87
- label: 'Star Rating',
88
- value: 'starRating',
89
- hideOnPage: [
90
- 'GP_ARTICLE',
91
- 'GP_BLOG',
92
- 'GP_COLLECTION',
93
- 'GP_INDEX',
94
- 'GP_STATIC'
95
- ],
96
- flowTag: [
97
- 'Product'
98
- ],
99
- condition: 'or'
100
- },
101
- {
102
- label: 'Star Rating List',
103
- value: 'starRatingInList',
104
- hideOnPage: [
105
- 'GP_ARTICLE',
106
- 'GP_BLOG',
107
- 'GP_COLLECTION',
108
- 'GP_INDEX',
109
- 'GP_STATIC'
110
- ],
111
- flowTag: [
112
- 'ProductList'
113
- ],
114
- condition: 'or'
115
- },
116
- {
117
- label: 'Reviews',
118
- value: 'reviews',
119
- hideOnPage: [
120
- 'GP_ARTICLE',
121
- 'GP_BLOG',
122
- 'GP_COLLECTION',
123
- 'GP_INDEX',
124
- 'GP_STATIC'
125
- ]
126
- }
127
- ]
128
- },
129
- {
130
- id: 'widgetTypeV2',
131
- label: 'Choose widget',
132
- type: 'select',
133
- default: 'barrage-carousel',
68
+ default: 'star-rating-widget',
134
69
  options: [
135
70
  {
136
71
  label: 'Testimonials',
@@ -146,33 +81,11 @@ const config = {
146
81
  },
147
82
  {
148
83
  label: 'Review Widget',
149
- value: 'review-widget',
150
- hideOnPage: [
151
- 'ARTICLE',
152
- 'BLOG',
153
- 'COLLECTION',
154
- 'GP_ARTICLE',
155
- 'GP_BLOG',
156
- 'GP_COLLECTION',
157
- 'GP_INDEX',
158
- 'GP_STATIC',
159
- 'STATIC'
160
- ]
84
+ value: 'review-widget'
161
85
  },
162
86
  {
163
87
  label: 'Star Rating Widget',
164
- value: 'star-rating-widget',
165
- hideOnPage: [
166
- 'ARTICLE',
167
- 'BLOG',
168
- 'COLLECTION',
169
- 'GP_ARTICLE',
170
- 'GP_BLOG',
171
- 'GP_COLLECTION',
172
- 'GP_INDEX',
173
- 'GP_STATIC',
174
- 'STATIC'
175
- ]
88
+ value: 'star-rating-widget'
176
89
  },
177
90
  {
178
91
  label: 'Text Carousel',
@@ -222,15 +135,6 @@ const config = {
222
135
  id: 'install'
223
136
  }
224
137
  },
225
- {
226
- type: 'control',
227
- label: {
228
- en: 'Choose version'
229
- },
230
- setting: {
231
- id: 'version'
232
- }
233
- },
234
138
  {
235
139
  type: 'control',
236
140
  label: {
@@ -238,18 +142,7 @@ const config = {
238
142
  },
239
143
  setting: {
240
144
  id: 'widgetType'
241
- },
242
- condition: 'version === "v1"'
243
- },
244
- {
245
- type: 'control',
246
- label: {
247
- en: 'Choose widget'
248
- },
249
- setting: {
250
- id: 'widgetTypeV2'
251
- },
252
- condition: 'version === "v2"'
145
+ }
253
146
  },
254
147
  {
255
148
  type: 'control',
@@ -1,5 +1,5 @@
1
1
  import * as _gem_sdk_core from '@gem-sdk/core';
2
- import { BaseProps, TypographySettingV2, ObjectDevices, Background, SizeSettingGlobal, StateProp, ColorValueType, TypographySetting, Border, SizeSetting, CornerRadius, ShadowProps, BasePropsWrap, AlignProp, NameDevices, ResponsiveStateProp, Ratio, ObjectLayoutValue, TransformProp, PageContext, ProductProviderProps, JudgeMeReviewsWidgetType, LooxReviewsWidgetType, LooxReviewsWidgetTypeV2, ProductReviewsWidgetType, RyviuWidgetType, RivyoWidgetType, VitalsWidgetType, OmnisendWidgetType, TrustooWidgetType, TrustooWidgetTypeV2, FeraReviewsWidgetType, FeraReviewsV3WidgetType, BoldSubscriptionsWidgetType, PickyStoryWidgetType, WiserWidgetType, WiserV2WidgetType, StampedWidgetType, StampedWidgetTypeV2, LaiProductReviewsWidgetType, LaiProductReviewsAdvancedWidgetType, GrowaveWidgetTypeV2, GrowaveWidgetTypeV1, OpinewWidgetType, OpinewDesignWidgetType, UltimateSalesBoostWidgetType, YotpoReviewsWidgetType, AliReviewsWidgetType, BogosWidgetType, FastBundleWidgetType, PreOrderNowWodWidgetType, TagShopWidgetType, AirProductReview, InstantJudgeMeReviewsWidgetType, InstantLooxReviewsWidgetType, PostPurchaseTypo, AdvancedType, RawChild } from '@gem-sdk/core';
2
+ import { BaseProps, TypographySettingV2, ObjectDevices, Background, SizeSettingGlobal, StateProp, ColorValueType, TypographySetting, Border, SizeSetting, CornerRadius, ShadowProps, BasePropsWrap, AlignProp, NameDevices, ResponsiveStateProp, Ratio, ObjectLayoutValue, TransformProp, PageContext, ProductProviderProps, JudgeMeReviewsWidgetType, LooxReviewsWidgetType, LooxReviewsWidgetTypeV2, ProductReviewsWidgetType, RyviuWidgetType, RivyoWidgetType, VitalsWidgetType, OmnisendWidgetType, TrustooWidgetType, FeraReviewsWidgetType, FeraReviewsV3WidgetType, BoldSubscriptionsWidgetType, PickyStoryWidgetType, WiserWidgetType, WiserV2WidgetType, StampedWidgetType, StampedWidgetTypeV2, LaiProductReviewsWidgetType, LaiProductReviewsAdvancedWidgetType, GrowaveWidgetTypeV2, GrowaveWidgetTypeV1, OpinewWidgetType, OpinewDesignWidgetType, UltimateSalesBoostWidgetType, YotpoReviewsWidgetType, AliReviewsWidgetType, BogosWidgetType, FastBundleWidgetType, PreOrderNowWodWidgetType, TagShopWidgetType, AirProductReview, InstantJudgeMeReviewsWidgetType, InstantLooxReviewsWidgetType, PostPurchaseTypo, AdvancedType, RawChild } from '@gem-sdk/core';
3
3
  import * as csstype from 'csstype';
4
4
  import { Property } from 'csstype';
5
5
  import * as _gem_sdk_keen_slider_react from '@gem-sdk/keen-slider/react';
@@ -2555,7 +2555,6 @@ declare const Omnisend$1: React.FC<OmnisendProps>;
2555
2555
 
2556
2556
  type TrustooProps = BaseProps<{
2557
2557
  widgetType?: TrustooWidgetType;
2558
- widgetTypeV2?: TrustooWidgetTypeV2;
2559
2558
  openApp?: any;
2560
2559
  install?: any;
2561
2560
  align?: ObjectDevices<AlignProp>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.5.3-staging.3",
3
+ "version": "2.5.3-staging.6",
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": "2.5.3-staging.1",
24
+ "@gem-sdk/core": "2.5.3-staging.5",
25
25
  "@gem-sdk/styles": "2.4.8",
26
26
  "@types/react-transition-group": "^4.4.5"
27
27
  },