@micromag/screen-urbania-recommendation 0.4.71 → 0.4.76

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 (3) hide show
  1. package/es/index.d.ts +2 -2
  2. package/es/index.js +396 -457
  3. package/package.json +19 -18
package/es/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ForwardedRef } from 'react';
3
- import { HeadingElement, VisualElement, TextElement, Header, Footer, BackgroundElement, BoxStyle, Color } from '@micromag/core';
3
+ import { HeadingElement, VisualElement, TextElement, Header, Footer, BackgroundElement, BoxStyle, Color, MediaElement } from '@micromag/core';
4
4
 
5
5
  interface UrbaniaRecommendationProps {
6
6
  layout?: string | null;
@@ -23,7 +23,7 @@ interface UrbaniaRecommendationProps {
23
23
  current?: boolean;
24
24
  active?: boolean;
25
25
  preload?: boolean;
26
- mediaRef?: ForwardedRef<HTMLMediaElement> | null;
26
+ mediaRef?: ForwardedRef<MediaElement> | null;
27
27
  className?: string | null;
28
28
  }
29
29
  declare function UrbaniaRecommendation({ layout, category, visual, title, date, location, description, sponsor, spacing, header, footer, background, cardBoxStyle, lineColor, withoutZoom, current, active, preload, mediaRef: customMediaRef, className, }: UrbaniaRecommendationProps): react_jsx_runtime.JSX.Element;
package/es/index.js CHANGED
@@ -1,7 +1,4 @@
1
1
  import { useIntl, FormattedMessage, defineMessage } from 'react-intl';
2
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
2
  import classNames from 'classnames';
6
3
  import { useState, useMemo, useEffect, useCallback } from 'react';
7
4
  import { Close, ScreenElement, MuteIcon, FullscreenIcon, PlaceholderImage, PlaceholderText, PlaceholderTitle } from '@micromag/core/components';
@@ -22,187 +19,156 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
22
19
 
23
20
  var styles = {"container":"micromag-screen-urbania-recommendation-container","background":"micromag-screen-urbania-recommendation-background","backgroundTextContainer":"micromag-screen-urbania-recommendation-backgroundTextContainer","backgroundText":"micromag-screen-urbania-recommendation-backgroundText","hidden":"micromag-screen-urbania-recommendation-hidden","didAnimate":"micromag-screen-urbania-recommendation-didAnimate","animateFromBottom":"micromag-screen-urbania-recommendation-animateFromBottom","animateFromTop":"micromag-screen-urbania-recommendation-animateFromTop","content":"micromag-screen-urbania-recommendation-content","scroll":"micromag-screen-urbania-recommendation-scroll","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","footer":"micromag-screen-urbania-recommendation-footer","disabled":"micromag-screen-urbania-recommendation-disabled","close":"micromag-screen-urbania-recommendation-close","closeIcon":"micromag-screen-urbania-recommendation-closeIcon","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","modalOpened":"micromag-screen-urbania-recommendation-modalOpened","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","visualButton":"micromag-screen-urbania-recommendation-visualButton","transitioning":"micromag-screen-urbania-recommendation-transitioning","iconContainer":"micromag-screen-urbania-recommendation-iconContainer","icon":"micromag-screen-urbania-recommendation-icon","text":"micromag-screen-urbania-recommendation-text","categoryContainer":"micromag-screen-urbania-recommendation-categoryContainer","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","withoutCategory":"micromag-screen-urbania-recommendation-withoutCategory","title":"micromag-screen-urbania-recommendation-title","description":"micromag-screen-urbania-recommendation-description","location":"micromag-screen-urbania-recommendation-location","date":"micromag-screen-urbania-recommendation-date","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","border":"micromag-screen-urbania-recommendation-border","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
24
21
 
25
- function UrbaniaRecommendation(_ref) {
26
- var _ref$layout = _ref.layout,
27
- layout = _ref$layout === void 0 ? null : _ref$layout,
28
- _ref$category = _ref.category,
29
- category = _ref$category === void 0 ? null : _ref$category,
30
- _ref$visual = _ref.visual,
31
- visual = _ref$visual === void 0 ? null : _ref$visual,
32
- _ref$title = _ref.title,
33
- title = _ref$title === void 0 ? null : _ref$title,
34
- _ref$date = _ref.date,
35
- date = _ref$date === void 0 ? null : _ref$date,
36
- _ref$location = _ref.location,
37
- location = _ref$location === void 0 ? null : _ref$location,
38
- _ref$description = _ref.description,
39
- description = _ref$description === void 0 ? null : _ref$description,
40
- _ref$sponsor = _ref.sponsor,
41
- sponsor = _ref$sponsor === void 0 ? null : _ref$sponsor,
42
- _ref$spacing = _ref.spacing,
43
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
44
- _ref$header = _ref.header,
45
- header = _ref$header === void 0 ? null : _ref$header,
46
- _ref$footer = _ref.footer,
47
- footer = _ref$footer === void 0 ? null : _ref$footer,
48
- _ref$background = _ref.background,
49
- background = _ref$background === void 0 ? null : _ref$background,
50
- _ref$cardBoxStyle = _ref.cardBoxStyle,
51
- cardBoxStyle = _ref$cardBoxStyle === void 0 ? null : _ref$cardBoxStyle,
52
- _ref$lineColor = _ref.lineColor,
53
- lineColor = _ref$lineColor === void 0 ? null : _ref$lineColor,
54
- _ref$withoutZoom = _ref.withoutZoom,
55
- withoutZoom = _ref$withoutZoom === void 0 ? false : _ref$withoutZoom,
56
- _ref$current = _ref.current,
57
- current = _ref$current === void 0 ? true : _ref$current,
58
- _ref$active = _ref.active,
59
- active = _ref$active === void 0 ? true : _ref$active,
60
- _ref$preload = _ref.preload,
61
- preload = _ref$preload === void 0 ? true : _ref$preload,
62
- _ref$mediaRef = _ref.mediaRef,
63
- customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
64
- _ref$className = _ref.className,
65
- className = _ref$className === void 0 ? null : _ref$className;
66
- var intl = useIntl();
67
- var trackScreenEvent = useTrackScreenEvent();
68
- var _useScreenSize = useScreenSize(),
69
- width = _useScreenSize.width,
70
- height = _useScreenSize.height,
71
- resolution = _useScreenSize.resolution;
72
- var _useViewerContext = useViewerContext(),
73
- viewerTopHeight = _useViewerContext.topHeight,
74
- viewerBottomHeight = _useViewerContext.bottomHeight,
75
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
76
- var _useViewerWebView = useViewerWebView(),
77
- openWebView = _useViewerWebView.open;
78
- var _usePlaybackContext = usePlaybackContext(),
79
- playing = _usePlaybackContext.playing,
80
- setPlaying = _usePlaybackContext.setPlaying,
81
- muted = _usePlaybackContext.muted,
82
- setMuted = _usePlaybackContext.setMuted;
83
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
84
- mediaRef = _usePlaybackMediaRef.ref,
85
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
86
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
87
- var _useViewerInteraction = useViewerInteraction(),
88
- enableInteraction = _useViewerInteraction.enableInteraction,
89
- disableInteraction = _useViewerInteraction.disableInteraction;
90
- var _useScreenRenderConte = useScreenRenderContext(),
91
- isView = _useScreenRenderConte.isView,
92
- isPreview = _useScreenRenderConte.isPreview,
93
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
94
- isEdit = _useScreenRenderConte.isEdit,
95
- isStatic = _useScreenRenderConte.isStatic;
96
- var animateBackground = current && !isPlaceholder && !isStatic && !isPreview && !isEdit;
97
- var _useState = useState(animateBackground),
98
- _useState2 = _slicedToArray(_useState, 2),
99
- backgroundAnimationStarted = _useState2[0],
100
- setBackgroundAnimationStarted = _useState2[1];
101
- var _useState3 = useState(false),
102
- _useState4 = _slicedToArray(_useState3, 2),
103
- didAnimate = _useState4[0],
104
- setDidAnimate = _useState4[1];
105
- var _ref2 = visual || {},
106
- _ref2$image = _ref2.image,
107
- image = _ref2$image === void 0 ? null : _ref2$image; // note: image can be a video
108
- var _ref3 = image || {},
109
- _ref3$type = _ref3.type,
110
- type = _ref3$type === void 0 ? null : _ref3$type,
111
- _ref3$metadata = _ref3.metadata,
112
- videoMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata;
113
- var _ref4 = videoMetadata || {},
114
- _ref4$width = _ref4.width,
115
- videoWidth = _ref4$width === void 0 ? 0 : _ref4$width,
116
- _ref4$height = _ref4.height,
117
- videoHeight = _ref4$height === void 0 ? 0 : _ref4$height;
118
- var hasVisual = image !== null;
119
- var isVideo = type === 'video';
120
- var isVideoLandscape = hasVisual && isVideo && videoWidth > videoHeight;
121
- var hasCategory = isTextFilled(category);
122
- var hasTitle = isTextFilled(title);
123
- var hasDate = isTextFilled(date);
124
- var hasLocation = isTextFilled(location);
125
- var hasDescription = isTextFilled(description);
126
- var hasSponsor = isTextFilled(sponsor);
127
- var hasTextCard = hasCategory || hasTitle || hasDate || hasLocation || hasDescription || hasSponsor;
128
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
129
- var videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
130
- var mediaShouldLoad = current || preload;
131
- var scrollingDisabled = !isView && !isEdit || !current;
132
- var hasHeader = isHeaderFilled(header);
133
- var hasFooter = isFooterFilled(footer);
134
- var footerProps = getFooterProps(footer, {
135
- isView: isView,
136
- current: current,
137
- openWebView: openWebView,
138
- isPreview: isPreview
22
+ function UrbaniaRecommendation({
23
+ layout = null,
24
+ category = null,
25
+ visual = null,
26
+ title = null,
27
+ date = null,
28
+ location = null,
29
+ description = null,
30
+ sponsor = null,
31
+ spacing = 20,
32
+ header = null,
33
+ footer = null,
34
+ background = null,
35
+ cardBoxStyle = null,
36
+ lineColor = null,
37
+ withoutZoom = false,
38
+ current = true,
39
+ active = true,
40
+ preload = true,
41
+ mediaRef: customMediaRef = null,
42
+ className = null
43
+ }) {
44
+ const intl = useIntl();
45
+ const trackScreenEvent = useTrackScreenEvent();
46
+ const {
47
+ width,
48
+ height,
49
+ resolution
50
+ } = useScreenSize();
51
+ const {
52
+ topHeight: viewerTopHeight,
53
+ bottomHeight: viewerBottomHeight,
54
+ bottomSidesWidth: viewerBottomSidesWidth
55
+ } = useViewerContext();
56
+ const {
57
+ open: openWebView
58
+ } = useViewerWebView();
59
+ const {
60
+ playing,
61
+ setPlaying,
62
+ muted,
63
+ setMuted
64
+ } = usePlaybackContext();
65
+ const {
66
+ ref: mediaRef,
67
+ isCurrent: isCurrentMedia = false
68
+ } = usePlaybackMediaRef(current, true);
69
+ const {
70
+ enableInteraction,
71
+ disableInteraction
72
+ } = useViewerInteraction();
73
+ const {
74
+ isView,
75
+ isPreview,
76
+ isPlaceholder,
77
+ isEdit,
78
+ isStatic
79
+ } = useScreenRenderContext();
80
+ const animateBackground = current && !isPlaceholder && !isStatic && !isPreview && !isEdit;
81
+ const [backgroundAnimationStarted, setBackgroundAnimationStarted] = useState(animateBackground);
82
+ const [didAnimate, setDidAnimate] = useState(false);
83
+ const {
84
+ image = null
85
+ } = visual || {}; // note: image can be a video
86
+ const {
87
+ type = null,
88
+ metadata: videoMetadata = null
89
+ } = image || {};
90
+ const {
91
+ width: videoWidth = 0,
92
+ height: videoHeight = 0
93
+ } = videoMetadata || {};
94
+ const hasVisual = image !== null;
95
+ const isVideo = type === 'video';
96
+ const isVideoLandscape = hasVisual && isVideo && videoWidth > videoHeight;
97
+ const hasCategory = isTextFilled(category);
98
+ const hasTitle = isTextFilled(title);
99
+ const hasDate = isTextFilled(date);
100
+ const hasLocation = isTextFilled(location);
101
+ const hasDescription = isTextFilled(description);
102
+ const hasSponsor = isTextFilled(sponsor);
103
+ const hasTextCard = hasCategory || hasTitle || hasDate || hasLocation || hasDescription || hasSponsor;
104
+ const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
105
+ const videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
106
+ const mediaShouldLoad = current || preload;
107
+ const scrollingDisabled = !isView && !isEdit || !current;
108
+ const hasHeader = isHeaderFilled(header);
109
+ const hasFooter = isFooterFilled(footer);
110
+ const footerProps = getFooterProps(footer, {
111
+ isView,
112
+ current,
113
+ openWebView,
114
+ isPreview
139
115
  });
140
- var _useState5 = useState(false),
141
- _useState6 = _slicedToArray(_useState5, 2),
142
- scrolledBottom = _useState6[0],
143
- setScrolledBottom = _useState6[1];
144
- var _useResizeObserver = useResizeObserver(),
145
- textContainerRef = _useResizeObserver.ref,
146
- _useResizeObserver$en = _useResizeObserver.entry.contentRect,
147
- textContainerRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
148
- var _ref5 = textContainerRect || {},
149
- _ref5$width = _ref5.width,
150
- textContainerWidth = _ref5$width === void 0 ? 0 : _ref5$width,
151
- _ref5$height = _ref5.height,
152
- textContainerHeight = _ref5$height === void 0 ? 0 : _ref5$height;
153
- var _useState7 = useState(false),
154
- _useState8 = _slicedToArray(_useState7, 2),
155
- visualModalTransitioning = _useState8[0],
156
- setVisualModalTransitioning = _useState8[1];
157
- var _useState9 = useState(false),
158
- _useState0 = _slicedToArray(_useState9, 2),
159
- visualModalOpened = _useState0[0],
160
- setVisualModalOpened = _useState0[1];
161
- var visualModalClosed = !visualModalTransitioning && !visualModalOpened;
162
- var _ref6 = background || {},
163
- _ref6$text = _ref6.text,
164
- backgroundText = _ref6$text === void 0 ? null : _ref6$text;
165
- var _ref7 = backgroundText || {},
166
- _ref7$body = _ref7.body,
167
- backgroundTextBody = _ref7$body === void 0 ? null : _ref7$body,
168
- backgroundTextStyle = _ref7.textStyle;
169
- var finalBackgroundText = useMemo(function () {
116
+ const [scrolledBottom, setScrolledBottom] = useState(false);
117
+ const {
118
+ ref: textContainerRef,
119
+ entry: {
120
+ contentRect: textContainerRect = null
121
+ }
122
+ } = useResizeObserver();
123
+ const {
124
+ width: textContainerWidth = 0,
125
+ height: textContainerHeight = 0
126
+ } = textContainerRect || {};
127
+ const [visualModalTransitioning, setVisualModalTransitioning] = useState(false);
128
+ const [visualModalOpened, setVisualModalOpened] = useState(false);
129
+ const visualModalClosed = !visualModalTransitioning && !visualModalOpened;
130
+ const {
131
+ text: backgroundText = null
132
+ } = background || {};
133
+ const {
134
+ body: backgroundTextBody = null,
135
+ textStyle: backgroundTextStyle
136
+ } = backgroundText || {};
137
+ const finalBackgroundText = useMemo(() => {
170
138
  function distributeTextEqually(text) {
171
- var words = text !== null ? text.split(' ') : [];
172
- var numRows = 4;
139
+ const words = text !== null ? text.split(' ') : [];
140
+ const numRows = 4;
173
141
  if (words.length < numRows / 2) {
174
142
  return Array(numRows).fill(text);
175
143
  }
176
- var halfNumWords = Math.ceil(words.length / 2);
177
- var firstHalf = words.slice(0, halfNumWords).join(' ');
178
- var secondHalf = words.slice(halfNumWords).join(' ');
144
+ const halfNumWords = Math.ceil(words.length / 2);
145
+ const firstHalf = words.slice(0, halfNumWords).join(' ');
146
+ const secondHalf = words.slice(halfNumWords).join(' ');
179
147
  return [firstHalf, secondHalf, firstHalf, secondHalf];
180
148
  }
181
- var textArray = distributeTextEqually(backgroundTextBody);
149
+ const textArray = distributeTextEqually(backgroundTextBody);
182
150
 
183
151
  // @TODO: move container div here to avoid double map
184
- var textElements = (textArray || []).map(function (line) {
185
- return /*#__PURE__*/jsx("span", {
186
- children: line
187
- });
188
- });
152
+ const textElements = (textArray || []).map(line => /*#__PURE__*/jsx("span", {
153
+ children: line
154
+ }));
189
155
  return textElements;
190
156
  }, [backgroundTextBody]);
191
157
 
192
158
  // intro animation
193
- useEffect(function () {
194
- var id = null;
159
+ useEffect(() => {
160
+ let id = null;
195
161
  if (backgroundAnimationStarted) {
196
- id = setTimeout(function () {
162
+ id = setTimeout(() => {
197
163
  setBackgroundAnimationStarted(false);
198
164
  setDidAnimate(true);
199
165
  }, 1600);
200
166
  }
201
- return function () {
167
+ return () => {
202
168
  clearTimeout(id);
203
169
  };
204
170
  }, [backgroundAnimationStarted, animateBackground, setDidAnimate, setBackgroundAnimationStarted]);
205
- useEffect(function () {
171
+ useEffect(() => {
206
172
  if (isView && !isStatic && current) {
207
173
  setBackgroundAnimationStarted(true);
208
174
  } else {
@@ -211,31 +177,31 @@ function UrbaniaRecommendation(_ref) {
211
177
  }, [isView, current, setBackgroundAnimationStarted]);
212
178
 
213
179
  // scroll events
214
- var onScrolledBottom = useCallback(function (_ref8) {
215
- var initial = _ref8.initial;
180
+ const onScrolledBottom = useCallback(({
181
+ initial
182
+ }) => {
216
183
  if (initial) {
217
184
  trackScreenEvent('scroll', 'Screen');
218
185
  }
219
186
  setScrolledBottom(true);
220
187
  }, [trackScreenEvent]);
221
- var onScrolledNotBottom = useCallback(function () {
188
+ const onScrolledNotBottom = useCallback(() => {
222
189
  setScrolledBottom(false);
223
190
  }, [setScrolledBottom]);
224
- var onScrolledTrigger = useCallback(function () {
225
- var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
191
+ const onScrolledTrigger = useCallback((trigger = null) => {
226
192
  if (trigger !== null) {
227
- var scrollPercent = Math.round(trigger * 100);
193
+ const scrollPercent = Math.round(trigger * 100);
228
194
  trackScreenEvent('scroll', scrollPercent, {
229
- scrollPercent: scrollPercent
195
+ scrollPercent
230
196
  });
231
197
  }
232
198
  }, [trackScreenEvent]);
233
199
 
234
200
  // modal
235
- useEffect(function () {
236
- var id = null;
201
+ useEffect(() => {
202
+ let id_0 = null;
237
203
  if (visualModalTransitioning) {
238
- id = setTimeout(function () {
204
+ id_0 = setTimeout(() => {
239
205
  setVisualModalTransitioning(false);
240
206
  setVisualModalOpened(true);
241
207
  }, 400);
@@ -243,11 +209,11 @@ function UrbaniaRecommendation(_ref) {
243
209
  if (!current) {
244
210
  setVisualModalOpened(false);
245
211
  }
246
- return function () {
247
- clearTimeout(id);
212
+ return () => {
213
+ clearTimeout(id_0);
248
214
  };
249
215
  }, [visualModalTransitioning, setVisualModalTransitioning, current]);
250
- var onClickVisual = useCallback(function () {
216
+ const onClickVisual = useCallback(() => {
251
217
  if (!visualModalOpened) {
252
218
  setVisualModalTransitioning(true);
253
219
  }
@@ -255,21 +221,21 @@ function UrbaniaRecommendation(_ref) {
255
221
  setMuted(false);
256
222
  }
257
223
  }, [setVisualModalOpened]);
258
- var onCloseModal = useCallback(function () {
224
+ const onCloseModal = useCallback(() => {
259
225
  if (visualModalTransitioning) {
260
226
  setVisualModalTransitioning(false);
261
227
  }
262
228
  setVisualModalOpened(false);
263
229
  }, [setVisualModalOpened]);
264
- useEffect(function () {
230
+ useEffect(() => {
265
231
  if (visualModalOpened) {
266
232
  disableInteraction();
267
233
  } else {
268
234
  enableInteraction();
269
235
  }
270
236
  }, [current, visualModalOpened]);
271
- useEffect(function () {
272
- var keyup = function keyup(e) {
237
+ useEffect(() => {
238
+ const keyup = e => {
273
239
  if (e.key === 'Escape') {
274
240
  if (visualModalOpened) {
275
241
  onCloseModal();
@@ -277,143 +243,143 @@ function UrbaniaRecommendation(_ref) {
277
243
  }
278
244
  };
279
245
  document.addEventListener('keyup', keyup);
280
- return function () {
246
+ return () => {
281
247
  document.removeEventListener('keyup', keyup);
282
248
  };
283
249
  }, [visualModalOpened, onCloseModal]);
284
250
 
285
251
  // Modal video
286
252
 
287
- useEffect(function () {
253
+ useEffect(() => {
288
254
  if (current && !backgroundAnimationStarted) {
289
255
  setPlaying(true);
290
256
  }
291
257
  }, [current, backgroundAnimationStarted]);
292
258
 
293
259
  // Default font weights ++ for urbania styles
294
- var _useMemo = useMemo(function () {
295
- var _ref9 = title || {},
296
- _ref9$textStyle = _ref9.textStyle,
297
- finalTitleTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
298
- var _ref0 = finalTitleTextStyle || {},
299
- _ref0$color = _ref0.color,
300
- titleStyleColor = _ref0$color === void 0 ? null : _ref0$color,
301
- _ref0$fontFamily = _ref0.fontFamily,
302
- titleFontFamily = _ref0$fontFamily === void 0 ? null : _ref0$fontFamily,
303
- _ref0$fontStyle = _ref0.fontStyle,
304
- titleFontStyles = _ref0$fontStyle === void 0 ? null : _ref0$fontStyle;
305
- var finalTitleColor = getColorAsString(titleStyleColor);
306
- var finalTitleFontWeight = titleFontFamily === null ? 700 : null;
307
- var finalTextTransform = titleFontFamily === null ? 'uppercase' : null;
308
- var finalTitleFontStyle = titleFontFamily === null ? _objectSpread(_objectSpread({}, titleFontStyles), {}, {
309
- transform: 'uppercase'
310
- }) : titleFontStyles;
311
- var _ref1 = category || {},
312
- _ref1$textStyle = _ref1.textStyle,
313
- finalCategoryTextStyle = _ref1$textStyle === void 0 ? null : _ref1$textStyle;
314
- var _ref10 = finalCategoryTextStyle || {},
315
- _ref10$fontFamily = _ref10.fontFamily,
316
- categoryFontFamily = _ref10$fontFamily === void 0 ? null : _ref10$fontFamily,
317
- _ref10$fontStyle = _ref10.fontStyle,
318
- categoryFontStyles = _ref10$fontStyle === void 0 ? null : _ref10$fontStyle;
319
- var finalCategoryFontWeight = categoryFontFamily === null ? 900 : null;
320
- var finalCategoryFontStyle = categoryFontFamily === null ? _objectSpread(_objectSpread({}, categoryFontStyles), {}, {
321
- transform: 'uppercase'
322
- }) : categoryFontStyles;
323
- var _ref11 = description || {},
324
- _ref11$textStyle = _ref11.textStyle,
325
- finalDescriptionTextStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle;
326
- var _ref12 = finalDescriptionTextStyle || {},
327
- _ref12$fontFamily = _ref12.fontFamily,
328
- descriptionFontFamily = _ref12$fontFamily === void 0 ? null : _ref12$fontFamily;
329
- var finalDescriptionFontWeight = descriptionFontFamily === null ? 300 : null;
330
- var _ref13 = date || {},
331
- _ref13$textStyle = _ref13.textStyle,
332
- finalDateTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle;
333
- var _ref14 = finalDateTextStyle || {},
334
- _ref14$fontFamily = _ref14.fontFamily,
335
- dateFontFamily = _ref14$fontFamily === void 0 ? null : _ref14$fontFamily,
336
- _ref14$fontStyle = _ref14.fontStyle,
337
- dateFontStyles = _ref14$fontStyle === void 0 ? null : _ref14$fontStyle;
338
- var finalDateFontStyle = dateFontFamily === null ? _objectSpread(_objectSpread({}, dateFontStyles), {}, {
339
- transform: 'uppercase'
340
- }) : dateFontStyles;
341
- var _ref15 = location || {},
342
- _ref15$textStyle = _ref15.textStyle,
343
- finalLocationTextStyle = _ref15$textStyle === void 0 ? null : _ref15$textStyle;
344
- var _ref16 = finalLocationTextStyle || {},
345
- _ref16$fontFamily = _ref16.fontFamily,
346
- locationFontFamily = _ref16$fontFamily === void 0 ? null : _ref16$fontFamily,
347
- _ref16$fontStyle = _ref16.fontStyle,
348
- locationFontStyles = _ref16$fontStyle === void 0 ? null : _ref16$fontStyle;
349
- var finalLocationFontStyle = locationFontFamily === null ? _objectSpread(_objectSpread({}, locationFontStyles), {}, {
350
- transform: 'uppercase'
351
- }) : locationFontStyles;
352
- var _ref17 = sponsor || {},
353
- _ref17$textStyle = _ref17.textStyle,
354
- finalSponsorTextStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
355
- var _ref18 = finalSponsorTextStyle || {},
356
- _ref18$fontFamily = _ref18.fontFamily,
357
- sponsorFontFamily = _ref18$fontFamily === void 0 ? null : _ref18$fontFamily,
358
- _ref18$fontStyle = _ref18.fontStyle,
359
- sponsorFontStyles = _ref18$fontStyle === void 0 ? null : _ref18$fontStyle;
360
- var finalSponsorFontStyle = sponsorFontFamily === null ? _objectSpread(_objectSpread({}, sponsorFontStyles), {}, {
361
- transform: 'uppercase'
362
- }) : sponsorFontStyles;
363
- var _ref19 = backgroundTextStyle || {},
364
- _ref19$fontFamily = _ref19.fontFamily,
365
- backgroundFontFamily = _ref19$fontFamily === void 0 ? null : _ref19$fontFamily,
366
- _ref19$fontStyle = _ref19.fontStyle,
367
- backgroundFontStyles = _ref19$fontStyle === void 0 ? null : _ref19$fontStyle;
368
- var finalBackgroundFontStyle = backgroundFontFamily === null ? _objectSpread(_objectSpread({}, backgroundFontStyles), {}, {
369
- transform: 'uppercase'
370
- }) : backgroundFontStyles;
371
- return {
372
- defaultTextTransform: finalTextTransform,
373
- titleColor: finalTitleColor,
374
- titleTextStyle: finalTitleTextStyle,
375
- titleFontWeight: finalTitleFontWeight,
376
- titleFontStyle: finalTitleFontStyle,
377
- categoryTextStyle: finalCategoryTextStyle,
378
- categoryFontWeight: finalCategoryFontWeight,
379
- categoryFontStyle: finalCategoryFontStyle,
380
- descriptionTextStyle: finalDescriptionTextStyle,
381
- descriptionFontWeight: finalDescriptionFontWeight,
382
- dateTextStyle: finalDateTextStyle,
383
- dateFontStyle: finalDateFontStyle,
384
- locationTextStyle: finalLocationTextStyle,
385
- locationFontStyle: finalLocationFontStyle,
386
- sponsorTextStyle: finalSponsorTextStyle,
387
- sponsorFontStyle: finalSponsorFontStyle,
388
- backgroundFontStyle: finalBackgroundFontStyle
389
- };
390
- }, [title, category, description, date, location, sponsor, backgroundTextStyle]),
391
- titleTextStyle = _useMemo.titleTextStyle,
392
- titleColor = _useMemo.titleColor,
393
- titleFontWeight = _useMemo.titleFontWeight,
394
- titleFontStyle = _useMemo.titleFontStyle,
395
- categoryTextStyle = _useMemo.categoryTextStyle,
396
- categoryFontWeight = _useMemo.categoryFontWeight,
397
- categoryFontStyle = _useMemo.categoryFontStyle,
398
- descriptionTextStyle = _useMemo.descriptionTextStyle,
399
- descriptionFontWeight = _useMemo.descriptionFontWeight,
400
- dateTextStyle = _useMemo.dateTextStyle,
401
- dateFontStyle = _useMemo.dateFontStyle,
402
- locationTextStyle = _useMemo.locationTextStyle,
403
- locationFontStyle = _useMemo.locationFontStyle,
404
- sponsorTextStyle = _useMemo.sponsorTextStyle,
405
- sponsorFontStyle = _useMemo.sponsorFontStyle,
406
- backgroundFontStyle = _useMemo.backgroundFontStyle;
407
- var layoutStyle = !isPlaceholder ? getStyleFromBox(cardBoxStyle) : null;
408
- var _ref20 = layoutStyle || {},
409
- _ref20$borderRadius = _ref20.borderRadius,
410
- layoutBorderRadius = _ref20$borderRadius === void 0 ? null : _ref20$borderRadius;
411
- var withoutCorners = layoutBorderRadius === 0;
412
- var finalBorderColor = useMemo(function () {
413
- return lineColor !== null ? getColorAsString(lineColor) : titleColor;
414
- }, [lineColor, titleColor]);
260
+ const {
261
+ titleTextStyle,
262
+ titleColor,
263
+ titleFontWeight,
264
+ titleFontStyle,
265
+ categoryTextStyle,
266
+ categoryFontWeight,
267
+ categoryFontStyle,
268
+ descriptionTextStyle,
269
+ descriptionFontWeight,
270
+ dateTextStyle,
271
+ dateFontStyle,
272
+ locationTextStyle,
273
+ locationFontStyle,
274
+ sponsorTextStyle,
275
+ sponsorFontStyle,
276
+ backgroundFontStyle
277
+ } = useMemo(() => {
278
+ const {
279
+ textStyle: finalTitleTextStyle = null
280
+ } = title || {};
281
+ const {
282
+ color: titleStyleColor = null,
283
+ fontFamily: titleFontFamily = null,
284
+ fontStyle: titleFontStyles = null
285
+ } = finalTitleTextStyle || {};
286
+ const finalTitleColor = getColorAsString(titleStyleColor);
287
+ const finalTitleFontWeight = titleFontFamily === null ? 700 : null;
288
+ const finalTextTransform = titleFontFamily === null ? 'uppercase' : null;
289
+ const finalTitleFontStyle = titleFontFamily === null ? {
290
+ ...titleFontStyles,
291
+ transform: 'uppercase'
292
+ } : titleFontStyles;
293
+ const {
294
+ textStyle: finalCategoryTextStyle = null
295
+ } = category || {};
296
+ const {
297
+ fontFamily: categoryFontFamily = null,
298
+ fontStyle: categoryFontStyles = null
299
+ } = finalCategoryTextStyle || {};
300
+ const finalCategoryFontWeight = categoryFontFamily === null ? 900 : null;
301
+ const finalCategoryFontStyle = categoryFontFamily === null ? {
302
+ ...categoryFontStyles,
303
+ transform: 'uppercase'
304
+ } : categoryFontStyles;
305
+ const {
306
+ textStyle: finalDescriptionTextStyle = null
307
+ } = description || {};
308
+ const {
309
+ fontFamily: descriptionFontFamily = null
310
+ } = finalDescriptionTextStyle || {};
311
+ const finalDescriptionFontWeight = descriptionFontFamily === null ? 300 : null;
312
+ const {
313
+ textStyle: finalDateTextStyle = null
314
+ } = date || {};
315
+ const {
316
+ fontFamily: dateFontFamily = null,
317
+ fontStyle: dateFontStyles = null
318
+ } = finalDateTextStyle || {};
319
+ const finalDateFontStyle = dateFontFamily === null ? {
320
+ ...dateFontStyles,
321
+ transform: 'uppercase'
322
+ } : dateFontStyles;
323
+ const {
324
+ textStyle: finalLocationTextStyle = null
325
+ } = location || {};
326
+ const {
327
+ fontFamily: locationFontFamily = null,
328
+ fontStyle: locationFontStyles = null
329
+ } = finalLocationTextStyle || {};
330
+ const finalLocationFontStyle = locationFontFamily === null ? {
331
+ ...locationFontStyles,
332
+ transform: 'uppercase'
333
+ } : locationFontStyles;
334
+ const {
335
+ textStyle: finalSponsorTextStyle = null
336
+ } = sponsor || {};
337
+ const {
338
+ fontFamily: sponsorFontFamily = null,
339
+ fontStyle: sponsorFontStyles = null
340
+ } = finalSponsorTextStyle || {};
341
+ const finalSponsorFontStyle = sponsorFontFamily === null ? {
342
+ ...sponsorFontStyles,
343
+ transform: 'uppercase'
344
+ } : sponsorFontStyles;
345
+ const {
346
+ fontFamily: backgroundFontFamily = null,
347
+ fontStyle: backgroundFontStyles = null
348
+ } = backgroundTextStyle || {};
349
+ const finalBackgroundFontStyle = backgroundFontFamily === null ? {
350
+ ...backgroundFontStyles,
351
+ transform: 'uppercase'
352
+ } : backgroundFontStyles;
353
+ return {
354
+ defaultTextTransform: finalTextTransform,
355
+ titleColor: finalTitleColor,
356
+ titleTextStyle: finalTitleTextStyle,
357
+ titleFontWeight: finalTitleFontWeight,
358
+ titleFontStyle: finalTitleFontStyle,
359
+ categoryTextStyle: finalCategoryTextStyle,
360
+ categoryFontWeight: finalCategoryFontWeight,
361
+ categoryFontStyle: finalCategoryFontStyle,
362
+ descriptionTextStyle: finalDescriptionTextStyle,
363
+ descriptionFontWeight: finalDescriptionFontWeight,
364
+ dateTextStyle: finalDateTextStyle,
365
+ dateFontStyle: finalDateFontStyle,
366
+ locationTextStyle: finalLocationTextStyle,
367
+ locationFontStyle: finalLocationFontStyle,
368
+ sponsorTextStyle: finalSponsorTextStyle,
369
+ sponsorFontStyle: finalSponsorFontStyle,
370
+ backgroundFontStyle: finalBackgroundFontStyle
371
+ };
372
+ }, [title, category, description, date, location, sponsor, backgroundTextStyle]);
373
+ const layoutStyle = !isPlaceholder ? getStyleFromBox(cardBoxStyle) : null;
374
+ const {
375
+ borderRadius: layoutBorderRadius = null
376
+ } = layoutStyle || {};
377
+ const withoutCorners = layoutBorderRadius === 0;
378
+ const finalBorderColor = useMemo(() => lineColor !== null ? getColorAsString(lineColor) : titleColor, [lineColor, titleColor]);
415
379
  return /*#__PURE__*/jsxs("div", {
416
- className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
380
+ className: classNames([styles.container, className, {
381
+ [styles.isPlaceholder]: isPlaceholder
382
+ }]),
417
383
  "data-screen-ready": true,
418
384
  children: [/*#__PURE__*/jsx(Container, {
419
385
  width: width,
@@ -445,7 +411,9 @@ function UrbaniaRecommendation(_ref) {
445
411
  paddingBottom: spacing
446
412
  },
447
413
  className: classNames([styles.headerContainer]),
448
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
414
+ children: /*#__PURE__*/jsx(Header, {
415
+ ...header
416
+ })
449
417
  }, "header") : null, !isPlaceholder ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, visualModalOpened ? /*#__PURE__*/jsx(Button, {
450
418
  className: styles.close,
451
419
  onClick: onCloseModal,
@@ -453,12 +421,23 @@ function UrbaniaRecommendation(_ref) {
453
421
  className: styles.closeIcon
454
422
  })
455
423
  }) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/jsxs(Container, {
456
- className: classNames([styles.textCard, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.visualBottom, layout === 'bottom'), styles.appear, backgroundAnimationStarted), styles.modalOpened, visualModalTransitioning || visualModalOpened), styles.hidden, !current && isView && !isPreview)]),
457
- style: _objectSpread(_objectSpread({}, layoutStyle), withoutCorners ? {
458
- borderRadius: 0
459
- } : null),
424
+ className: classNames([styles.textCard, {
425
+ [styles.isPlaceholder]: isPlaceholder,
426
+ [styles.visualBottom]: layout === 'bottom',
427
+ [styles.appear]: backgroundAnimationStarted,
428
+ [styles.modalOpened]: visualModalTransitioning || visualModalOpened,
429
+ [styles.hidden]: !current && isView && !isPreview
430
+ }]),
431
+ style: {
432
+ ...layoutStyle,
433
+ ...(withoutCorners ? {
434
+ borderRadius: 0
435
+ } : null)
436
+ },
460
437
  children: [/*#__PURE__*/jsxs("div", {
461
- className: classNames([styles.visualContainer, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
438
+ className: classNames([styles.visualContainer, {
439
+ [styles.modalOpened]: visualModalTransitioning || visualModalOpened
440
+ }]),
462
441
  style: layoutBorderRadius !== null ? layout === 'bottom' ? {
463
442
  borderBottomLeftRadius: layoutBorderRadius,
464
443
  borderBottomRightRadius: layoutBorderRadius
@@ -472,37 +451,36 @@ function UrbaniaRecommendation(_ref) {
472
451
  }),
473
452
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
474
453
  id: "JzSBzL",
475
- defaultMessage: [{
476
- "type": 0,
477
- "value": "Visual"
478
- }]
454
+ defaultMessage: "Visual"
479
455
  }),
480
456
  emptyClassName: classNames([styles.empty, styles.emptyVisual]),
481
457
  isEmpty: !hasVisual,
482
458
  children: hasVisual ? /*#__PURE__*/jsx("div", {
483
- className: classNames([styles.visualWrapper, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
459
+ className: classNames([styles.visualWrapper, {
460
+ [styles.modalOpened]: visualModalTransitioning || visualModalOpened
461
+ }]),
484
462
  style: visualModalTransitioning || visualModalOpened ? {
485
- width: width,
486
- height: height
463
+ width,
464
+ height
487
465
  } : {
488
466
  width: textContainerWidth,
489
467
  height: 'auto'
490
468
  },
491
469
  children: /*#__PURE__*/jsxs(Button, {
492
- className: classNames([styles.visualButton, _defineProperty(_defineProperty({}, styles.transitioning, visualModalTransitioning), styles.disabled, withoutZoom)]),
470
+ className: classNames([styles.visualButton, {
471
+ [styles.transitioning]: visualModalTransitioning,
472
+ [styles.disabled]: withoutZoom
473
+ }]),
493
474
  onClick: onClickVisual,
494
475
  disabled: isPreview || backgroundAnimationStarted || visualModalOpened || withoutZoom,
495
476
  focusable: current && !isPreview && !visualModalOpened,
496
477
  "aria-label": intl.formatMessage({
497
478
  id: "XHO5Ua",
498
- defaultMessage: [{
499
- "type": 0,
500
- "value": "Expand visual"
501
- }]
479
+ defaultMessage: "Expand visual"
502
480
  }),
503
481
  "aria-pressed": visualModalOpened,
504
482
  style: {
505
- transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
483
+ transform: visualModalTransitioning ? `scale(${width / textContainerWidth})` : null
506
484
  },
507
485
  children: [isVideo ? /*#__PURE__*/jsx(Visual, {
508
486
  media: image,
@@ -525,7 +503,10 @@ function UrbaniaRecommendation(_ref) {
525
503
  active: active,
526
504
  shouldLoad: mediaShouldLoad
527
505
  }), visualModalClosed ? /*#__PURE__*/jsx("div", {
528
- className: classNames([styles.iconContainer, _defineProperty(_defineProperty({}, styles.visualBottom, layout === 'bottom'), styles.hidden, withoutZoom)]),
506
+ className: classNames([styles.iconContainer, {
507
+ [styles.visualBottom]: layout === 'bottom',
508
+ [styles.hidden]: withoutZoom
509
+ }]),
529
510
  children: isVideo ? /*#__PURE__*/jsx(MuteIcon, {
530
511
  color: "#000",
531
512
  className: styles.icon
@@ -540,13 +521,16 @@ function UrbaniaRecommendation(_ref) {
540
521
  placeholder: /*#__PURE__*/jsx(PlaceholderText, {
541
522
  className: styles.sponsorPlaceholder
542
523
  }),
543
- children: hasSponsor ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
544
- className: classNames([styles.sponsor, _defineProperty({}, styles.hasVisual, hasVisual)])
545
- }, sponsor), {}, {
546
- textStyle: _objectSpread(_objectSpread({}, sponsorTextStyle), {}, {
524
+ children: hasSponsor ? /*#__PURE__*/jsx(Text, {
525
+ className: classNames([styles.sponsor, {
526
+ [styles.hasVisual]: hasVisual
527
+ }]),
528
+ ...sponsor,
529
+ textStyle: {
530
+ ...sponsorTextStyle,
547
531
  fontStyle: sponsorFontStyle
548
- })
549
- })) : null
532
+ }
533
+ }) : null
550
534
  }, "sponsor")]
551
535
  }), /*#__PURE__*/jsxs("div", {
552
536
  ref: textContainerRef,
@@ -557,10 +541,7 @@ function UrbaniaRecommendation(_ref) {
557
541
  }),
558
542
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
559
543
  id: "I5+AHN",
560
- defaultMessage: [{
561
- "type": 0,
562
- "value": "Category"
563
- }]
544
+ defaultMessage: "Category"
564
545
  }),
565
546
  emptyClassName: styles.emptyCategory,
566
547
  isEmpty: !hasCategory,
@@ -569,38 +550,40 @@ function UrbaniaRecommendation(_ref) {
569
550
  style: {
570
551
  width: textContainerHeight
571
552
  },
572
- children: /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({
573
- className: styles.category
574
- }, category), {}, {
575
- textStyle: _objectSpread(_objectSpread({}, categoryTextStyle), {}, {
553
+ children: /*#__PURE__*/jsx(Heading, {
554
+ className: styles.category,
555
+ ...category,
556
+ textStyle: {
557
+ ...categoryTextStyle,
576
558
  fontWeight: categoryFontWeight,
577
559
  fontStyle: categoryFontStyle
578
- })
579
- }))
560
+ }
561
+ })
580
562
  }) : null
581
563
  }, "category"), /*#__PURE__*/jsxs("div", {
582
- className: classNames([styles.textContent, _defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.withoutCategory, !hasCategory)]),
564
+ className: classNames([styles.textContent, {
565
+ [styles.isPlaceholder]: isPlaceholder,
566
+ [styles.withoutCategory]: !hasCategory
567
+ }]),
583
568
  children: [/*#__PURE__*/jsx(ScreenElement, {
584
569
  placeholder: "title",
585
570
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
586
571
  id: "2c1WFV",
587
- defaultMessage: [{
588
- "type": 0,
589
- "value": "Title"
590
- }]
572
+ defaultMessage: "Title"
591
573
  }),
592
574
  emptyClassName: styles.emptyText,
593
575
  isEmpty: !hasTitle,
594
576
  children: hasTitle ? /*#__PURE__*/jsxs("div", {
595
577
  className: styles.titleContainer,
596
- children: [/*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({
597
- className: styles.title
598
- }, title), {}, {
599
- textStyle: _objectSpread(_objectSpread({}, titleTextStyle), {}, {
578
+ children: [/*#__PURE__*/jsx(Heading, {
579
+ className: styles.title,
580
+ ...title,
581
+ textStyle: {
582
+ ...titleTextStyle,
600
583
  fontWeight: titleFontWeight,
601
584
  fontStyle: titleFontStyle
602
- })
603
- })), /*#__PURE__*/jsx("hr", {
585
+ }
586
+ }), /*#__PURE__*/jsx("hr", {
604
587
  className: styles.border,
605
588
  style: {
606
589
  borderColor: finalBorderColor
@@ -612,13 +595,14 @@ function UrbaniaRecommendation(_ref) {
612
595
  className: styles.datePlaceholder
613
596
  }),
614
597
  children: hasDate ? /*#__PURE__*/jsxs(Fragment, {
615
- children: [/*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
616
- className: styles.date
617
- }, date), {}, {
618
- textStyle: _objectSpread(_objectSpread({}, dateTextStyle), {}, {
598
+ children: [/*#__PURE__*/jsx(Text, {
599
+ className: styles.date,
600
+ ...date,
601
+ textStyle: {
602
+ ...dateTextStyle,
619
603
  fontStyle: dateFontStyle
620
- })
621
- })), /*#__PURE__*/jsx("hr", {
604
+ }
605
+ }), /*#__PURE__*/jsx("hr", {
622
606
  className: styles.border,
623
607
  style: {
624
608
  borderColor: finalBorderColor
@@ -630,13 +614,14 @@ function UrbaniaRecommendation(_ref) {
630
614
  className: styles.locationPlaceholder
631
615
  }),
632
616
  children: hasLocation ? /*#__PURE__*/jsxs(Fragment, {
633
- children: [/*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
634
- className: styles.location
635
- }, location), {}, {
636
- textStyle: _objectSpread(_objectSpread({}, locationTextStyle), {}, {
617
+ children: [/*#__PURE__*/jsx(Text, {
618
+ className: styles.location,
619
+ ...location,
620
+ textStyle: {
621
+ ...locationTextStyle,
637
622
  fontStyle: locationFontStyle
638
- })
639
- })), /*#__PURE__*/jsx("hr", {
623
+ }
624
+ }), /*#__PURE__*/jsx("hr", {
640
625
  className: styles.border,
641
626
  style: {
642
627
  borderColor: finalBorderColor
@@ -649,31 +634,33 @@ function UrbaniaRecommendation(_ref) {
649
634
  }),
650
635
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
651
636
  id: "EQdIAR",
652
- defaultMessage: [{
653
- "type": 0,
654
- "value": "Description"
655
- }]
637
+ defaultMessage: "Description"
656
638
  }),
657
639
  emptyClassName: styles.emptyText,
658
640
  isEmpty: !hasDescription,
659
- children: hasDescription ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
660
- className: styles.description
661
- }, description), {}, {
662
- textStyle: _objectSpread(_objectSpread({}, descriptionTextStyle), {}, {
641
+ children: hasDescription ? /*#__PURE__*/jsx(Text, {
642
+ className: styles.description,
643
+ ...description,
644
+ textStyle: {
645
+ ...descriptionTextStyle,
663
646
  fontWeight: descriptionFontWeight
664
- })
665
- })) : null
647
+ }
648
+ }) : null
666
649
  }, "description")]
667
650
  })]
668
651
  })]
669
652
  }) : null, !isPlaceholder ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
670
- className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom && !visualModalOpened)]),
653
+ className: classNames([styles.footer, {
654
+ [styles.disabled]: !scrolledBottom && !visualModalOpened
655
+ }]),
671
656
  style: {
672
657
  paddingTop: spacing,
673
658
  paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
674
659
  paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
675
660
  },
676
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
661
+ children: /*#__PURE__*/jsx(Footer, {
662
+ ...footerProps
663
+ })
677
664
  }, "footer") : null]
678
665
  })
679
666
  })
@@ -693,17 +680,23 @@ function UrbaniaRecommendation(_ref) {
693
680
  width: width,
694
681
  height: height,
695
682
  className: styles.backgroundTextContainer,
696
- children: (finalBackgroundText || []).map(function (line, i) {
697
- return /*#__PURE__*/jsx("div", {
698
- className: classNames([styles.backgroundText], _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.hidden, !current && isView && !isPreview), styles.didAnimate, didAnimate), styles.animateFromBottom, backgroundAnimationStarted && i % 2 !== 0), styles.animateFromTop, backgroundAnimationStarted && i % 2 === 0)),
699
- style: _objectSpread({
700
- animationDelay: "".concat(i * 100, "ms")
701
- }, getStyleFromText(_objectSpread(_objectSpread({}, backgroundTextStyle), {}, {
683
+ children: (finalBackgroundText || []).map((line_0, i) => /*#__PURE__*/jsx("div", {
684
+ className: classNames([styles.backgroundText], {
685
+ [styles.hidden]: !current && isView && !isPreview,
686
+ [styles.didAnimate]: didAnimate,
687
+ // @TODO: optimise —> use animation-fill-mode?
688
+ [styles.animateFromBottom]: backgroundAnimationStarted && i % 2 !== 0,
689
+ [styles.animateFromTop]: backgroundAnimationStarted && i % 2 === 0
690
+ }),
691
+ style: {
692
+ animationDelay: `${i * 100}ms`,
693
+ ...getStyleFromText({
694
+ ...backgroundTextStyle,
702
695
  fontStyle: backgroundFontStyle
703
- }))),
704
- children: line
705
- }, "reco-background-text-".concat(i + 1));
706
- })
696
+ })
697
+ },
698
+ children: line_0
699
+ }, `reco-background-text-${i + 1}`))
707
700
  }) : null]
708
701
  }) : null]
709
702
  });
@@ -716,19 +709,13 @@ var definition = [{
716
709
  group: {
717
710
  label: defineMessage({
718
711
  id: "oPjl8f",
719
- defaultMessage: [{
720
- "type": 0,
721
- "value": "Urbania"
722
- }]
712
+ defaultMessage: "Urbania"
723
713
  }),
724
714
  order: 10
725
715
  },
726
716
  title: defineMessage({
727
717
  id: "sUP5BO",
728
- defaultMessage: [{
729
- "type": 0,
730
- "value": "Urbania recommendation"
731
- }]
718
+ defaultMessage: "Urbania recommendation"
732
719
  }),
733
720
  component: UrbaniaRecommendation,
734
721
  layouts: ['top', 'bottom'],
@@ -737,20 +724,14 @@ var definition = [{
737
724
  type: 'screen-layout',
738
725
  label: defineMessage({
739
726
  id: "4iBXj2",
740
- defaultMessage: [{
741
- "type": 0,
742
- "value": "Layout"
743
- }]
727
+ defaultMessage: "Layout"
744
728
  })
745
729
  }, {
746
730
  name: 'sponsor',
747
731
  type: 'text-element',
748
732
  label: defineMessage({
749
733
  id: "WY14Zu",
750
- defaultMessage: [{
751
- "type": 0,
752
- "value": "Sponsor"
753
- }]
734
+ defaultMessage: "Sponsor"
754
735
  })
755
736
  }, {
756
737
  name: 'visual',
@@ -758,20 +739,14 @@ var definition = [{
758
739
  isList: true,
759
740
  label: defineMessage({
760
741
  id: "HwqzVR",
761
- defaultMessage: [{
762
- "type": 0,
763
- "value": "Visual"
764
- }]
742
+ defaultMessage: "Visual"
765
743
  }),
766
744
  fields: [{
767
745
  name: 'image',
768
746
  type: 'visual',
769
747
  label: defineMessage({
770
748
  id: "xT/onn",
771
- defaultMessage: [{
772
- "type": 0,
773
- "value": "Image"
774
- }]
749
+ defaultMessage: "Image"
775
750
  })
776
751
  }]
777
752
  }, {
@@ -779,60 +754,42 @@ var definition = [{
779
754
  type: 'heading-element',
780
755
  label: defineMessage({
781
756
  id: "4grcMU",
782
- defaultMessage: [{
783
- "type": 0,
784
- "value": "Category"
785
- }]
757
+ defaultMessage: "Category"
786
758
  })
787
759
  }, {
788
760
  name: 'title',
789
761
  type: 'heading-element',
790
762
  label: defineMessage({
791
763
  id: "N25iDO",
792
- defaultMessage: [{
793
- "type": 0,
794
- "value": "Title"
795
- }]
764
+ defaultMessage: "Title"
796
765
  })
797
766
  }, {
798
767
  name: 'date',
799
768
  type: 'text-element',
800
769
  label: defineMessage({
801
770
  id: "yEG9zh",
802
- defaultMessage: [{
803
- "type": 0,
804
- "value": "Date"
805
- }]
771
+ defaultMessage: "Date"
806
772
  })
807
773
  }, {
808
774
  name: 'location',
809
775
  type: 'text-element',
810
776
  label: defineMessage({
811
777
  id: "zLxBdl",
812
- defaultMessage: [{
813
- "type": 0,
814
- "value": "Location"
815
- }]
778
+ defaultMessage: "Location"
816
779
  })
817
780
  }, {
818
781
  name: 'description',
819
782
  type: 'text-element',
820
783
  label: defineMessage({
821
784
  id: "Y7bs1v",
822
- defaultMessage: [{
823
- "type": 0,
824
- "value": "Description"
825
- }]
785
+ defaultMessage: "Description"
826
786
  })
827
787
  }, {
828
788
  name: 'background',
829
789
  type: 'background-recommendation',
830
790
  label: defineMessage({
831
791
  id: "+MPZRu",
832
- defaultMessage: [{
833
- "type": 0,
834
- "value": "Background"
835
- }]
792
+ defaultMessage: "Background"
836
793
  })
837
794
  }, {
838
795
  id: 'recommendation',
@@ -840,30 +797,21 @@ var definition = [{
840
797
  isList: true,
841
798
  label: defineMessage({
842
799
  id: "hPXJzA",
843
- defaultMessage: [{
844
- "type": 0,
845
- "value": "Box params"
846
- }]
800
+ defaultMessage: "Box params"
847
801
  }),
848
802
  fields: [{
849
803
  name: 'cardBoxStyle',
850
804
  type: 'box-style-form',
851
805
  label: defineMessage({
852
806
  id: "1yNxAl",
853
- defaultMessage: [{
854
- "type": 0,
855
- "value": "Card box style"
856
- }]
807
+ defaultMessage: "Card box style"
857
808
  })
858
809
  }, {
859
810
  name: 'lineColor',
860
811
  type: 'color',
861
812
  label: defineMessage({
862
813
  id: "Jti6I6",
863
- defaultMessage: [{
864
- "type": 0,
865
- "value": "Lines color"
866
- }]
814
+ defaultMessage: "Lines color"
867
815
  })
868
816
  }, {
869
817
  name: 'withoutZoom',
@@ -871,10 +819,7 @@ var definition = [{
871
819
  defaultValue: false,
872
820
  label: defineMessage({
873
821
  id: "ehuj8A",
874
- defaultMessage: [{
875
- "type": 0,
876
- "value": "Without image zoom"
877
- }]
822
+ defaultMessage: "Without image zoom"
878
823
  })
879
824
  }]
880
825
  }, {
@@ -882,10 +827,7 @@ var definition = [{
882
827
  type: 'header',
883
828
  label: defineMessage({
884
829
  id: "rhuDxI",
885
- defaultMessage: [{
886
- "type": 0,
887
- "value": "Header"
888
- }]
830
+ defaultMessage: "Header"
889
831
  }),
890
832
  theme: {
891
833
  badge: {
@@ -900,10 +842,7 @@ var definition = [{
900
842
  type: 'footer',
901
843
  label: defineMessage({
902
844
  id: "g4nybp",
903
- defaultMessage: [{
904
- "type": 0,
905
- "value": "Footer"
906
- }]
845
+ defaultMessage: "Footer"
907
846
  }),
908
847
  theme: {
909
848
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-recommendation",
3
- "version": "0.4.71",
3
+ "version": "0.4.76",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -36,6 +36,7 @@
36
36
  "exports": {
37
37
  ".": {
38
38
  "types": "./es/index.d.ts",
39
+ "style": "./assets/css/styles.css",
39
40
  "import": "./es/index.js"
40
41
  },
41
42
  "./assets/css/styles": "./assets/css/styles.css",
@@ -52,27 +53,27 @@
52
53
  "build": "../../scripts/prepare-package.sh --types"
53
54
  },
54
55
  "devDependencies": {
55
- "react": "^18.3.0 || ^19.0.0",
56
- "react-dom": "^18.3.0 || ^19.0.0"
56
+ "react": "^19.0.0",
57
+ "react-dom": "^19.0.0"
57
58
  },
58
59
  "peerDependencies": {
59
- "react": "^18.3.0 || ^19.0.0",
60
- "react-dom": "^18.3.0 || ^19.0.0"
60
+ "react": "^19.0.0",
61
+ "react-dom": "^19.0.0"
61
62
  },
62
63
  "dependencies": {
63
64
  "@babel/runtime": "^7.28.6",
64
- "@micromag/core": "^0.4.71",
65
- "@micromag/element-background": "^0.4.71",
66
- "@micromag/element-button": "^0.4.71",
67
- "@micromag/element-container": "^0.4.71",
68
- "@micromag/element-footer": "^0.4.71",
69
- "@micromag/element-header": "^0.4.71",
70
- "@micromag/element-heading": "^0.4.71",
71
- "@micromag/element-layout": "^0.4.71",
72
- "@micromag/element-scroll": "^0.4.71",
73
- "@micromag/element-text": "^0.4.71",
74
- "@micromag/element-visual": "^0.4.71",
75
- "@micromag/transforms": "^0.4.71",
65
+ "@micromag/core": "^0.4.74",
66
+ "@micromag/element-background": "^0.4.76",
67
+ "@micromag/element-button": "^0.4.76",
68
+ "@micromag/element-container": "^0.4.74",
69
+ "@micromag/element-footer": "^0.4.76",
70
+ "@micromag/element-header": "^0.4.74",
71
+ "@micromag/element-heading": "^0.4.74",
72
+ "@micromag/element-layout": "^0.4.74",
73
+ "@micromag/element-scroll": "^0.4.74",
74
+ "@micromag/element-text": "^0.4.74",
75
+ "@micromag/element-visual": "^0.4.76",
76
+ "@micromag/transforms": "^0.4.74",
76
77
  "classnames": "^2.2.6",
77
78
  "lodash": "^4.17.23",
78
79
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -82,6 +83,6 @@
82
83
  "access": "public",
83
84
  "registry": "https://registry.npmjs.org/"
84
85
  },
85
- "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
86
+ "gitHead": "42a24f578994b23090271013f136b7f78956b632",
86
87
  "types": "es/index.d.ts"
87
88
  }