@ntbjs/react-components 1.2.0-rc.42 → 1.2.0-rc.43

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.
@@ -294,7 +294,7 @@ SummaryCard.defaultProps = {
294
294
  activeSummaryCard: false
295
295
  };
296
296
 
297
- var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27;
297
+ var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1;
298
298
  var AssetGalleryWrapper$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n"])), function (props) {
299
299
  return props.disabled && styled.css(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
300
300
  });
@@ -313,34 +313,32 @@ var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultThem
313
313
  }, function (props) {
314
314
  return props.extendedSelectMode && styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n "])));
315
315
  });
316
- var Figure$1 = styled__default['default'].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n align-items: center;\n position: relative;\n margin: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n\n .lazy-load-image-background {\n display: block !important;\n }\n\n video {\n ", "\n }\n\n img {\n display: block;\n height: 100%;\n width: 100%;\n ", "\n }\n"])), function (props) {
317
- return !props.hasHeightAndWidth && styled.css(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n width: 31.6% !important;\n "])));
318
- }, function (props) {
319
- return props.hasHeightAndWidth ? styled.css(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: cover;\n "]))) : styled.css(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: contain;\n "])));
316
+ var Figure$1 = styled__default['default'].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n align-items: center;\n position: relative;\n margin: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n\n .lazy-load-image-background {\n display: block !important;\n }\n\n img {\n display: block;\n height: 100%;\n width: 100%;\n ", "\n }\n"])), function (props) {
317
+ return props.hasHeightAndWidth ? styled.css(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: cover;\n "]))) : styled.css(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: contain;\n "])));
320
318
  });
321
- var FigureOverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n inset: 0;\n opacity: ", ";\n background-color: ", ";\n"])), function (props) {
319
+ var FigureOverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n inset: 0;\n opacity: ", ";\n background-color: ", ";\n"])), function (props) {
322
320
  return props.selected ? 0.6 : 0;
323
321
  }, function (props) {
324
322
  return props.selected ? '#ACCEF7' : 'transparent';
325
323
  });
326
- var Overlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
327
- var OverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n transition: opacity 220ms;\n\n ", "\n ", "\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
328
- return !props.selected ? styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n background: radial-gradient(\n ellipse at center,\n rgba(0, 0, 0, 0.3) 27%,\n rgba(0, 0, 0, 0.5) 60%,\n rgba(0, 0, 0, 0.7) 90%\n );\n "]))) : null;
324
+ var Overlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
325
+ var OverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n transition: opacity 220ms;\n\n ", "\n ", "\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
326
+ return !props.selected ? styled.css(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n background: radial-gradient(\n ellipse at center,\n rgba(0, 0, 0, 0.3) 27%,\n rgba(0, 0, 0, 0.5) 60%,\n rgba(0, 0, 0, 0.7) 90%\n );\n "]))) : null;
329
327
  }, function (props) {
330
- return (props.selected || props.softSelected) && styled.css(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
328
+ return (props.selected || props.softSelected) && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
331
329
  }, Overlay$1);
332
- var OverlayInfo$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 15px 12px 10px;\n color: ", ";\n"])), function (props) {
330
+ var OverlayInfo$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 15px 12px 10px;\n color: ", ";\n"])), function (props) {
333
331
  return props.theme.getColor('gray-100');
334
332
  });
335
- var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 3px solid;\n ", ";\n"])), function (props) {
333
+ var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 3px solid;\n ", ";\n"])), function (props) {
336
334
  if (props.softSelected) return null;
337
335
  return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'), polished.rgba(props.theme.getColor('emerald-500'), 0.7));
338
336
  });
339
- var OverlayHasError = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17$1 || (_templateObject17$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 3px solid;\n ", "\n"])), function (props) {
337
+ var OverlayHasError = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 3px solid;\n ", "\n"])), function (props) {
340
338
  if (props.softSelected) return null;
341
339
  return props.theme.themeProp('border-color', props.theme.getColor('red-600'), polished.rgba(props.theme.getColor('red-500'), 0.7));
342
340
  });
343
- var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18$1 || (_templateObject18$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border-style: solid;\n border-width: 3px;\n\n ", ";\n"])), function (props) {
341
+ var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17$1 || (_templateObject17$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border-style: solid;\n border-width: 3px;\n\n ", ";\n"])), function (props) {
344
342
  if (props.softSelected) {
345
343
  return props.theme.themeProp('border-color', polished.rgba(props.theme.getColor('gray-100'), 0.5), polished.rgba(props.theme.getColor('gray-700'), 0.5));
346
344
  }
@@ -351,31 +349,31 @@ var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyD
351
349
 
352
350
  return props.theme.themeProp('border-color', 'transparent', 'transparent');
353
351
  });
354
- var OverlayInfoTop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n padding: 8px;\n display: flex;\n"])));
355
- var OverlayInfoTopActions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n padding: 4px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n transition: opacity 220ms;\n z-index: 99999;\n ", "\n\n opacity: ", ";\n"])), function (props) {
352
+ var OverlayInfoTop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18$1 || (_templateObject18$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n padding: 8px;\n display: flex;\n"])));
353
+ var OverlayInfoTopActions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n padding: 4px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n transition: opacity 220ms;\n z-index: 99999;\n ", "\n\n opacity: ", ";\n"])), function (props) {
356
354
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
357
355
  }, function (props) {
358
356
  return props.isOverlayHovered ? 1 : 0;
359
357
  });
360
- var OverlayInfoTopVersions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21$1 || (_templateObject21$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n display: ", ";\n\n ", ":hover & {\n opacity: 0;\n }\n"])), function (props) {
358
+ var OverlayInfoTopVersions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n display: ", ";\n\n ", ":hover & {\n opacity: 0;\n }\n"])), function (props) {
361
359
  return props !== null && props !== void 0 && props.collapseExtraInfo ? 'none' : 'block';
362
360
  }, Overlay$1);
363
- var OverlayInfoTopWarning$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22$1 || (_templateObject22$1 = defaultTheme._taggedTemplateLiteral(["\n margin-left: auto;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n box-sizing: border-box;\n padding: ", ";\n background-color: ", ";\n opacity: 1;\n\n svg {\n width: 100%;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 0;\n }\n"])), function (props) {
361
+ var OverlayInfoTopWarning$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21$1 || (_templateObject21$1 = defaultTheme._taggedTemplateLiteral(["\n margin-left: auto;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n box-sizing: border-box;\n padding: ", ";\n background-color: ", ";\n opacity: 1;\n\n svg {\n width: 100%;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 0;\n }\n"])), function (props) {
364
362
  return props.type === 'error' ? 0 : '3px 4px';
365
363
  }, function (props) {
366
364
  return props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100');
367
365
  }, function (props) {
368
366
  return props.type === 'error' ? props.theme.getColor('gray-100') : props.theme.getColor('gray-700');
369
367
  }, Overlay$1);
370
- var OverlayInfoBottom$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23$1 || (_templateObject23$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 8px;\n display: flex;\n"])));
371
- var OverlayInfoBottomSelectButton$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24$1 || (_templateObject24$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n height: 24px;\n\n > svg {\n width: 24px;\n height: 24px;\n transition: opacity 120ms;\n opacity: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
368
+ var OverlayInfoBottom$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22$1 || (_templateObject22$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 8px;\n display: flex;\n"])));
369
+ var OverlayInfoBottomSelectButton$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23$1 || (_templateObject23$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n height: 24px;\n\n > svg {\n width: 24px;\n height: 24px;\n transition: opacity 120ms;\n opacity: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
372
370
  return props.selected ? 1 : 0;
373
371
  }, function (props) {
374
372
  return props.selected ? 1 : 0.5;
375
373
  }, Overlay$1);
376
- var OverlayInfoBottomMediaIcon$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25$1 || (_templateObject25$1 = defaultTheme._taggedTemplateLiteral(["\n margin-left: auto;\n opacity: 1;\n\n ", ":hover & {\n opacity: 0;\n }\n"])), Overlay$1);
377
- var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26$1 || (_templateObject26$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
378
- var Fragment$1 = styled__default['default'].div(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n margin: 4px;\n"])));
374
+ var OverlayInfoBottomMediaIcon$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24$1 || (_templateObject24$1 = defaultTheme._taggedTemplateLiteral(["\n margin-left: auto;\n opacity: 1;\n\n ", ":hover & {\n opacity: 0;\n }\n"])), Overlay$1);
375
+ var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25$1 || (_templateObject25$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
376
+ var Fragment$1 = styled__default['default'].div(_templateObject26$1 || (_templateObject26$1 = defaultTheme._taggedTemplateLiteral(["\n margin: 4px;\n"])));
379
377
 
380
378
  var ComputedRootComponent$1 = function ComputedRootComponent(_ref) {
381
379
  var component = _ref.component,
@@ -643,7 +641,10 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
643
641
  }, React__default['default'].createElement("video", {
644
642
  ref: videoPlayerRef,
645
643
  loop: true,
646
- muted: true
644
+ muted: true,
645
+ style: {
646
+ height: maxHeight
647
+ }
647
648
  }, React__default['default'].createElement("source", {
648
649
  src: asset.previewUrl,
649
650
  type: "video/mp4"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.2.0-rc.42",
3
+ "version": "1.2.0-rc.43",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-57bd6815.js');
3
+ var AssetGallery = require('../../AssetGallery-9427c4a0.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
package/widgets/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetGallery = require('../AssetGallery-57bd6815.js');
5
+ var AssetGallery = require('../AssetGallery-9427c4a0.js');
6
6
  var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-c28715f7.js');
8
8
  var Instructions = require('../Instructions-b1311846.js');